From deedbbe8ad55e457709c65aa41b8f062599d79ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pedro=20Sim=C3=A3o?= <pedrolimao@gmail.com>
Date: Thu, 17 Feb 2022 20:58:35 +0100
Subject: [PATCH] Finished first versions of Stake and Swap

---
 src/components/CryptoInput/index.tsx |   3 +-
 src/components/CryptoInput/types.ts  |   1 +
 src/components/CryptoInput/utils.ts  |   5 -
 src/components/Navbar/index.tsx      |   1 +
 src/components/SwapInput/index.tsx   | 163 ++++++++++++++++
 src/components/SwapInput/types.ts    |  12 ++
 src/hooks/useGetBalance.ts           |  52 ++++++
 src/hooks/useGetStats.ts             |  63 +++++++
 src/near/config.ts                   |   2 +-
 src/near/initContract.ts             |   2 +-
 src/near/types.ts                    |  12 ++
 src/pages/stake.tsx                  |  73 ++++----
 src/pages/swap.tsx                   | 269 +++++++++++----------------
 src/redux/walletSlice.ts             |   4 +-
 14 files changed, 455 insertions(+), 207 deletions(-)
 delete mode 100644 src/components/CryptoInput/utils.ts
 create mode 100644 src/components/SwapInput/index.tsx
 create mode 100644 src/components/SwapInput/types.ts
 create mode 100644 src/hooks/useGetBalance.ts
 create mode 100644 src/hooks/useGetStats.ts

diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx
index 3f49640..8b93bc3 100644
--- a/src/components/CryptoInput/index.tsx
+++ b/src/components/CryptoInput/index.tsx
@@ -9,6 +9,7 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
   currencyQuote,
   onChange,
   onChangeCurrency,
