import { WalletConnectorContext, WalletState } from "@orderly.network/hooks";
import { ChainNamespace } from "@orderly.network/types";
import { createWeb3Modal, defaultWagmiConfig, useWeb3Modal } from "@web3modal/wagmi/react";
import { FC, PropsWithChildren, useEffect, useState } from "react";
import { useAccount as useWagmiAccount } from "wagmi";
import { arbitrum, mainnet } from "wagmi/chains";
// 1. Get projectId at https://cloud.reown.com/
const projectId = "YOUR_PROJECT_ID";
// 2. Create wagmiConfig
const metadata = {
name: "Web3Modal",
description: "Web3Modal Example",
url: "https://web3modal.com",
icons: ["https://avatars.githubusercontent.com/u/37784886"]
};
const chains = [mainnet, arbitrum];
export const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId });
export const OrderlyProvider: FC<PropsWithChildren> = ({ children }) => {
const [wallet, setWallet] = useState<WalletState>({
chains: chains.map((chain) => ({
namespace: ChainNamespace.evm,
id: chain.id
})),
accounts: [],
icon: "",
label: "",
provider: null
});
const { open } = useWeb3Modal();
const { address, isConnecting, chain, connector, status } = useWagmiAccount();
useEffect(() => {
const run = async () => {
if (!connector) return;
setWallet({
...wallet,
accounts: await connector.getAccounts().then((addresses) =>
addresses.map((addr) => ({
address: addr
}))
),
provider: await connector.getProvider(),
label: (await connector.getClient?.().then((client) => client.name)) ?? ""
});
};
run();
}, [address, wallet, setWallet, connector]);
return (
<WalletConnectorContext.Provider
value={{
connect: () => {
return open().then(() => []);
},
disconnect: async () => {
connector?.disconnect();
return [];
},
setChain: async ({ chainId }) => {
return connector?.switchChain?.({ chainId: Number(chainId) });
},
chains,
connectedChain: chain ? { id: chain.id, namespace: ChainNamespace.evm } : null,
namespace: ChainNamespace.evm,
connecting: isConnecting,
settingChain: status === "reconnecting",
wallet
}}
>
{children}
</WalletConnectorContext.Provider>
);
};