From bab762fdc6949d1eb80e3775444b4eaac379e294 Mon Sep 17 00:00:00 2001 From: Nick Poulden Date: Thu, 21 Sep 2023 09:01:23 -0600 Subject: [PATCH] Signing --- apps/governance/src/components/Icons.tsx | 21 ++++++ apps/governance/src/components/Tooltip.tsx | 4 +- apps/governance/src/main.tsx | 2 - apps/governance/src/pages/Spinner.tsx | 74 ------------------- .../src/pages/staking/MyLockups.tsx | 47 +++++++++--- apps/governance/src/pages/staking/MyStake.tsx | 25 ++++--- apps/governance/src/styles.css | 15 ++-- 7 files changed, 83 insertions(+), 105 deletions(-) delete mode 100644 apps/governance/src/pages/Spinner.tsx diff --git a/apps/governance/src/components/Icons.tsx b/apps/governance/src/components/Icons.tsx index f15bd3907..0a256af7f 100644 --- a/apps/governance/src/components/Icons.tsx +++ b/apps/governance/src/components/Icons.tsx @@ -114,3 +114,24 @@ export const Profile = ({ size = 28 }: { size?: number }) => ( /> ); + +export const Spinner = ({ size = 20 }: { size?: number }) => ( + + + + + + +); diff --git a/apps/governance/src/components/Tooltip.tsx b/apps/governance/src/components/Tooltip.tsx index b674c720c..5d03db41a 100644 --- a/apps/governance/src/components/Tooltip.tsx +++ b/apps/governance/src/components/Tooltip.tsx @@ -80,10 +80,10 @@ const PopAnimation = (props: PopupChildrenProps & { children: ReactNode }) => { return (
{children} diff --git a/apps/governance/src/main.tsx b/apps/governance/src/main.tsx index 7babb6a75..29f32f257 100644 --- a/apps/governance/src/main.tsx +++ b/apps/governance/src/main.tsx @@ -10,7 +10,6 @@ import { WagmiConfig } from 'wagmi'; import { StateProvider } from './components/AppState'; import { App } from './pages/app'; import { Governance } from './pages/governance'; -import { Spinner } from './pages/Spinner'; import { Staking } from './pages/staking'; import { chains, wagmiConfig } from './utils/wagmi'; @@ -25,7 +24,6 @@ const router = createHashRouter([ children: [ { index: true, element: }, { path: '/governance', element: }, - { path: '/spinner', element: }, ], }, ]); diff --git a/apps/governance/src/pages/Spinner.tsx b/apps/governance/src/pages/Spinner.tsx deleted file mode 100644 index 3da29cb31..000000000 --- a/apps/governance/src/pages/Spinner.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { NumberSpinner } from '../components/NumberSpinner'; - -export const Spinner = () => { - const [num, setNum] = useState(1); - const [reset, setReset] = useState(0); - const [show, setShow] = useState(false); - - useEffect(() => { - setShow(false); - setTimeout(() => { - setShow(true); - }, 1); - }, [reset]); - - return ( -
-
- {show && } -
-
- - - - - - - - -
-
- ); -}; diff --git a/apps/governance/src/pages/staking/MyLockups.tsx b/apps/governance/src/pages/staking/MyLockups.tsx index 67a1afb9d..fc9e305b0 100644 --- a/apps/governance/src/pages/staking/MyLockups.tsx +++ b/apps/governance/src/pages/staking/MyLockups.tsx @@ -1,9 +1,11 @@ -import { useContext, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; + +import { useSignMessage } from 'wagmi'; import OGVIcon from '../../assets/ogv.svg'; import veOGVIcon from '../../assets/ve-ogv.svg'; import { StateContext } from '../../components/AppState'; -import { CaretDown, ExternalLink } from '../../components/Icons'; +import { CaretDown, ExternalLink, Spinner } from '../../components/Icons'; import { estimateTimeToFutureTimestamp, formatDateFromTimestamp, @@ -71,7 +73,7 @@ const LockupRow = (props: { className={`contents${ props.disableActions ? '' : ' cursor-pointer group' }`} - onClick={() => (props.disableActions ? null : setOpen(!open))} + onClick={() => setOpen(!open)} >
veOGV @@ -122,6 +124,22 @@ const UnstakeButton = ({ lockup }: { lockup: Lockup }) => { const { state, setState } = useContext(StateContext); const [mode, setMode] = useState('unstake'); + useEffect(() => { + if (mode !== 'pending') return; + const timeout = setTimeout(unstake, 5000); + return () => clearTimeout(timeout); + }, [mode]); + + const { signMessage } = useSignMessage({ + message: 'Confirm unstake', + onSuccess: () => { + setMode('pending'); + }, + onError: () => { + setMode('unstake'); + }, + }); + const disabled = lockup.endsAt > Date.now(); const btnClass = disabled || mode !== 'unstake' ? 'btn-outline-disabled' : 'btn-outline'; @@ -132,8 +150,9 @@ const UnstakeButton = ({ lockup }: { lockup: Lockup }) => { } if (mode === 'unstake') { setMode('confirm'); + signMessage(); } else if (mode === 'confirm') { - setMode('pending'); + /* Ignore */ } else { setState({ walletBalance: state.walletBalance + lockup.tokens, @@ -147,19 +166,27 @@ const UnstakeButton = ({ lockup }: { lockup: Lockup }) => { } } + if (mode === 'pending' || mode === 'confirm') { + return ( + + ); + } + return ( ); }; diff --git a/apps/governance/src/pages/staking/MyStake.tsx b/apps/governance/src/pages/staking/MyStake.tsx index fe9584d9a..145204e76 100644 --- a/apps/governance/src/pages/staking/MyStake.tsx +++ b/apps/governance/src/pages/staking/MyStake.tsx @@ -7,6 +7,7 @@ import OGVIcon from '../../assets/ogv.svg'; import { StateContext } from '../../components/AppState'; import { ExternalLink } from '../../components/Icons'; import { NumberSpinner } from '../../components/NumberSpinner'; +import { Tooltip } from '../../components/Tooltip'; export const MyStake = () => { const { state, setState } = useContext(StateContext); @@ -58,22 +59,26 @@ export const MyStake = () => {
- {isConnected ? ( - - ) : ( + {!isConnected ? ( + ) : state.walletBalance ? ( + + ) : ( + + + )}
diff --git a/apps/governance/src/styles.css b/apps/governance/src/styles.css index f6f563697..77badee89 100644 --- a/apps/governance/src/styles.css +++ b/apps/governance/src/styles.css @@ -1,25 +1,26 @@ @tailwind base; @tailwind components; @tailwind utilities; -/* You can add global styles to this file, and also import other style files */ body { @apply bg-off-black text-off-white antialiased; } .btn { - @apply rounded-full bg-blue-gradient hover:bg-blue-gradient-light leading-tight font-medium; + @apply rounded-full leading-tight font-medium bg-blue-gradient hover:bg-blue-gradient-light; } .btn-disabled { - @apply rounded-full bg-blue-gradient leading-tight font-medium opacity-50 pointer-events-none; + @apply rounded-full leading-tight font-medium bg-blue-gradient opacity-50 pointer-events-none; } .btn-secondary { - @apply rounded-full bg-gray-900 font-medium hover:bg-gray-800 transition-all duration-200 ease-in-out; + @apply rounded-full leading-tight font-medium bg-gray-900 hover:bg-gray-800 transition-all duration-200 ease-in-out; +} +.btn-secondary-disabled { + @apply rounded-full leading-tight font-medium bg-gray-900 opacity-50 pointer-events-none; } - .btn-outline { - @apply border-blue-600 border rounded-full leading-tight hover:bg-blue-600 hover:text-off-black transition-all duration-200 ease-in-out cursor-pointer font-medium; + @apply rounded-full leading-tight font-medium border-blue-600 border hover:bg-blue-600 hover:text-off-black transition-all duration-200 ease-in-out cursor-pointer; } .btn-outline-disabled { - @apply border-blue-600/50 border rounded-full leading-tight text-off-white/30 font-medium; + @apply rounded-full leading-tight font-medium border-blue-600/50 border text-off-white/30; }