+  showBalance = true,
 }) => {
   const [currency, setCurrency] = React.useState<t.CurrencyTypeEnum>(
     t.CurrencyTypeEnum.NEAR
@@ -33,7 +34,7 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
 
   return (
     <>
-      {maxValue ? (
+      {showBalance && maxValue ? (
         <Box
           flex
           width="90%"
diff --git a/src/components/CryptoInput/types.ts b/src/components/CryptoInput/types.ts
index d5bbcca..39349ef 100644
--- a/src/components/CryptoInput/types.ts
+++ b/src/components/CryptoInput/types.ts
@@ -4,6 +4,7 @@ export interface CryptoInputPropsType {
   onChangeCurrency?: (e: string) => void
   maxValue?: string
   currencyQuote?: number
+  showBalance?: boolean
 }
 
 export enum CurrencyTypeEnum {
diff --git a/src/components/CryptoInput/utils.ts b/src/components/CryptoInput/utils.ts
deleted file mode 100644
index c85b624..0000000
--- a/src/components/CryptoInput/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const fetchFiatValue = async (): Promise<number> => {
-  const response = await fetch(`https://near-contract-helper.onrender.com/fiat`)
-  const data = await response.json()
-  return Number(data?.near.usd)
-}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 2d0c799..8273a8e 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -87,6 +87,7 @@ export const Navbar: React.FC = () => {
                       weight="normal"
                       size="medium"
                       reverse={false}
+                      onClick={() => router.push('/swap')}
                     />
                     <Anchor
                       label="borrow"
diff --git a/src/components/SwapInput/index.tsx b/src/components/SwapInput/index.tsx
new file mode 100644
index 0000000..171cbaa
--- /dev/null
+++ b/src/components/SwapInput/index.tsx
@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { Box, Button, Text, TextInput } from 'grommet'
+
+import * as t from './types'
+
+export const SwapInput: React.FC<t.SwapInputPropsType> = ({
+  value,
+  maxValue,
+  swapQuote,
+  onChange,
+  onChangeCurrency,
+}) => {
+  const [currency, setCurrency] = React.useState<t.CurrencyTypeEnum>(
+    t.CurrencyTypeEnum.NEAR
+  )
+  const handleChangeCurrency = () => {
+    const newCurrency =
+      currency === t.CurrencyTypeEnum.NEAR
+        ? t.CurrencyTypeEnum.QUID
+        : t.CurrencyTypeEnum.NEAR
+    setCurrency(newCurrency)
+    onChangeCurrency && onChangeCurrency(newCurrency)
+  }
+
+  return (
+    <Box flex align="center" direction="column">
+      {maxValue ? (
+        <Box
+          width="90%"
+          gap="small"
+          pad="none"
+          align="center"
+          justify="between"
+          direction="row"
+          margin="0 auto"
+        >
+          <Text alignSelf="start">Pay:</Text>
+          <Box flex justify="end" align="center" direction="row" gap="xsmall">
+            <Text as="p" size="xsmall" margin="0" alignSelf="center">
+              balance: {Number(maxValue || 0).toFixed(3)}
+            </Text>
+            <Button
+              label="max"
+              alignSelf="end"
+              size="small"
+              onClick={() => {
+                onChange(maxValue)
+              }}
+            />
+          </Box>
+        </Box>
+      ) : null}
+      <Box
+        margin="5px auto 0 auto"
+        border={{ size: 'xsmall' }}
+        width="90%"
+        flex
+        direction="column"
+        round="small"
+        pad="small"
+        background="background-back"
+      >
+        <Box width="100%" flex direction="row">
+          <TextInput
+            plain={true}
+            focusIndicator={false}
+            type="number"
+            name="withdraw"
+            step="0.1"
+            placeholder="0.000"
+            size="xxlarge"
+            textAlign="start"
+            min={0}
+            value={value}
+            onChange={(e) => {
+              onChange(e?.target?.value)
+            }}
+          />
+          <Button
+            primary
+            plain={false}
+            alignSelf="end"
+            margin="auto 0"
+            label={currency}
+            onClick={handleChangeCurrency}
+          />
+        </Box>
+      </Box>
+      <Box
+        width="90%"
+        margin="20px auto 0 auto"
+        gap="small"
+        pad="none"
+        align="center"
+        justify="between"
+        direction="row"
+      >
+        <Text alignSelf="start">Receive: (approximately)</Text>
+      </Box>
+      <Box
+        margin="5px auto 0 auto"
+        border={{ size: 'xsmall' }}
+        width="90%"
+        flex
+        direction="column"
+        round="small"
+        pad="small"
+        background="background-back"
+      >
+        <Box width="100%" flex direction="row">
+          <TextInput
+            plain={true}
+            focusIndicator={false}
+            type="number"
+            name="withdraw"
+            step="0.1"
+            placeholder="0.000"
+            size="xxlarge"
+            textAlign="start"
+            min={0}
+            value={
+              swapQuote && value ? String(Number(value) * swapQuote) : undefined
+            }
+            onChange={(e) => {
+              onChange(String(Number(e?.target?.value) / (swapQuote || 1)))
+            }}
+          />
+          <Button
+            primary
+            plain={false}
+            alignSelf="end"
+            margin="auto 0"
+            // size="small"
+            // style={{ cursor: 'pointer' }}
+            label={
+              currency === t.CurrencyTypeEnum.NEAR
+                ? t.CurrencyTypeEnum.QUID
+                : t.CurrencyTypeEnum.NEAR
+            }
+            onClick={handleChangeCurrency}
+          />
+        </Box>
+      </Box>
+      {/* Todo: display some info about the swap transaction */}
+      {/*<Box width="90%" justify="end">*/}
+      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
+      {/*    {fiatValue && Number(value)*/}
+      {/*      ? `Approximate value: ~${fiatValue.toFixed(2)} usd`*/}
+      {/*      : null}*/}
+      {/*  </Text>*/}
+      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
+      {/*    Price Impact: ~1%*/}
+      {/*  </Text>*/}
+      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
+      {/*    Max slippage: ~1%*/}
+      {/*  </Text>*/}
+      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
+      {/*    Minimum received after slippage: ~${(fiatValue * 0.95).toFixed(2)} usd*/}
+      {/*  </Text>*/}
+      {/*</Box>*/}
+    </Box>
+  )
+}
diff --git a/src/components/SwapInput/types.ts b/src/components/SwapInput/types.ts
new file mode 100644
index 0000000..a79caf1
--- /dev/null
+++ b/src/components/SwapInput/types.ts
@@ -0,0 +1,12 @@
+export interface SwapInputPropsType {
+  value?: string
+  onChange: (value: string) => void
+  onChangeCurrency?: (e: string) => void
+  maxValue?: string
+  swapQuote?: number
+}
+
+export enum CurrencyTypeEnum {
+  NEAR = 'Near',
+  QUID = 'qUid',
+}
diff --git a/src/hooks/useGetBalance.ts b/src/hooks/useGetBalance.ts
new file mode 100644
index 0000000..d19f678
--- /dev/null
+++ b/src/hooks/useGetBalance.ts
@@ -0,0 +1,52 @@
+import { useState, useEffect, useContext } from 'react'
+import { utils } from 'near-api-js'
+
+import { NearContext } from 'src/near/nearContext'
+
+// Todo: replace by redux-toolkit query
+export const useGetBalance = (): {
+  quidBalance: string
+  nearBalance: string
+  isLoading: boolean
+  refetch: () => void
+} => {
+  const { contract, currentUser, walletConnection } = useContext(NearContext)
+  const [quidBalance, setQuidBalance] = useState<string>('')
+  const [nearBalance, setNearBalance] = useState<string>('')
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+
+  const fetchQuidBalance = async () => {
+    try {
+      setIsLoading(true)
+      // Get qUid balance
+      const quidRes = await walletConnection
+        ?.account()
+        .viewFunction(contract?.contractId || '', 'ft_balance_of', {
+          account_id: currentUser?.accountId,
+        })
+      const newQuidBalance = utils.format.formatNearAmount(quidRes)
+      setQuidBalance(Number(newQuidBalance).toFixed(3))
+      // Get Near balance
+      const newNearBalance = utils.format.formatNearAmount(
+        currentUser?.balance || '0'
+      )
+      setNearBalance(Number(newNearBalance).toFixed(3))
+    } catch (e) {
+      // Todo: add a toaster warning of errors
+      console.error(e)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchQuidBalance()
+  }, [contract])
+
+  return {
+    quidBalance,
+    nearBalance,
+    isLoading,
+    refetch: fetchQuidBalance,
+  }
+}
diff --git a/src/hooks/useGetStats.ts b/src/hooks/useGetStats.ts
new file mode 100644
index 0000000..63377f1
--- /dev/null
+++ b/src/hooks/useGetStats.ts
@@ -0,0 +1,63 @@
+import { useState, useEffect, useContext } from 'react'
+import { utils } from 'near-api-js'
+
+import { NearContext } from 'src/near/nearContext'
+
+export interface StatsType {
+  nearSpTotal: string
+  quidSpTotal: string
+  nearSpStaked: string
+  quidSpStaked: string
+}
+// Todo: replace by redux-toolkit query
+export const useGetStats = (): {
+  stats: StatsType | null
+  isLoading: boolean
+  refetch: () => void
+} => {
+  const { contract, currentUser } = useContext(NearContext)
+  const [stats, setStats] = useState<StatsType | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+
+  const getPledged = async () => {
+    return contract?.get_pledge({
+      account: currentUser?.accountId,
+    })
+  }
+  const getStats = async () => {
+    return contract?.get_pool_stats({})
+  }
+
+  const fetchStats = async () => {
+    try {
+      setIsLoading(true)
+      const newStats = await getStats()
+      const newPledged = await getPledged()
+      setStats({
+        nearSpTotal: utils.format.formatNearAmount(
+          newStats?.blood_debit || '0'
+        ),
+        quidSpTotal: utils.format.formatNearAmount(
+          newStats?.blood_credit || '0'
+        ),
+        nearSpStaked: utils.format.formatNearAmount(newPledged?.near_sp || '0'),
+        quidSpStaked: utils.format.formatNearAmount(newPledged?.quid_sp || '0'),
+      })
+    } catch (e) {
+      // Todo: add a toaster warning of errors
+      console.error(e)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchStats()
+  }, [contract])
+
+  return {
+    stats,
+    isLoading,
+    refetch: fetchStats,
+  }
+}
diff --git a/src/near/config.ts b/src/near/config.ts
index 20eaafd..3932eaf 100644
--- a/src/near/config.ts
+++ b/src/near/config.ts
@@ -1,5 +1,5 @@
 export const CONTRACT_NAME =
-  process.env.CONTRACT_NAME || 'dev-1644330473949-94120853225128'
+  process.env.CONTRACT_NAME || 'dev-1644873487217-61450440829727'
 
 export enum NETWORK_TYPE {
   PRODUCTION = 'production',
diff --git a/src/near/initContract.ts b/src/near/initContract.ts
index 63210f6..d8858ab 100644
--- a/src/near/initContract.ts
+++ b/src/near/initContract.ts
@@ -52,7 +52,7 @@ export const initContract = async (): Promise<NearContextType> => {
       // View methods are read-only – they don't modify the state, but usually return some value
       viewMethods: ['get_pledge', 'get_pool_stats'],
       // Change methods can modify the state, but you don't receive the returned value when called
-      changeMethods: ['renege', 'borrow', 'deposit', 'fold', 'new'],
+      changeMethods: ['renege', 'borrow', 'deposit', 'fold', 'swap', 'new'],
     }
   )
   // @ts-ignore - Todo: verify whats the problem with Contract ts type
diff --git a/src/near/types.ts b/src/near/types.ts
index 46916ba..fe2369e 100644
--- a/src/near/types.ts
+++ b/src/near/types.ts
@@ -62,6 +62,12 @@ export interface ContractType extends nearAPI.Contract {
     gas?: string,
     deposit?: string
   ) => void
+  swap: (
+    // @ts-ignore Todo: find a solution for this weird duplicate alert
+    { amount: string, repay: boolean, short: boolean }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
   /*
    * Call this function to attempt liquidating a single Pledge
    */
@@ -85,4 +91,10 @@ export interface ContractType extends nearAPI.Contract {
     gas?: string,
     deposit?: string
   ) => Promise<PoolStatsType>
+  // // Get Pool Stats
+  // get_stats: (
+  //   { account: string, short: boolean }: Record<string, unknown>,
+  //   gas?: string,
+  //   deposit?: string
+  // ) => Promise<PoolStatsType>
 }
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
index 1f5c548..8bf3a2a 100644
--- a/src/pages/stake.tsx
+++ b/src/pages/stake.tsx
@@ -4,46 +4,40 @@ import { utils } from 'near-api-js'
 import { Box, Text, Tabs, Tab, Button } from 'grommet'
 
 import { NearContext } from 'src/near/nearContext'
-import { PledgeType, PoolStatsType } from 'src/near/types'
+import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
+import { useGetBalance } from 'src/hooks/useGetBalance'
+import { useGetStats } from 'src/hooks/useGetStats'
 
 import { CryptoInput } from 'src/components/CryptoInput'
-import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
 
 const Stake: React.FC = () => {
-  const { contract, currentUser } = React.useContext(NearContext)
+  const { contract } = React.useContext(NearContext)
   const [depositAmnt, setDepositAmnt] = React.useState<string | undefined>()
   const [withdrawAmnt, setWithdrawAmnt] = React.useState<string | undefined>()
   const [isQuid, setIsQuid] = React.useState<boolean>(false)
-  const [pledged, setPledged] = React.useState<PledgeType | undefined>()
-  const [stats, setStats] = React.useState<PoolStatsType | undefined>()
   const { data: nearQuote } = useGetNearQuoteQuery(undefined, {
-    pollingInterval: 30000, // set to 30 seconds
+    pollingInterval: 60000, // set to 60 seconds
   })
 
+  const {
+    quidBalance,
+    nearBalance,
+    refetch: refetchQuidBalance,
+  } = useGetBalance()
+
+  const { stats, refetch: refetchStats } = useGetStats()
+
   const currentBalance = isQuid
-    ? utils.format.formatNearAmount(pledged?.credit || '0')
-    : utils.format.formatNearAmount(currentUser?.balance || '0')
+    ? quidBalance // Todo: find stats
+    : nearBalance
 
-  const currentSpBalance = isQuid
-    ? utils.format.formatNearAmount(pledged?.quid_sp || '0')
-    : utils.format.formatNearAmount(pledged?.near_sp || '0')
+  const currentSpBalance = isQuid ? stats?.quidSpStaked : stats?.nearSpStaked
 
-  const getNewPledgedAmnt = async () => {
-    const newPledges = await contract?.get_pledge({
-      account: currentUser?.accountId,
-    })
-    setPledged(newPledges)
-  }
-  const getStats = async () => {
-    const newStats = await contract?.get_pool_stats({})
-    setStats(newStats)
+  const refetchAll = () => {
+    refetchQuidBalance()
+    refetchStats()
   }
 
-  React.useEffect(() => {
-    getNewPledgedAmnt()
-    getStats()
-  }, [contract])
-
   return (
     <>
       <Head>
@@ -105,14 +99,20 @@ const Stake: React.FC = () => {
                   }}
                   onClick={async () => {
                     if (depositAmnt) {
-                      contract?.deposit(
+                      await contract?.deposit(
                         {
-                          qd_amt: '0',
+                          qd_amt: isQuid
+                            ? utils.format.parseNearAmount(depositAmnt)
+                            : '0',
                           live: false,
                         },
                         undefined,
-                        utils.format.parseNearAmount(depositAmnt) || undefined
+                        isQuid
+                          ? '1'
+                          : utils.format.parseNearAmount(depositAmnt) ||
+                              undefined
                       )
+                      refetchAll()
                     }
                   }}
                 />
@@ -147,15 +147,16 @@ const Stake: React.FC = () => {
                   }}
                   onClick={async () => {
                     if (withdrawAmnt) {
-                      contract?.renege(
+                      await contract?.renege(
                         {
                           amount: utils.format.parseNearAmount(withdrawAmnt),
                           sp: true,
-                          qd: false,
+                          qd: isQuid,
                         },
                         undefined
                         // utils.format.parseNearAmount('0.00001') || undefined
                       )
+                      refetchAll()
                     }
                   }}
                 />
@@ -176,10 +177,10 @@ const Stake: React.FC = () => {
         >
           <Box flex direction="row" justify="between" gap="xxsmall">
             <Text as="h2" size="xlarge" margin="xxsmall">
-              Pool Near
+              Near Pool Total
             </Text>
             <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(stats?.blood_debit || '0')}
+              {stats?.nearSpTotal}
             </Text>
           </Box>
           <Box flex direction="row" justify="between" gap="xxsmall">
@@ -187,15 +188,15 @@ const Stake: React.FC = () => {
               My Staked Near
             </Text>
             <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(pledged?.near_sp || '0')}
+              {stats?.nearSpStaked}
             </Text>
           </Box>
           <Box flex direction="row" justify="between" gap="xxsmall">
             <Text as="h2" size="xlarge" margin="xxsmall">
-              Pool qUid
+              qUid Pool Total
             </Text>
             <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(stats?.blood_credit || '0')}
+              {stats?.quidSpTotal}
             </Text>
           </Box>
           <Box flex direction="row" justify="between" gap="xxsmall">
@@ -203,7 +204,7 @@ const Stake: React.FC = () => {
               My Staked Quid
             </Text>
             <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(pledged?.quid_sp || '0')}
+              {stats?.quidSpStaked}
             </Text>
           </Box>
         </Box>
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index 6da17cc..f210000 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -1,204 +1,151 @@
 import * as React from 'react'
 import Head from 'next/head'
 import { utils } from 'near-api-js'
-import { Box, Text, Tabs, Tab, Button } from 'grommet'
+import { Box, Text, Button, Spinner } from 'grommet'
 
 import { NearContext } from 'src/near/nearContext'
-import { PledgeType, PoolStatsType } from 'src/near/types'
+import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
+import { useGetBalance } from 'src/hooks/useGetBalance'
 
-import { CryptoInput } from 'src/components/CryptoInput'
+import { SwapInput } from 'src/components/SwapInput'
+
+const EXCHANGE_RATE = 0.99090909091
+
+const Swap: React.FC = () => {
+  const { contract } = React.useContext(NearContext)
+  const [swapAmount, setSwapAmount] = React.useState<string | undefined>()
+  const [isSwapping, setIsSwapping] = React.useState(false)
+  const { quidBalance, nearBalance } = useGetBalance()
 
-const Stake: React.FC = () => {
-  const { contract, currentUser } = React.useContext(NearContext)
-  const [depositAmnt, setDepositAmnt] = React.useState<string | undefined>()
-  const [withdrawAmnt, setWithdrawAmnt] = React.useState<string | undefined>()
   const [isQuid, setIsQuid] = React.useState<boolean>(false)
-  const [pledged, setPledged] = React.useState<PledgeType | undefined>()
-  const [stats, setStats] = React.useState<PoolStatsType | undefined>()
+  const { data: nearQuote } = useGetNearQuoteQuery(undefined, {
+    pollingInterval: 60000, // set to 60 seconds
+  })
 
-  const currentBalance = isQuid
-    ? utils.format.formatNearAmount(pledged?.credit || '0')
-    : utils.format.formatNearAmount(currentUser?.balance || '0')
+  const swapQuote = isQuid
+    ? // Todo: investigate if exchange rate applies to Quid
+      (1 / Number(nearQuote)) * EXCHANGE_RATE
+    : Number(nearQuote) * EXCHANGE_RATE
 
-  const currentSpBalance = isQuid
-    ? utils.format.formatNearAmount(pledged?.quid_sp || '0')
-    : utils.format.formatNearAmount(pledged?.near_sp || '0')
+  const currentBalance = isQuid ? quidBalance : nearBalance
 
-  const getNewPledgedAmnt = async () => {
-    const newPledges = await contract?.get_pledge({
-      account: currentUser?.accountId,
-    })
-    setPledged(newPledges)
-  }
-  const getStats = async () => {
-    const newStats = await contract?.get_pool_stats({})
-    setStats(newStats)
+  const handleSwap = async () => {
+    if (swapAmount) {
+      try {
+        setIsSwapping(true)
+        await contract?.swap(
+          {
+            amount: isQuid
+              ? utils.format.parseNearAmount(swapAmount)
+              : utils.format.parseNearAmount('0'),
+            repay: false,
+            short: !isQuid,
+          },
+          undefined,
+          isQuid ? '1' : utils.format.parseNearAmount(swapAmount) || undefined
+        )
+      } catch (e) {
+        // Todo: deal with errors
+        console.error(e)
+      } finally {
+        setIsSwapping(false)
+      }
+    }
   }
 
-  React.useEffect(() => {
-    getNewPledgedAmnt()
-    getStats()
-  }, [contract])
-
   return (
     <>
       <Head>
-        <title>qUid Stable Currency - Stake</title>
-        <meta name="description" content="Stake qUid Stable Currency" />
+        <title>qUid Stable Currency - Swap</title>
+        <meta name="description" content="Swap Near for qUid" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Box
         alignContent="center"
         width="100%"
-        height="90vh"
+        height="91vh"
         align="center"
         flex
         direction="column"
       >
         <Text
-          // color="brand"
           as="h2"
           size="xxlarge"
           margin={{ bottom: 'medium', top: 'large' }}
+          textAlign="center"
         >
-          Stake on qUid Solvency Pool
+          Swap <br />
+          {'Near <-> qUid'}
         </Text>
-        {/* Deposit and Withdraw Box*/}
         <Box
           width={{ max: '500px', width: '90%' }}
-          // height="300px"
           background="background-front"
-          // animation="slideDown"
           gap="small"
           pad="medium"
           round="small"
-          direction="column"
           margin="0 auto"
         >
-          <Tabs justify="center">
-            <Tab title="Deposit">
-              <br />
-              <Box direction="column">
-                <CryptoInput
-                  value={String(depositAmnt)}
-                  maxValue={currentBalance}
-                  onChange={setDepositAmnt}
-                  onChangeCurrency={() => setIsQuid(!isQuid)}
-                />
-                <br />
-                <Button
-                  primary
-                  disabled={!depositAmnt}
-                  // color="gradient"
-                  label="Confirm"
-                  alignSelf="center"
-                  size="large"
-                  style={{
-                    width: '90%',
-                    margin: '0 auto',
-                    textAlign: 'center',
-                  }}
-                  onClick={async () => {
-                    if (depositAmnt) {
-                      contract?.deposit(
-                        {
-                          qd_amt: '0',
-                          live: false,
-                        },
-                        '300000000000000',
-                        utils.format.parseNearAmount(depositAmnt) || undefined
-                      )
-                    }
-                  }}
-                />
-              </Box>
-            </Tab>
-            <Tab
-              title="Withdraw"
-              color="linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(53.456% 96.078% 91.912%) 6.25%, rgb(56.324% 92.549% 92.451%) 12.5%, rgb(59.191% 89.02% 92.99%) 18.75%, rgb(62.059% 85.49% 93.529%) 25%, rgb(64.926% 81.961% 94.069%) 31.25%, rgb(67.794% 78.431% 94.608%) 37.5%, rgb(70.662% 74.902% 95.147%) 43.75%, rgb(73.529% 71.373% 95.686%) 50%, rgb(76.397% 67.843% 96.225%) 56.25%, rgb(79.265% 64.314% 96.765%) 62.5%, rgb(82.132% 60.784% 97.304%) 68.75%, rgb(85% 57.255% 97.843%) 75%, rgb(87.868% 53.725% 98.382%) 81.25%, rgb(90.735% 50.196% 98.922%) 87.5%, rgb(93.603% 46.667% 99.461%) 93.75%, rgb(96.471% 43.137% 100%) 100% )"
-            >
-              <br />
-              <Box direction="column">
-                <CryptoInput
-                  maxValue={currentSpBalance}
-                  value={String(withdrawAmnt)}
-                  onChange={setWithdrawAmnt}
-                  onChangeCurrency={() => setIsQuid(!isQuid)}
-                />
-                <br />
-                <Button
-                  primary
-                  disabled={!withdrawAmnt}
-                  // color="gradient"
-                  label="Confirm"
-                  alignSelf="center"
-                  size="large"
-                  // fill
-                  style={{
-                    width: '90%',
-                    margin: '0 auto',
-                    textAlign: 'center',
-                  }}
-                  onClick={async () => {
-                    if (withdrawAmnt) {
-                      contract?.renege(
-                        {
-                          amount: utils.format.parseNearAmount(withdrawAmnt),
-                          sp: true,
-                          qd: false,
-                        },
-                        '300000000000000'
-                        // utils.format.parseNearAmount('0.00001') || undefined
-                      )
-                    }
-                  }}
-                />
-              </Box>
-            </Tab>
-          </Tabs>
-        </Box>
-        {/*  Stats Box */}
-        <Box
-          width={{ max: '500px', width: '90%' }}
-          background="background-back"
-          // animation="slideDown"
-          gap="xxsmall"
-          pad="medium"
-          round="small"
-          direction="column"
-          margin="large"
-        >
-          <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" margin="xxsmall">
-              Pool Near
-            </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(stats?.blood_debit || '0')}
-            </Text>
-          </Box>
-          <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" weight="lighter" margin="xxsmall">
-              My Staked Near
-            </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(pledged?.near_sp || '0')}
-            </Text>
+          <Box direction="column">
+            <SwapInput
+              value={String(swapAmount)}
+              maxValue={currentBalance}
+              onChange={setSwapAmount}
+              swapQuote={swapQuote}
+              onChangeCurrency={() => setIsQuid(!isQuid)}
+            />
+            <br />
+            <Button
+              primary
+              disabled={!swapAmount || isSwapping}
+              label="Confirm"
+              alignSelf="center"
+              size="large"
+              icon={isSwapping ? <Spinner /> : undefined}
+              style={{
+                width: '90%',
+                margin: '0 auto',
+                textAlign: 'center',
+              }}
+              onClick={handleSwap}
+            />
           </Box>
-          <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" margin="xxsmall">
-              Pool qUid
-            </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(stats?.blood_credit || '0')}
-            </Text>
-          </Box>
-          <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" weight="lighter" margin="xxsmall">
-              My Staked Quid
-            </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
-              {utils.format.formatNearAmount(pledged?.quid_sp || '0')}
+          {/*  Stats Box */}
+          <Box
+            background="background-back"
+            // animation="slideDown"
+            gap="xxsmall"
+            pad="medium"
+            round="small"
+            direction="column"
+            margin="large"
+          >
+            {/*<Text*/}
+            {/*  weight="lighter"*/}
+            {/*  size="xsmall"*/}
+            {/*  alignSelf="end"*/}
+            {/*  color="text-weak"*/}
+            {/*>*/}
+            {/*  {nearQuote && Number(swapAmount)*/}
+            {/*    ? `Approximate value: ~${nearQuote.toFixed(2)} usd`*/}
+            {/*    : null}*/}
+            {/*</Text>*/}
+            <Text
+              weight="lighter"
+              size="xsmall"
+              alignSelf="end"
+              color="text-weak"
+            >
+              Price Impact: ~1%
             </Text>
+            {/*<Text*/}
+            {/*  weight="lighter"*/}
+            {/*  size="xsmall"*/}
+            {/*  alignSelf="end"*/}
+            {/*  color="text-weak"*/}
+            {/*>*/}
+            {/*  Minimum after slippage: ~$*/}
+            {/*  {(Number(nearQuote) * 0.95).toFixed(2)} usd*/}
+            {/*</Text>*/}
           </Box>
         </Box>
       </Box>
@@ -206,4 +153,4 @@ const Stake: React.FC = () => {
   )
 }
 
-export default Stake
+export default Swap
diff --git a/src/redux/walletSlice.ts b/src/redux/walletSlice.ts
index 0542b1a..d4a69c5 100644
--- a/src/redux/walletSlice.ts
+++ b/src/redux/walletSlice.ts
@@ -3,12 +3,12 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import type { RootState } from './store'
 
 // Define a type for the slice state
-interface WalletState {
+interface WalletStateType {
   wallet: Record<string, unknown> | null
 }
 
 // Define the initial state using that type
-const initialState: WalletState = {
+const initialState: WalletStateType = {
   wallet: null,
 }