Skip to content

Commit 7fce0f1

Browse files
kemurukemuru
authored
Merge pull request #78 from kleros/fix/qr-modal-and-chain-source
Fix/qr modal and chain source
2 parents 66b8c6e + a60a59a commit 7fce0f1

File tree

12 files changed

+50
-73
lines changed

12 files changed

+50
-73
lines changed

‎web/src/components/ConnectWallet/AccountDisplay.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import styled, { css } from "styled-components";
44
import Identicon from "react-identicons";
55
import { isAddress } from "viem";
66
import { normalize } from "viem/ens";
7-
import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
7+
import { useAccount, useEnsAvatar, useEnsName } from "wagmi";
88

9-
import { getChain } from "consts/chains";
109
import { shortenAddress } from "utils/shortenAddress";
1110

1211
import { landscapeStyle } from "styles/landscapeStyle";
@@ -144,8 +143,7 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
144143
};
145144

146145
export const ChainDisplay: React.FC = () => {
147-
const chainId = useChainId();
148-
const chain = getChain(chainId);
146+
const { chain } = useAccount();
149147
return <label>{chain?.name}</label>;
150148
};
151149

‎web/src/components/ConnectWallet/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback } from "react";
2-
import { useAccount, useChainId, useSwitchChain } from "wagmi";
2+
import { useAccount, useSwitchChain } from "wagmi";
33
import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
44
import { Button } from "@kleros/ui-components-library";
55
import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
@@ -29,7 +29,6 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
2929
);
3030
};
3131

32-
3332
const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
3433
const { open } = useWeb3Modal();
3534
const { open: isOpen } = useWeb3ModalState();
@@ -45,10 +44,9 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
4544
};
4645

