Dev controls

apps/governance/src/app/app.tsx

@@ -1,18 +1,23 @@
 import { useContext, useEffect, useState } from 'react';
 
+import { useAccountModal, useConnectModal } from '@rainbow-me/rainbowkit';
+import { Link } from 'react-router-dom';
 import { Outlet } from 'react-router-dom';
+import { useAccount } from 'wagmi';
 
 import Logo from '../assets/logo.svg';
 import OGVIcon from '../assets/ogv.svg';
 import veOGVIcon from '../assets/ve-ogv.svg';
 import { StateContext } from '../components/AppState';
+import { DevControls } from '../components/DevControls';
 import { ExternalLink, Info, Profile, Sync } from '../components/Icons';
 import { MyLockups } from '../components/MyLockups';
 import { NumberSpinner } from '../components/NumberSpinner';
 import { ExtendStakeModal, StakeModal } from '../components/StakeModal';
 import { Tabs } from '../components/Tabs';
 import { Toaster } from '../components/Toaster';
 import { Tooltip } from '../components/Tooltip';
+import { truncateAddress } from '../utils/string';
 
 import type { ReactNode } from 'react';
 
@@ -26,6 +31,7 @@ export function App() {
       </div>
       <StakeModal />
       <ExtendStakeModal />
+      <DevControls />
     </>
   );
 }
