From 1db591ee0a6e6d0f98283624b5468422965db6ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luiz=20Est=C3=A1cio=20=7C=20stacio=2Eeth?=
 <luizstacio@gmail.com>
Date: Thu, 19 May 2022 00:24:36 -0300
Subject: [PATCH] fix: update icons url (#115)

---
 client/src/hooks/useAssets.ts   |  9 +++------
 client/src/lib/CoinsMetadata.ts | 12 +++++++++---
 client/src/lib/utils.ts         |  6 ++++++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/src/hooks/useAssets.ts b/client/src/hooks/useAssets.ts
index 01ceb5ce..235e14ee 100644
--- a/client/src/hooks/useAssets.ts
+++ b/client/src/hooks/useAssets.ts
@@ -1,11 +1,8 @@
 import { useWallet } from 'src/context/AppContext';
 import { CoinQuantity, toBigInt } from 'fuels';
 import { Coin } from 'src/types';
-import CoinsMetadata from 'src/lib/CoinsMetadata';
+import CoinsMetadata, { ASSET_404 } from 'src/lib/CoinsMetadata';
 import { useQuery } from 'react-query';
-import urljoin from 'url-join';
-
-const { PUBLIC_URL } = process.env;
 
 type Asset = Coin & { amount: bigint };
 const mergeCoinsWithMetadata = (coins: CoinQuantity[] = []): Array<Asset> => {
@@ -15,8 +12,8 @@ const mergeCoinsWithMetadata = (coins: CoinQuantity[] = []): Array<Asset> => {
       // TODO: Create default Coin Metadata when token didn't have registered data
       // Another options could be querying from the contract
       // https://github.com/FuelLabs/swayswap-demo/issues/33
-      name: coinMetadata?.name || '404',
-      img: urljoin(PUBLIC_URL, coinMetadata?.img || '/icons/other.svg'),
+      name: coinMetadata?.name || ASSET_404.name,
+      img: coinMetadata?.img || ASSET_404.img,
       assetId: coin.assetId,
       amount: toBigInt(coin.amount || 0),
     };
diff --git a/client/src/lib/CoinsMetadata.ts b/client/src/lib/CoinsMetadata.ts
index 5df21852..99c7df4e 100644
--- a/client/src/lib/CoinsMetadata.ts
+++ b/client/src/lib/CoinsMetadata.ts
@@ -1,12 +1,18 @@
 import { Coin } from 'src/types';
 import { CONTRACT_ID, TOKEN_ID } from 'src/config';
+import { relativeUrl } from './utils';
+
+export const ASSET_404 = {
+  name: '404',
+  img: relativeUrl('/icons/other.svg'),
+};
 
 const CoinsMetadata: Array<Coin> = [
   {
     name: 'Ether',
     symbol: 'ETH',
     assetId: '0x0000000000000000000000000000000000000000000000000000000000000000',
-    img: '/icons/eth.svg',
+    img: relativeUrl('/icons/eth.svg'),
   },
   {
     name: 'DAI',
@@ -15,7 +21,7 @@ const CoinsMetadata: Array<Coin> = [
     // Make temporarily easy to change token contract id
     // https://github.com/FuelLabs/swayswap-demo/issues/33
     assetId: TOKEN_ID,
-    img: '/icons/dai.svg',
+    img: relativeUrl('/icons/dai.svg'),
   },
   {
     name: 'Sway',
@@ -24,7 +30,7 @@ const CoinsMetadata: Array<Coin> = [
     // Make temporarily easy to change token contract id
     // https://github.com/FuelLabs/swayswap-demo/issues/33
     assetId: CONTRACT_ID,
-    img: '/icons/sway.svg',
+    img: relativeUrl('/icons/sway.svg'),
   },
 ];
 
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
index 8f4c2add..f8430806 100644
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@@ -1,5 +1,11 @@
+import urljoin from 'url-join';
+
+const { PUBLIC_URL } = process.env;
+
 export const objectId = (value: string) => ({
   value,
 });
 
 export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const relativeUrl = (path: string) => urljoin(PUBLIC_URL, path);