logos

ChainSafe · Jan 27, 2025 · d9b8564 · d9b8564
1 parent 6ccb836
commit d9b8564
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 22 deletions.
diff --git a/packages/ui/.papi/metadata/rococo.scale b/packages/ui/.papi/metadata/rococo.scale
diff --git a/packages/ui/.papi/metadata/rococoAssetHub.scale b/packages/ui/.papi/metadata/rococoAssetHub.scale
diff --git a/packages/ui/.papi/metadata/rococoPpl.scale b/packages/ui/.papi/metadata/rococoPpl.scale
diff --git a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
@@ -64,7 +64,7 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
 
     const nativeAssetEntry = {
       id: 0,
-      logo: selectedNetworkInfo?.logo,
+      logo: selectedNetworkInfo?.nativeAssetLogo || selectedNetworkInfo?.networkLogo,
       symbol: chainInfo.tokenSymbol,
       decimals: chainInfo.tokenDecimals
     } as Option
@@ -135,7 +135,7 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
   }, [])
 
   useEffect(() => {
-    if (!selectedAsset) return
+    if (!selectedAsset || !amountString) return
 
     const decimals = selectedAsset.decimals
 

diff --git a/packages/ui/src/components/library/Balance.tsx b/packages/ui/src/components/library/Balance.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles'
 import { useGetBalance } from '../../hooks/useGetBalance'
-import { chainsPolkadotCircleSVG } from '../../logos/polkadot-circleSVG'
+import { useNetwork } from '../../contexts/NetworkContext'
 
 interface BalanceProps {
   address: string
@@ -9,12 +9,13 @@ interface BalanceProps {
 
 const Balance = ({ address, withIcon = false }: BalanceProps) => {
   const { balanceFormatted } = useGetBalance({ address })
+  const { selectedNetworkInfo } = useNetwork()
 
   return (
     <BalanceStyled>
       {withIcon && (
         <ImgStyled
-          src={chainsPolkadotCircleSVG}
+          src={selectedNetworkInfo?.nativeAssetLogo || selectedNetworkInfo?.networkLogo}
           alt="balance"
         />
       )}

diff --git a/packages/ui/src/components/select/NetworkSelection.tsx b/packages/ui/src/components/select/NetworkSelection.tsx
@@ -42,7 +42,7 @@ const NetworkSelection = () => {
         allowedNetworks.includes(networkName)
       )
 
-      return displayedNetworks.map(([networkName, { logo }]) => (
+      return displayedNetworks.map(([networkName, { networkLogo }]) => (
         <MenuItemStyled
           key={networkName}
           value={networkName}
@@ -51,7 +51,7 @@ const NetworkSelection = () => {
         >
           <ImgStyled
             alt={`network-logo-${networkName}`}
-            src={logo}
+            src={networkLogo}
           />
           <ItemNameStyled>{networkName}</ItemNameStyled>
         </MenuItemStyled>

diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -40,7 +40,8 @@ export interface NetworkInfo {
   explorerNetworkName?: string
   rpcUrls: string[]
   httpGraphqlUrl: string
-  logo: string
+  networkLogo: string
+  nativeAssetLogo?: string
   pplChainRpcUrls?: string[]
   descriptor: keyof typeof DESCRIPTORS
   pplChainDescriptor?: PplDescriptorKeys
@@ -92,7 +93,7 @@ export const networkList: Record<string, NetworkInfo> = {
       // 'wss://polkadot.rpc.subquery.network/public/ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: chainsPolkadotCircleSVG,
+    networkLogo: chainsPolkadotCircleSVG,
     descriptor: 'dot',
     pplChainDescriptor: 'dotPpl'
   },
@@ -113,7 +114,7 @@ export const networkList: Record<string, NetworkInfo> = {
       // 'wss://kusama.rpc.subquery.network/public/ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: chainsKusamaSVG,
+    networkLogo: chainsKusamaSVG,
     descriptor: 'ksm',
     pplChainDescriptor: 'ksmPpl'
   },
@@ -133,7 +134,8 @@ export const networkList: Record<string, NetworkInfo> = {
     ],
     pplChainRpcUrls: polkadotPplChains,
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesAssetHubSVG,
+    nativeAssetLogo: chainsPolkadotCircleSVG,
+    networkLogo: nodesAssetHubSVG,
     descriptor: 'dotAssetHub',
     pplChainDescriptor: 'dotPpl'
   },
@@ -152,7 +154,8 @@ export const networkList: Record<string, NetworkInfo> = {
     ],
     pplChainRpcUrls: kusamaPplChains,
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesAssetHubSVG,
+    nativeAssetLogo: chainsKusamaSVG,
+    networkLogo: nodesAssetHubSVG,
     descriptor: 'ksmAssetHub',
     pplChainDescriptor: 'ksmPpl'
   },
@@ -166,7 +169,7 @@ export const networkList: Record<string, NetworkInfo> = {
     ],
     pplChainRpcUrls: polkadotPplChains,
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesCoretimeSVG,
+    networkLogo: nodesCoretimeSVG,
     descriptor: 'coretimeDot',
     pplChainDescriptor: 'dotPpl'
   },
@@ -195,7 +198,7 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://acala-polkadot.api.onfinality.io/public-ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: chainsAcalaSVG,
+    networkLogo: chainsAcalaSVG,
     descriptor: 'acala'
   },
   // astar: {
@@ -223,7 +226,7 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://bifrost.public.curie.radiumblock.co/ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesBifrostSVG,
+    networkLogo: nodesBifrostSVG,
     descriptor: 'bifrostDot'
   },
   hydration: {
@@ -237,7 +240,7 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://hydration.dotters.network'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: hydrationSVG,
+    networkLogo: hydrationSVG,
     descriptor: 'hydration'
   },
   // interlay: {
@@ -258,7 +261,7 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://khala.public.curie.radiumblock.co/ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesKhalaSVG,
+    networkLogo: nodesKhalaSVG,
     descriptor: 'khala'
   },
   // moonbeam: {
@@ -286,7 +289,7 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://phala.public.curie.radiumblock.co/ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: phalaSVG,
+    networkLogo: phalaSVG,
     descriptor: 'phala'
   },
   // 'rhala testnet': {
@@ -317,7 +320,7 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://westend.public.curie.radiumblock.co/ws'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesWestendColourSVG,
+    networkLogo: nodesWestendColourSVG,
     descriptor: 'westend',
     pplChainDescriptor: 'wesPpl'
   },
@@ -332,7 +335,8 @@ export const networkList: Record<string, NetworkInfo> = {
     ],
     pplChainRpcUrls: westendPplChains,
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: nodesWestendColourSVG,
+    nativeAssetLogo: nodesWestendColourSVG,
+    networkLogo: nodesAssetHubSVG,
     descriptor: 'wesAssetHub',
     pplChainDescriptor: 'wesPpl'
   },
@@ -348,7 +352,7 @@ export const networkList: Record<string, NetworkInfo> = {
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
     pplChainRpcUrls: ['wss://people-paseo.rpc.amforc.com', 'wss://people-paseo.dotters.network'],
-    logo: paseoSVG,
+    networkLogo: paseoSVG,
     descriptor: 'paseo',
     pplChainDescriptor: 'pasPpl'
   },
@@ -396,15 +400,15 @@ export const networkList: Record<string, NetworkInfo> = {
       'wss://polimec.ibp.network'
     ],
     httpGraphqlUrl: HTTP_GRAPHQL_URL,
-    logo: polimecSVG,
+    networkLogo: polimecSVG,
     descriptor: 'polimec'
   },
   local: {
     chainId: import.meta.env.VITE_CHAIN_ID,
     explorerNetworkName: import.meta.env.VITE_NETWORK_NAME as 'kusama',
     rpcUrls: [import.meta.env.VITE_WS_PROVIDER],
     httpGraphqlUrl: import.meta.env.VITE_GRAPHQL_HTTP_PROVIDER,
-    logo: localSVG,
+    networkLogo: localSVG,
     descriptor: 'dot',
     pplChainDescriptor: 'dotPpl'
   }