fix: custom assets addition and id duplication (#1504)

# Changes ## Fuel Wallet - Fixed not being able to add a known token on a different network. Closes #1499 - Fixed being able to manually create custom assets with duplicate asset ids. Closes #1503 - Fixed routes not supporting optional parameters and not processing parameter values correctly in some instances. Closes #1511 # Evidence https://github.com/user-attachments/assets/77b3f24a-b7c4-42dc-ae6a-6f9916ca85b9 https://github.com/user-attachments/assets/8db99142-41a7-48df-a0bd-9f5f127dce84 --------- Co-authored-by: Luiz Gomes <[email protected]>
FuelLabs · Sep 26, 2024 · 67a14d8 · 67a14d8
1 parent 75db188
commit 67a14d8
Show file tree

Hide file tree

Showing 13 changed files with 572 additions and 159 deletions.
diff --git a/.changeset/nine-frogs-carry.md b/.changeset/nine-frogs-carry.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fixed not being able to add a known token on a different network
diff --git a/.changeset/rotten-plums-leave.md b/.changeset/rotten-plums-leave.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fixed being able to manually create custom assets with duplicate asset ids
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -53,7 +53,7 @@
     "react-hook-form": "7.47.0",
     "react-json-view": "1.21.3",
     "react-qr-code": "2.0.12",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.26.2",
     "tai64": "1.0.0",
     "vite-plugin-markdown": "2.2.0",
     "xstate": "4.38.2",

diff --git a/packages/app/playwright/commons/text.ts b/packages/app/playwright/commons/text.ts
@@ -15,6 +15,14 @@ export async function hasText(
   return textFound;
 }
 
+export async function hasNoText(
+  page: Page,
+  text: string | RegExp,
+  position = 0
+) {
+  return await expect(page.getByText(text).nth(position)).rejects.toThrow();
+}
+
 export async function hasAriaLabel(page: Page, value: string) {
   const selector = await page.waitForSelector(`[aria-label="${value}"]`);
   expect(await selector.getAttribute('aria-label')).toBe(value);

diff --git a/packages/app/playwright/crx/crx.test.ts b/packages/app/playwright/crx/crx.test.ts
@@ -1,6 +1,14 @@
 import type { Account as WalletAccount } from '@fuel-wallet/types';
 import { type Locator, expect } from '@playwright/test';
-import { type Asset, Provider, Signer, Wallet, bn, hashMessage } from 'fuels';
+import {
+  type Asset,
+  type NetworkFuel,
+  Provider,
+  Signer,
+  Wallet,
+  bn,
+  hashMessage,
+} from 'fuels';
 
 import {
   delay,
@@ -16,6 +24,8 @@ import {
 import {
   CUSTOM_ASSET_INPUT,
   CUSTOM_ASSET_INPUT_2,
+  CUSTOM_ASSET_INPUT_3,
+  CUSTOM_ASSET_INPUT_4,
   FUEL_NETWORK,
   PRIVATE_KEY,
 } from '../mocks';
@@ -578,7 +588,10 @@ test.describe('FuelWallet Extension', () => {
         );
       }
 
-      const addingAsset = addAssets([CUSTOM_ASSET_INPUT, CUSTOM_ASSET_INPUT_2]);
+      const addingAsset = addAssets([
+        CUSTOM_ASSET_INPUT_3,
+        CUSTOM_ASSET_INPUT_2,
+      ]);
 
       const addAssetPage = await context.waitForEvent('page', {
         predicate: (page) => page.url().includes(extensionId),
@@ -588,6 +601,58 @@ test.describe('FuelWallet Extension', () => {
       await expect(addingAsset).resolves.toBeDefined();
     });
 
+    await test.step('show throw error when adding an existing asset', async () => {
+      function addAssets(assets: Asset[]) {
+        return blankPage.evaluate(
+          async ([asset]) => {
+            return window.fuel.addAssets(asset);
+          },
+          [assets]
+        );
+      }
+
+      expect(() => addAssets([CUSTOM_ASSET_INPUT])).rejects.toThrow();
+    });
+
+    await test.step('show throw error when first asset is new but second is duplicate ', async () => {
+      function addAssets(assets: Asset[]) {
+        return blankPage.evaluate(
+          async ([asset]) => {
+            return window.fuel.addAssets(asset);
+          },
+          [assets]
+        );
+      }
+
+      expect(() =>
+        addAssets([CUSTOM_ASSET_INPUT_4, CUSTOM_ASSET_INPUT_4])
+      ).rejects.toThrow();
+    });
+
+    await test.step('show validate custom assetIds using root assetId', async () => {
+      function addAssets(assets: Asset[]) {
+        return blankPage.evaluate(
+          async ([asset]) => {
+            return window.fuel.addAssets(asset);
+          },
+          [assets]
+        );
+      }
+
+      expect(() =>
+        addAssets([
+          {
+            name: `${CUSTOM_ASSET_INPUT.name}x`,
+            symbol: `${CUSTOM_ASSET_INPUT.symbol}x`,
+            icon: CUSTOM_ASSET_INPUT.icon,
+            assetId: (CUSTOM_ASSET_INPUT.networks[0] as NetworkFuel).assetId,
+            networks: [],
+            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          } as any,
+        ])
+      ).rejects.toThrow();
+    });
+
     await test.step('window.fuel.addNetwork()', async () => {
       function addNetwork(network: string) {
         return blankPage.evaluate(

diff --git a/packages/app/playwright/e2e/Asset.test.ts b/packages/app/playwright/e2e/Asset.test.ts
@@ -1,12 +1,27 @@
 import type { Browser, Page } from '@playwright/test';
 import test, { chromium } from '@playwright/test';
 
-import { getByAriaLabel, hasText, reload, visit, waitUrl } from '../commons';
+import { expect } from '@playwright/test';
+import {
+  getByAriaLabel,
+  hasNoText,
+  hasText,
+  reload,
+  visit,
+  waitUrl,
+} from '../commons';
 import { CUSTOM_ASSET_SCREEN, mockData } from '../mocks';
 
 test.describe('Asset', () => {
   let browser: Browser;
   let page: Page;
+  async function goToAssetPage(page: Page) {
+    await visit(page, '/assets');
+    await hasText(page, /Listed/i);
+    await getByAriaLabel(page, 'Add Asset').click();
+    await hasText(page, 'Save');
+  }
+
   test.beforeAll(async () => {
     browser = await chromium.launch();
     page = await browser.newPage();
@@ -19,10 +34,7 @@ test.describe('Asset', () => {
   });
 
   test('should be able to add asset', async () => {
-    await visit(page, '/assets');
-    await hasText(page, /Listed/i);
-    await getByAriaLabel(page, 'Add Asset').click();
-    await hasText(page, 'Save');
+    await goToAssetPage(page);
     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);
@@ -38,4 +50,72 @@ test.describe('Asset', () => {
     await getByAriaLabel(page, 'Custom Assets').click();
     await hasText(page, CUSTOM_ASSET_SCREEN.name);
   });
+
+  test('should not be able to add asset with duplicate asset id', async () => {
+    const randomName = 'Rand';
+    await goToAssetPage(page);
+    await getByAriaLabel(page, 'Asset ID').fill(CUSTOM_ASSET_SCREEN.assetId);
+    await getByAriaLabel(page, 'Asset name').fill(randomName);
+    await getByAriaLabel(page, 'Asset symbol').fill(randomName);
+    await getByAriaLabel(page, 'Asset decimals').fill(
+      String(CUSTOM_ASSET_SCREEN.decimals)
+    );
+    await getByAriaLabel(page, 'Asset image Url').fill(
+      CUSTOM_ASSET_SCREEN.icon
+    );
+    await getByAriaLabel(page, 'Save Asset').click();
+    await hasText(page, 'Asset ID already exists');
+  });
+
+  test('should not be able to add asset with duplicate name or symbol', async () => {
+    const randomName = 'Rand';
+    await goToAssetPage(page);
+    await getByAriaLabel(page, 'Asset ID').fill(
+      '0x599012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5100'
+    );
+    await getByAriaLabel(page, 'Asset symbol').fill(randomName);
+    await getByAriaLabel(page, 'Asset name').fill(CUSTOM_ASSET_SCREEN.name);
+    await getByAriaLabel(page, 'Asset decimals').fill(
+      String(CUSTOM_ASSET_SCREEN.decimals)
+    );
+    await getByAriaLabel(page, 'Asset image Url').fill(
+      CUSTOM_ASSET_SCREEN.icon
+    );
+    await getByAriaLabel(page, 'Save Asset').click();
+    await hasText(page, 'Asset name already exists');
+  });
+
+  test('should not be able to add asset with name used as a symbol by other asset', async () => {
+    await goToAssetPage(page);
+
+    await getByAriaLabel(page, 'Asset ID').fill(
+      '0x599012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5100'
+    );
+    await getByAriaLabel(page, 'Asset symbol').fill('Rand');
+    await getByAriaLabel(page, 'Asset name').fill(CUSTOM_ASSET_SCREEN.symbol);
+    await getByAriaLabel(page, 'Save Asset').click();
+    await hasText(page, 'Asset name used as a symbol by listed asset');
+  });
+
+  test('should not be able to add asset with symbol used as a name by other asset', async () => {
+    await goToAssetPage(page);
+    await getByAriaLabel(page, 'Asset ID').fill(
+      '0x599012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5100'
+    );
+    await getByAriaLabel(page, 'Asset name').fill('RAND');
+    await getByAriaLabel(page, 'Asset symbol').fill(CUSTOM_ASSET_SCREEN.name);
+    await getByAriaLabel(page, 'Save Asset').click();
+    await hasText(page, 'Asset symbol already used as a name by listed asset');
+  });
+
+  test('should not be able to add asset with duplicate symbol', async () => {
+    await goToAssetPage(page);
+    await getByAriaLabel(page, 'Asset ID').fill(
+      '0x599012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5100'
+    );
+    await getByAriaLabel(page, 'Asset name').fill('RAND');
+    await getByAriaLabel(page, 'Asset symbol').fill(CUSTOM_ASSET_SCREEN.symbol);
+    await getByAriaLabel(page, 'Save Asset').click();
+    await hasText(page, 'Asset symbol already exists');
+  });
 });
diff --git a/packages/app/playwright/mocks/database.ts b/packages/app/playwright/mocks/database.ts
@@ -55,6 +55,7 @@ export const CUSTOM_ASSET_INPUT: Asset = {
     },
   ],
 };
+
 export const CUSTOM_ASSET_INPUT_2: Asset = {
   name: 'New1',
   symbol: 'NEW1',
@@ -70,8 +71,38 @@ export const CUSTOM_ASSET_INPUT_2: Asset = {
   ],
 };
 
+export const CUSTOM_ASSET_INPUT_3: Asset = {
+  name: 'New2',
+  symbol: 'NEW2',
+  icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
+  networks: [
+    {
+      type: 'fuel',
+      assetId:
+        '0x566012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5d99',
+      decimals: 2,
+      chainId: 0,
+    },
+  ],
+};
+
+export const CUSTOM_ASSET_INPUT_4: Asset = {
+  name: 'New3',
+  symbol: 'NEW3',
+  icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',
+  networks: [
+    {
+      type: 'fuel',
+      assetId:
+        '0x566012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5d20',
+      decimals: 2,
+      chainId: 0,
+    },
+  ],
+};
+
 export const CUSTOM_ASSET_SCREEN = {
-  assetId: '0x566012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5d90',
+  assetId: '0x566012155ae253353c7df01f36c8f6249c94131a69a3484bdb0234e3822b5d92',
   name: 'New',
   symbol: 'NEW',
   icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png',