fix: update icons url (#114)

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}

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}

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),
     };