Skip to content
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion kleros-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,17 @@ import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AtlasProvider, Products } from "@kleros/kleros-app";
import { useConfig } from 'wagmi'

const queryClient = new QueryClient()

function App() {
const wagmiConfig = useConfig()

return
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
<AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, wagmiConfig: wagmiConfig }}>
...
</AtlasProvider>
</QueryClientProvider>
Expand Down
5 changes: 3 additions & 2 deletions kleros-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
"typescript": "^5.6.3",
"vite": "^5.4.11",
"vite-plugin-dts": "^4.3.0",
"vite-plugin-node-polyfills": "^0.22.0"
"vite-plugin-node-polyfills": "^0.22.0",
"wagmi": "^2.14.0"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wagmi doesn't need to be a devDep, it's already a dep

},
"dependencies": {
"jose": "^5.9.6"
Expand All @@ -61,6 +62,6 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"viem": "^2.21.42",
"wagmi": "^2.13.5"
"wagmi": "^2.14.0"
}
}
9 changes: 5 additions & 4 deletions kleros-app/src/lib/atlas/providers/AtlasProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useMemo, createContext, useContext, useState, useCallback, useEf
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { GraphQLClient } from "graphql-request";
import { decodeJwt } from "jose";
import { useAccount, useChainId, useSignMessage } from "wagmi";
import { useAccount, useChainId, useSignMessage, type Config } from "wagmi";
import {
createMessage,
getNonce,
Expand Down Expand Up @@ -53,11 +53,12 @@ const Context = createContext<IAtlasProvider | undefined>(undefined);
interface AtlasConfig {
uri: string;
product: Products;
wagmiConfig: Config;
}

export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.ReactNode }> = ({ children, config }) => {
const { address } = useAccount();
const chainId = useChainId();
const { address } = useAccount({ config: config.wagmiConfig });
const chainId = useChainId({ config: config.wagmiConfig });
const queryClient = useQueryClient();

const [authToken, setAuthToken] = useSessionStorage<string | undefined>("authToken", undefined);
Expand All @@ -66,7 +67,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
const [isUpdatingUser, setIsUpdatingUser] = useState(false);
const [isVerified, setIsVerified] = useState(false);
const [isUploadingFile, setIsUploadingFile] = useState(false);
const { signMessageAsync } = useSignMessage();
const { signMessageAsync } = useSignMessage({ config: config.wagmiConfig });

const atlasGqlClient = useMemo(() => {
const headers = authToken
Expand Down
5 changes: 3 additions & 2 deletions web-devtools/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,11 @@
"@kleros/kleros-sdk": "workspace:^",
"@kleros/kleros-v2-contracts": "workspace:^",
"@kleros/ui-components-library": "^2.20.0",
"@reown/appkit": "^1.6.5",
"@reown/appkit-adapter-wagmi": "^1.6.5",
"@tanstack/react-query": "^5.61.0",
"@wagmi/connectors": "^5.5.0",
"@wagmi/core": "^2.15.0",
"@web3modal/wagmi": "^4.2.3",
"@yornaath/batshit": "^0.9.0",
"graphql": "^16.9.0",
"graphql-request": "^7.1.2",
Expand All @@ -69,6 +70,6 @@
"typewriter-effect": "^2.21.0",
"vanilla-jsoneditor": "^0.21.6",
"viem": "^2.21.50",
"wagmi": "^2.13.5"
"wagmi": "^2.14.10"
}
}
6 changes: 3 additions & 3 deletions web-devtools/src/components/ConnectWallet/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useCallback, useState } from "react";

import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
import { useAppKit, useAppKitState } from "@reown/appkit/react";
import { useAccount, useSwitchChain } from "wagmi";

import { Button } from "@kleros/ui-components-library";
Expand Down Expand Up @@ -33,8 +33,8 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
};