4746
const ConnectWallet: React.FC<{ className?: string }> = ({ className }) => {
48-
const chainId = useChainId();
49-
const { isConnected } = useAccount();
47+
const { isConnected, chain } = useAccount();
5048
if (isConnected) {
51-
if (chainId !== DEFAULT_CHAIN) {
49+
if (chain?.id !== DEFAULT_CHAIN) {
5250
return <SwitchChainButton {...{ className }} />;
5351
} else return <AccountDisplay />;
5452
} else return <ConnectButton {...{ className }} />;

‎web/src/components/EnsureAuth.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
22

33
import * as jwt from "jose";
44
import { SiweMessage } from "siwe";
5-
import { useAccount, useChainId, useSignMessage } from "wagmi";
5+
import { useAccount, useSignMessage } from "wagmi";
66

77
import { Button } from "@kleros/ui-components-library";
88

@@ -37,8 +37,7 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
3737
const [isLoading, setIsLoading] = useState(false);
3838

3939
const [authToken, setAuthToken] = useSessionStorage<string | null>("auth-token", localToken);
40-
const { address } = useAccount();
41-
const chainId = useChainId();
40+
const { address, chain } = useAccount();
4241

4342
const { signMessageAsync } = useSignMessage();
4443

@@ -58,7 +57,7 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
5857
setIsLoading(true);
5958
if (!address) return;
6059

61-
const message = await createSiweMessage(address, "Sign In to Kleros with Ethereum.", chainId);
60+
const message = await createSiweMessage(address, "Sign In to Kleros with Ethereum.", chain.id);
6261

6362
const signature = await signMessageAsync({ message });
6463

‎web/src/consts/chains.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { extractChain } from "viem";
21
import { Chain, arbitrumSepolia, gnosisChiado } from "wagmi/chains";
32

43
export const DEFAULT_CHAIN = arbitrumSepolia.id;
@@ -15,9 +14,3 @@ export const QUERY_CHAINS: Record<number, Chain> = {
1514
export const ALL_CHAINS = [...Object.values(SUPPORTED_CHAINS), ...Object.values(QUERY_CHAINS)];
1615

1716
export const QUERY_CHAIN_IDS = Object.keys(QUERY_CHAINS);
18-
19-
export const getChain = (chainId: number): Chain | null =>
20-
extractChain({
21-
chains: ALL_CHAINS,
22-
id: chainId,
23-
});

‎web/src/context/Web3Provider.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ const getTransports = () => {
2424
const alchemyTransport = (chain: Chain) =>
2525
fallback([http(alchemyURL("https", chain.id)), webSocket(alchemyURL("wss", chain.id))]);
2626
const chiadoTransport = () =>
27-
fallback([
28-
http("https://rpc.chiadochain.net"),
29-
webSocket("wss://rpc.chiadochain.net/wss"),
30-
]);
27+
fallback([http("https://rpc.chiadochain.net"), webSocket("wss://rpc.chiadochain.net/wss")]);
3128

3229
return {
3330
[arbitrumSepolia.id]: alchemyTransport(arbitrumSepolia),
@@ -42,7 +39,7 @@ const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID ?? "";
4239
const wagmiConfig = createConfig({
4340
chains,
4441
transports,
45-
connectors: [walletConnect({ projectId })],
42+
connectors: [walletConnect({ projectId, showQrModal: false })],
4643
});
4744

4845
createWeb3Modal({

‎web/src/hooks/useNativeTokenSymbol.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { useChainId } from "wagmi";
2-
import { getChain } from "consts/chains";
1+
import { useAccount } from "wagmi";
32

43
export const useNativeTokenSymbol = () => {
5-
const chainId = useChainId();
6-
const chain = getChain(chainId);
4+
const { chain } = useAccount();
75
return chain?.nativeCurrency.symbol;
8-
};
6+
};

‎web/src/hooks/useTokenMetadata.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { useState, useEffect } from "react";
22
import { Alchemy } from "alchemy-sdk";
3-
import { useChainId } from "wagmi";
3+
import { useAccount } from "wagmi";
44
import { alchemyConfig } from "utils/alchemyConfig";
55

66
export const useTokenMetadata = (tokenAddress: string) => {
7-
const chainId = useChainId();
7+
const { chain } = useAccount();
88
const [tokenMetadata, setTokenMetadata] = useState<any>(null);
99

1010
useEffect(() => {
1111
const fetchTokenMetadata = async () => {
12-
if (!tokenAddress || tokenAddress === "native") return;
13-
const alchemy = new Alchemy(alchemyConfig(chainId));
12+
if (!tokenAddress || tokenAddress === "native" || !chain) return;
13+
const alchemy = new Alchemy(alchemyConfig(chain.id));
1414
try {
1515
const metadata = await alchemy.core.getTokenMetadata(tokenAddress);
1616
setTokenMetadata(metadata);
@@ -21,7 +21,7 @@ export const useTokenMetadata = (tokenAddress: string) => {
2121
};
2222

2323
fetchTokenMetadata();
24-
}, [tokenAddress, chainId]);
24+
}, [tokenAddress, chain]);
2525

2626
return { tokenMetadata };
27-
};
27+
};

‎web/src/layout/Header/DesktopHeader.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { useToggle } from "react-use";
55
import { Link } from "react-router-dom";
6-
import { useAccount, useChainId } from "wagmi";
6+
import { useAccount } from "wagmi";
77
import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
88
import { DEFAULT_CHAIN } from "consts/chains";
99
import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
@@ -75,7 +75,8 @@ const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain
7575
}
7676
7777
${({ isConnected, isDefaultChain }) =>
78-
isConnected && isDefaultChain &&
78+
isConnected &&
79+
isDefaultChain &&
7980
css`
8081
cursor: pointer;
8182
& > * {
@@ -88,24 +89,19 @@ const DesktopHeader = () => {
8889
const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
8990
const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
9091
const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
91-
92-
const chainId = useChainId();
93-
const { isConnected } = useAccount();
94-
95-
const isDefaultChain = chainId === DEFAULT_CHAIN;
96-
92+
93+
const { isConnected, chain } = useAccount();
94+
95+
const isDefaultChain = chain?.id === DEFAULT_CHAIN;
96+
9797
useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
9898

9999
return (
100100
<>
101101
<Container>
102102
<LeftSide>
103103
<LightButtonContainer>
104-
<LightButton
105-
text=""
106-
onClick={toggleIsDappListOpen}
107-
Icon={StyledKlerosSolutionsIcon}
108-
/>
104+
<LightButton text="" onClick={toggleIsDappListOpen} Icon={StyledKlerosSolutionsIcon} />
109105
</LightButtonContainer>
110106
<StyledLink to={"/"}>
111107
<EscrowLogo />
@@ -117,7 +113,10 @@ const DesktopHeader = () => {
117113
</MiddleSide>
118114

119115
<RightSide>
120-
<ConnectWalletContainer {...{ isConnected, isDefaultChain }} onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}>
116+
<ConnectWalletContainer
117+
{...{ isConnected, isDefaultChain }}
118+
onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
119+
>
121120
<ConnectWallet />
122121
</ConnectWalletContainer>
123122
<Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
@@ -134,4 +133,4 @@ const DesktopHeader = () => {
134133
);
135134
};
136135

137-
export default DesktopHeader;
136+
export default DesktopHeader;

‎web/src/pages/MyTransactions/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import styled from "styled-components";
33
import { Route, Routes } from "react-router-dom";
4-
import { useAccount, useChainId } from "wagmi";
4+
import { useAccount } from "wagmi";
55
import { DEFAULT_CHAIN } from "consts/chains";
66
import ConnectWallet from "components/ConnectWallet";
77
import TransactionsFetcher from "./TransactionsFetcher";
@@ -27,9 +27,8 @@ export const ConnectWalletContainer = styled.div`
2727
`;
2828

2929
const Dashboard: React.FC = () => {
30-
const { isConnected } = useAccount();
31-
const chainId = useChainId();
32-
const isOnSupportedChain = chainId === DEFAULT_CHAIN;
30+
const { isConnected, chain } = useAccount();
31+
const isOnSupportedChain = chain?.id === DEFAULT_CHAIN;
3332

3433
return (
3534
<Container>

‎web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
useSimulateEscrowUniversalCreateErc20Transaction,
99
escrowUniversalAddress,
1010
} from "hooks/contracts/generated";
11-
import { useChainId } from "wagmi";
1211
import { erc20Abi } from "viem";
1312
import { useNewTransactionContext } from "context/NewTransactionContext";
1413
import {
@@ -47,8 +46,7 @@ const DepositPaymentButton: React.FC = () => {
4746
const refetchQuery = useQueryRefetch();
4847
const [isSending, setIsSending] = useState(false);
4948
const [isApproved, setIsApproved] = useState(false);
50-
const { address } = useAccount();
51-
const chainId = useChainId();
49+
const { address, chain } = useAccount();
5250
const ensResult = useEnsAddress({ name: sellerAddress, chainId: 1 });
5351
const deadlineTimestamp = useMemo(() => BigInt(Math.floor(new Date(deadline).getTime() / 1000)), [deadline]);
5452
const isNativeTransaction = sendingToken?.address === "native";
@@ -62,11 +60,11 @@ const DepositPaymentButton: React.FC = () => {
6260
}, [sellerAddress, ensResult.data]);
6361

6462
const { data: allowance, refetch: refetchAllowance } = useReadContract({
65-
query: { enabled: !isNativeTransaction },
63+
query: { enabled: !isNativeTransaction && chain?.id },
6664
address: sendingToken?.address,
6765
abi: erc20Abi,
6866
functionName: "allowance",
69-
args: [address, escrowUniversalAddress?.[chainId]],
67+
args: [address, escrowUniversalAddress?.[chain?.id]],
7068
});
7169

7270
useEffect(() => {
@@ -101,11 +99,11 @@ const DepositPaymentButton: React.FC = () => {
10199
useWriteEscrowUniversalCreateErc20Transaction(createERC20TransactionConfig);
102100

103101
const { data: approveConfig } = useSimulateContract({
104-
query: { enabled: !isNativeTransaction },
102+
query: { enabled: !isNativeTransaction && chain?.id },
105103
address: sendingToken?.address,
106104
abi: erc20Abi,
107105
functionName: "approve",
108-
args: [escrowUniversalAddress?.[chainId], transactionValue],
106+
args: [escrowUniversalAddress?.[chain?.id], transactionValue],
109107
});
110108

111109
const { writeContractAsync: approve } = useWriteContract(approveConfig);

0 commit comments

Comments
 (0)