Merge branch 'main' into feat/front-page

README.md

@@ -50,6 +50,7 @@ This repository is organized as follows:
 - `/apps/lend`: Lend [React](https://react.dev/) application.
 - `/tests`: DApp tests
 - `/packages/curve-ui-kit`: Shared UI kit created using Material UI, mapped as `@ui-kit`
+- `/packages/prices-api`: Package for consuming the Prices API, mapped as `@curvefi/prices-api`. Soon to be to separated its own NPM package.
 
 ## Development Guide
 

apps/dao/src/file-types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="next-images" />
+
+declare module '*.svg' {
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  const content: string
+
+  export { ReactComponent }
+  export default content
+}

apps/lend/src/file-types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="next-images" />
+
+declare module '*.svg' {
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  const content: string
+
+  export { ReactComponent }
+  export default content
+}

apps/loan/src/file-types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="next-images" />
+
+declare module '*.svg' {
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  const content: string
+
+  export { ReactComponent }
+  export default content
+}

apps/main/sitemap.js

@@ -1,7 +1,7 @@
-import { MAIN_ROUTE as MAIN_ROUTES } from '@main/constants'
-import { MAIN_ROUTE as LOAN_ROUTES } from '@loan/constants'
-import { MAIN_ROUTE as LEND_ROUTES } from '@lend/constants'
-import { MAIN_ROUTE as DAO_ROUTES } from '@dao/constants'
+import { MAIN_ROUTE as MAIN_ROUTES } from '@/dex/constants'
+import { MAIN_ROUTE as LOAN_ROUTES } from '@/loan/constants'
+import { MAIN_ROUTE as LEND_ROUTES } from '@/lend/constants'
+import { MAIN_ROUTE as DAO_ROUTES } from '@/dao/constants'
 import { getAppRoot } from 'curve-ui-kit/src/shared/routes'
 
 const ROUTES = {

apps/main/src/dao/components/PageAnalytics/CrvStats/index.tsx

@@ -1,16 +1,15 @@
 import { useEffect } from 'react'
 import styled from 'styled-components'
-
 import useStore from '@/dao/store/useStore'
 import { formatNumber } from '@ui/utils'
 import { t } from '@lingui/macro'
-
 import Box from '@ui/Box'
 import MetricsComp, { MetricsColumnData } from '@/dao/components/MetricsComp'
 import Tooltip from '@ui/Tooltip'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
 
 const CrvStats: React.FC = () => {
-  const provider = useStore((state) => state.wallet.getProvider(''))
+  const provider = useWalletStore((s) => s.provider)
   const { veCrvData, getVeCrvData, veCrvFees, veCrvHolders } = useStore((state) => state.analytics)
   const { loading: usdRatesLoading, usdRatesMapper } = useStore((state) => state.usdRates)
   const crv = usdRatesMapper.crv

apps/main/src/dao/components/PageGauges/GaugeVoting/index.tsx

@@ -1,15 +1,17 @@
 import styled from 'styled-components'
 import { useEffect } from 'react'
-
 import useStore from '@/dao/store/useStore'
-
 import CurrentVotes from './CurrentVotes'
-import ConnectWallet from '@/dao/components/ConnectWallet'
+import { ConnectWalletPrompt } from '@ui-kit/features/connect-wallet'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
+import { isLoading } from '@ui/utils'
 
 const GaugeVoting = ({ userAddress }: { userAddress: string | undefined }) => {
   const { getUserGaugeVoteWeights, userGaugeVoteWeightsMapper } = useStore((state) => state.user)
   const curve = useStore((state) => state.curve)
-  const provider = useStore((state) => state.wallet.getProvider(''))
+  const provider = useWalletStore((s) => s.provider)
+  const connectWallet = useStore((s) => s.updateConnectState)
+  const connectState = useStore((s) => s.connectState)
 
   useEffect(() => {
     if (userAddress && curve && userGaugeVoteWeightsMapper[userAddress.toLowerCase()] === undefined) {
@@ -19,10 +21,12 @@ const GaugeVoting = ({ userAddress }: { userAddress: string | undefined }) => {
 
   return !provider ? (
     <ConnectWrapper>
-      <ConnectWallet
+      <ConnectWalletPrompt
         description="Connect your wallet to view your current votes and vote on gauges"
         connectText="Connect Wallet"
         loadingText="Connecting"
+        connectWallet={() => connectWallet()}
+        isLoading={isLoading(connectState)}
       />
     </ConnectWrapper>
   ) : (

apps/main/src/dao/components/PageGauges/index.tsx

@@ -16,7 +16,7 @@ import SubNav from '@/dao/components/SubNav'
 
 const Gauges = () => {
   const { isMdUp } = useStore((state) => state.layout)
-  const [{ wallet }] = useConnectWallet()
+  const { wallet } = useConnectWallet()
   const userAddress = wallet?.accounts[0].address
 
   const [navSelection, setNavSelection] = useState('gaugeList')

apps/main/src/dao/components/PageProposal/index.tsx

@@ -25,6 +25,7 @@ import BackButton from '../BackButton'
 import ProposalHeader from './ProposalHeader'
 import ProposalInformation from './ProposalInformation'
 import { ProposalType } from '@/dao/types/dao.types'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
 
 type ProposalProps = {
   routerParams: {
@@ -34,7 +35,7 @@ type ProposalProps = {
 
 const Proposal: React.FC<ProposalProps> = ({ routerParams: { rProposalId } }) => {
   const [voteId, voteType] = rProposalId.split('-') as [string, ProposalType]
-  const provider = useStore((state) => state.wallet.getProvider(''))
+  const provider = useWalletStore((s) => s.provider)
   const { proposalsLoadingState, getProposal, proposalLoadingState, getUserProposalVote } = useStore(
     (state) => state.proposals,
   )

apps/main/src/dao/components/PageUser/index.tsx

@@ -12,6 +12,7 @@ import UserLocksTable from './UserLocksTable'
 import UserGaugeVotesTable from './UserGaugeVotesTable'
 import SubNav from '@/dao/components/SubNav'
 import { VeCrvHolder } from '@/dao/types/dao.types'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
 
 type UserPageProps = {
   routerParams: {
@@ -25,7 +26,7 @@ const UserPage: React.FC<UserPageProps> = ({ routerParams: { rUserAddress } }) =
     getVeCrvHolders,
   } = useStore((state) => state.analytics)
   const { getUserEns, userMapper } = useStore((state) => state.user)
-  const provider = useStore((state) => state.wallet.getProvider(''))
+  const provider = useWalletStore((s) => s.provider)
   const [activeNavKey, setNavKey] = useState('proposals')
 
   const navItems = [

apps/main/src/dao/components/PageVeCrv/components/FormActions.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import { t } from '@lingui/macro'
-
-import useStore from '@/dao/store/useStore'
-
 import Button from '@ui/Button'
 import Spinner from '@ui/Spinner'
+import useStore from '@/dao/store/useStore'
 
 const FormActions = ({
   haveSigner,
@@ -14,12 +12,11 @@ const FormActions = ({
   haveSigner: boolean
   loading: boolean
 }>) => {
-  const updateConnectWalletStateKeys = useStore((state) => state.wallet.updateConnectWalletStateKeys)
-
+  const connectWallet = useStore((s) => s.updateConnectState)
   return (
     <>
       {!haveSigner && !loading ? (
-        <Button fillWidth size="large" variant="filled" onClick={updateConnectWalletStateKeys}>
+        <Button fillWidth size="large" variant="filled" onClick={() => connectWallet()}>
           {t`Connect Wallet`}
         </Button>
       ) : loading ? (

apps/main/src/dao/components/PageVeCrv/components/FormLockCreate.tsx

@@ -24,6 +24,7 @@ import FieldLockedAmt from '@/dao/components/PageVeCrv/components/FieldLockedAmt
 import Stepper from '@ui/Stepper'
 import TxInfoBar from '@ui/TxInfoBar'
 import { CurveApi } from '@/dao/types/dao.types'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
 
 const FormLockCreate = ({ curve, rChainId, rFormType, vecrvInfo }: PageVecrv) => {
   const isSubscribed = useRef(false)
@@ -36,7 +37,7 @@ const FormLockCreate = ({ curve, rChainId, rFormType, vecrvInfo }: PageVecrv) =>
   const formValues = useStore((state) => state.lockedCrv.formValues)
   const fetchStepApprove = useStore((state) => state.lockedCrv.fetchStepApprove)
   const fetchStepCreate = useStore((state) => state.lockedCrv.fetchStepCreate)
-  const notifyNotification = useStore((state) => state.wallet.notifyNotification)
+  const notifyNotification = useWalletStore((s) => s.notify)
   const setFormValues = useStore((state) => state.lockedCrv.setFormValues)
 
   const [steps, setSteps] = useState<Step[]>([])

apps/main/src/dao/components/PageVeCrv/components/FormLockCrv.tsx

@@ -19,6 +19,7 @@ import FieldLockedAmt from '@/dao/components/PageVeCrv/components/FieldLockedAmt
 import Stepper from '@ui/Stepper'
 import TxInfoBar from '@ui/TxInfoBar'
 import { CurveApi } from '@/dao/types/dao.types'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
 
 const FormLockCrv = ({ curve, rChainId, rFormType, vecrvInfo }: PageVecrv) => {
   const isSubscribed = useRef(false)
@@ -29,7 +30,7 @@ const FormLockCrv = ({ curve, rChainId, rFormType, vecrvInfo }: PageVecrv) => {
   const formEstGas = useStore((state) => state.lockedCrv.formEstGas[activeKey] ?? DEFAULT_FORM_EST_GAS)
   const formStatus = useStore((state) => state.lockedCrv.formStatus)
   const formValues = useStore((state) => state.lockedCrv.formValues)
-  const notifyNotification = useStore((state) => state.wallet.notifyNotification)
+  const notifyNotification = useWalletStore((s) => s.notify)
   const fetchStepApprove = useStore((state) => state.lockedCrv.fetchStepApprove)
   const fetchStepIncreaseCrv = useStore((state) => state.lockedCrv.fetchStepIncreaseCrv)
   const setFormValues = useStore((state) => state.lockedCrv.setFormValues)

apps/main/src/dao/components/PageVeCrv/components/FormLockDate.tsx

@@ -23,6 +23,7 @@ import FieldDatePicker from '@/dao/components/PageVeCrv/components/FieldDatePick
 import Stepper from '@ui/Stepper'
 import TxInfoBar from '@ui/TxInfoBar'
 import { CurveApi } from '@/dao/types/dao.types'
+import { useWalletStore } from '@ui-kit/features/connect-wallet'
 
 const FormLockDate = ({ curve, rChainId, rFormType, vecrvInfo }: PageVecrv) => {
   const isSubscribed = useRef(false)
@@ -33,7 +34,7 @@ const FormLockDate = ({ curve, rChainId, rFormType, vecrvInfo }: PageVecrv) => {
   const formEstGas = useStore((state) => state.lockedCrv.formEstGas[activeKey] ?? DEFAULT_FORM_EST_GAS)
   const formStatus = useStore((state) => state.lockedCrv.formStatus)
   const formValues = useStore((state) => state.lockedCrv.formValues)
-  const notifyNotification = useStore((state) => state.wallet.notifyNotification)
+  const notifyNotification = useWalletStore((s) => s.notify)
   const fetchStepIncreaseTime = useStore((state) => state.lockedCrv.fetchStepIncreaseTime)
   const setFormValues = useStore((state) => state.lockedCrv.setFormValues)
 

apps/main/src/dao/components/UserBox/index.tsx

@@ -5,7 +5,7 @@ import { t } from '@lingui/macro'
 import Box from '@ui/Box'
 import Button from '@ui/Button'
 import UserInformation from './UserInformation'
-import { SnapshotVotingPower, ActiveProposal } from '@/dao/types/dao.types'
+import { ActiveProposal, SnapshotVotingPower } from '@/dao/types/dao.types'
 
 type Props = {
   children?: React.ReactNode
@@ -17,12 +17,7 @@ type Props = {
 }
 
 const UserBox = ({ className, children, votingPower, snapshotVotingPower, activeProposal, row }: Props) => {
-  const [{ wallet }, connect] = useConnectWallet()
-
-  const handleConnectWallet = async () => {
-    await connect()
-  }
-
+  const { wallet, connect } = useConnectWallet()
   return (
     <Wrapper className={className}>
       {wallet ? (
@@ -37,7 +32,7 @@ const UserBox = ({ className, children, votingPower, snapshotVotingPower, active
       ) : (
         <ConnectMessage>
           <p>{t`Please connect a wallet to see user information.`}</p>
-          <StyledButton variant="outlined" onClick={handleConnectWallet}>
+          <StyledButton variant="outlined" onClick={() => connect()}>
             {t`Connect Wallet`}
           </StyledButton>
         </ConnectMessage>

apps/main/src/dao/constants.ts

@@ -1,4 +1,5 @@
 import { DAO_ROUTES } from '@ui-kit/shared/routes'
+export { CONNECT_STAGE } from '@ui/utils/utilsConnectState'
 
 export const NETWORK_TOKEN = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'
 
@@ -10,13 +11,6 @@ export const ROUTE = {
   PAGE_404: '/404',
 } as const
 
-export const CONNECT_STAGE = {
-  CONNECT_API: 'api',
-  CONNECT_WALLET: 'connect-wallet',
-  DISCONNECT_WALLET: 'disconnect-wallet',
-  SWITCH_NETWORK: 'switch-network',
-} as const
-
 export const REFRESH_INTERVAL = {
   '3s': 3000,
   '1m': 60000,