const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
const { open } = useWeb3Modal();
const { open: isOpen } = useWeb3ModalState();
const { open } = useAppKit();
const { open: isOpen } = useAppKitState();
return (
<Button
{...{ className }}
Expand Down
6 changes: 3 additions & 3 deletions web-devtools/src/consts/chains.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { type Chain, mainnet, arbitrumSepolia, gnosisChiado, arbitrum, gnosis } from "viem/chains";
import { mainnet, arbitrumSepolia, gnosisChiado, arbitrum, gnosis, type AppKitNetwork } from "@reown/appkit/networks";

import { isProductionDeployment } from "./index";

export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;

export const SUPPORTED_CHAINS: Record<number, Chain> = {
export const SUPPORTED_CHAINS: Record<number, AppKitNetwork> = {
[isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
};

export const QUERY_CHAINS: Record<number, Chain> = {
export const QUERY_CHAINS: Record<number, AppKitNetwork> = {
[isProductionDeployment() ? gnosis.id : gnosisChiado.id]: isProductionDeployment() ? gnosis : gnosisChiado,
[mainnet.id]: mainnet,
};
Expand Down
25 changes: 12 additions & 13 deletions web-devtools/src/context/Web3Provider.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from "react";

import { createWeb3Modal } from "@web3modal/wagmi/react";
import { type Chain } from "viem";
import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, sepolia, gnosis } from "wagmi/chains";
import { walletConnect } from "wagmi/connectors";
import { fallback, http, WagmiProvider, webSocket } from "wagmi";
import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, sepolia, gnosis } from "@reown/appkit/networks";

import { configureSDK } from "@kleros/kleros-sdk/src/sdk";

import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
import { isProductionDeployment } from "consts/index";

import { createAppKit } from "@reown/appkit/react";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { theme } from "styles/Theme";

const alchemyApiKey = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;
Expand Down Expand Up @@ -74,10 +73,10 @@ if (!projectId) {
throw new Error("WalletConnect project ID is not set in NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID environment variable.");
}

export const wagmiConfig = createConfig({
chains,
const wagmiAdapter = new WagmiAdapter({
networks: chains,
projectId,
transports,
connectors: [walletConnect({ projectId })],
});

configureSDK({
Expand All @@ -87,18 +86,18 @@ configureSDK({
},
});

createWeb3Modal({
wagmiConfig,
createAppKit({
adapters: [wagmiAdapter],
networks: chains,
defaultNetwork: isProduction ? arbitrum : arbitrumSepolia,
projectId,
defaultChain: isProduction ? arbitrum : arbitrumSepolia,
themeVariables: {
"--w3m-color-mix": theme.klerosUIComponentsPrimaryPurple,
"--w3m-color-mix-strength": 20,
},
});

const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
return <WagmiProvider config={wagmiAdapter.wagmiConfig}> {children} </WagmiProvider>;
};

export default Web3Provider;
11 changes: 7 additions & 4 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,22 +79,25 @@
"vite-tsconfig-paths": "^4.3.2"
},
"dependencies": {
"@bigmi/react": "^0.1.0",
"@cyntler/react-doc-viewer": "^1.17.0",
"@graphql-tools/batch-execute": "^9.0.11",
"@graphql-tools/utils": "^10.7.2",
"@kleros/kleros-app": "workspace:^",
"@kleros/kleros-sdk": "workspace:^",
"@kleros/kleros-v2-contracts": "workspace:^",
"@kleros/ui-components-library": "^2.20.0",
"@lifi/wallet-management": "^3.4.6",
"@lifi/widget": "^3.12.3",
"@lifi/wallet-management": "^3.6.0",
"@lifi/widget": "^3.14.2",
"@reown/appkit": "^1.6.5",
"@reown/appkit-adapter-wagmi": "^1.6.5",
"@sentry/react": "^7.120.0",
"@sentry/tracing": "^7.120.0",
"@solana/wallet-adapter-react": "^0.15.35",
"@tanstack/react-query": "^5.62.2",
"@types/react-modal": "^3.16.3",
"@wagmi/connectors": "^5.5.0",
"@wagmi/core": "^2.15.0",
"@web3modal/wagmi": "^4.2.3",
"@yornaath/batshit": "^0.9.0",
"chart.js": "^3.9.1",
"chartjs-adapter-moment": "^1.0.1",
Expand Down Expand Up @@ -123,6 +126,6 @@
"styled-components": "^5.3.3",
"subgraph-status": "^1.2.3",
"viem": "^2.21.54",
"wagmi": "^2.13.5"
"wagmi": "^2.14.0"
}
}
6 changes: 3 additions & 3 deletions web/src/components/ConnectWallet/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useCallback } from "react";

import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
import { useAppKit, useAppKitState } from "@reown/appkit/react";
import { useAccount, useSwitchChain } from "wagmi";

import { Button } from "@kleros/ui-components-library";
Expand Down Expand Up @@ -35,8 +35,8 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
};

const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
const { open } = useWeb3Modal();
const { open: isOpen } = useWeb3ModalState();
const { open } = useAppKit();
const { open: isOpen } = useAppKitState();
return (
<Button
{...{ className }}
Expand Down
8 changes: 4 additions & 4 deletions web/src/consts/chains.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { extractChain } from "viem";
import { Chain, arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado } from "viem/chains";
import { type AppKitNetwork, arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado } from "@reown/appkit/networks";
import { type Chain, extractChain } from "viem";

import { isProductionDeployment } from "./index";

export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;

// Read/Write
export const SUPPORTED_CHAINS: Record<number, Chain> = {
export const SUPPORTED_CHAINS: Record<number, AppKitNetwork> = {
[isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
};

// Read Only
export const QUERY_CHAINS: Record<number, Chain> = {
export const QUERY_CHAINS: Record<number, AppKitNetwork> = {
[isProductionDeployment() ? gnosis.id : gnosisChiado.id]: isProductionDeployment() ? gnosis : gnosisChiado,
[mainnet.id]: mainnet,
};
Expand Down
5 changes: 2 additions & 3 deletions web/src/consts/eip712-messages.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { arbitrumSepolia } from "viem/chains";
import { DEFAULT_CHAIN } from "./chains";

export default {
Expand All @@ -23,7 +22,7 @@ export default {
telegram,
nonce,
},
} as const),
}) as const,
signingAccount: (address: `0x${string}`, chainId: number = DEFAULT_CHAIN) =>
({
account: address.toLowerCase() as `0x${string}`,
Expand All @@ -42,5 +41,5 @@ export default {
"create a secret key for your account. This key is unrelated from your main Ethereum account and will " +
"not be able to send any transactions.",
},
} as const),
}) as const,
};
6 changes: 5 additions & 1 deletion web/src/context/AtlasProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import React from "react";

