transaction overview done

gnosis · Oct 3, 2023 · 183b856 · 183b856
1 parent 941a07b
commit 183b856
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 52 deletions.
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -2,6 +2,8 @@ import React, { useMemo, useState } from "react";
 import { useShallow } from "zustand/shallow";
 import ActionButton from "../../components/ActionButton/ActionButton";
 import AddToken from "../../components/AddToken/AddToken";
+import TransactionOverview from "../../components/TransactionOverview/TransactionOverview";
+import ContractsOverview from "../../components/ContractsOverview/ContractsOverview";
 import "../../constants";
 import { usePrepareContractWrite, useContractWrite, erc20ABI } from "wagmi";
 
@@ -221,54 +223,65 @@ const Form: React.FC = () => {
     `page-component__main__action-modal-display__item${deposit === isDeposit ? "__action" : ""}`;
 
   return (
-    <div className="page-component__main__form w-3/5">
-      <div className="page-component__main__action-modal-display">
-        <div className={actionModalDisplay(true)} onClick={() => setIsDeposit(true)}>
-          Deposit
-        </div>
-        <div className={actionModalDisplay(false)} onClick={() => setIsDeposit(false)}>
-          Redeem
+    <div className="page-component__main__action-modal gap-10">
+      <div className="page-component__main__form w-3/5">
+        <div className="page-component__main__action-modal-display">
+          <div className={actionModalDisplay(true)} onClick={() => setIsDeposit(true)}>
+            Deposit
+          </div>
+          <div className={actionModalDisplay(false)} onClick={() => setIsDeposit(false)}>
+            Redeem
+          </div>
         </div>
-      </div>
 
-      <TokenInput
-        onBalanceChange={(token, balance, max) => setTokenInput({ token, balance, max })}
-        deposit={isDeposit}
-      />
+        <TokenInput
+          onBalanceChange={(token, balance, max) => setTokenInput({ token, balance, max })}
+          deposit={isDeposit}
+        />
 
-      <div className="page-component__main__asset__margin my-1">
-        <div className="page-component__main__receiver">
-          <div className="px-2 text-[#45433C] text-l font-medium">
-            <p>Receiving address</p> 
-          </div>
-          <div className="flex flex-row flex-grow items-center rounded-xl border border-[#DDDAD0] bg-white py-3 px-5 h-14">
-            <div className="w-full">
-            <input
-              className="h-full text-[#45433C] text-xl"
-              type="text"
-              placeholder="0x124...5678"
-              onChange={e => e.target.value && setReceiver(e.target.value as `0x${string}`)}
-              autoComplete="off"
-              value={receiver}
-            />
+        <div className="page-component__main__asset__margin my-1">
+          <div className="page-component__main__receiver">
+            <div className="px-2 text-[#45433C] text-l font-medium">
+              <p>Receiving address</p>
+            </div>
+            <div className="flex flex-row flex-grow items-center rounded-xl border border-[#DDDAD0] bg-white py-3 px-5 h-14">
+              <div className="w-full">
+                <input
+                  className="h-full text-[#45433C] text-xl"
+                  type="text"
+                  placeholder="0x124...5678"
+                  onChange={e => e.target.value && setReceiver(e.target.value as `0x${string}`)}
+                  autoComplete="off"
+                  value={receiver}
+                />
+              </div>
+              <button
+                className="h-full font-bold ml-2 text-sm text-[#7A776D] text-center"
+                onClick={myAddress}
+              >
+                Me
+              </button>
             </div>
-            <button className="h-full font-bold ml-2 text-sm text-[#7A776D] text-center" onClick={myAddress}>
-              Me
-            </button>
           </div>
         </div>
+        <div className="page-component__main__input__btns">
+          <ActionButton
+            method={action.name}
+            mutationTrigger={method.write}
+            mutationData={method.data}
+            onSettled={onSettled}
+          />
+        </div>
+
+        <AddToken />
       </div>
-      <div className="page-component__main__input__btns">
-        <ActionButton
-          method={action.name}
-          mutationTrigger={method.write}
-          mutationData={method.data}
-          onSettled={onSettled}
+      <div className="page-component__main__info w-2/5 gap-2">
+        <TransactionOverview
+          tokenInput={tokenInput}
+          isDeposit={isDeposit}
         />
+        <ContractsOverview />
       </div>
-
-        <AddToken/>
-
     </div>
   );
 };

