polkadot-cloud · rossbulat · Nov 3, 2024 · Nov 2, 2024 · Nov 2, 2024 · Nov 2, 2024
diff --git a/package.json b/package.json
@@ -28,11 +28,11 @@
     "@polkawatch/ddp-client": "^2.0.20",
     "@substrate/connect": "^1.1.0",
     "@w3ux/extension-assets": "^0.4.0",
-    "@w3ux/factories": "1.0.0-beta.0",
-    "@w3ux/hooks": "1.2.1-beta.0",
+    "@w3ux/factories": "^1.0.0",
+    "@w3ux/hooks": "^1.2.1",
     "@w3ux/react-connect-kit": "^1.8.0",
     "@w3ux/react-odometer": "^1.1.0",
-    "@w3ux/react-polkicon": "^1.3.0",
+    "@w3ux/react-polkicon": "2.0.1-alpha.0",
     "@w3ux/utils": "^1.1.0",
     "@w3ux/validator-assets": "^0.2.0",
     "@zondax/ledger-substrate": "^1.0.0",

diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx
@@ -9,7 +9,7 @@ import {
 import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
 import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert';
 import { Polkicon } from '@w3ux/react-polkicon';
-import { determinePoolDisplay, remToUnit } from '@w3ux/utils';
+import { determinePoolDisplay } from '@w3ux/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
 import { useTranslation } from 'react-i18next';
@@ -66,8 +66,8 @@ export const Header = ({
           <div>
             <Polkicon
               address={bondedPool?.addresses.stash || ''}
-              size={remToUnit('4rem')}
-              outerColor="transparent"
+              background="transparent"
+              fontSize="4rem"
             />
           </div>
           <div>

diff --git a/src/canvas/JoinPool/Overview/AddressSection.tsx b/src/canvas/JoinPool/Overview/AddressSection.tsx
@@ -6,7 +6,7 @@ import { ButtonHelp } from 'kits/Buttons/ButtonHelp';
 import { HeadingWrapper } from '../Wrappers';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { CopyAddress } from 'library/ListItem/Labels/CopyAddress';
-import { ellipsisFn, remToUnit } from '@w3ux/utils';
+import { ellipsisFn } from '@w3ux/utils';
 import type { AddressSectionProps } from '../types';
 
 export const AddressSection = ({
@@ -28,13 +28,11 @@ export const AddressSection = ({
       </HeadingWrapper>
 
       <div>
-        <span>
-          <Polkicon
-            address={address}
-            size={remToUnit('2.25rem')}
-            outerColor="transparent"
-          />
-        </span>
+        <Polkicon
+          address={address}
+          background="transparent"
+          transform="grow-10"
+        />
         <h4>
           {ellipsisFn(address, 6)}
           <CopyAddress address={address} />

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts
@@ -267,6 +267,8 @@ export const AddressesWrapper = styled.div`
 
       > span {
         margin-right: 0.75rem;
+        font-size: 1rem;
+        padding: 0.5rem;
       }
 
       > h4 {

diff --git a/src/canvas/PoolMembers/Prompts/UnbondMember.tsx b/src/canvas/PoolMembers/Prompts/UnbondMember.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Polkicon } from '@w3ux/react-polkicon';
-import { ellipsisFn, remToUnit, rmCommas, unitToPlanck } from '@w3ux/utils';
+import { ellipsisFn, rmCommas, unitToPlanck } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
 import { getUnixTime } from 'date-fns';
 import { useEffect, useState } from 'react';
@@ -111,8 +111,8 @@ export const UnbondMember = ({
             ))}
           </ModalWarnings>
         ) : null}
-        <h3 className="modal-action-item">
-          <Polkicon address={who} size={remToUnit('2rem')} />
+        <h3 style={{ display: 'flex', alignItems: 'center' }}>
+          <Polkicon address={who} transform="grow-3" />
           &nbsp; {ellipsisFn(who, 7)}
         </h3>
 

diff --git a/src/canvas/PoolMembers/Prompts/WithdrawMember.tsx b/src/canvas/PoolMembers/Prompts/WithdrawMember.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Polkicon } from '@w3ux/react-polkicon';
-import { ellipsisFn, remToUnit, rmCommas } from '@w3ux/utils';
+import { ellipsisFn, rmCommas } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
 import type { RefObject } from 'react';
 import { useState } from 'react';
@@ -107,8 +107,8 @@ export const WithdrawMember = ({
           </ModalWarnings>
         ) : null}
 
-        <h3 className="modal-action-item">
-          <Polkicon address={who} size={remToUnit('2rem')} />
+        <h3 style={{ display: 'flex', alignItems: 'center' }}>
+          <Polkicon address={who} transform="grow-3" />
           &nbsp; {ellipsisFn(who, 7)}
         </h3>
 

diff --git a/src/library/Account/DefaultAccount.tsx b/src/library/Account/DefaultAccount.tsx
@@ -3,7 +3,7 @@
 
 import { faGlasses } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ellipsisFn, remToUnit } from '@w3ux/utils';
+import { ellipsisFn } from '@w3ux/utils';
 import { useTranslation } from 'react-i18next';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
@@ -40,9 +40,7 @@ const DefaultAccount = ({ value, label, readOnly }: AccountProps) => {
         <span className="title unassigned">{t('notStaking')}</span>
       ) : (
         <>
-          <span className="identicon">
-            <Polkicon address={value || ''} size={remToUnit('1.45rem')} />
-          </span>
+          <Polkicon address={value || ''} transform="grow-3" />
           <span className="title">{text}</span>
         </>
       )}

diff --git a/src/library/Account/PoolAccount.tsx b/src/library/Account/PoolAccount.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { u8aToString, u8aUnwrapBytes } from '@polkadot/util';
-import { ellipsisFn, remToUnit } from '@w3ux/utils';
+import { ellipsisFn } from '@w3ux/utils';
 import { useTranslation } from 'react-i18next';
 import { useBondedPools } from 'contexts/Pools/BondedPools';
 import { Polkicon } from '@w3ux/react-polkicon';
@@ -34,9 +34,7 @@ const PoolAccount = ({ label, pool, syncing }: PoolAccountProps) => {
   return (
     <Wrapper>
       {label !== undefined && <div className="account-label">{label}</div>}
-      <span className="identicon">
-        <Polkicon address={pool.addresses.stash} size={remToUnit('1.45rem')} />
-      </span>
+      <Polkicon address={pool.addresses.stash} transform="grow-3" />
       <span className={`title${syncing === true ? ` syncing` : ``}`}>
         {text}
       </span>

diff --git a/src/library/Account/Wrapper.ts b/src/library/Account/Wrapper.ts
@@ -20,7 +20,7 @@ export const Wrapper = styled.div`
   &:hover {
     transform: scale(1.025);
   }
-  .identicon {
+  .polkicon {
     margin: 0.15rem 0.25rem 0 0;
   }
   .account-label {

diff --git a/src/library/AccountInput/Wrapper.ts b/src/library/AccountInput/Wrapper.ts
@@ -46,13 +46,15 @@ export const AccountInputWrapper = styled.div`
       > div {
         &:first-child {
           padding-right: 0.5rem;
+
           .ph {
             background: var(--background-default);
             width: 22px;
             height: 22px;
             border-radius: 50%;
           }
         }
+
         &:last-child {
           display: flex;
           flex-flow: column wrap;

diff --git a/src/library/AccountInput/index.tsx b/src/library/AccountInput/index.tsx
@@ -182,7 +182,9 @@ export const AccountInput = ({
         <section>
           <div>
             {isValidAddress(value) ? (
-              <Polkicon address={value} size="2rem" />
+              <span style={{ padding: '0 0.5rem' }}>
+                <Polkicon address={value} transform="grow-10" />
+              </span>
             ) : (
               <div className="ph" />
             )}

diff --git a/src/library/Hardware/HardwareAddress/Wrapper.ts b/src/library/Hardware/HardwareAddress/Wrapper.ts
@@ -39,12 +39,14 @@ export const Wrapper = styled.div`
         flex-shrink: 1;
         flex-grow: 0;
         position: relative;
+        font-size: 2.75rem;
 
         .index-icon {
           background: var(--background-primary);
           border: 1px solid var(--border-primary-color);
           color: var(--text-color-secondary);
           font-family: InterSemiBold, sans-serif;
+          font-size: 1rem;
           border-radius: 50%;
           position: absolute;
           bottom: -0.25rem;

diff --git a/src/library/Import/Confirm.tsx b/src/library/Import/Confirm.tsx
@@ -31,7 +31,9 @@ export const Confirm = ({ address, index, addHandler }: ConfirmProps) => {
 
   return (
     <ConfirmWrapper>
-      <Polkicon address={address} size="3rem" />
+      <h2>
+        <Polkicon address={address} transform="grow-10" />
+      </h2>
       <h3>{t('importAccount')}</h3>
       <h5>{address}</h5>
       <div className="footer">

diff --git a/src/library/Import/Remove.tsx b/src/library/Import/Remove.tsx
@@ -28,7 +28,9 @@ export const Remove = ({ address, getHandler, removeHandler }: RemoveProps) => {
 
   return (
     <ConfirmWrapper>
-      <Polkicon address={address} size="3rem" />
+      <h2>
+        <Polkicon address={address} transform="grow-10" />
+      </h2>
       <h3>{t('removeAccount')}</h3>
       <h5>{address}</h5>
       <div className="footer">

diff --git a/src/library/ListItem/Labels/Identity.tsx b/src/library/ListItem/Labels/Identity.tsx
@@ -31,7 +31,9 @@ export const Identity = ({ address }: IdentityProps) => {
       animate={{ opacity: 1 }}
       transition={{ duration: 0.3 }}
     >
-      <Polkicon address={address} size="2rem" />
+      <span style={{ paddingRight: '0.25rem' }}>
+        <Polkicon address={address} fontSize="2rem" />
+      </span>
       <div className="inner">
         {validatorsFetched && display !== null ? (
           <h4>{display}</h4>

diff --git a/src/library/ListItem/Labels/PoolIdentity.tsx b/src/library/ListItem/Labels/PoolIdentity.tsx
@@ -20,7 +20,7 @@ export const PoolIdentity = ({
 
   return (
     <IdentityWrapper className="identity">
-      <Polkicon address={addresses.stash} size="2rem" />
+      <Polkicon address={addresses.stash} fontSize="2rem" />
       <div className="inner">
         {!metadataSynced ? (
           <h4>{ellipsisFn(addresses.stash)}</h4>

diff --git a/src/library/PayeeInput/index.tsx b/src/library/PayeeInput/index.tsx
@@ -104,10 +104,7 @@ export const PayeeInput = ({
           {showEmpty ? (
             <div className="emptyIcon" />
           ) : (
-            <Polkicon
-              address={accountDisplay || ''}
-              size={remToUnit('2.5rem')}
-            />
+            <Polkicon address={accountDisplay || ''} fontSize="2.5rem" />
           )}
           <div className="input" ref={showingRef}>
             <input

diff --git a/src/library/Stat/Wrapper.ts b/src/library/Stat/Wrapper.ts
@@ -68,7 +68,7 @@ export const Wrapper = styled.div<{ $isAddress?: boolean }>`
         line-height: 1.4rem;
       }
 
-      .identicon {
+      .icon {
         position: absolute;
         display: flex;
         left: 0;

diff --git a/src/library/Stat/index.tsx b/src/library/Stat/index.tsx
@@ -113,10 +113,10 @@ export const Stat = ({
             </>
           ) : null}
           {type === 'address' ? (
-            <div className="identicon">
+            <div className="icon">
               <Polkicon
                 address={(stat as StatAddress)?.address || ''}
-                size="2.4rem"
+                fontSize="2.4rem"
               />
             </div>
           ) : null}

diff --git a/src/modals/AccountPoolRoles/index.tsx b/src/modals/AccountPoolRoles/index.tsx
@@ -89,7 +89,7 @@ const Button = ({
       className="item"
     >
       <div className="icon">
-        <Polkicon address={stash} size={30} />
+        <Polkicon address={stash} transform="grow-10" />
       </div>
 
       <div className="details">

diff --git a/src/modals/Accounts/Account.tsx b/src/modals/Accounts/Account.tsx
@@ -86,11 +86,11 @@ export const AccountButton = ({
           >
             {delegator && (
               <div className="delegator">
-                <Polkicon address={delegator} size={23} />
+                <Polkicon address={delegator} />
               </div>
             )}
             <div className="identicon">
-              <Polkicon address={address ?? ''} size={23} />
+              <Polkicon address={address ?? ''} />
             </div>
             <span className="name">
               {delegator && (

diff --git a/src/modals/Accounts/Wrappers.ts b/src/modals/Accounts/Wrappers.ts
@@ -96,6 +96,7 @@ export const AccountWrapper = styled.div`
           }
           .delegator {
             width: 1.1rem;
+            font-size: 1.9rem;
             z-index: 0;
 
             > div {
@@ -106,6 +107,7 @@ export const AccountWrapper = styled.div`
           }
           .identicon {
             z-index: 1;
+            font-size: 1.9rem;
           }
 
           /* svg theming */

diff --git a/src/modals/ChangePoolRoles/RoleChange.tsx b/src/modals/ChangePoolRoles/RoleChange.tsx
@@ -3,7 +3,7 @@
 
 import { faAnglesRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ellipsisFn, remToUnit } from '@w3ux/utils';
+import { ellipsisFn } from '@w3ux/utils';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { RoleChangeWrapper } from './Wrapper';
 import type { RoleChangeProps } from './types';
@@ -17,7 +17,7 @@ export const RoleChange = ({
     <div className="label">{roleName}</div>
     <div className="role-change">
       <div className="input-wrap selected">
-        <Polkicon address={oldAddress ?? ''} size={remToUnit('2rem')} />
+        <Polkicon address={oldAddress ?? ''} fontSize="2rem" />
         <input
           className="input"
           disabled
@@ -28,7 +28,7 @@ export const RoleChange = ({
         <FontAwesomeIcon icon={faAnglesRight} />
       </span>
       <div className="input-wrap selected">
-        <Polkicon address={newAddress ?? ''} size={remToUnit('2rem')} />
+        <Polkicon address={newAddress ?? ''} fontSize="2rem" />
         <input
           className="input"
           disabled

diff --git a/src/modals/Connect/Proxies.tsx b/src/modals/Connect/Proxies.tsx
@@ -76,9 +76,7 @@ export const Proxies = ({ setInputOpen, inputOpen }: ListWithInputProps) => {
                     {delegators.map(({ delegator, proxyType }, j) => (
                       <ManualAccount key={`user_delegate_${i}_delegator_${j}`}>
                         <div>
-                          <span>
-                            <Polkicon address={delegate} size={26} />
-                          </span>
+                          <Polkicon address={delegate} fontSize="2.4rem" />
                           <div className="text">
                             <h4 className="title">
                               <span>

diff --git a/src/modals/Connect/ReadOnly.tsx b/src/modals/Connect/ReadOnly.tsx
@@ -95,9 +95,7 @@ export const ReadOnly = ({ setInputOpen, inputOpen }: ListWithInputProps) => {
               {externalAccounts.map((a, i) => (
                 <ManualAccount key={`user_external_account_${i}`}>
                   <div>
-                    <span>
-                      <Polkicon address={a.address} size={26} />
-                    </span>
+                    <Polkicon address={a.address} fontSize="1.9rem" />
                     <div className="text">
                       <h4>{a.address}</h4>
                     </div>

diff --git a/src/modals/ImportLedger/Addresses.tsx b/src/modals/ImportLedger/Addresses.tsx
@@ -77,7 +77,7 @@ export const Addresess = ({ addresses, onGetAddress }: AnyJson) => {
               address={address}
               index={index}
               initial={initialName}
-              Identicon={<Polkicon address={address} size={40} />}
+              Identicon={<Polkicon address={address} />}
               existsHandler={ledgerAccountExists}
               renameHandler={renameHandler}
               openRemoveHandler={openRemoveHandler}

diff --git a/src/modals/ImportVault/index.tsx b/src/modals/ImportVault/index.tsx
@@ -98,7 +98,7 @@ export const ImportVault = () => {
               address={address}
               index={index}
               initial={name}
-              Identicon={<Polkicon address={address} size={40} />}
+              Identicon={<Polkicon address={address} />}
               existsHandler={vaultAccountExists}
               renameHandler={renameHandler}
               openRemoveHandler={openRemoveHandler}

diff --git a/src/modals/ImportWalletConnect/index.tsx b/src/modals/ImportWalletConnect/index.tsx
@@ -90,7 +90,7 @@ export const ImportWalletConnect = () => {
               index={index}
               initial={name}
               allowAction={false}
-              Identicon={<Polkicon address={address} size={40} />}
+              Identicon={<Polkicon address={address} />}
               existsHandler={wcAccountExists}
               renameHandler={renameHandler}
               openRemoveHandler={() => {