From 969f81f2c32cdb337e86707c9a0617276746fd3b Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 10:12:26 +0200 Subject: [PATCH 01/10] Add WrongNetworkWarning state --- .../userActious/UserActionSection.tsx | 3 +- .../userActious/WrongNetworkWarning.tsx | 47 +++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 packages/frontend/src/components/userActious/WrongNetworkWarning.tsx diff --git a/packages/frontend/src/components/userActious/UserActionSection.tsx b/packages/frontend/src/components/userActious/UserActionSection.tsx index 07ff08dd..b96e3d84 100644 --- a/packages/frontend/src/components/userActious/UserActionSection.tsx +++ b/packages/frontend/src/components/userActious/UserActionSection.tsx @@ -5,13 +5,14 @@ import styled from 'styled-components' import { ConnectWalletWarning } from './ConnectWalletWarning' import { GitcoinFlow } from './gitcoin/GitcointFlow' import { BidFlow } from './bid/BidFlow' +import { WrongNetworkWarning } from "./WrongNetworkWarning"; const Placeholder = () =>
const UserActions: Record ReactElement> = { AwaitingBidding: Placeholder, WalletNotConnected: ConnectWalletWarning, - WrongNetwork: Placeholder, + WrongNetwork: WrongNetworkWarning, BiddingFlow: BidFlow, AwaitingResults: Placeholder, ClaimingFlow: Placeholder, diff --git a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx new file mode 100644 index 00000000..a48e49c7 --- /dev/null +++ b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx @@ -0,0 +1,47 @@ +import { useSwitchChain } from "wagmi"; +import { useContractState } from "@/blockchain/hooks/useAuctionState"; +import { getWarningText } from "@/components/userActious/getWarningText"; +import { FormHeading, FormRow, FormWrapper } from "@/components/form"; +import { Colors } from "@/styles/colors"; +import styled from "styled-components"; +import { Button } from "@/components/buttons"; +import { arbitrum } from "wagmi/chains"; + +export const WrongNetworkWarning = () => { + const { switchChainAsync } = useSwitchChain() + const { state } = useContractState() + const text = getWarningText(state) + + const onSwitch = () => switchChainAsync({chainId: arbitrum.id}) + + return ( + + {text.heading} + + You are connected to the wrong network. + + + + To {text.action} connect your wallet to the Arbitrum network. + + + + + + Click here to read the tutorial for MetaMask + {' '} + » + + + + + ) +} + +const TutorialLink = styled.a` + color: ${Colors.GreenLight}; + text-decoration: underline; +` From d0ef5bdd0d295a1ac43337d5ed349b3f7e1619b9 Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:30:50 +0200 Subject: [PATCH 02/10] Allow only for arbitrum on production --- packages/frontend/src/blockchain/chain.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/blockchain/chain.ts b/packages/frontend/src/blockchain/chain.ts index 9e31b679..7794a476 100644 --- a/packages/frontend/src/blockchain/chain.ts +++ b/packages/frontend/src/blockchain/chain.ts @@ -1,4 +1,6 @@ import { arbitrum, arbitrumSepolia, hardhat } from 'wagmi/chains' -const SUPPORTED_CHAIN_IDS = [arbitrum.id, arbitrumSepolia.id, hardhat.id] as const -export type SupportedChainId = typeof SUPPORTED_CHAIN_IDS[number] +const AllSupportedChains = [hardhat, arbitrum, arbitrumSepolia] as const +export type SupportedChainId = typeof AllSupportedChains[number]['id'] + +export const SupportedChains = process.env.NODE_ENV === 'production' ? [arbitrum] as const : AllSupportedChains From 48b1876b121bc21469a63bd3ae452c374db0bc55 Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:31:14 +0200 Subject: [PATCH 03/10] Pass SupportedChains to wagmiConfig --- packages/frontend/src/config/wagmiConfig.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/config/wagmiConfig.ts b/packages/frontend/src/config/wagmiConfig.ts index 78035e18..522b8265 100644 --- a/packages/frontend/src/config/wagmiConfig.ts +++ b/packages/frontend/src/config/wagmiConfig.ts @@ -2,9 +2,10 @@ import { createConfig, webSocket } from 'wagmi' import { arbitrum, arbitrumSepolia, hardhat } from 'wagmi/chains' import { coinbaseWallet, walletConnect } from 'wagmi/connectors' import { environment } from '@/config/environment' +import { SupportedChains } from "@/blockchain/chain"; export const wagmiConfig = createConfig({ - chains: [arbitrum, arbitrumSepolia, hardhat], + chains: SupportedChains, ssr: true, transports: { [arbitrum.id]: webSocket(`wss://arbitrum-mainnet.infura.io/ws/v3/${environment.infuraKey}`), From c2ac15ecd650e7fa72f587617ad66fdce657864c Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:39:55 +0200 Subject: [PATCH 04/10] Lint --- packages/frontend/src/blockchain/chain.ts | 2 +- .../userActious/UserActionSection.tsx | 2 +- .../userActious/WrongNetworkWarning.tsx | 18 +++++++++--------- packages/frontend/src/config/wagmiConfig.ts | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/blockchain/chain.ts b/packages/frontend/src/blockchain/chain.ts index 7794a476..e225fba6 100644 --- a/packages/frontend/src/blockchain/chain.ts +++ b/packages/frontend/src/blockchain/chain.ts @@ -3,4 +3,4 @@ import { arbitrum, arbitrumSepolia, hardhat } from 'wagmi/chains' const AllSupportedChains = [hardhat, arbitrum, arbitrumSepolia] as const export type SupportedChainId = typeof AllSupportedChains[number]['id'] -export const SupportedChains = process.env.NODE_ENV === 'production' ? [arbitrum] as const : AllSupportedChains +export const SupportedChains = process.env.NODE_ENV === 'production' ? ([arbitrum] as const) : AllSupportedChains diff --git a/packages/frontend/src/components/userActious/UserActionSection.tsx b/packages/frontend/src/components/userActious/UserActionSection.tsx index b96e3d84..f78582f0 100644 --- a/packages/frontend/src/components/userActious/UserActionSection.tsx +++ b/packages/frontend/src/components/userActious/UserActionSection.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components' import { ConnectWalletWarning } from './ConnectWalletWarning' import { GitcoinFlow } from './gitcoin/GitcointFlow' import { BidFlow } from './bid/BidFlow' -import { WrongNetworkWarning } from "./WrongNetworkWarning"; +import { WrongNetworkWarning } from './WrongNetworkWarning' const Placeholder = () =>
diff --git a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx index a48e49c7..2b0b5ad0 100644 --- a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx +++ b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx @@ -1,18 +1,18 @@ -import { useSwitchChain } from "wagmi"; -import { useContractState } from "@/blockchain/hooks/useAuctionState"; -import { getWarningText } from "@/components/userActious/getWarningText"; -import { FormHeading, FormRow, FormWrapper } from "@/components/form"; -import { Colors } from "@/styles/colors"; -import styled from "styled-components"; -import { Button } from "@/components/buttons"; -import { arbitrum } from "wagmi/chains"; +import { useSwitchChain } from 'wagmi' +import { useContractState } from '@/blockchain/hooks/useAuctionState' +import { getWarningText } from '@/components/userActious/getWarningText' +import { FormHeading, FormRow, FormWrapper } from '@/components/form' +import { Colors } from '@/styles/colors' +import styled from 'styled-components' +import { Button } from '@/components/buttons' +import { arbitrum } from 'wagmi/chains' export const WrongNetworkWarning = () => { const { switchChainAsync } = useSwitchChain() const { state } = useContractState() const text = getWarningText(state) - const onSwitch = () => switchChainAsync({chainId: arbitrum.id}) + const onSwitch = () => switchChainAsync({ chainId: arbitrum.id }) return ( diff --git a/packages/frontend/src/config/wagmiConfig.ts b/packages/frontend/src/config/wagmiConfig.ts index 522b8265..7c3e5a9c 100644 --- a/packages/frontend/src/config/wagmiConfig.ts +++ b/packages/frontend/src/config/wagmiConfig.ts @@ -2,7 +2,7 @@ import { createConfig, webSocket } from 'wagmi' import { arbitrum, arbitrumSepolia, hardhat } from 'wagmi/chains' import { coinbaseWallet, walletConnect } from 'wagmi/connectors' import { environment } from '@/config/environment' -import { SupportedChains } from "@/blockchain/chain"; +import { SupportedChains } from '@/blockchain/chain' export const wagmiConfig = createConfig({ chains: SupportedChains, From abc64714df4e71faf87babb17b04eb93f7475f55 Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:40:21 +0200 Subject: [PATCH 05/10] Verify user's chain in useAuctionState --- .../src/blockchain/hooks/useAuctionState.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/blockchain/hooks/useAuctionState.ts b/packages/frontend/src/blockchain/hooks/useAuctionState.ts index 19687e79..b55fd95e 100644 --- a/packages/frontend/src/blockchain/hooks/useAuctionState.ts +++ b/packages/frontend/src/blockchain/hooks/useAuctionState.ts @@ -23,7 +23,8 @@ export enum ContractState { } export function useAuctionState(): AuctionState | undefined { - const { address, chainId } = useAccount() + const { address, chainId: userChainId } = useAccount() + const chainId = useChainId() const { state, isLoading } = useContractState() if (isLoading) { return undefined @@ -34,7 +35,7 @@ export function useAuctionState(): AuctionState | undefined { } if (state === ContractState.BIDDING_OPEN) { - return getStateUsingWallet(address, chainId, 'BiddingFlow') + return getStateUsingWallet(address, userChainId, chainId, 'BiddingFlow') } if (state === ContractState.BIDDING_CLOSED || state === ContractState.AUCTION_SETTLED) { @@ -42,7 +43,7 @@ export function useAuctionState(): AuctionState | undefined { } if (state === ContractState.RAFFLE_SETTLED) { - return getStateUsingWallet(address, chainId, 'ClaimingFlow') + return getStateUsingWallet(address, userChainId, chainId, 'ClaimingFlow') } if (state === ContractState.CLAIMING_CLOSED) { @@ -64,12 +65,17 @@ export const useContractState = () => { return { state: data as ContractState, isLoading } } -function getStateUsingWallet(account: Hex | undefined, chainId: number | undefined, state: AuctionState) { +function getStateUsingWallet( + account: Hex | undefined, + userChainId: number | undefined, + chainId: number, + state: AuctionState, +) { if (!account) { return 'WalletNotConnected' } - if (!chainId) { + if (userChainId !== chainId) { return 'WrongNetwork' } From 95bd7a9dbd7ab4e0966fbd2c11c164d161e5fc67 Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:40:48 +0200 Subject: [PATCH 06/10] Remove tutorial link from WrongNetworkWarning --- .../userActious/WrongNetworkWarning.tsx | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx index 2b0b5ad0..2d6bfa91 100644 --- a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx +++ b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx @@ -2,8 +2,6 @@ import { useSwitchChain } from 'wagmi' import { useContractState } from '@/blockchain/hooks/useAuctionState' import { getWarningText } from '@/components/userActious/getWarningText' import { FormHeading, FormRow, FormWrapper } from '@/components/form' -import { Colors } from '@/styles/colors' -import styled from 'styled-components' import { Button } from '@/components/buttons' import { arbitrum } from 'wagmi/chains' @@ -25,23 +23,7 @@ export const WrongNetworkWarning = () => { To {text.action} connect your wallet to the Arbitrum network. - - - - Click here to read the tutorial for MetaMask - {' '} - » - - ) } - -const TutorialLink = styled.a` - color: ${Colors.GreenLight}; - text-decoration: underline; -` From 4fa38ee69ea962b565461f75a40e79670e1320f3 Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:43:14 +0200 Subject: [PATCH 07/10] Update WrongNetworkWarning styles to match design --- .../src/components/userActious/WrongNetworkWarning.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx index 2d6bfa91..17b2f794 100644 --- a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx +++ b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx @@ -16,12 +16,11 @@ export const WrongNetworkWarning = () => { {text.heading} - You are connected to the wrong network. - - - +
+ You are connected to the wrong network. +

To {text.action} connect your wallet to the Arbitrum network. - +
From 5509fa740a692ada652a41d0819ac9ac9eba0e4b Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:43:56 +0200 Subject: [PATCH 08/10] USe switchChain instead of switchChainAsync --- .../src/components/userActious/WrongNetworkWarning.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx index 17b2f794..f482c3e0 100644 --- a/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx +++ b/packages/frontend/src/components/userActious/WrongNetworkWarning.tsx @@ -6,11 +6,11 @@ import { Button } from '@/components/buttons' import { arbitrum } from 'wagmi/chains' export const WrongNetworkWarning = () => { - const { switchChainAsync } = useSwitchChain() + const { switchChain } = useSwitchChain() const { state } = useContractState() const text = getWarningText(state) - const onSwitch = () => switchChainAsync({ chainId: arbitrum.id }) + const onSwitch = () => switchChain({ chainId: arbitrum.id }) return ( From 6f20a314f1fab32728d3be5bce0651d3ef9525bb Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 11:47:56 +0200 Subject: [PATCH 09/10] Add NODE_ENV to turbo.json --- turbo.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/turbo.json b/turbo.json index d4bfae76..21a26b89 100644 --- a/turbo.json +++ b/turbo.json @@ -3,7 +3,13 @@ "globalDependencies": ["**/.env.*local"], "pipeline": { "build": { - "env": ["NEXT_PUBLIC_VOUCHER_REDEEM_DEADLINE", "NEXT_PUBLIC_INFURA_KEY", "NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID", "NEXT_PUBLIC_GITCOIN_REQUIRED_SCORE"], + "env": [ + "NEXT_PUBLIC_VOUCHER_REDEEM_DEADLINE", + "NEXT_PUBLIC_INFURA_KEY", + "NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID", + "NEXT_PUBLIC_GITCOIN_REQUIRED_SCORE", + "NODE_ENV" + ], "dependsOn": ["^build"], "outputs": [".next/**", "!.next/cache/**", "build/**", "cache"] }, From 4bdd890de9e4215ba8b09f433aca027518173ba8 Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski Date: Wed, 24 Apr 2024 13:04:43 +0200 Subject: [PATCH 10/10] Accept interface in getStateForWallet --- .../src/blockchain/hooks/useAuctionState.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/blockchain/hooks/useAuctionState.ts b/packages/frontend/src/blockchain/hooks/useAuctionState.ts index b55fd95e..a2231852 100644 --- a/packages/frontend/src/blockchain/hooks/useAuctionState.ts +++ b/packages/frontend/src/blockchain/hooks/useAuctionState.ts @@ -35,7 +35,7 @@ export function useAuctionState(): AuctionState | undefined { } if (state === ContractState.BIDDING_OPEN) { - return getStateUsingWallet(address, userChainId, chainId, 'BiddingFlow') + return getStateForWallet({ address, userChainId, chainId, state: 'BiddingFlow' }) } if (state === ContractState.BIDDING_CLOSED || state === ContractState.AUCTION_SETTLED) { @@ -43,7 +43,7 @@ export function useAuctionState(): AuctionState | undefined { } if (state === ContractState.RAFFLE_SETTLED) { - return getStateUsingWallet(address, userChainId, chainId, 'ClaimingFlow') + return getStateForWallet({ address, userChainId, chainId, state: 'ClaimingFlow' }) } if (state === ContractState.CLAIMING_CLOSED) { @@ -65,19 +65,21 @@ export const useContractState = () => { return { state: data as ContractState, isLoading } } -function getStateUsingWallet( - account: Hex | undefined, - userChainId: number | undefined, - chainId: number, - state: AuctionState, -) { - if (!account) { +interface GetStateForWalletParams { + address: Hex | undefined + userChainId: number | undefined + chainId: number + state: AuctionState +} + +function getStateForWallet(params: GetStateForWalletParams): AuctionState { + if (!params.address) { return 'WalletNotConnected' } - if (userChainId !== chainId) { + if (params.userChainId !== params.chainId) { return 'WrongNetwork' } - return state + return params.state }