feat(State2): Show correct withdrawable DEFI++ tokens and update with…

…drawal flow
pie-dao · Jun 6, 2022 · 37ec72c · 37ec72c
1 parent b6babb3
commit 37ec72c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/components/balance.tsx b/components/balance.tsx
@@ -1,4 +1,4 @@
-import { ethers } from "ethers";
+import { BigNumber, ethers } from "ethers";
 import { useStoreState } from "hooks/useStore";
 import { MigratorOpenState } from "store/slice";
 import { useConnect } from "wagmi";
@@ -87,7 +87,12 @@ const BalanceState: React.FC = () => {
             Your can withdraw:{" "}
             <span className="text-primary-dark font-bold">
               {formatDisplayNumber(
-                ethers.utils.formatUnits(state.userDeposits, state.decimals)
+                ethers.utils.formatUnits(
+                  BigNumber.from(state.userDeposits).mul(
+                    BigNumber.from(state.rate)
+                  ),
+                  state.decimals
+                )
               )}{" "}
               DEFI++
             </span>

diff --git a/components/notification.tsx b/components/notification.tsx
@@ -26,6 +26,11 @@ export const approvalSuccessNotification = () => {
   toast("Approval Successful!", { type: "success" });
 };
 
+export const withdrawalSuccessNotification = () => {
+  toast.dismiss();
+  toast("Withdrawal Successful!", { type: "success" });
+};
+
 export const errorNotification = (err: string) => {
   toast.dismiss();
   toast(`Deposit Failed... ${err}`, { type: "error" });

diff --git a/store/slice.ts b/store/slice.ts
@@ -1,12 +1,18 @@
 import {
   approvalSuccessNotification,
   depositSuccessNotification,
+  withdrawalSuccessNotification,
   errorNotification,
   infoNotification,
 } from "@components/notification";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { BigNumber, ethers } from "ethers";
-import { thunkApprove, thunkDeposit, thunkGetData } from "./thunks";
+import {
+  thunkApprove,
+  thunkDeposit,
+  thunkGetData,
+  thunkWithdraw,
+} from "./thunks";
 
 export enum MigratorOpenState {
   Open,
@@ -25,6 +31,7 @@ export type RootState = {
   approvalLimit: BigNumberString;
   userDeposits: BigNumberString;
   loading: boolean;
+  rate: BigNumberString;
 };
 
 const appSlice = createSlice({
@@ -37,6 +44,7 @@ const appSlice = createSlice({
     approvalLimit: "0",
     userDeposits: "0",
     loading: false,
+    rate: "0",
   } as RootState,
 
   extraReducers: (builder) => {
@@ -77,6 +85,21 @@ const appSlice = createSlice({
       errorNotification(action.error.message ?? "Unknown Error");
     });
 
+    builder.addCase(thunkWithdraw.pending, (state) => {
+      state.loading = true;
+      infoNotification("Withdrawal Request In Progress...");
+    });
+
+    builder.addCase(thunkWithdraw.rejected, (state, action) => {
+      state.loading = false;
+      errorNotification(action.error.message ?? "Unknown Error");
+    });
+
+    builder.addCase(thunkWithdraw.fulfilled, (state) => {
+      state.loading = false;
+      withdrawalSuccessNotification();
+    });
+
     builder.addCase(thunkGetData.pending, (state) => {
       state.loading = true;
     });
@@ -110,6 +133,7 @@ const appSlice = createSlice({
       state.migratorOpenState = action.payload.newState.migratorOpenState;
       state.totalDeposits = action.payload.newState.totalDeposits;
       state.userDeposits = action.payload.newState.userDeposits;
+      state.rate = action.payload.newState.rate;
     },
 
     setDeposit: (state, action: PayloadAction<{ depositAmount: string }>) => {

diff --git a/store/thunks.ts b/store/thunks.ts
@@ -90,6 +90,7 @@ export const thunkGetData = createAsyncThunk(
     const approvalLimit = account
       ? bdi.allowance(account, addresses.contracts.BASKET_MIGRATOR)
       : 0;
+    const rate = migrator.rate();
 
     const results = await promiseObject({
       decimals,
@@ -98,6 +99,7 @@ export const thunkGetData = createAsyncThunk(
       balance,
       approvalLimit,
       userDeposits,
+      rate,
     });
 
     return {
@@ -107,6 +109,7 @@ export const thunkGetData = createAsyncThunk(
       totalDeposits: results.totalDeposits.toString(),
       migratorOpenState: results.migratorOpenState,
       userDeposits: results.userDeposits.toString(),
+      rate: results.rate.toString(),
     };
   }
 );