feat: refact assets (#1492)

- Closes #1474 - Closes #1462 # Summary Refactors all assets related code of application, aiming to have stable formatting and always correct asset address + decimal config depending on current network chainId. The previous implementation was made to work always with same chainId, thus needed to upgrade now to support multi chainId ### Changes - fixed formatting and decimals config all over the app - never use mocked chainId - Send screen: enable sending unknown tokens as well - improve logic of add/edit assets to change inside asset networks as well - include hooks and helpers to deal with assets - `useFuelAsset`, `getAssetFuelCurrentChain`, `getFuelAssetByAssetId` - fix bugs when formatting / creating values with zero units (unknown tokens) - make all unknown tokens / assets use default as zero units - upgrade database to remove assetId from primaryKey of assets table - fix flaky e2e ReportError test --------- Co-authored-by: Arthur Geron <[email protected]>
FuelLabs · Sep 21, 2024 · 76c88c4 · 76c88c4
1 parent f6a9772
commit 76c88c4
Show file tree

Hide file tree

Showing 96 changed files with 1,169 additions and 1,109 deletions.
diff --git a/.changeset/four-candles-shop.md b/.changeset/four-candles-shop.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+fix bugs when formatting / creating values with zero units (unknown tokens)
diff --git a/.changeset/grumpy-brooms-sing.md b/.changeset/grumpy-brooms-sing.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+make all unknown tokens / assets use default as zero units
diff --git a/.changeset/hungry-spiders-look.md b/.changeset/hungry-spiders-look.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+include hooks and helpers to deal with assets, like `useFuelAsset`, `getAssetFuelCurrentChain`, `getFuelAssetByAssetId`
diff --git a/.changeset/rich-readers-pull.md b/.changeset/rich-readers-pull.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+refactor assets related code of application
diff --git a/.changeset/silent-actors-grow.md b/.changeset/silent-actors-grow.md
@@ -0,0 +1,5 @@
+---
+"@fuels/playwright-utils": minor
+---
+
+pump
diff --git a/.changeset/slimy-seas-grab.md b/.changeset/slimy-seas-grab.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Send screen: enable sending unknown tokens as well
diff --git a/.changeset/sour-coats-agree.md b/.changeset/sour-coats-agree.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+upgrade database to remove assetId from primaryKey of assets table
diff --git a/.github/workflows/pr-tests.yml b/.github/workflows/pr-tests.yml
@@ -42,7 +42,7 @@ jobs:
       - name: Run Jest Tests
         run: |
           pnpm test:ci
-        timeout-minutes: 20
+        timeout-minutes: 10
         env:
           NODE_OPTIONS: "--max-old-space-size=4096"
 
@@ -51,6 +51,7 @@ jobs:
 
   tests-e2e:
     name: E2E Tests
+    timeout-minutes: 15
     runs-on: buildjet-4vcpu-ubuntu-2204
     steps:
       - uses: actions/checkout@v3
@@ -82,6 +83,7 @@ jobs:
 
       - name: Run E2E Tests
         run: xvfb-run --auto-servernum -- pnpm test:e2e
+        timeout-minutes: 10
         env:
           NODE_ENV: test
 
@@ -98,6 +100,7 @@ jobs:
   tests-e2e-crx-lock:
     name: E2E Tests - Lock CRX
     runs-on: buildjet-4vcpu-ubuntu-2204
+    timeout-minutes: 5
     steps:
       - uses: actions/checkout@v3
       - uses: FuelLabs/github-actions/setups/node@master
@@ -128,6 +131,7 @@ jobs:
 
       - name: Run E2E Tests
         run: xvfb-run --auto-servernum -- pnpm test:e2e:crx-lock
+        timeout-minutes: 3
         env:
           NODE_ENV: test
 

diff --git a/Forc.lock b/Forc.lock
@@ -1,6 +1,6 @@
 [[package]]
 name = "core"
-source = "path+from-root-EF1196EF955CE54B"
+source = "path+from-root-4BB20845430AF9CF"
 
 [[package]]
 name = "custom_asset"
@@ -23,7 +23,7 @@ dependencies = ["std"]
 
 [[package]]
 name = "std"
-source = "git+https://github.com/fuellabs/sway?tag=v0.63.3#f55c81cce61aac31913ac0e87306cbaed7da679a"
+source = "git+https://github.com/fuellabs/sway?tag=v0.63.5#31a1d6f98395f571cd3674b492d9bf4773c55f65"
 dependencies = ["core"]
 
 [[package]]

diff --git a/docker/fuel-core/Dockerfile b/docker/fuel-core/Dockerfile
@@ -19,7 +19,9 @@ COPY ./genesis_coins.json .
 
 RUN git clone \
     https://github.com/FuelLabs/chain-configuration.git \
-    /chain-configuration
+    /chain-configuration && \
+    cd /chain-configuration && \
+    git checkout 6cea45da59bb105a02fb0b115c7ef03f3a690ba1
 
 # Copy the base local configuration
 RUN cp -R /chain-configuration/local/* ./

diff --git a/examples/cra-dapp/package.json b/examples/cra-dapp/package.json
@@ -10,7 +10,7 @@
     "@fuels/connectors": "0.28.0",
     "@fuels/react": "0.28.0",
     "@tanstack/react-query": "5.28.4",
-    "fuels": "0.94.6",
+    "fuels": "pr-3167",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/fuel-toolchain.toml b/fuel-toolchain.toml
@@ -3,4 +3,4 @@ channel = "testnet"
 
 [components]
 fuel-core = "0.35.0"
-forc = "0.63.3"
+forc = "0.63.5"
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -2,7 +2,7 @@
   "name": "fuels-wallet",
   "private": true,
   "version": "0.29.1",
-  "database": "19",
+  "database": "21",
   "scripts": {
     "build:all": "run-s build:web build:crx build:storybook",
     "build:web": "./scripts/build.sh --app=vite",
@@ -25,7 +25,6 @@
     "@fuel-ui/react": "0.23.3",
     "@fuel-ui/test-utils": "0.17.0",
     "@fuel-wallet/connections": "workspace:*",
-    "@fuels/assets": "0.20.0",
     "@fuels/local-storage": "0.20.0",
     "@fuels/react": "0.21.0",
     "@fuels/react-xstore": "0.20.0",
@@ -44,7 +43,7 @@
     "events": "3.3.0",
     "fake-indexeddb": "4.0.2",
     "framer-motion": "10.16.4",
-    "fuels": "0.94.6",
+    "fuels": "pr-3167",
     "json-edit-react": "1.13.3",
     "json-rpc-2.0": "1.7.0",
     "lodash.debounce": "4.0.8",

diff --git a/packages/app/playwright/commons/seedWallet.ts b/packages/app/playwright/commons/seedWallet.ts
@@ -25,7 +25,7 @@ export async function seedWallet(address: string, amount: BN) {
   const transfAsset = await genesisWallet.transfer(
     Address.fromString(address),
     amount,
-    ALT_ASSET.assetId
+    ALT_ASSET.networks[0].assetId
   );
   await transfAsset.wait();
 }
diff --git a/packages/app/playwright/crx/crx.test.ts b/packages/app/playwright/crx/crx.test.ts
@@ -1,14 +1,6 @@
 import type { Account as WalletAccount } from '@fuel-wallet/types';
 import { type Locator, expect } from '@playwright/test';
-import {
-  type Asset,
-  Provider,
-  type SelectNetworkArguments,
-  Signer,
-  Wallet,
-  bn,
-  hashMessage,
-} from 'fuels';
+import { type Asset, Provider, Signer, Wallet, bn, hashMessage } from 'fuels';
 
 import {
   delay,
@@ -83,6 +75,23 @@ test.describe('FuelWallet Extension', () => {
 
     await test.step('Should return current version of Wallet', async () => {
       const version = await blankPage.evaluate(async () => {
+        async function waitForConnection(depth = 0) {
+          if (depth > 20) {
+            throw new Error('Account never connected');
+          }
+          await new Promise((resolve) => {
+            setTimeout(async () => {
+              const currentConnectors = await window.fuel.connectors();
+              if (currentConnectors[0].installed) {
+                resolve(true);
+              } else {
+                await waitForConnection(depth + 1);
+              }
+              resolve(true);
+            }, 500);
+          });
+        }
+        await waitForConnection();
         return window.fuel.version();
       });
       expect(version).toEqual(process.env.VITE_APP_VERSION);
@@ -536,7 +545,7 @@ test.describe('FuelWallet Extension', () => {
       const assets = await blankPage.evaluate(async () => {
         return window.fuel.assets();
       });
-      expect(assets.length).toEqual(1);
+      expect(assets.length).toBeGreaterThan(0);
     });
 
     await test.step('window.fuel.addAsset()', async () => {

diff --git a/packages/app/playwright/e2e/Asset.test.ts b/packages/app/playwright/e2e/Asset.test.ts
@@ -2,7 +2,7 @@ import type { Browser, Page } from '@playwright/test';
 import test, { chromium } from '@playwright/test';
 
 import { getByAriaLabel, hasText, reload, visit, waitUrl } from '../commons';
-import { CUSTOM_ASSET, mockData } from '../mocks';
+import { CUSTOM_ASSET_SCREEN, mockData } from '../mocks';
 
 test.describe('Asset', () => {
   let browser: Browser;
@@ -23,17 +23,19 @@ test.describe('Asset', () => {
     await hasText(page, /Listed/i);
     await getByAriaLabel(page, 'Add Asset').click();
     await hasText(page, 'Save');
-    await getByAriaLabel(page, 'Asset ID').fill(CUSTOM_ASSET.assetId);
-    await getByAriaLabel(page, 'Asset name').fill(CUSTOM_ASSET.name);
-    await getByAriaLabel(page, 'Asset symbol').fill(CUSTOM_ASSET.symbol);
+    await getByAriaLabel(page, 'Asset ID').fill(CUSTOM_ASSET_SCREEN.assetId);
+    await getByAriaLabel(page, 'Asset name').fill(CUSTOM_ASSET_SCREEN.name);
+    await getByAriaLabel(page, 'Asset symbol').fill(CUSTOM_ASSET_SCREEN.symbol);
     await getByAriaLabel(page, 'Asset decimals').fill(
-      String(CUSTOM_ASSET.decimals)
+      String(CUSTOM_ASSET_SCREEN.decimals)
+    );
+    await getByAriaLabel(page, 'Asset image Url').fill(
+      CUSTOM_ASSET_SCREEN.icon
     );
-    await getByAriaLabel(page, 'Asset image Url').fill(CUSTOM_ASSET.imageUrl);
     await getByAriaLabel(page, 'Save Asset').click();
     await waitUrl(page, '/assets');
     await hasText(page, /Listed/i);
     await getByAriaLabel(page, 'Custom Assets').click();
-    await hasText(page, CUSTOM_ASSET.name);
+    await hasText(page, CUSTOM_ASSET_SCREEN.name);
   });
 });
diff --git a/packages/app/playwright/e2e/ReportError.test.ts b/packages/app/playwright/e2e/ReportError.test.ts
@@ -37,11 +37,12 @@ test.describe('ReportError', () => {
     const errors = await getPageErrors(page);
     expect(errors.length).toBeGreaterThan(0);
 
+    await page.waitForTimeout(2000);
     // report error
     await getByAriaLabel(page, 'Send error reports').click();
     await expect(page.getByText(/Unexpected error/)).toHaveCount(0);
 
-    page.waitForTimeout(2000);
+    await page.waitForTimeout(2000);
     const errorsAfterReporting = await getPageErrors(page);
     expect(errorsAfterReporting.length).toBe(0);
   });

diff --git a/packages/app/playwright/mocks/database.ts b/packages/app/playwright/mocks/database.ts
@@ -5,7 +5,7 @@ import type {
   Account as WalletAccount,
 } from '@fuel-wallet/types';
 import type { Page } from '@playwright/test';
-import type { Asset, WalletManagerAccount } from 'fuels';
+import type { Asset, AssetFuel, WalletManagerAccount } from 'fuels';
 import {
   Address,
   Mnemonic,
@@ -70,34 +70,29 @@ export const CUSTOM_ASSET_INPUT_2: Asset = {
   ],
 };
 
-export const CUSTOM_ASSET = {
+export const CUSTOM_ASSET_SCREEN = {
   assetId: '0x566012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5d90',
   name: 'New',
   symbol: 'NEW',
-  imageUrl:
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
-  isCustom: true,
-  decimals: 2,
-};
-
-export const CUSTOM_ASSET_2 = {
-  assetId: '0x566012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5d91',
-  name: 'New1',
-  symbol: 'NEW1',
-  imageUrl:
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
+  icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
   isCustom: true,
   decimals: 2,
 };
 
 export const ALT_ASSET = {
-  assetId: '0x0000000000000000000000000000000000000000000000000000000000000001',
   name: 'Alt Token',
   symbol: 'ALT',
-  imageUrl:
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
+  icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
   isCustom: true,
-  decimals: 2,
+  networks: [
+    {
+      type: 'fuel',
+      assetId:
+        '0x0000000000000000000000000000000000000000000000000000000000000001',
+      decimals: 2,
+      chainId: 0,
+    } as AssetFuel,
+  ],
 };
 
 export const FUEL_NETWORK = {

diff --git a/packages/app/src/systems/Account/components/BalanceAssets/BalanceAssets.tsx b/packages/app/src/systems/Account/components/BalanceAssets/BalanceAssets.tsx
@@ -0,0 +1,57 @@
+import { Button, CardList } from '@fuel-ui/react';
+import type { CoinAsset } from '@fuel-wallet/types';
+import { useMemo, useState } from 'react';
+import { AssetItem, AssetList } from '~/systems/Asset/components';
+import type { AssetListEmptyProps } from '~/systems/Asset/components/AssetList/AssetListEmpty';
+
+export type BalanceAssetListProp = {
+  balances?: CoinAsset[];
+  isLoading?: boolean;
+  onRemove?: (assetId: string) => void;
+  onEdit?: (assetId: string) => void;
+  emptyProps?: AssetListEmptyProps;
+};
+
+export const BalanceAssets = ({
+  balances,
+  isLoading,
+  emptyProps = {},
+  onRemove,
+  onEdit,
+}: BalanceAssetListProp) => {
+  const [showUnknown, setShowUnknown] = useState(false);
+  const unknownLength = useMemo(
+    () => balances?.filter((balance) => !balance.asset?.name).length,
+    [balances]
+  );
+
+  if (isLoading) return <AssetList.Loading items={4} />;
+  const isEmpty = !balances || !balances.length;
+  if (isEmpty) return <AssetList.Empty {...emptyProps} />;
+  const balancesToShow = balances.filter(
+    (balance) => showUnknown || balance.asset?.name
+  );
+
+  function toggle() {
+    setShowUnknown((s) => !s);
+  }
+
+  return (
+    <CardList>
+      {balancesToShow.map((balance) => (
+        <AssetItem
+          key={balance.asset?.name}
+          fuelAsset={balance.asset}
+          amount={balance.amount}
+          onRemove={onRemove}
+          onEdit={onEdit}
+        />
+      ))}
+      {!!(!isLoading && unknownLength) && (
+        <Button size="xs" variant="link" onPress={toggle}>
+          {showUnknown ? 'Hide' : 'Show'} unknown assets ({unknownLength})
+        </Button>
+      )}
+    </CardList>
+  );
+};
diff --git a/packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.tsx b/packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.tsx
@@ -8,6 +8,7 @@ import { AmountVisibility, VisibilityButton } from '~/systems/Core';
 
 import { useAccounts } from '../../hooks';
 
+import { DECIMAL_FUEL } from 'fuels';
 import { BalanceWidgetLoader } from './BalanceWidgetLoader';
 
 type BalanceWidgetWrapperProps = {
@@ -87,6 +88,7 @@ export function BalanceWidget({
               <AmountVisibility
                 value={account.balance}
                 visibility={visibility}
+                units={DECIMAL_FUEL}
               />
             </Text>
             <VisibilityButton