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 = () => {
- {coinData.name} + {coinData.name}
{coinData.name}
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 */} +
- - -
- eth -
- ETH - + +
+ eth +
+ {currentCoin.name} +
{ >
- - {({ active }) => ( - - )} - - - - {({ active }) => ( - - )} - + {assets.map(x => ( + + {({ active }) => ( + + )} + + ))}
diff --git a/client/lib/assets.json b/client/lib/assets.json new file mode 100644 index 00000000..a06d5c32 --- /dev/null +++ b/client/lib/assets.json @@ -0,0 +1,15 @@ +[ + { + "name": "ETH", + "color": "CoinETH", + "amount": 0, + "img": "/assets/eth.svg" + }, + { + "name": "DAI", + "color": "CoinDAI", + "amount": 0, + "img": "/assets/dai.svg" + } + +] \ No newline at end of file diff --git a/client/lib/constants.ts b/client/lib/constants.ts index 7b5b3b18..5c4e3a01 100644 --- a/client/lib/constants.ts +++ b/client/lib/constants.ts @@ -2,4 +2,5 @@ export const contractABI = {} export const contractAddress = '0xF93c18172eAba6a9F145B3FB16d2bBeA2e096477' export const LocalStorageKey = 'swayswap'; export const CoinETH = '0x0000000000000000000000000000000000000000000000000000000000000000'; +export const CoinDAI = '0x0000000000000000000000000000000000000000000000000000000000000001'; export const GraphqlURL = 'https://node.swayswap.io/graphql'; \ No newline at end of file diff --git a/client/package.json b/client/package.json index 6dab349e..430c8f54 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,6 @@ "start": "next start" }, "dependencies": { - "@headlessui/react": "^1.5.0", "ethers": "^5.5.4", "fuels": "^0.0.0-master-ed80835", "next": "^12.1.0", diff --git a/client/public/assets/dai.svg b/client/public/assets/dai.svg new file mode 100644 index 00000000..bdbaa9bb --- /dev/null +++ b/client/public/assets/dai.svg @@ -0,0 +1 @@ +dai \ No newline at end of file diff --git a/client/public/assets/eth.svg b/client/public/assets/eth.svg new file mode 100644 index 00000000..b5224357 --- /dev/null +++ b/client/public/assets/eth.svg @@ -0,0 +1 @@ + \ No newline at end of file