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)}
>
@@ -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;
}