feat(develop_dashboard): mint-redeem input section

Hayek-Labs · Oct 7, 2022 · 2bd3a88 · 2bd3a88
1 parent 76e3af8
commit 2bd3a88
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 69 deletions.
diff --git a/src/components/MintRedeem/CoinDisplay.tsx b/src/components/MintRedeem/CoinDisplay.tsx
@@ -1,11 +1,13 @@
 import {
   supportedForiegnStableCoins,
   supportedNativeStableCoins,
+  supportedCoins,
 } from '@/constants/coin';
 import { useBalance } from '@/hooks/useBalance';
 import { useMintOrRedeemState } from '@/providers/StateProvider';
 import BigNumber from 'bignumber.js';
 import CoinCard from '../CoinCard';
+import { useState } from 'react';
 
 export const HASCoinCard: React.FC<{
   isMint: boolean;
@@ -110,3 +112,88 @@ export const NativeStableCoinCard: React.FC<{
     />
   );
 };
+
+export const Coin0Card: React.FC<{
+  isMint: boolean;
+}> = () => {
+  const { coin0, setCoin0, coin0Value, setCoin0Value, setIndependentCoin } =
+    useMintOrRedeemState();
+
+  const balance = useBalance(coin0);
+
+  return (
+    <CoinCard
+      coin={coin0}
+      input={{
+        value: coin0Value,
+        setValue: setCoin0Value,
+        onChange: () => {
+          setIndependentCoin('coin0');
+        },
+        canInput: true,
+      }}
+      size="md"
+      select={{
+        selectFrom: supportedCoins,
+        // @ts-ignore
+        setCoin: setCoin0,
+        canSelect: true,
+      }}
+      balance={balance}
+    />
+  );
+};
+
+export const Coin1Card: React.FC<{
+  isMint: boolean;
+}> = () => {
+  const { coin1, setCoin1, coin1Value, setCoin1Value, setIndependentCoin } =
+    useMintOrRedeemState();
+
+  const balance = useBalance(coin1);
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <>
+      {isActive ? (
+        <CoinCard
+          coin={coin1}
+          input={{
+            value: coin1Value,
+            setValue: setCoin1Value,
+            onChange: () => {
+              setIndependentCoin('coin1');
+            },
+            canInput: true,
+          }}
+          size="md"
+          select={{
+            selectFrom: supportedCoins,
+            // @ts-ignore
+            setCoin: setCoin1,
+            canSelect: true,
+          }}
+          balance={balance}
+        />
+      ) : (
+        <div
+          className="rounded-lg w-full bg-[#060203] flex items-center p-5 cursor-pointer hover:shadow-lg hover:bg-[#0e0d0d]"
+          style={{
+            justifyContent: 'center',
+            color: 'white',
+          }}
+          onClick={() => {
+            setIsActive(true);
+          }}
+        >
+          <img
+            src={`https://assets.codepen.io/3685267/res-react-dash-add-component.svg`}
+            alt=""
+            className="w-5 h-5"
+          />
+          <div className="ml-2">Add Component</div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/MintRedeem/index.tsx b/src/components/MintRedeem/index.tsx
@@ -8,6 +8,8 @@ import {
   HASCoinCard,
   ForeignStableCoinCard,
   NativeStableCoinCard,
+  Coin0Card,
+  Coin1Card,
 } from './CoinDisplay';
 import { useMintOrRedeemState } from '@/providers/StateProvider';
 import { useEffect, useState } from 'react';
@@ -207,7 +209,7 @@ const Card: React.FC<{ mode: 'mint' | 'redeem' }> = ({ mode }) => {
   // );
 
   return (
-    <div className="bg-card w-96 flex flex-col justify-center px-4 pt-2 pb-4 rounded-lg">
+    <div className="bg-card w-1/3 flex flex-col justify-center px-4 pt-2 pb-4 rounded-lg">
       <span className="font-bold text-center text-md mb-2 text-hblack-4">
         {pageText}
       </span>
@@ -222,11 +224,15 @@ const Card: React.FC<{ mode: 'mint' | 'redeem' }> = ({ mode }) => {
             <>
               {/* <HASCoinCard isMint={isMint} /> */}
               {/* <BsPlusLg size={15} className="self-center my-2 fill-hblack-4" /> */}
-              <ForeignStableCoinCard isMint={isMint} />
+              <Coin0Card isMint={isMint} />
+              <div className="h-2" />
+              <Coin1Card isMint={isMint} />
             </>
           ) : (
             <>
-              <ForeignStableCoinCard isMint={isMint} />
+              <Coin0Card isMint={isMint} />
+              <div className="h-2" />
+              <Coin1Card isMint={isMint} />
               {/* <BsPlusLg size={15} className="self-center my-2 fill-hblack-4" /> */}
               {/* <HASCoinCard isMint={isMint} /> */}
             </>
@@ -267,68 +273,11 @@ const Card: React.FC<{ mode: 'mint' | 'redeem' }> = ({ mode }) => {
   );
 };
 
-const AddComponent: React.FC<{
-  mode: 'mint' | 'redeem';
-  setShowMintRedeem: Function;
-}> = ({ mode, setShowMintRedeem }) => {
-  return (
-    <div className="rounded-lg bg-card overflow-hidden w-96">
-      <div className="w-full h-20 add-component-head" />
-      <div
-        className="flex flex-col items-center"
-        style={{
-          transform: 'translate(0, -40px)',
-        }}
-      >
-        <div
-          className=""
-          style={{
-            background: '#414455',
-            width: '80px',
-            height: '80px',
-            borderRadius: '999px',
-          }}
-        >
-          <img
-            src="https://assets.codepen.io/3685267/res-react-dash-rocket.svg"
-            alt=""
-            className="w-full h-full"
-          />
-        </div>
-        <div className="text-white font-bold mt-3">No Collateral Added Yet</div>
-        <div className="mt-2">Simply add your collateral</div>
-        <div className="mt-1">Just click on the button</div>
-        <div
-          className="flex items-center p-3 mt-3 cursor-pointer"
-          style={{
-            background: '#2f49d1',
-            borderRadius: '15px',
-            padding: '8px 16px',
-            justifyContent: 'center',
-            color: 'white',
-          }}
-          onClick={() => {
-            setShowMintRedeem(true);
-          }}
-        >
-          <Icon path="res-react-dash-add-component" className="w-5 h-5" />
-          <div className="ml-2">Add Collateral</div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 const MintRedeem: React.FC<{ mode: 'mint' | 'redeem' }> = ({ mode }) => {
-  const [showMintRedeem, setShowMintRedeem] = useState(false);
-
   return (
     <div className="flex flex-col w-full h-full text-white">
       <div className="flex-1 w-full flex flex-col text-center p-4 sm:p-2 justify-center items-center">
-        {(mode == 'redeem' || showMintRedeem) && <Card mode={mode} />}
-        {mode == 'mint' && !showMintRedeem && (
-          <AddComponent mode={mode} setShowMintRedeem={setShowMintRedeem} />
-        )}
+        <Card mode={mode} />
       </div>
     </div>
   );

diff --git a/src/constants/coin.ts b/src/constants/coin.ts
@@ -50,11 +50,11 @@ export type LP<C1 extends Coin = Coin, C2 extends Coin = Coin> = {
 
 const _supportedNativeStableCoins = [
   'USDH',
-  'EURH',
-  'JPYH',
-  'AUDH',
-  'GBPH',
-  'CHFH',
+  // 'EURH',
+  // 'JPYH',
+  // 'AUDH',
+  // 'GBPH',
+  // 'CHFH',
 ] as const;
 export type NativeStableCoin = typeof _supportedNativeStableCoins[number];
 export const supportedNativeStableCoins =
@@ -65,6 +65,9 @@ export type ForeignStableCoin = typeof _supportedForiegnStableCoins[number];
 export const supportedForiegnStableCoins =
   _supportedForiegnStableCoins as readonly Coin[];
 
+const _supportedCoins = ['USDT', 'USDC', 'BUSD', 'BTC', 'ETH', 'BNB'] as const;
+export const supportedCoins = _supportedCoins as readonly Coin[];
+
 interface CoinData {
   logo: SVGComponent;
   coinGeckoId: string | undefined;

diff --git a/src/state/mintOrRedeem.ts b/src/state/mintOrRedeem.ts
@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 export const useCreateMintOrRedeemState = (): MintRedeemState => {
   const [independentCoin, setIndependentCoin] = useState<
-    'has' | 'native' | 'foreign'
+    'has' | 'native' | 'foreign' | 'coin0' | 'coin1'
   >('native');
 
   const [foreignStableCoin, setForeignStableCoin] = useState<Coin>('USDT');
@@ -19,6 +19,12 @@ export const useCreateMintOrRedeemState = (): MintRedeemState => {
     new BigNumber('0'),
   );
 
+  const [coin0, setCoin0] = useState<Coin>('USDT');
+  const [coin0Value, setCoin0Value] = useState(new BigNumber('0'));
+
+  const [coin1, setCoin1] = useState<Coin>('USDT');
+  const [coin1Value, setCoin1Value] = useState(new BigNumber('0'));
+
   return {
     independentCoin,
     setIndependentCoin,
@@ -32,12 +38,22 @@ export const useCreateMintOrRedeemState = (): MintRedeemState => {
     setNativeStableCoin,
     nativeStableCoinValue,
     setNativeStableCoinValue,
+    coin0,
+    setCoin0,
+    coin0Value,
+    setCoin0Value,
+    coin1,
+    setCoin1,
+    coin1Value,
+    setCoin1Value,
   };
 };
 
 export interface MintRedeemState {
-  independentCoin: 'has' | 'native' | 'foreign';
-  setIndependentCoin: SetState<'has' | 'native' | 'foreign'>;
+  independentCoin: 'has' | 'native' | 'foreign' | 'coin0' | 'coin1';
+  setIndependentCoin: SetState<
+    'has' | 'native' | 'foreign' | 'coin0' | 'coin1'
+  >;
   foreignStableCoin: Coin;
   setForeignStableCoin: SetState<Coin>;
   foreignStableCoinValue: BigNumber;
@@ -48,4 +64,12 @@ export interface MintRedeemState {
   setNativeStableCoin: SetState<Coin>;
   nativeStableCoinValue: BigNumber;
   setNativeStableCoinValue: SetState<BigNumber>;
+  coin0: Coin;
+  setCoin0: SetState<Coin>;
+  coin0Value: BigNumber;
+  setCoin0Value: SetState<BigNumber>;
+  coin1: Coin;
+  setCoin1: SetState<Coin>;
+  coin1Value: BigNumber;
+  setCoin1Value: SetState<BigNumber>;
 }