From 80de9e140554d8b08ee8a47db4c8d7d9cb3aead2 Mon Sep 17 00:00:00 2001 From: Nick Poulden Date: Tue, 19 Sep 2023 16:40:45 -0600 Subject: [PATCH] Dev controls --- apps/governance/src/app/app.tsx | 59 ++++++++++++------- .../src/components/AnimatedModal.tsx | 5 +- .../governance/src/components/DevControls.tsx | 45 ++++++++++++++ .../src/components/NumberSpinner.tsx | 9 ++- apps/governance/src/components/Tabs.tsx | 2 +- apps/governance/src/main.tsx | 11 +++- apps/governance/src/styles.css | 8 +-- apps/governance/src/utils/string.tsx | 16 +++++ 8 files changed, 125 insertions(+), 30 deletions(-) create mode 100644 apps/governance/src/components/DevControls.tsx create mode 100644 apps/governance/src/utils/string.tsx diff --git a/apps/governance/src/app/app.tsx b/apps/governance/src/app/app.tsx index 21b8e0fd1..e2225508a 100644 --- a/apps/governance/src/app/app.tsx +++ b/apps/governance/src/app/app.tsx @@ -1,11 +1,15 @@ 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'; @@ -13,6 +17,7 @@ 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() { + ); } @@ -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 (
@@ -67,20 +76,20 @@ const Nav = () => { {'View on '}IPFS - {state.connected ? ( + {isConnected && address ? ( ) : ( @@ -115,14 +124,22 @@ const Heading = ({ children }: { children: ReactNode }) => ( const Actions = () => (
- - +
); @@ -151,6 +168,7 @@ const Stats = () => (
Voting addresses
+ {/* */}
@@ -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 = () => {
My stake
OGV - {!state.connected ? ( + {!isConnected ? (
) : (
@@ -183,30 +203,27 @@ const MyStake = () => {
Wallet balance
OGV - {state.connected ? ( + {isConnected ? (
- {state.walletBalance.toLocaleString()} +
) : (
)} {state.walletBalance ? null : ( - + )}
- {state.connected ? ( + {isConnected ? ( diff --git a/apps/governance/src/components/AnimatedModal.tsx b/apps/governance/src/components/AnimatedModal.tsx index dc14731da..5ec0b07c5 100644 --- a/apps/governance/src/components/AnimatedModal.tsx +++ b/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) => { }} > {children} diff --git a/apps/governance/src/components/DevControls.tsx b/apps/governance/src/components/DevControls.tsx new file mode 100644 index 000000000..32c0c1245 --- /dev/null +++ b/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 ( + <> + + { + setOpen(false); + setShouldClose(false); + }} + > + setShouldClose(true)}> + Dev controls + +
+ +
+
+ + ); +}; diff --git a/apps/governance/src/components/NumberSpinner.tsx b/apps/governance/src/components/NumberSpinner.tsx index 1141074c9..0867ea4bc 100644 --- a/apps/governance/src/components/NumberSpinner.tsx +++ b/apps/governance/src/components/NumberSpinner.tsx @@ -31,6 +31,7 @@ export const NumberSpinner = ({ char.match(/[0-9]/) ? ( { 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(() => { diff --git a/apps/governance/src/components/Tabs.tsx b/apps/governance/src/components/Tabs.tsx index c1342cebb..04114abd2 100644 --- a/apps/governance/src/components/Tabs.tsx +++ b/apps/governance/src/components/Tabs.tsx @@ -51,7 +51,7 @@ export const Tabs = (props: { setActive(idx)} diff --git a/apps/governance/src/main.tsx b/apps/governance/src/main.tsx index baa39d191..31ef9bbce 100644 --- a/apps/governance/src/main.tsx +++ b/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( - + + + + + , ); diff --git a/apps/governance/src/styles.css b/apps/governance/src/styles.css index 6cf64eca8..3ac4dee84 100644 --- a/apps/governance/src/styles.css +++ b/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; } diff --git a/apps/governance/src/utils/string.tsx b/apps/governance/src/utils/string.tsx new file mode 100644 index 000000000..eda6e2914 --- /dev/null +++ b/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}…{lastFour} + + ); +}