Signing

apps/governance/src/components/Icons.tsx

@@ -114,3 +114,24 @@ export const Profile = ({ size = 28 }: { size?: number }) => (
     />
   </svg>
 );
+
+export const Spinner = ({ size = 20 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 512 512"
+    className="animate-spin"
+  >
+    <g>
+      <path
+        fill="currentColor"
+        d="M478.71 364.58zm-22 6.11l-27.83-15.9a15.92 15.92 0 0 1-6.94-19.2A184 184 0 1 1 256 72c5.89 0 11.71.29 17.46.83-.74-.07-1.48-.15-2.23-.21-8.49-.69-15.23-7.31-15.23-15.83v-32a16 16 0 0 1 15.34-16C266.24 8.46 261.18 8 256 8 119 8 8 119 8 256s111 248 248 248c98 0 182.42-56.95 222.71-139.42-4.13 7.86-14.23 10.55-22 6.11z"
+      />
+      <path
+        fill="currentColor"
+        d="M271.23 72.62c-8.49-.69-15.23-7.31-15.23-15.83V24.73c0-9.11 7.67-16.78 16.77-16.17C401.92 17.18 504 124.67 504 256a246 246 0 0 1-25 108.24c-4 8.17-14.37 11-22.26 6.45l-27.84-15.9c-7.41-4.23-9.83-13.35-6.2-21.07A182.53 182.53 0 0 0 440 256c0-96.49-74.27-175.63-168.77-183.38z"
+        className="opacity-25"
+      />
+    </g>
+  </svg>
+);

apps/governance/src/components/Tooltip.tsx

@@ -80,10 +80,10 @@ const PopAnimation = (props: PopupChildrenProps & { children: ReactNode }) => {
   return (
     <animated.div
       style={style}
-      className="bg-gray-800 rounded px-3 py-1 text-off-white text-sm font-medium relative"
+      className="bg-gray-700 rounded px-3 py-1 text-off-white text-sm font-medium relative"
     >
       <div
-        className={`absolute transform w-2.5 h-2.5 bg-gray-800 rotate-45 ${arrowClass}`}
+        className={`absolute transform w-2.5 h-2.5 bg-gray-700 rotate-45 ${arrowClass}`}
       />
       {children}
     </animated.div>

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: <Staking /> },
       { path: '/governance', element: <Governance /> },
-      { path: '/spinner', element: <Spinner /> },
     ],
   },
 ]);

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)}
     >
       <div className={`${rowClass} flex pl-6 gap-2`}>
         <img src={OGVIcon} alt="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 (
+      <button
+        className="btn-outline-disabled text-xs pl-3 pr-4 py-2 flex items-center gap-2"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Spinner size={14} />
+        {mode === 'confirm' ? 'Confirm...' : 'Pending...'}
+      </button>
+    );
+  }
+
   return (
     <button
-      className={`${btnClass} text-xs px-4 py-2`}
+      className={`${btnClass} text-xs px-4 py-2 flex items-center gap-2`}
       onClick={(e) => {
         e.stopPropagation();
         unstake();
       }}
     >
-      {mode === 'confirm'
-        ? 'Confirm'
-        : mode === 'pending'
-        ? 'Pending'
-        : 'Unstake'}
+      {mode === 'confirm' ? 'Confirm' : 'Unstake'}
     </button>
   );
 };

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 = () => {
         </div>
       </div>
       <div className="py-1">
-        {isConnected ? (
-          <button
-            className={`${
-              state.walletBalance ? 'btn' : 'btn-disabled'
-            } w-full sm:w-auto sm:px-20 py-4 leading-none`}
-            onClick={() => setState({ stakeModal: true })}
-          >
-            Stake
-          </button>
-        ) : (
+        {!isConnected ? (
           <button
             className="btn w-full sm:w-auto sm:px-20 py-4 leading-none"
             onClick={() => openConnectModal?.()}
           >
             Connect
           </button>
+        ) : state.walletBalance ? (
+          <button
+            className={`btn w-full sm:w-auto sm:px-20 py-4 leading-none`}
+            onClick={() => setState({ stakeModal: true })}
+          >
+            Stake
+          </button>
+        ) : (
+          <Tooltip title="You must have OGV in your wallet to stake.">
+            <button className="btn-disabled w-full sm:w-auto sm:px-20 py-4 leading-none">
+              Stake
+            </button>
+          </Tooltip>
         )}
       </div>
     </div>

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