@@ -56,7 +62,10 @@ export const Staking = () => {
 };
 
 const Nav = () => {
-  const { state, setState } = useContext(StateContext);
+  const { isConnected, address } = useAccount();
+  const { openConnectModal } = useConnectModal();
+  const { openAccountModal } = useAccountModal();
+
   return (
     <div className="border-b border-b-gray-900 mb-8 sm:mb-16">
       <div className="px-3 sm:px-6 mx-auto flex items-center gap-12 py-6 sm:py-0">
@@ -67,20 +76,20 @@ const Nav = () => {
             <span className="hidden sm:inline">{'View on '}</span>IPFS
           </button>
 
-          {state.connected ? (
+          {isConnected && address ? (
             <button
               className="btn-secondary px-4 py-2 flex items-center gap-3 font-medium self-stretch"
-              onClick={() => setState({ connected: false })}
+              onClick={() => openAccountModal?.()}
             >
               <div className="rounded-full overflow-hidden">
                 <Profile />
               </div>
-              <div>0x22b&hellip;bA44</div>
+              <div>{truncateAddress(address)}</div>
             </button>
           ) : (
             <button
               className="btn px-6 py-3"
-              onClick={() => setState({ connected: true })}
+              onClick={() => openConnectModal?.()}
             >
               Connect
             </button>
@@ -115,14 +124,22 @@ const Heading = ({ children }: { children: ReactNode }) => (
 
 const Actions = () => (
   <div className="flex items-center gap-4">
-    <button className="btn-outline text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1">
+    <Link
+      className="btn-outline text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1"
+      to="https://www.ousd.com/ogv-dashboard"
+      target="_blank"
+    >
       OGV dashboard
       <ExternalLink />
-    </button>
-    <button className="btn-outline text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1">
+    </Link>
+    <Link
+      className="btn-outline text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1"
+      to="https://app.uniswap.org/swap?outputCurrency=0x9c354503C38481a7A7a51629142963F98eCC12D0&chain=mainnet"
+      target="_blank"
+    >
       Get OGV
       <ExternalLink />
-    </button>
+    </Link>
   </div>
 );
 
@@ -151,6 +168,7 @@ 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 />
       </div>
     </div>
@@ -159,6 +177,8 @@ const Stats = () => (
 
 const MyStake = () => {
   const { state, setState } = useContext(StateContext);
+  const { isConnected } = useAccount();
+  const { openConnectModal } = useConnectModal();
 
   const totalLocked = state.lockups.reduce((m, l) => {
     return m + l.tokens;
@@ -170,7 +190,7 @@ const MyStake = () => {
         <div className="text-gray-500 text-sm">My stake</div>
         <div className="flex items-center gap-3">
           <img src={OGVIcon} alt="OGV" />
-          {!state.connected ? (
+          {!isConnected ? (
             <div className="mt-2 h-[2.5px] w-3 bg-gray-500" />
           ) : (
             <div className="text-2xl font-bold">
@@ -183,30 +203,27 @@ const MyStake = () => {
         <div className="text-gray-500 text-sm">Wallet balance</div>
         <div className="flex items-center gap-3 w-full sm:w-auto">
           <img src={OGVIcon} alt="OGV" />
-          {state.connected ? (
+          {isConnected ? (
             <div className="text-2xl font-bold">
-              {state.walletBalance.toLocaleString()}
+              <NumberSpinner num={state.walletBalance} slow spinAtStart />
             </div>
           ) : (
             <div className="mt-2 h-[2.5px] w-3 bg-gray-500" />
           )}
           {state.walletBalance ? null : (
-            <button
+            <Link
               className="ml-auto sm:ml-4 border-blue-600 border border-px rounded-full text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1"
-              onClick={() => {
-                if (state.connected) {
-                  setState({ walletBalance: 2000000 });
-                }
-              }}
+              to="https://app.uniswap.org/swap?outputCurrency=0x9c354503C38481a7A7a51629142963F98eCC12D0&chain=mainnet"
+              target="_blank"
             >
               Get OGV
               <ExternalLink />
-            </button>
+            </Link>
           )}
         </div>
       </div>
       <div className="py-1">
-        {state.connected ? (
+        {isConnected ? (
           <button
             className="btn w-full sm:w-auto sm:px-20 py-4 leading-none"
             onClick={() => setState({ stakeModal: true })}
@@ -216,7 +233,7 @@ const MyStake = () => {
         ) : (
           <button
             className="btn w-full sm:w-auto sm:px-20 py-4 leading-none"
-            onClick={() => setState({ connected: true })}
+            onClick={() => openConnectModal?.()}
           >
             Connect
           </button>

apps/governance/src/components/AnimatedModal.tsx

@@ -12,6 +12,7 @@ interface AnimatedModalProps {
   open: boolean;
   shouldClose?: boolean;
   onClose: () => void;
+  maxWidth?: number;
 }
 
 export const AnimatedModal = (props: AnimatedModalProps) => {
@@ -60,8 +61,8 @@ export const AnimatedModal = (props: AnimatedModalProps) => {
       }}
     >
       <animated.div
-        style={panelProps}
-        className="bg-gray-900 z-50 w-full max-w-[550px] rounded-lg relative"
+        style={{ ...panelProps, maxWidth: props.maxWidth || 550 }}
+        className="bg-gray-900 z-50 w-full rounded-lg relative"
       >
         {children}
       </animated.div>

apps/governance/src/components/DevControls.tsx

@@ -0,0 +1,45 @@
+import { useContext, useState } from 'react';
+
+import { AnimatedModal, ModalHeader } from '../components/AnimatedModal';
+import { StateContext } from './AppState';
+
+export const DevControls = () => {
+  const [open, setOpen] = useState(false);
+  const [shouldClose, setShouldClose] = useState(false);
+  const { state, setState } = useContext(StateContext);
+
+  return (
+    <>
+      <button
+        className="bg-gray-900 fixed bottom-2 right-2 px-2 py-1 rounded text-xs font-bold hover:bg-gray-800"
+        onClick={() => setOpen(true)}
+      >
+        DEV
+      </button>
+      <AnimatedModal
+        open={open}
+        shouldClose={shouldClose}
+        maxWidth={300}
+        onClose={() => {
+          setOpen(false);
+          setShouldClose(false);
+        }}
+      >
+        <ModalHeader onClose={() => setShouldClose(true)}>
+          Dev controls
+        </ModalHeader>
+        <div className="p-6 flex flex-col gap-4">
+          <button
+            className="btn-outline py-2 text-sm"
+            onClick={() => {
+              setState({ walletBalance: state.walletBalance + 1000000 });
+              setShouldClose(true);
+            }}
+          >
+            +1,000,000 OGV
+          </button>
+        </div>
+      </AnimatedModal>
+    </>
+  );
+};

apps/governance/src/components/NumberSpinner.tsx

@@ -31,6 +31,7 @@ export const NumberSpinner = ({
         char.match(/[0-9]/) ? (
           <CharSpinner
             key={idx}
+            idx={idx}
             num={num}
             slow={slow}
             char={Number(char)}
@@ -51,19 +52,25 @@ const CharSpinner = ({
   down,
   slow,
   spinAtStart,
+  idx,
 }: {
   num: number;
   char: number;
   down?: boolean;
   slow?: boolean;
   spinAtStart?: boolean;
+  idx: number;
 }) => {
   const [y, setY] = useState(spinAtStart ? 0 : down ? 1000000000 + char : char);
   const [last, setLast] = useState(spinAtStart ? 0 : char);
   const springProps = useSpring({
     from: { y: spinAtStart ? 0 : down ? 1000000000 + char : char },
     to: { y },
-    config: { mass: 1, tension: slow ? 90 : 170, friction: slow ? 40 : 26 },
+    config: {
+      mass: 1,
+      tension: (slow ? 90 : 170) - idx * 5,
+      friction: slow ? 40 : 26,
+    },
   });
 
   useEffect(() => {

apps/governance/src/components/Tabs.tsx

@@ -51,7 +51,7 @@ export const Tabs = (props: {
         <Link
           key={idx}
           to={tab.href}
-          className={`py-6 relative${
+          className={`py-6 relative transition-all duration-200 ease-in-out${
             activeTab === idx ? '' : ' text-gray-500 hover:text-off-white'
           }`}
           onClick={() => setActive(idx)}

apps/governance/src/main.tsx

@@ -1,7 +1,12 @@
+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 { App, Governance, Staking } from './app/app';
 import { StateProvider } from './components/AppState';
@@ -30,7 +35,11 @@ const router = createHashRouter([
 root.render(
   <StrictMode>
     <StateProvider>
-      <RouterProvider router={router} />
+      <WagmiConfig config={wagmiConfig}>
+        <RainbowKitProvider chains={chains} theme={darkTheme()}>
+          <RouterProvider router={router} />
+        </RainbowKitProvider>
+      </WagmiConfig>
     </StateProvider>
   </StrictMode>,
 );

apps/governance/src/styles.css

@@ -8,16 +8,16 @@ body {
 }
 
 .btn {
-  @apply rounded-full bg-blue-gradient hover:bg-blue-gradient-light leading-tight transition-[background-image] ease-in-out duration-200;
+  @apply rounded-full bg-blue-gradient hover:bg-blue-gradient-light leading-tight transition-[background-image] ease-in-out duration-200 font-medium;
 }
 
 .btn-secondary {
-  @apply rounded-full bg-gray-900;
+  @apply rounded-full bg-gray-900 font-medium hover:bg-gray-800 transition-all duration-200 ease-in-out;
 }
 
 .btn-outline {
-  @apply border-blue-600 border rounded-full leading-tight hover:bg-blue-600 hover:text-off-black transition-all duration-150 ease-in-out cursor-pointer;
+  @apply border-blue-600 border rounded-full leading-tight hover:bg-blue-600 hover:text-off-black transition-all duration-150 ease-in-out cursor-pointer font-medium;
 }
 .btn-outline-disabled {
-  @apply border-blue-600/50 border rounded-full leading-tight text-off-white/30;
+  @apply border-blue-600/50 border rounded-full leading-tight text-off-white/30 font-medium;
 }

apps/governance/src/utils/string.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export function truncateAddress(str: string): ReactNode {
+  if (str.length <= 10) {
+    return str;
+  }
+
+  const firstSix = str.substring(0, 6);
+  const lastFour = str.substring(str.length - 4);
+
+  return (
+    <>
+      {firstSix}&hellip;{lastFour}
+    </>
+  );
+}