From 0cc73e56941fa8e058abe3e3121b9e7171bd0f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luiz=20Est=C3=A1cio=20=7C=20stacio=2Eeth?=
 <luizstacio@gmail.com>
Date: Wed, 18 May 2022 23:42:43 -0300
Subject: [PATCH] fix: update icons url (#114)

---
 client/src/components/CoinSelector.tsx    | 5 +----
 client/src/components/CoinsListDialog.tsx | 5 +----
 client/src/hooks/useAssets.ts             | 5 ++++-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/client/src/components/CoinSelector.tsx b/client/src/components/CoinSelector.tsx
index a3522cd1..10583735 100644
--- a/client/src/components/CoinSelector.tsx
+++ b/client/src/components/CoinSelector.tsx
@@ -2,14 +2,11 @@ import { useState, useEffect } from "react";
 import { FiChevronDown } from "react-icons/fi";
 import CoinsMetadata from "src/lib/CoinsMetadata";
 import { Coin } from "src/types";
-import urlJoin from "url-join";
 
 import { Button } from "./Button";
 import { CoinsListDialog } from "./CoinsListDialog";
 import { Dialog, useDialogProps } from "./Dialog";
 
-const { PUBLIC_URL } = process.env;
-
 const style = {
   currencySelector: `flex1`,
 };
@@ -49,7 +46,7 @@ export function CoinSelector({
         {selected && selected.img && (
           <img
             className="rounded-full border-none ml-1"
-            src={`/${urlJoin(PUBLIC_URL, selected.img)}`}
+            src={selected.img}
             alt={selected.name}
             height={20}
             width={20}
diff --git a/client/src/components/CoinsListDialog.tsx b/client/src/components/CoinsListDialog.tsx
index f1abf66c..f177b9c7 100644
--- a/client/src/components/CoinsListDialog.tsx
+++ b/client/src/components/CoinsListDialog.tsx
@@ -1,12 +1,9 @@
 import { useState } from "react";
 import CoinsMetadata from "src/lib/CoinsMetadata";
 import { Coin } from "src/types";
-import urlJoin from "url-join";
 import { Input } from "./Input";
 import { Menu } from "./Menu";
 
-const { PUBLIC_URL } = process.env;
-
 const style = {
   input: `appearance-none w-full rounded-md bg-gray-700 px-4 py-2 focus-ring text-gray-100`,
   coinItem: `py-2 px-6 flex items-center gap-3 border-t border-gray-700
@@ -50,7 +47,7 @@ export function CoinsListDialog({ onSelect }: CoinListModalProps) {
             <Menu.Item key={coin.assetId} className={style.coinItem}>
               <img
                 className="rounded-full border-none ml-1"
-                src={`/${urlJoin(PUBLIC_URL, coin.img!)}`}
+                src={coin.img}
                 alt={coin.name}
                 height={30}
                 width={30}
diff --git a/client/src/hooks/useAssets.ts b/client/src/hooks/useAssets.ts
index c66372cc..01ceb5ce 100644
--- a/client/src/hooks/useAssets.ts
+++ b/client/src/hooks/useAssets.ts
@@ -3,6 +3,9 @@ import { CoinQuantity, toBigInt } from 'fuels';
 import { Coin } from 'src/types';
 import CoinsMetadata 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> => {
@@ -13,7 +16,7 @@ const mergeCoinsWithMetadata = (coins: CoinQuantity[] = []): Array<Asset> => {
       // Another options could be querying from the contract
       // https://github.com/FuelLabs/swayswap-demo/issues/33
       name: coinMetadata?.name || '404',
-      img: coinMetadata?.img || '/icons/other.svg',
+      img: urljoin(PUBLIC_URL, coinMetadata?.img || '/icons/other.svg'),
       assetId: coin.assetId,
       amount: toBigInt(coin.amount || 0),
     };