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,
session,
disconnect,
chains,
chain,
setChain,
accounts,
balances,
isFetchingBalances,
isInitializing,
setChains,
onEnable,
web3Provider,
} = useWalletConnectClient();
@ -160,14 +160,6 @@ export default function App() {
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.
const renderModal = () => {
switch (modal) {
@ -175,7 +167,8 @@ export default function App() {
if (typeof client === "undefined") {
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":
return <RequestModal pending={isRpcRequestPending} result={rpcResult} />;
case "ping":
@ -194,7 +187,7 @@ export default function App() {
<span>{`Using v${version || "2.0.0-beta"}`}</span>
</h6>
<SButtonContainer>
<h6>Select chains:</h6>
<h6>Select an Ethereum chain:</h6>
<SToggleContainer>
<p>Testnets Only?</p>
<Toggle active={isTestnet} onClick={toggleTestnets} />
@ -204,13 +197,13 @@ export default function App() {
key={chainId}
chainId={chainId}
chainData={chainData}
onClick={handleChainSelectionClick}
active={chains.includes(chainId)}
onClick={onEnable}
// active={chains.includes(chainId)}
/>
))}
<SConnectButton left onClick={onEnable} disabled={!chains.length}>
{/* <SConnectButton left onClick={onEnable} disabled={!chains.length}>
{"Connect"}
</SConnectButton>
</SConnectButton> */}
</SButtonContainer>
</SLanding>
) : (
@ -218,9 +211,6 @@ export default function App() {
<h3>Accounts</h3>
<SAccounts>
{accounts.map(account => {
// const [namespace, reference, address] = account.split(":");
// const chainId = `${namespace}:${reference}`;
const chainId = "eip155:42";
return (
<Blockchain
key={account}
@ -228,9 +218,9 @@ export default function App() {
chainData={chainData}
fetching={isFetchingBalances}
address={account}
chainId={chainId}
chainId={chain}
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,
} from "../helpers";
import { fonts } from "../styles";
import { useWalletConnectClient } from "../contexts/ClientContext";
interface AccountStyleProps {
rgb: string;
@ -123,8 +122,6 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
const chain = getBlockchainDisplayData(chainId, chainData);
if (typeof chain === "undefined") {
console.warn("CHAIN UNDEFINED");
return null;
}
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:42161",
"eip155:42220",
"cosmos:cosmoshub-4",
];
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_COSMOS_METHODS = ["cosmos_signDirect", "cosmos_signAmino"];
export const DEFAULT_LOGGER = "debug";
export const DEFAULT_APP_METADATA = {

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

@ -12,7 +12,6 @@ import {
} from "react";
import {
DEFAULT_APP_METADATA,
DEFAULT_COSMOS_METHODS,
DEFAULT_EIP155_METHODS,
DEFAULT_LOGGER,
DEFAULT_PROJECT_ID,
@ -30,13 +29,13 @@ interface IContext {
session: SessionTypes.Created | undefined;
disconnect: () => Promise<void>;
isInitializing: boolean;
chains: string[];
chain: string;
pairings: string[];
accounts: string[];
balances: { symbol: string; balance: string }[];
isFetchingBalances: boolean;
setChains: any;
onEnable: () => Promise<void>;
setChain: (chainId: string) => void;
onEnable: (chainId: string) => Promise<void>;
web3Provider?: providers.Web3Provider;
}
@ -61,43 +60,14 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
const [balances, setBalances] = useState<{ symbol: string; balance: string }[]>([]);
const [accounts, setAccounts] = useState<string[]>([]);
const [chains, setChains] = useState<string[]>([]);
const [chain, setChain] = useState<string>("");
const resetApp = () => {
setPairings([]);
setSession(undefined);
setBalances([]);
setAccounts([]);
setChains([]);
};
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;
setChain("");
};
const disconnect = useCallback(async () => {
@ -133,7 +103,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
});
_client.on(CLIENT_EVENTS.pairing.created, async () => {
debugger;
setPairings(_client.pairing.topics);
});
@ -173,6 +142,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
setClient(_client);
await _subscribeToEvents(_client);
// TODO:
// await _checkPersistedState(_client);
} catch (err) {
throw err;
@ -187,13 +157,64 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
}
}, [client, createClient]);
useEffect(() => {
const init = async () => {
if (!client) return;
// 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);
// };
// 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
const ethereumProvider = new EthereumProvider({
chainId: 42,
chainId: Number(chainId),
rpc: {
infuraId: "5dc0df7abe4645dfb06a9a8c39ede422",
},
@ -203,47 +224,18 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
});
const web3Provider = new providers.Web3Provider(ethereumProvider);
console.log(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 () => {
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"]);
setChain(caipChainId);
try {
setIsFetchingBalances(true);
const balances = await Promise.all(
accounts.map(async account => {
const balance = await web3Provider.getBalance(account);
@ -252,9 +244,16 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
);
setBalances(balances);
} catch (error: any) {
throw new Error(error);
} finally {
setIsFetchingBalances(false);
}
QRCodeModal.close();
}, [ethereumProvider, web3Provider]);
},
[client],
);
console.log(balances);
@ -265,11 +264,11 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
balances,
isFetchingBalances,
accounts,
chains,
chain,
client,
session,
disconnect,
setChains,
setChain,
onEnable,
web3Provider,
}),
@ -279,11 +278,11 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
balances,
isFetchingBalances,
accounts,
chains,
chain,
client,
session,
disconnect,
setChains,
setChain,
onEnable,
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;
}