Merge branch 'feat/governance' into fix/gov

apps/governance/src/pages/staking/Actions.tsx → apps/governance/src/components/Actions.tsx

@@ -2,8 +2,8 @@ import { useContext } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { StateContext } from '../../components/AppState';
-import { ExternalLink } from '../../components/Icons';
+import { StateContext } from './AppState';
+import { ExternalLink } from './Icons';
 
 export const Actions = () => {
   const { setState } = useContext(StateContext);

apps/governance/src/components/AnimatedModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 
 import { Modal } from '@mui/base/Modal';
 import { animated, useSpring } from '@react-spring/web';
@@ -83,7 +83,7 @@ interface BackdropProps {
   style: object;
 }
 
-const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(
+const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(
   function Backdrop(props, ref) {
     const { className, onClick, style } = props;
     return (

apps/governance/src/components/DevControls.tsx

@@ -40,18 +40,16 @@ export const DevControls = () => {
           <button
             className="btn-outline py-2 text-sm"
             onClick={() => {
-              const sixMonths = 1000 * 60 * 60 * 24 * 30 * 6;
               setState({
                 lockups: state.lockups.map((l) => ({
                   ...l,
-                  endsAt:
-                    l.endsAt + (l.endsAt > Date.now() ? -sixMonths : sixMonths),
+                  endsAt: Date.now(),
                 })),
               });
               setShouldClose(true);
             }}
           >
-            +6 months
+            End lockups
           </button>
         </div>
       </AnimatedModal>

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/StyledSlider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Slider } from '@mui/base/Slider';
 import { clsx } from 'clsx';
@@ -8,7 +8,7 @@ import type { SliderProps } from '@mui/base/Slider';
 const resolveSlotProps = (fn: unknown, args: unknown) =>
   typeof fn === 'function' ? fn(args) : fn;
 
-export const StyledSlider = React.forwardRef<HTMLSpanElement, SliderProps>(
+export const StyledSlider = forwardRef<HTMLSpanElement, SliderProps>(
   (props, ref) => {
     return (
       <Slider

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

@@ -3,16 +3,15 @@ import '@rainbow-me/rainbowkit/styles.css';
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 
-import { chains, wagmiConfig } from '@origin/oeth/shared';
 import { darkTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 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';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
@@ -25,7 +24,6 @@ const router = createHashRouter([
     children: [
       { index: true, element: <Staking /> },
       { path: '/governance', element: <Governance /> },
-      { path: '/spinner', element: <Spinner /> },
     ],
   },
 ]);

apps/governance/src/pages/governance/index.tsx

@@ -1,5 +1,11 @@
+import { Actions } from '../../components/Actions';
 import { Heading } from '../../components/Heading';
 
 export const Governance = () => {
-  return <Heading>Origin DeFi Governance</Heading>;
+  return (
+    <>
+      <Heading>Origin DeFi Governance</Heading>
+      <Actions />
+    </>
+  );
 };

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);
@@ -27,7 +28,7 @@ export const MyStake = () => {
             <div className="mt-2 h-[2.5px] w-3 bg-gray-500" />
           ) : (
             <div className="text-2xl font-bold">
-              {totalLocked.toLocaleString()}
+              <NumberSpinner num={totalLocked} slow />
             </div>
           )}
         </div>
@@ -38,7 +39,7 @@ export const MyStake = () => {
           <img src={OGVIcon} alt="OGV" />
           {isConnected ? (
             <div className="text-2xl font-bold">
-              <NumberSpinner num={state.walletBalance} slow spinAtStart />
+              <NumberSpinner num={state.walletBalance} slow />
             </div>
           ) : (
             <div className="mt-2 h-[2.5px] w-3 bg-gray-500" />
@@ -58,20 +59,26 @@ export const MyStake = () => {
         </div>
       </div>
       <div className="py-1">
-        {isConnected ? (
+        {!isConnected ? (
           <button
             className="btn w-full sm:w-auto sm:px-20 py-4 leading-none"
-            onClick={() => setState({ stakeModal: true })}
+            onClick={() => openConnectModal?.()}
           >
-            Stake
+            Connect
           </button>
-        ) : (
+        ) : state.walletBalance ? (
           <button
-            className="btn w-full sm:w-auto sm:px-20 py-4 leading-none"
-            onClick={() => openConnectModal?.()}
+            className={`btn w-full sm:w-auto sm:px-20 py-4 leading-none`}
+            onClick={() => setState({ stakeModal: true })}
           >
-            Connect
+            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/pages/staking/Stats.tsx

@@ -27,8 +27,7 @@ export const Stats = () => (
     <div className="flex flex-col items-start gap-3 pr-8">
       <div className="text-gray-500">Voting addresses</div>
       <div className="font-bold text-3xl">
-        {/* <NumberSpinner num={1462} slow spinAtStart /> */}
-        <NumberSpinner num={1462} slow spinAtStart />
+        <NumberSpinner num={1462} slow />
       </div>
     </div>
   </div>

apps/governance/src/pages/staking/index.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 
+import { Actions } from '../../components/Actions';
 import { StateContext } from '../../components/AppState';
 import { Heading } from '../../components/Heading';
-import { Actions } from './Actions';
 import { MyLockups } from './MyLockups';
 import { MyStake } from './MyStake';
 import { RewardsToCollect } from './RewardsToCollect';