deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ben Kremer 2022-02-14 11:49:15 +01:00
parent 43c67d0c81
commit 68a5335b02
5 changed files with 99 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dapps/react-dapp-v2-with-ethers/src/App.tsx
View File

@ -58,12 +58,12 @@ export default function App() {
client, client,
session, session,
disconnect, disconnect,
chains, chain,
setChain,
accounts, accounts,
balances, balances,
isFetchingBalances, isFetchingBalances,
isInitializing, isInitializing,
setChains,
onEnable, onEnable,
web3Provider, web3Provider,
} = useWalletConnectClient(); } = useWalletConnectClient();
@ -160,14 +160,6 @@ export default function App() {
setLocaleStorageTestnetFlag(nextIsTestnetState); setLocaleStorageTestnetFlag(nextIsTestnetState);
}; };
const handleChainSelectionClick = (chainId: string) => {
if (chains.includes(chainId)) {
setChains(chains.filter(chain => chain !== chainId));
} else {
setChains([...chains, chainId]);
}
};
// Renders the appropriate model for the given request that is currently in-flight. // Renders the appropriate model for the given request that is currently in-flight.
const renderModal = () => { const renderModal = () => {
switch (modal) { switch (modal) {
@ -175,7 +167,8 @@ export default function App() {
if (typeof client === "undefined") { if (typeof client === "undefined") {
throw new Error("WalletConnect is not initialized"); throw new Error("WalletConnect is not initialized");
} }
return <PairingModal pairings={client.pairing.values} connect={onEnable} />; // return <PairingModal pairings={client.pairing.values} connect={onEnable} />;
return null;
case "request": case "request":
return <RequestModal pending={isRpcRequestPending} result={rpcResult} />; return <RequestModal pending={isRpcRequestPending} result={rpcResult} />;
case "ping": case "ping":
@ -194,7 +187,7 @@ export default function App() {
<span>{`Using v${version || "2.0.0-beta"}`}</span> <span>{`Using v${version || "2.0.0-beta"}`}</span>
</h6> </h6>
<SButtonContainer> <SButtonContainer>
<h6>Select chains:</h6> <h6>Select an Ethereum chain:</h6>
<SToggleContainer> <SToggleContainer>
<p>Testnets Only?</p> <p>Testnets Only?</p>
<Toggle active={isTestnet} onClick={toggleTestnets} /> <Toggle active={isTestnet} onClick={toggleTestnets} />
@ -204,13 +197,13 @@ export default function App() {
key={chainId} key={chainId}
chainId={chainId} chainId={chainId}
chainData={chainData} chainData={chainData}
onClick={handleChainSelectionClick} onClick={onEnable}
active={chains.includes(chainId)} // active={chains.includes(chainId)}
/> />
))} ))}
<SConnectButton left onClick={onEnable} disabled={!chains.length}> {/* <SConnectButton left onClick={onEnable} disabled={!chains.length}>
{"Connect"} {"Connect"}
</SConnectButton> </SConnectButton> */}
</SButtonContainer> </SButtonContainer>
</SLanding> </SLanding>
) : ( ) : (
@ -218,9 +211,6 @@ export default function App() {
<h3>Accounts</h3> <h3>Accounts</h3>
<SAccounts> <SAccounts>
{accounts.map(account => { {accounts.map(account => {
// const [namespace, reference, address] = account.split(":");
// const chainId = `${namespace}:${reference}`;
const chainId = "eip155:42";
return ( return (
<Blockchain <Blockchain
key={account} key={account}
@ -228,9 +218,9 @@ export default function App() {
chainData={chainData} chainData={chainData}
fetching={isFetchingBalances} fetching={isFetchingBalances}
address={account} address={account}
chainId={chainId} chainId={chain}
balances={balances} balances={balances}
actions={getBlockchainActions(chainId)} actions={getBlockchainActions(chain)}
/> />
); );
})} })}

3
dapps/react-dapp-v2-with-ethers/src/components/Blockchain.tsx
View File

@ -16,7 +16,6 @@ import {
ChainNamespaces, ChainNamespaces,
} from "../helpers"; } from "../helpers";
import { fonts } from "../styles"; import { fonts } from "../styles";
import { useWalletConnectClient } from "../contexts/ClientContext";
interface AccountStyleProps { interface AccountStyleProps {
rgb: string; rgb: string;
@ -123,8 +122,6 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
const chain = getBlockchainDisplayData(chainId, chainData); const chain = getBlockchainDisplayData(chainId, chainData);
if (typeof chain === "undefined") { if (typeof chain === "undefined") {
console.warn("CHAIN UNDEFINED");
return null; return null;
} }
const name = chain.meta.name || chain.data.name; const name = chain.meta.name || chain.data.name;

3
dapps/react-dapp-v2-with-ethers/src/constants/default.ts
View File

@ -6,7 +6,6 @@ export const DEFAULT_MAIN_CHAINS = [
"eip155:137", "eip155:137",
"eip155:42161", "eip155:42161",
"eip155:42220", "eip155:42220",
"cosmos:cosmoshub-4",
]; ];
export const DEFAULT_TEST_CHAINS = [ export const DEFAULT_TEST_CHAINS = [
@ -26,8 +25,6 @@ export const DEFAULT_RELAY_URL = process.env.REACT_APP_RELAY_URL;
export const DEFAULT_EIP155_METHODS = ["eth_sendTransaction", "personal_sign", "eth_signTypedData"]; export const DEFAULT_EIP155_METHODS = ["eth_sendTransaction", "personal_sign", "eth_signTypedData"];
export const DEFAULT_COSMOS_METHODS = ["cosmos_signDirect", "cosmos_signAmino"];
export const DEFAULT_LOGGER = "debug"; export const DEFAULT_LOGGER = "debug";
export const DEFAULT_APP_METADATA = { export const DEFAULT_APP_METADATA = {

177
dapps/react-dapp-v2-with-ethers/src/contexts/ClientContext.tsx
View File

@ -12,7 +12,6 @@ import {
} from "react"; } from "react";
import { import {
DEFAULT_APP_METADATA, DEFAULT_APP_METADATA,
DEFAULT_COSMOS_METHODS,
DEFAULT_EIP155_METHODS, DEFAULT_EIP155_METHODS,
DEFAULT_LOGGER, DEFAULT_LOGGER,
DEFAULT_PROJECT_ID, DEFAULT_PROJECT_ID,
@ -30,13 +29,13 @@ interface IContext {
session: SessionTypes.Created | undefined; session: SessionTypes.Created | undefined;
disconnect: () => Promise<void>; disconnect: () => Promise<void>;
isInitializing: boolean; isInitializing: boolean;
chains: string[]; chain: string;
pairings: string[]; pairings: string[];
accounts: string[]; accounts: string[];
balances: { symbol: string; balance: string }[]; balances: { symbol: string; balance: string }[];
isFetchingBalances: boolean; isFetchingBalances: boolean;
setChains: any; setChain: (chainId: string) => void;
onEnable: () => Promise<void>; onEnable: (chainId: string) => Promise<void>;
web3Provider?: providers.Web3Provider; web3Provider?: providers.Web3Provider;
} }
@ -61,43 +60,14 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
const [balances, setBalances] = useState<{ symbol: string; balance: string }[]>([]); const [balances, setBalances] = useState<{ symbol: string; balance: string }[]>([]);
const [accounts, setAccounts] = useState<string[]>([]); const [accounts, setAccounts] = useState<string[]>([]);
const [chains, setChains] = useState<string[]>([]); const [chain, setChain] = useState<string>("");
const resetApp = () => { const resetApp = () => {
setPairings([]); setPairings([]);
setSession(undefined); setSession(undefined);
setBalances([]); setBalances([]);
setAccounts([]); setAccounts([]);
setChains([]); setChain("");
};
const getSupportedNamespaces = useCallback(() => {
const supportedNamespaces: string[] = [];
chains.forEach(chainId => {
const [namespace] = chainId.split(":");
if (!supportedNamespaces.includes(namespace)) {
supportedNamespaces.push(namespace);
}
});
return supportedNamespaces;
}, [chains]);
const getSupportedMethods = (namespaces: string[]) => {
const supportedMethods: string[] = namespaces
.map(namespace => {
switch (namespace) {
case "eip155":
return DEFAULT_EIP155_METHODS;
case "cosmos":
return DEFAULT_COSMOS_METHODS;
default:
throw new Error(`No default methods for namespace: ${namespace}`);
}
})
.flat();
return supportedMethods;
}; };
const disconnect = useCallback(async () => { const disconnect = useCallback(async () => {
@ -133,7 +103,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
}); });
_client.on(CLIENT_EVENTS.pairing.created, async () => { _client.on(CLIENT_EVENTS.pairing.created, async () => {
debugger;
setPairings(_client.pairing.topics); setPairings(_client.pairing.topics);
}); });
@ -173,6 +142,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
setClient(_client); setClient(_client);
await _subscribeToEvents(_client); await _subscribeToEvents(_client);
// TODO:
// await _checkPersistedState(_client); // await _checkPersistedState(_client);
} catch (err) { } catch (err) {
throw err; throw err;
@ -187,13 +157,64 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
} }
}, [client, createClient]); }, [client, createClient]);
useEffect(() => { // useEffect(() => {
const init = async () => { // const init = async () => {
if (!client) return; // if (!client) return;
// // Create WalletConnect Provider
// const ethereumProvider = new EthereumProvider({
// chainId: 42,
// rpc: {
// infuraId: "5dc0df7abe4645dfb06a9a8c39ede422",
// },
// // FIXME: `signer-connection` sub-dep is already specifying beta.23 -> typings mismatch.
// // @ts-ignore
// client,
// });
// const web3Provider = new providers.Web3Provider(ethereumProvider);
// setEthereumProvider(ethereumProvider);
// setWeb3Provider(web3Provider);
// // Enable session (triggers QR Code modal if we bound the listener on `client` for it).
// // const accounts = await ethereumProvider.enable();
// // console.log("accounts:", accounts);
// // const provider = new providers.Web3Provider(ethereumProvider);
// // console.log(provider);
// // console.log(await provider.listAccounts());
// // console.log(await provider.getNetwork());
// // console.log(provider.getSigner());
// // console.log(await provider.getBalance(accounts[0]));
// // const TEST_ETH_TRANSFER = {
// // from: accounts[0],
// // to: accounts[0],
// // value: utils.parseEther("1").toHexString(),
// // data: "0x",
// // };
// // const signer = provider.getSigner();
// // const transferTx = await signer.sendTransaction(TEST_ETH_TRANSFER);
// };
// init();
// }, [client]);
const onEnable = useCallback(
async (caipChainId: string) => {
if (!client) {
throw new ReferenceError("WalletConnect Client is not initialized.");
}
const chainId = caipChainId.split(":").pop();
console.log("Enabling EthereumProvider for chainId: ", chainId);
// Create WalletConnect Provider // Create WalletConnect Provider
const ethereumProvider = new EthereumProvider({ const ethereumProvider = new EthereumProvider({
chainId: 42, chainId: Number(chainId),
rpc: { rpc: {
infuraId: "5dc0df7abe4645dfb06a9a8c39ede422", infuraId: "5dc0df7abe4645dfb06a9a8c39ede422",
}, },
@ -203,58 +224,36 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
}); });
const web3Provider = new providers.Web3Provider(ethereumProvider); const web3Provider = new providers.Web3Provider(ethereumProvider);
console.log(ethereumProvider);
setEthereumProvider(ethereumProvider); setEthereumProvider(ethereumProvider);
setWeb3Provider(web3Provider); setWeb3Provider(web3Provider);
// Enable session (triggers QR Code modal if we bound the listener on `client` for it). const accounts = await ethereumProvider.enable();
// const accounts = await ethereumProvider.enable(); setAccounts(accounts);
// console.log("accounts:", accounts);
// const provider = new providers.Web3Provider(ethereumProvider); setChain(caipChainId);
// console.log(provider); try {
// console.log(await provider.listAccounts()); setIsFetchingBalances(true);
// console.log(await provider.getNetwork()); const balances = await Promise.all(
// console.log(provider.getSigner()); accounts.map(async account => {
// console.log(await provider.getBalance(accounts[0])); const balance = await web3Provider.getBalance(account);
return { symbol: "ETH", balance: utils.formatEther(balance) };
}),
);
// const TEST_ETH_TRANSFER = { setBalances(balances);
// from: accounts[0], } catch (error: any) {
// to: accounts[0], throw new Error(error);
// value: utils.parseEther("1").toHexString(), } finally {
// data: "0x", setIsFetchingBalances(false);
// }; }
// const signer = provider.getSigner(); QRCodeModal.close();
// const transferTx = await signer.sendTransaction(TEST_ETH_TRANSFER); },
}; [client],
);
init();
}, [client]);
const onEnable = useCallback(async () => {
if (!ethereumProvider) {
throw new ReferenceError("ethereumProvider is not defined.");
}
if (!web3Provider) {
throw new ReferenceError("web3Provider is not defined.");
}
const accounts = await ethereumProvider.enable();
setAccounts(accounts);
setChains(["eip155:42"]);
const balances = await Promise.all(
accounts.map(async account => {
const balance = await web3Provider.getBalance(account);
return { symbol: "ETH", balance: utils.formatEther(balance) };
}),
);
setBalances(balances);
QRCodeModal.close();
}, [ethereumProvider, web3Provider]);
console.log(balances); console.log(balances);
@ -265,11 +264,11 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
balances, balances,
isFetchingBalances, isFetchingBalances,
accounts, accounts,
chains, chain,
client, client,
session, session,
disconnect, disconnect,
setChains, setChain,
onEnable, onEnable,
web3Provider, web3Provider,
}), }),
@ -279,11 +278,11 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
balances, balances,
isFetchingBalances, isFetchingBalances,
accounts, accounts,
chains, chain,
client, client,
session, session,
disconnect, disconnect,
setChains, setChain,
onEnable, onEnable,
web3Provider, web3Provider,
], ],

