Sign messages

OriginProtocol · Sep 21, 2023 · 5198546 · 5198546
1 parent 9597af3
commit 5198546
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 44 deletions.
diff --git a/apps/governance/src/components/AppState.tsx b/apps/governance/src/components/AppState.tsx
@@ -46,6 +46,7 @@ export interface IAppState {
   walletBalance: number;
   rewardsToCollect: number;
   devControls: boolean;
+  waitForTx: boolean;
 }
 
 export const initialState: IAppState = {
@@ -57,6 +58,7 @@ export const initialState: IAppState = {
   walletBalance: 0,
   rewardsToCollect: 0,
   devControls: false,
+  waitForTx: false,
 };
 
 interface StateContextProps {

diff --git a/apps/governance/src/components/WaitForTx.tsx b/apps/governance/src/components/WaitForTx.tsx
@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+
+import { StateContext } from '../components/AppState';
+
+export function WaitForTx({ children }: { children: React.ReactNode }) {
+  const { state, setState } = useContext(StateContext);
+  return (
+    <>
+      <div className={state.waitForTx ? 'blur-sm pointer-events-none' : null}>
+        {children}
+      </div>
+      {!state.waitForTx ? null : (
+        <div
+          className="fixed inset-0 flex items-center justify-center"
+          onClick={() => setState({ waitForTx: false })}
+        >
+          <div className="bg-blue-500 text-3xl text-off-white rounded-lg z-50 font-bold px-8 py-5 leading-tight max-w-[280px]">
+            Sign approval in wallet...
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/governance/src/pages/app.tsx b/apps/governance/src/pages/app.tsx
@@ -3,15 +3,18 @@ import { Outlet } from 'react-router-dom';
 import { DevControls } from '../components/DevControls';
 import { Nav } from '../components/Nav';
 import { Toaster } from '../components/Toaster';
+import { WaitForTx } from '../components/WaitForTx';
 import { ExtendStakeModal, StakeModal } from './staking/StakeModal';
 
 export function App() {
   return (
     <>
-      <Nav />
-      <div className="container mx-auto max-w-6xl px-3 sm:px-6">
-        <Outlet />
-      </div>
+      <WaitForTx>
+        <Nav />
+        <div className="container mx-auto max-w-6xl px-3 sm:px-6">
+          <Outlet />
+        </div>
+      </WaitForTx>
       <StakeModal />
       <ExtendStakeModal />
       <Toaster />

diff --git a/...ce/src/pages/staking/RewardsToCollect.tsx → ...ance/src/pages/staking/CollectRewards.tsx b/...ce/src/pages/staking/RewardsToCollect.tsx → ...ance/src/pages/staking/CollectRewards.tsx
@@ -1,12 +1,38 @@
 import { useContext, useEffect, useState } from 'react';
 
+import { useSignMessage } from 'wagmi';
+
 import OGVIcon from '../../assets/ogv.svg';
 import { StateContext } from '../../components/AppState';
 import { NumberSpinner } from '../../components/NumberSpinner';
 
-export const RewardsToCollect = () => {
+export const CollectRewards = () => {
   const { state, setState } = useContext(StateContext);
 
+  const { signMessage } = useSignMessage({
+    message: 'Collect rewards',
+    onSuccess: () => {
+      setState({ waitForTx: false });
+      setMode('pending');
+      setTimeout(() => {
+        setMode('collect');
+        setState({
+          rewardsToCollect: 0,
+          walletBalance: state.walletBalance + state.rewardsToCollect,
+          toast: {
+            title: 'OGV rewards collected',
+            text: `${state.rewardsToCollect.toLocaleString()} OGV`,
+            icon: 'OGV',
+          },
+        });
+      }, 3000);
+    },
+    onError: () => {
+      setState({ waitForTx: false });
+      setMode('collect');
+    },
+  });
+
   const totalLocked = state.lockups.reduce((m, l) => {
     return m + l.tokens;
   }, 0);
@@ -26,29 +52,6 @@ export const RewardsToCollect = () => {
     return () => clearInterval(i);
   }, [totalLocked, state.rewardsToCollect]);
 
-  function collect() {
-    if (disabled) {
-      return;
-    }
-    if (mode === 'collect') {
-      setMode('confirm');
-    } else if (mode === 'confirm') {
-      setMode('pending');
-    } else {
-      setState({
-        rewardsToCollect: 0,
-        walletBalance: state.walletBalance + state.rewardsToCollect,
-        toast: {
-          title: 'OGV rewards collected',
-          text: `${state.rewardsToCollect.toLocaleString()} OGV`,
-          icon: 'OGV',
-        },
-      });
-
-      setMode('collect');
-    }
-  }
-
   return (
     <div className="bg-gray-900 rounded-lg text-sm p-6">
       <div className="text-gray-500">Rewards Available to collect</div>
@@ -65,7 +68,10 @@ export const RewardsToCollect = () => {
         className={`${btnClass} mt-6 px-4 py-2 w-full`}
         onClick={(e) => {
           e.stopPropagation();
-          collect();
+          if (mode === 'collect') {
+            setState({ waitForTx: true });
+            signMessage();
+          }
         }}
       >
         {mode === 'confirm'

diff --git a/apps/governance/src/pages/staking/MyLockups.tsx b/apps/governance/src/pages/staking/MyLockups.tsx
@@ -132,12 +132,8 @@ const UnstakeButton = ({ lockup }: { lockup: Lockup }) => {
 
   const { signMessage } = useSignMessage({
     message: 'Confirm unstake',
-    onSuccess: () => {
-      setMode('pending');
-    },
-    onError: () => {
-      setMode('unstake');
-    },
+    onSuccess: () => setMode('pending'),
+    onError: () => setMode('unstake'),
   });
 
   const disabled = lockup.endsAt > Date.now();

diff --git a/apps/governance/src/pages/staking/StakeModal.tsx b/apps/governance/src/pages/staking/StakeModal.tsx
@@ -1,5 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 
+import { useSignMessage } from 'wagmi';
+
 import OGVIcon from '../../assets/ogv.svg';
 import veOGVIcon from '../../assets/ve-ogv.svg';
 import { AnimatedModal, ModalHeader } from '../../components/AnimatedModal';
@@ -22,6 +24,18 @@ export const StakeModal = () => {
   const [mode, setMode] = useState('start');
   const [shouldClose, setShouldClose] = useState(false);
 
+  const { signMessage: signApproval } = useSignMessage({
+    message: 'Approve token',
+    onSuccess: () => setMode('stake'),
+    onError: () => setMode('start'),
+  });
+
+  const { signMessage: signStake } = useSignMessage({
+    message: 'Stake tokens',
+    onSuccess: () => onStake(),
+    onError: () => setMode('stake'),
+  });
+
   useEffect(() => {
     if (!amount || amount === '0') {
       setAmount(String(state.walletBalance));
@@ -62,10 +76,7 @@ export const StakeModal = () => {
       }}
     >
       {!sign ? null : (
-        <div
-          className="absolute inset-0 flex items-center justify-center"
-          onClick={() => setMode(mode === 'approve' ? 'stake' : 'done-stake')}
-        >
+        <div className="absolute inset-0 flex items-center justify-center">
           <div className="bg-blue-500 text-3xl text-off-white rounded-lg z-50 font-bold px-8 py-5 mx-24 leading-tight">
             Sign approval in wallet
           </div>
@@ -133,9 +144,11 @@ export const StakeModal = () => {
             className="btn w-full py-4 text-base leading-none"
             onClick={() => {
               if (mode === 'stake') {
-                onStake();
-              } else {
-                setMode(mode === 'start' ? 'approve' : 'approve-stake');
+                setMode('approve-stake');
+                signStake();
+              } else if (mode === 'start') {
+                setMode('approve');
+                signApproval();
               }
             }}
           >

diff --git a/apps/governance/src/pages/staking/index.tsx b/apps/governance/src/pages/staking/index.tsx
@@ -3,9 +3,9 @@ import { useContext } from 'react';
 import { Actions } from '../../components/Actions';
 import { StateContext } from '../../components/AppState';
 import { Heading } from '../../components/Heading';
+import { CollectRewards } from './CollectRewards';
 import { MyLockups } from './MyLockups';
 import { MyStake } from './MyStake';
-import { RewardsToCollect } from './RewardsToCollect';
 import { Stats } from './Stats';
 import { VotingPower } from './VotingPower';
 
@@ -22,7 +22,7 @@ export const Staking = () => {
           <MyLockups lockups={state.lockups} />
         </div>
         <div className="flex flex-col gap-6 sm:w-[375px]">
-          <RewardsToCollect />
+          <CollectRewards />
           <VotingPower />
         </div>
       </div>