diff --git a/client/assets/dai.png b/client/assets/dai.png
deleted file mode 100644
index 8e6d480c..00000000
Binary files a/client/assets/dai.png and /dev/null differ
diff --git a/client/assets/eth.png b/client/assets/eth.png
deleted file mode 100644
index db9c806d..00000000
Binary files a/client/assets/eth.png and /dev/null differ
diff --git a/client/components/Assets.tsx b/client/components/Assets.tsx
index 8fbf1b7c..1162d59a 100644
--- a/client/components/Assets.tsx
+++ b/client/components/Assets.tsx
@@ -1,19 +1,9 @@
import { useContext, useEffect, useState } from 'react'
import Image from 'next/image';
import { FaFaucet } from 'react-icons/fa';
-import ethLogo from '../assets/eth.png';
import { WalletContext } from '../context/WalletContext';
import { Coin, CoinStatus } from 'fuels';
-import { CoinETH } from '../lib/constants';
-
-const coinList = [
- {
- name: 'ETH',
- color: CoinETH,
- amount: 0,
- logo: ethLogo
- }
-];
+import coinList from '../lib/assets.json';
const style = {
wrapper: `w-screen flex flex-1 items-center justify-center mb-14`,
@@ -89,7 +79,7 @@ const Swap = () => {
diff --git a/client/components/Swap.tsx b/client/components/Swap.tsx
index 5a994268..5050d9dc 100644
--- a/client/components/Swap.tsx
+++ b/client/components/Swap.tsx
@@ -1,10 +1,9 @@
-import { useContext, Fragment, useState } from 'react'
-import Image from 'next/image'
+import { useContext, Fragment, useState, useEffect } from 'react'
import { RiSettings3Fill } from 'react-icons/ri'
-import { AiOutlineDown } from 'react-icons/ai'
-import ethLogo from '../assets/eth.png'
-import daiLogo from '../assets/dai.png'
import { Menu, Transition } from '@headlessui/react'
+import Image from 'next/image'
+import assets from '../lib/assets.json'
+
const style = {
wrapper: `w-screen flex flex-1 items-center justify-center mb-14`,
@@ -18,18 +17,18 @@ const style = {
currencySelector: `flex w-1/4`,
currencySelectorMenuButton: `inline-flex justify-around w-full px-4 py-2 text-sm font-medium text-white
bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`,
- menuWrapper: `px-1 py-1`,
- currencySelectorContent: `w-full h-min flex justify-between items-center bg-[#2D2F36]
- hover:bg-[#41444F] rounded-2xl text-xl font-medium cursor-pointer p-2 mt-[-0.2rem]`,
- currencySelectorIcon: `flex items-center`,
- currencySelectorMenuItems: `absolute w-full mt-2 bg-[#2D2F36] divide-gray-100
+ currencySelectorMenuItems: `absolute w-full mt-2 bg-[#191B1F] divide-gray-100
rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`,
+ currencySelectorIcon: `flex items-center`,
currencySelectorItem: `flex justify-around rounded-md w-full px-2 py-2 text-sm`,
+ menuWrapper: `px-1 py-1`,
confirmButton: `bg-[#58c09b] my-2 rounded-2xl py-6 px-8 text-xl font-semibold flex items-center
justify-center cursor-pointer border border-[#58c09b] hover:border-[#234169]`,
}
+
+
const Swap = () => {
const handleSubmit = async (e: any) => {
// const { addressTo, amount } = formData
@@ -39,7 +38,10 @@ const Swap = () => {
// sendTransaction()
}
-
+
+ const [currentlySelectedCoin, setCurrentlySelectedCoin] = useState("ETH");
+ const currentCoin = assets.find(s => s.name === currentlySelectedCoin) || assets[0];
+
return (
@@ -59,17 +61,16 @@ const Swap = () => {
// onChange={(e) => handleChange(e, 'amount')}
/>
- {/* coin selector */}
-
+ {/* coin selector */}
+