diff --git a/src/components/TransactionOverview/TransactionOverview.tsx b/src/components/TransactionOverview/TransactionOverview.tsx
@@ -1,20 +1,48 @@
 import { formatUnits } from "ethers";
 
+// Components
+import { type Token } from "../TokenSelector/TokenSelector";
+import { ZERO } from "../../constants";
+
+// Hooks
+import { useConvertToAssets, useConvertToShares } from "../../hooks/useData";
+
+export type TokenInputProps = {
+  isDeposit: boolean;
+  tokenInput: { token: Token; balance: bigint; max: bigint } | undefined;
+};
+
+const TransactionOverview: React.FC<TokenInputProps> = ({ isDeposit, tokenInput }) => {
+
+  const assets = useConvertToAssets(BigInt(1e18)).data;
+  const toShares = useConvertToShares(tokenInput?.balance ?? BigInt(0)).data;
+  const toAssets = useConvertToAssets(tokenInput?.balance ?? BigInt(0)).data;
+
+  const formatBalance = (balance?: bigint) => {
+    return new Number(formatUnits(balance ?? 0n, 18)).toFixed(2);
+  };
 
-const TransactionOverview: React.FC = () => {
-  const assets = BigInt(11e17);
-  const shares = BigInt(1e18);
   return (
     <div className="rounded-2xl border border-[#DDDAD0] bg-[#F9F7F5] divide-y divide-solid text-left">
       <div className="text-[#7A776D] font-semibold text-base my-2 mx-5">Transaction overview</div>
       <div className="p-4">
         <div className="page-component__txinfo-data__row py-1">
           <div className=" text-[#7A776D] font-semibold text-sm">Exchange rate</div>
-          <div className="text-[#45433C] font-semibold text-base">{`1 sDAI -> ${formatUnits(assets)}`}</div>
+          <div className="text-[#45433C] font-semibold text-base">{`1 sDAI -> ${formatBalance(
+            assets ?? BigInt(0),
+          )} ${tokenInput?.token.name}`}</div>
         </div>
         <div className="page-component__txinfo-data__row py-1">
           <div className="text-[#7A776D] font-semibold text-sm">You receive</div>
-          <div className="text-[#45433C] font-semibold text-base">{`${formatUnits(shares)} sDAI worth ${formatUnits(assets)} xDAI`}</div>
+          {isDeposit ? (
+            <div className="text-[#45433C] font-semibold text-base">{`${formatBalance(
+              toShares,
+            )} sDAI worth ${formatBalance(tokenInput?.balance)} ${tokenInput?.token.name}`}</div>
+          ) : (
+            <div className="text-[#45433C] font-semibold text-base">{`${formatBalance(tokenInput?.balance)} ${tokenInput?.token.name} worth ${formatBalance(
+              toShares,
+            )} sDAI`}</div>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -9,8 +9,6 @@ import { useAccountShareValue } from "../../hooks/useAccountShareValue";
 // Components
 import Card from "../../components/Card/Card";
 import Form from "../../components/Form/Form";
-import TransactionOverview from "../../components/TransactionOverview/TransactionOverview";
-import ContractsOverview from "../../components/ContractsOverview/ContractsOverview";
 // CSS
 import "./Home.css";
 
@@ -87,13 +85,9 @@ export const Home = () => {
                   currency="%"
                 />
               </div>
-              <div className="page-component__main__action-modal gap-10">
+
                 <Form />
-                <div className="page-component__main__info w-2/5 gap-2">
-                  <TransactionOverview />
-                  <ContractsOverview />
-                </div>
-              </div>
+
             </div>
           </div>
           <div className="footer w-full bg-[#F9F7F5]">