113
dapps/react-dapp-v2-with-ethers/src/contexts/Web3ProviderContext.tsx
View File

@ -1,113 +0,0 @@
import Client, { CLIENT_EVENTS } from "@walletconnect/client";
import { PairingTypes, SessionTypes } from "@walletconnect/types";
import QRCodeModal from "@walletconnect/legacy-modal";
import {
createContext,
ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from "react";
import {
DEFAULT_APP_METADATA,
DEFAULT_COSMOS_METHODS,
DEFAULT_EIP155_METHODS,
DEFAULT_LOGGER,
DEFAULT_PROJECT_ID,
DEFAULT_RELAY_URL,
} from "../constants";
import { AccountBalances, apiGetAccountAssets } from "../helpers";
import { ERROR, getAppMetadata } from "@walletconnect/utils";
import EthereumProvider from "@walletconnect/ethereum-provider";
import { providers } from "ethers";
import { useWalletConnectClient } from "./ClientContext";
/**
* Types
*/
type IContext = any;
/**
* Context
*/
export const Web3ProviderContext = createContext<IContext>({} as IContext);
/**
* Provider
*/
export function Web3ContextProvider({ children }: { children: ReactNode | ReactNode[] }) {
const [ethereumProvider, setEthereumProvider] = useState<EthereumProvider>();
const [web3Provider, setWeb3Provider] = useState<providers.Web3Provider>();
const { client } = useWalletConnectClient();
useEffect(() => {
const init = async () => {
if (!client) return;
// Create WalletConnect Provider
const ethereumProvider = new EthereumProvider({
chainId: 42,
rpc: {
infuraId: "5dc0df7abe4645dfb06a9a8c39ede422",
},
// FIXME: `signer-connection` sub-dep is already specifying beta.23 -> typings mismatch.
// @ts-ignore
client,
});
const web3Provider = new providers.Web3Provider(ethereumProvider);
setEthereumProvider(ethereumProvider);
setWeb3Provider(web3Provider);
// Enable session (triggers QR Code modal if we bound the listener on `client` for it).
// const accounts = await ethereumProvider.enable();
// console.log("accounts:", accounts);
// const provider = new providers.Web3Provider(ethereumProvider);
// console.log(provider);
// console.log(await provider.listAccounts());
// console.log(await provider.getNetwork());
// console.log(provider.getSigner());
// console.log(await provider.getBalance(accounts[0]));
// const TEST_ETH_TRANSFER = {
// from: accounts[0],
// to: accounts[0],
// value: utils.parseEther("1").toHexString(),
// data: "0x",
// };
// const signer = provider.getSigner();
// const transferTx = await signer.sendTransaction(TEST_ETH_TRANSFER);
// console.log(transferTx);
// const signer = provider.getSigner();
// const msg = "Hello world";
// const signature = await signer.signMessage(msg);
// console.log("signature:", signature);
};
init();
}, [client]);
const onEnable = async () => {
await ethereumProvider?.enable();
};
return (
<Web3ProviderContext.Provider value={{ onEnable }}>{children}</Web3ProviderContext.Provider>
);
}
export function useWeb3Provider() {
const context = useContext(Web3ProviderContext);
if (context === undefined) {
throw new Error("useWeb3Provider must be used within a Web3ContextProvider");
}
return context;
}