setup for filling in menu items (#9)

* setup for filling in menu items

* updated menu to change upon coin selection

* added svgs, removed some clutter

* added styling and functioning selector

* added coinList to import, changed logo to img

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 = () => {
                         <div className={style.currencySelector}>
                             <div className={style.currencySelectorContent}>
                                 <div className={style.currencySelectorIcon}>
-                                    <Image src={coinData.logo} alt={coinData.name} height={20} width={20} />
+                                    <Image src={coinData.img} alt={coinData.name} height={20} width={20} />
                                 </div>
                                 <div className={style.currencySelectorTicker}>{coinData.name}</div>
                             </div>

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 (
     <div className={style.wrapper}>
         <div className={style.content}>
@@ -59,17 +61,16 @@ const Swap = () => {
                     // onChange={(e) => handleChange(e, 'amount')}
                 />
 
-                {/* coin selector */}
-                <div className={style.currencySelector}>
+                 {/* coin selector */}
+                 <div className={style.currencySelector}>
                     <Menu as="div" className="relative inline-block w-full">
                         <div>
-                        <Menu.Button className={`${style.currencySelectorMenuButton}`}>
-
-                            <div className={style.currencySelectorIcon}>
-                                            <Image src={ethLogo} alt="eth" height={20} width={20} />
-                                        </div>
-                                        ETH
-                        </Menu.Button>
+                            <Menu.Button className={`${style.currencySelectorMenuButton}`}>
+                                <div className={style.currencySelectorIcon}>
+                                    <Image src={currentCoin.img} alt="eth" height={20} width={20} />
+                                </div>
+                                {currentCoin.name}
+                            </Menu.Button>
                         </div>
                         <Transition
                         as={Fragment}
@@ -82,29 +83,20 @@ const Swap = () => {
                         >
                             <Menu.Items className={style.currencySelectorMenuItems}>
                                 <div className={style.menuWrapper}>
-                                <Menu.Item>
-                                    {({ active }) => (
-                                    <button
-                                        className={`${
-                                        active ? 'bg-[#58c09b] text-white' : 'text-white'
-                                        } ${style.currencySelectorItem}`}>
-                                        <Image src={ethLogo} alt="eth" height={20} width={20} />
-                                        ETH
-                                    </button>
-                                    )}
-                                </Menu.Item>
-
-                                <Menu.Item>
-                                    {({ active }) => (
-                                    <button
-                                        className={`${
-                                        active ? 'bg-[#58c09b] text-white' : 'text-white'
-                                        } ${style.currencySelectorItem}`}>
-                                        <Image src={daiLogo} alt="dai" height={20} width={20} />
-                                        DAI
-                                    </button>
-                                    )}
-                                </Menu.Item>
+                                    {assets.map(x => (
+                                        <Menu.Item key={x.color}>
+                                            {({ active }) => (
+                                            <button
+                                                onClick={() => setCurrentlySelectedCoin(x.name)}
+                                                className={`${
+                                                active ? 'bg-[#2D2F36] text-white' : 'text-white'
+                                                } ${style.currencySelectorItem}`}>
+                                                <Image src={x.img} alt="eth" height={20} width={20} />
+                                                {x.name}
+                                            </button>
+                                            )}
+                                        </Menu.Item>
+                                    ))}
                                 </div>
                             </Menu.Items>
                         </Transition>

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"
+    }
+
+]

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';

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",