import { useConfig } from "wagmi";

import { AtlasProvider as _AtlasProvider, Products } from "@kleros/kleros-app";

const AtlasProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const wagmiConfig = useConfig();
return (
<_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
<_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, wagmiConfig }}>
{children}
</_AtlasProvider>
);
Expand Down
45 changes: 31 additions & 14 deletions web/src/context/Web3Provider.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import React from "react";

import { createWeb3Modal } from "@web3modal/wagmi/react";
import { type Chain } from "viem";
import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, sepolia, gnosis } from "wagmi/chains";
import { walletConnect } from "wagmi/connectors";
import {
mainnet,
arbitrumSepolia,
arbitrum,
gnosisChiado,
sepolia,
gnosis,
type AppKitNetwork,
} from "@reown/appkit/networks";
import { createAppKit } from "@reown/appkit/react";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { fallback, http, WagmiProvider, webSocket } from "wagmi";

import { configureSDK } from "@kleros/kleros-sdk/src/sdk";

Expand Down Expand Up @@ -66,18 +73,18 @@ export const getTransports = () => {
};
};

const chains = ALL_CHAINS as [Chain, ...Chain[]];
const chains = ALL_CHAINS as [AppKitNetwork, ...AppKitNetwork[]];
const transports = getTransports();

const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID;
if (!projectId) {
throw new Error("WalletConnect project ID is not set in WALLETCONNECT_PROJECT_ID environment variable.");
}

const wagmiConfig = createConfig({
chains,
const wagmiAdapter = new WagmiAdapter({
networks: chains,
projectId,
transports,
connectors: [walletConnect({ projectId, showQrModal: false })],
});

configureSDK({
Expand All @@ -87,18 +94,28 @@ configureSDK({
},
});

createWeb3Modal({
wagmiConfig,
createAppKit({
adapters: [wagmiAdapter],
networks: chains,
defaultNetwork: isProduction ? arbitrum : arbitrumSepolia,
projectId,
defaultChain: isProduction ? arbitrum : arbitrumSepolia,
allowUnsupportedChain: true,
themeVariables: {
"--w3m-color-mix": lightTheme.primaryPurple,
"--w3m-color-mix-strength": 20,
// overlay portal is at 9999
"--w3m-z-index": 10000,
},
features: {
// adding these here to toggle in futute if needed
// email: false,
// socials: false,
// onramp:false,
// swap: false
},
});

const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
return <WagmiProvider config={wagmiAdapter.wagmiConfig}> {children} </WagmiProvider>;
};

export default Web3Provider;
Loading