From cc39f1c52bffdc32925f535278e04e205045de9c Mon Sep 17 00:00:00 2001 From: Ben Kremer Date: Wed, 23 Feb 2022 16:22:32 +0100 Subject: [PATCH] refactor(cosmos): handle RPC requests via cosmosProvider --- dapps/react-dapp-v2-cosmos/src/App.tsx | 71 +++++++++++-------- .../src/contexts/ClientContext.tsx | 55 ++------------ 2 files changed, 45 insertions(+), 81 deletions(-) diff --git a/dapps/react-dapp-v2-cosmos/src/App.tsx b/dapps/react-dapp-v2-cosmos/src/App.tsx index 3fa9fbc..673c47c 100644 --- a/dapps/react-dapp-v2-cosmos/src/App.tsx +++ b/dapps/react-dapp-v2-cosmos/src/App.tsx @@ -7,14 +7,8 @@ import Blockchain from "./components/Blockchain"; import Column from "./components/Column"; import Header from "./components/Header"; import Modal from "./components/Modal"; -import { DEFAULT_MAIN_CHAINS, DEFAULT_TEST_CHAINS } from "./constants"; -import { - AccountAction, - formatTestTransaction, - getLocalStorageTestnetFlag, - setLocaleStorageTestnetFlag, -} from "./helpers"; -import Toggle from "./components/Toggle"; +import { DEFAULT_MAIN_CHAINS } from "./constants"; +import { AccountAction } from "./helpers"; import RequestModal from "./modals/RequestModal"; import PingModal from "./modals/PingModal"; import { @@ -24,7 +18,6 @@ import { SContent, SLanding, SLayout, - SToggleContainer, } from "./components/app"; import { useWalletConnectClient } from "./contexts/ClientContext"; @@ -36,7 +29,6 @@ interface IFormattedRpcResponse { } export default function App() { - const [isTestnet, setIsTestnet] = useState(getLocalStorageTestnetFlag()); const [isRpcRequestPending, setIsRpcRequestPending] = useState(false); const [rpcResult, setRpcResult] = useState(); @@ -55,10 +47,8 @@ export default function App() { accounts, balances, chainData, - isFetchingBalances, isInitializing, onEnable, - web3Provider, cosmosProvider, } = useWalletConnectClient(); @@ -90,9 +80,6 @@ export default function App() { }; const testSignDirect: () => Promise = async () => { - if (!web3Provider) { - throw new Error("web3Provider not connected"); - } if (!cosmosProvider) { throw new Error("cosmosProvider not connected"); } @@ -147,7 +134,38 @@ export default function App() { }; }; - // const testSignAmino = null; + const testSignAmino: () => Promise = async () => { + if (!cosmosProvider) { + throw new Error("cosmosProvider not connected"); + } + + // test amino sign doc + const signDoc = { + msgs: [], + fee: { amount: [], gas: "23" }, + chain_id: "foochain", + memo: "hello, world", + account_number: "7", + sequence: "54", + }; + + const [address] = cosmosProvider.accounts; + + // cosmos_signAmino params + const params = { signerAddress: address, signDoc }; + + const signature = (await cosmosProvider.request({ + method: "cosmos_signAmino", + params, + })) as string; + // const valid = utils.verifyMessage(msg, signature) === address; + return { + method: "cosmos_signAmino", + address, + valid: true, + result: signature, + }; + }; const getCosmosActions = (): AccountAction[] => { const wrapRpcRequest = (rpcRequest: () => Promise) => async () => { @@ -163,14 +181,10 @@ export default function App() { } }; - return [{ method: "cosmos_signDirect", callback: wrapRpcRequest(testSignDirect) }]; - }; - - // Toggle between displaying testnet or mainnet chains as selection options. - const toggleTestnets = () => { - const nextIsTestnetState = !isTestnet; - setIsTestnet(nextIsTestnetState); - setLocaleStorageTestnetFlag(nextIsTestnetState); + return [ + { method: "cosmos_signDirect", callback: wrapRpcRequest(testSignDirect) }, + { method: "cosmos_signAmino", callback: wrapRpcRequest(testSignAmino) }, + ]; }; // Renders the appropriate model for the given request that is currently in-flight. @@ -186,7 +200,7 @@ export default function App() { }; const renderContent = () => { - const chainOptions = isTestnet ? DEFAULT_TEST_CHAINS : DEFAULT_MAIN_CHAINS; + const chainOptions = DEFAULT_MAIN_CHAINS; return !accounts.length && !Object.keys(balances).length ? ( @@ -194,11 +208,7 @@ export default function App() { {`Using v${version || "2.0.0-beta"}`} -
Select an Ethereum chain:
- -

Testnets Only?

- - +
Select Cosmos chain:
{chainOptions.map(chainId => ( ))} @@ -214,7 +224,6 @@ export default function App() { key={account} active={true} chainData={chainData} - fetching={isFetchingBalances} address={account} chainId={chain} balances={balances} diff --git a/dapps/react-dapp-v2-cosmos/src/contexts/ClientContext.tsx b/dapps/react-dapp-v2-cosmos/src/contexts/ClientContext.tsx index de3ba0a..8eff908 100644 --- a/dapps/react-dapp-v2-cosmos/src/contexts/ClientContext.tsx +++ b/dapps/react-dapp-v2-cosmos/src/contexts/ClientContext.tsx @@ -12,7 +12,6 @@ import { useState, } from "react"; import { DEFAULT_LOGGER, DEFAULT_PROJECT_ID, DEFAULT_RELAY_URL } from "../constants"; -import { providers, utils } from "ethers"; import { AccountBalances, ChainNamespaces, getAllChainNamespaces } from "../helpers"; import { apiGetChainNamespace, ChainsMap } from "caip-api"; @@ -28,10 +27,8 @@ interface IContext { pairings: string[]; accounts: string[]; balances: AccountBalances; - isFetchingBalances: boolean; chainData: ChainNamespaces; onEnable: (chainId: string) => Promise; - web3Provider?: providers.Web3Provider; cosmosProvider?: CosmosProvider; } @@ -49,9 +46,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac const [session, setSession] = useState(); const [cosmosProvider, setCosmosProvider] = useState(); - const [web3Provider, setWeb3Provider] = useState(); - const [isFetchingBalances, setIsFetchingBalances] = useState(false); const [isInitializing, setIsInitializing] = useState(false); const [hasCheckedPersistedSession, setHasCheckedPersistedSession] = useState(false); @@ -84,8 +79,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac } }), ); - console.log(chainData); - setChainData(chainData); }; @@ -146,27 +139,20 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac const chainId = caipChainId.split(":").pop(); + if (!chainId) { + throw new Error("Could not derive chainId from CAIP chainId"); + } + console.log("Enabling cosmosProvider for chainId: ", chainId); // Create WalletConnect Provider const cosmosProvider = new CosmosProvider({ - chains: ["cosmoshub-4"], - rpc: { - custom: { - "cosmoshub-4": "https://rpc.cosmos.network/", - }, - }, + chains: [chainId], client, }); - const web3Provider = new providers.Web3Provider(cosmosProvider); console.log(cosmosProvider); - console.log(web3Provider); - setCosmosProvider(cosmosProvider); - setWeb3Provider(web3Provider); - - // cosmosProvider.signer.connection.on(SIGNER_EVENTS.uri, ({ uri }) => walletClient.pair({ uri })); try { await cosmosProvider.connect(); @@ -182,33 +168,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac setSession(_session); setChain(caipChainId); - // TODO: - // try { - // setIsFetchingBalances(true); - // const _balances = await Promise.all( - // _accounts.map(async account => { - // const balance = await web3Provider.getBalance(account); - // return { - // account, - // symbol: "ETH", - // balance: utils.formatEther(balance), - // contractAddress: "", - // }; - // }), - // ); - - // const balancesByAccount = _balances.reduce((obj, balance) => { - // obj[balance.account] = balance; - // return obj; - // }, {} as AccountBalances); - - // setBalances(balancesByAccount); - // } catch (error: any) { - // throw new Error(error); - // } finally { - // setIsFetchingBalances(false); - // } - QRCodeModal.close(); }, [client], @@ -259,7 +218,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac pairings, isInitializing, balances, - isFetchingBalances, accounts, chain, client, @@ -267,14 +225,12 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac disconnect, chainData, onEnable, - web3Provider, cosmosProvider, }), [ pairings, isInitializing, balances, - isFetchingBalances, accounts, chain, client, @@ -282,7 +238,6 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac disconnect, chainData, onEnable, - web3Provider, cosmosProvider, ], );