refact: assets package

FuelLabs · Oct 6, 2023 · 7721f01 · 7721f01
1 parent 50fd3ab
commit 7721f01
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 79 deletions.
diff --git a/packages/app/public/eth-logo.svg b/packages/app/public/eth-logo.svg
diff --git a/packages/app/src/systems/Assets/components/AssetCard/AssetCard.stories.tsx b/packages/app/src/systems/Assets/components/AssetCard/AssetCard.stories.tsx
@@ -1,6 +1,6 @@
 import { cssObj } from '@fuel-ui/css';
 import { CardList } from '@fuel-ui/react';
-import { ethLogoSrc } from '~/systems/Chains';
+import assetList from '@fuels/assets';
 
 import { AssetCard } from './AssetCard';
 
@@ -15,15 +15,15 @@ export default {
 export const Usage = () => {
   return (
     <CardList css={styles.storybook}>
-      <AssetCard imageSrc={ethLogoSrc} name="ETH" />
+      <AssetCard asset={assetList[0]} />
     </CardList>
   );
 };
 
 export const AvatarUsage = () => {
   return (
     <CardList css={styles.storybook}>
-      <AssetCard name="ETH" hash="0x15db4a4d9e35fa8c0b5f92b13924d1610c5d618e" />
+      <AssetCard asset={assetList[0]} />
     </CardList>
   );
 };
@@ -32,8 +32,7 @@ export const OnPress = () => {
   return (
     <CardList css={styles.storybook}>
       <AssetCard
-        imageSrc={ethLogoSrc}
-        name="ETH"
+        asset={assetList[0]}
         onPress={() => {
           // eslint-disable-next-line no-console
           console.log('press');
@@ -47,8 +46,7 @@ export const OnAdd = () => {
   return (
     <CardList css={styles.storybook}>
       <AssetCard
-        imageSrc={ethLogoSrc}
-        name="ETH"
+        asset={assetList[0]}
         onAdd={() => {
           // eslint-disable-next-line no-console
           console.log('add');
@@ -62,8 +60,7 @@ export const OnRemove = () => {
   return (
     <CardList css={styles.storybook}>
       <AssetCard
-        imageSrc={ethLogoSrc}
-        name="ETH"
+        asset={assetList[0]}
         onRemove={() => {
           // eslint-disable-next-line no-console
           console.log('remove');
@@ -77,8 +74,7 @@ export const OnFaucet = () => {
   return (
     <CardList css={styles.storybook}>
       <AssetCard
-        imageSrc={ethLogoSrc}
-        name="ETH"
+        asset={assetList[0]}
         onFaucet={() => {
           // eslint-disable-next-line no-console
           console.log('faucet');
@@ -92,8 +88,7 @@ export const OnRemoveDisabled = () => {
   return (
     <CardList css={styles.storybook}>
       <AssetCard
-        imageSrc={ethLogoSrc}
-        name="ETH"
+        asset={assetList[0]}
         onRemove={() => {
           // eslint-disable-next-line no-console
           console.log('remove');

diff --git a/packages/app/src/systems/Assets/components/AssetLogo/AssetLogo.stories.tsx b/packages/app/src/systems/Assets/components/AssetLogo/AssetLogo.stories.tsx
@@ -1,6 +1,6 @@
 import { cssObj } from '@fuel-ui/css';
 import { CardList } from '@fuel-ui/react';
-import { ETH_ASSET } from '~/systems/Chains';
+import assetList from '@fuels/assets';
 
 import { AssetLogo } from './AssetLogo';
 
@@ -15,23 +15,28 @@ export default {
 export const ETH = () => {
   return (
     <CardList css={styles.storybook}>
-      <AssetLogo asset={ETH_ASSET} />
+      <AssetLogo asset={assetList[0]} />
     </CardList>
   );
 };
 
 export const Big = () => {
   return (
     <CardList css={styles.storybook}>
-      <AssetLogo asset={ETH_ASSET} size={40} />
+      <AssetLogo asset={assetList[0]} size={40} />
     </CardList>
   );
 };
 
+const generatedAsset = {
+  ...assetList[0],
+  icon: null,
+  networks: [{ ...assetList[0].networks[0], address: '0x123123123123' }],
+};
 export const Generated = () => {
   return (
     <CardList css={styles.storybook}>
-      <AssetLogo asset={{ address: '0x123' }} />
+      <AssetLogo asset={generatedAsset} />
     </CardList>
   );
 };

diff --git a/packages/app/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.stories.tsx b/packages/app/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.stories.tsx
@@ -1,6 +1,6 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Image, FuelLogo, Text } from '@fuel-ui/react';
-import { ethLogoSrc } from '~/systems/Chains';
+import assetList from '@fuels/assets';
 
 import { BridgeTxItem } from './BridgeTxItem';
 
@@ -17,15 +17,17 @@ export const Usage = () => {
     <Box.Flex align="center" justify="center" css={styles.storybook}>
       <BridgeTxItem
         fromLogo={
-          <Image width={18} height={18} src={ethLogoSrc} alt={'ETH logo'} />
+          <Image
+            width={18}
+            height={18}
+            src={assetList[0].icon}
+            alt={'ETH logo'}
+          />
         }
         toLogo={<FuelLogo size={17} />}
         date={new Date()}
-        asset={{
-          amount: '0.050',
-          symbol: 'ETH',
-          image: ethLogoSrc,
-        }}
+        amount="0.050"
+        asset={assetList[0]}
         onClick={() => {}}
         status={
           <Text fontSize="xs" color="intentsBase11">

diff --git a/packages/app/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.stories.tsx b/packages/app/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.stories.tsx
@@ -1,9 +1,8 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box } from '@fuel-ui/react';
+import assetList from '@fuels/assets';
 import { bn } from 'fuels';
 
-import ethImage from '../../../../../public/eth-logo.svg';
-
 import { BridgeTxOverview } from './BridgeTxOverview';
 
 export default {
@@ -21,11 +20,8 @@ export const Usage = () => {
         transactionId={bn(1234567876543456)}
         date={new Date()}
         isDeposit={true}
-        asset={{
-          image: ethImage,
-          symbol: 'ETH',
-          amount: '1.500',
-        }}
+        amount="1.500"
+        asset={assetList[0]}
       />
     </Box.Flex>
   );
@@ -37,11 +33,8 @@ export const Withdrawal = () => {
       <BridgeTxOverview
         transactionId={bn(1234567876543456)}
         date={new Date()}
-        asset={{
-          image: ethImage,
-          symbol: 'ETH',
-          amount: '1.500',
-        }}
+        asset={assetList[0]}
+        amount="1.500"
       />
     </Box.Flex>
   );

diff --git a/packages/app/src/systems/Chains/eth/constants.ts b/packages/app/src/systems/Chains/eth/constants.ts
diff --git a/packages/app/src/systems/Chains/eth/containers/EthAccountConnection.tsx b/packages/app/src/systems/Chains/eth/containers/EthAccountConnection.tsx
@@ -1,16 +1,17 @@
 import { AccountConnectionInput } from '~/systems/Accounts';
+import { useAsset } from '~/systems/Assets';
 
 import { ETH_CHAIN } from '../../config';
 import { useEthAccountConnection } from '../hooks';
-import { ethLogoSrc } from '../utils';
 
 export const EthAccountConnection = ({ label }: { label?: string }) => {
+  const { asset: ethAsset } = useAsset();
   const { address, ens, handlers, isConnecting } = useEthAccountConnection();
 
   return (
     <AccountConnectionInput
       networkName={ETH_CHAIN.name}
-      networkImage={ethLogoSrc}
+      networkImage={ethAsset?.icon}
       label={label}
       onConnect={handlers.connect}
       onDisconnect={handlers.disconnect}

diff --git a/packages/app/src/systems/Chains/eth/containers/TxListItemEthToFuel.tsx b/packages/app/src/systems/Chains/eth/containers/TxListItemEthToFuel.tsx
@@ -1,15 +1,16 @@
 import { Image, FuelLogo, Text, Box, Spinner } from '@fuel-ui/react';
+import { useAsset } from '~/systems/Assets';
 import { BridgeTxItem } from '~/systems/Bridge';
 
 import { ActionRequiredBadge } from '../../fuel';
 import { useTxEthToFuel } from '../hooks';
-import { ethLogoSrc } from '../utils';
 
 type TxListItemEthToFuelProps = {
   txHash: string;
 };
 
 export const TxListItemEthToFuel = ({ txHash }: TxListItemEthToFuelProps) => {
+  const { asset: ethAsset } = useAsset();
   const { steps, date, handlers, asset, status, amount } = useTxEthToFuel({
     id: txHash,
   });
@@ -40,7 +41,12 @@ export const TxListItemEthToFuel = ({ txHash }: TxListItemEthToFuelProps) => {
   return (
     <BridgeTxItem
       fromLogo={
-        <Image width={18} height={18} src={ethLogoSrc} alt={asset?.symbol} />
+        <Image
+          width={18}
+          height={18}
+          src={ethAsset?.icon || undefined}
+          alt={ethAsset?.symbol}
+        />
       }
       toLogo={<FuelLogo size={17} />}
       date={date}

diff --git a/packages/app/src/systems/Chains/eth/utils/chain.ts b/packages/app/src/systems/Chains/eth/utils/chain.ts
@@ -1,16 +1,6 @@
 import type { SupportedChain } from '../../types';
 import { ETH_CHAINS } from '../chains';
 
-import { ethLogoSrc } from './logo';
-
-export const ETH_UNITS = 18;
-export const ETH_SYMBOL = 'ETH';
-export const ETH_ASSET = {
-  image: ethLogoSrc,
-  symbol: ETH_SYMBOL,
-  decimals: ETH_UNITS,
-};
-
 export const isEthChain = (chain: SupportedChain | undefined | null) => {
   return !!Object.keys(ETH_CHAINS).find(
     (key) => ETH_CHAINS[key].network === chain?.network

diff --git a/packages/app/src/systems/Chains/eth/utils/index.tsx b/packages/app/src/systems/Chains/eth/utils/index.tsx
@@ -1,5 +1,4 @@
 export * from './block';
 export * from './chain';
-export * from './logo';
 export * from './address';
 export * from './txCache';
diff --git a/packages/app/src/systems/Chains/eth/utils/logo.ts b/packages/app/src/systems/Chains/eth/utils/logo.ts
diff --git a/packages/app/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx b/packages/app/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx
@@ -1,7 +1,7 @@
 import { Image, FuelLogo, Text, Box, Spinner } from '@fuel-ui/react';
+import { useAsset } from '~/systems/Assets';
 import { BridgeTxItem } from '~/systems/Bridge';
 
-import { ethLogoSrc } from '../../eth';
 import { ActionRequiredBadge } from '../components';
 import { useTxFuelToEth } from '../hooks';
 
@@ -10,6 +10,7 @@ type TxListItemFuelToEthProps = {
 };
 
 export const TxListItemFuelToEth = ({ txHash }: TxListItemFuelToEthProps) => {
+  const { asset: ethAsset } = useAsset();
   const { steps, handlers, asset, date, status, amount } = useTxFuelToEth({
     txId: txHash,
   });
@@ -44,7 +45,12 @@ export const TxListItemFuelToEth = ({ txHash }: TxListItemFuelToEthProps) => {
     <BridgeTxItem
       fromLogo={<FuelLogo size={17} />}
       toLogo={
-        <Image width={18} height={18} src={ethLogoSrc} alt={asset?.symbol} />
+        <Image
+          width={18}
+          height={18}
+          src={ethAsset?.icon || undefined}
+          alt={asset?.symbol}
+        />
       }
       date={date}
       asset={asset}