From a1597900f6c6ad911605e44382104a22083ceb45 Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Thu, 24 Oct 2024 18:56:46 +0530 Subject: [PATCH] Add required namespaces and use laconic chain ID --- packages/frontend/.env.example | 2 + .../src/context/WalletConnectContext.tsx | 93 +++++++++++-------- packages/frontend/src/utils/constants.ts | 1 + packages/frontend/src/utils/web3modal.ts | 2 +- 4 files changed, 59 insertions(+), 39 deletions(-) diff --git a/packages/frontend/.env.example b/packages/frontend/.env.example index 24d6d6da..ac6ba474 100644 --- a/packages/frontend/.env.example +++ b/packages/frontend/.env.example @@ -15,3 +15,5 @@ VITE_BUGSNAG_API_KEY= VITE_PASSKEY_WALLET_RPID= VITE_TURNKEY_API_BASE_URL= VITE_TURNKEY_ORGANIZATION_ID= + +VITE_LACONICD_CHAIN_ID= diff --git a/packages/frontend/src/context/WalletConnectContext.tsx b/packages/frontend/src/context/WalletConnectContext.tsx index ca45e184..e4b2e173 100644 --- a/packages/frontend/src/context/WalletConnectContext.tsx +++ b/packages/frontend/src/context/WalletConnectContext.tsx @@ -1,4 +1,11 @@ -import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'; +import { + createContext, + useCallback, + useContext, + useEffect, + useRef, + useState, +} from 'react'; import SignClient from '@walletconnect/sign-client'; import { getSdkError } from '@walletconnect/utils'; @@ -6,7 +13,10 @@ import { SessionTypes } from '@walletconnect/types'; import { StargateClient } from '@cosmjs/stargate'; import { walletConnectModal } from '../utils/web3modal'; -import { VITE_WALLET_CONNECT_ID } from 'utils/constants'; +import { + VITE_LACONICD_CHAIN_ID, + VITE_WALLET_CONNECT_ID, +} from 'utils/constants'; interface ClientInterface { signClient: SignClient | undefined; @@ -15,7 +25,7 @@ interface ClientInterface { onConnect: () => Promise; onDisconnect: () => Promise; onSessionDelete: () => void; - accounts: {address: string, balance?: string}[] | undefined; + accounts: { address: string; balance?: string }[] | undefined; } const ClientContext = createContext({} as ClientInterface); @@ -24,11 +34,15 @@ export const useWalletConnectClient = () => { return useContext(ClientContext); }; -export const WalletConnectClientProvider = ({ children }: {children: JSX.Element}) => { +export const WalletConnectClientProvider = ({ + children, +}: { + children: JSX.Element; +}) => { const [signClient, setSignClient] = useState(); const [session, setSession] = useState(); const [loadingSession, setLoadingSession] = useState(true); - const [accounts, setAccounts] = useState<{address: string, balance?: string}[]>(); + const [accounts, setAccounts] = useState<{ address: string }[]>(); const isSignClientInitializing = useRef(false); @@ -36,14 +50,10 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element return await StargateClient.connect(endpoint); }, []); - const onSessionConnect = useCallback(async(session: SessionTypes.Struct) => { + const onSessionConnect = useCallback(async (session: SessionTypes.Struct) => { setSession(session); }, []); - useEffect(()=>{ - console.log(accounts) - }, [accounts]) - const subscribeToEvents = useCallback( async (client: SignClient) => { client.on('session_update', ({ topic, params }) => { @@ -51,17 +61,24 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element const currentSession = client.session.get(topic); const updatedSession = { ...currentSession, namespaces }; setSession(updatedSession); - });}, - [setSession] + }); + }, + [setSession], ); const onConnect = async () => { - console.log({signClient}) - try { - const { uri, approval } = await signClient!.connect({}); + const proposalNamespace = { + cosmos: { + methods: ['cosmos_sendTransaction'], + chains: [`cosmos:${VITE_LACONICD_CHAIN_ID}`], + events: [], + }, + }; - console.log({uri}) - console.log({uri}) + try { + const { uri, approval } = await signClient!.connect({ + requiredNamespaces: proposalNamespace, + }); if (uri) { walletConnectModal.openModal({ uri }); @@ -105,33 +122,34 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element if (signClient.session.length) { const lastKeyIndex = signClient.session.keys.length - 1; const previousSsession = signClient.session.get( - signClient.session.keys[lastKeyIndex] + signClient.session.keys[lastKeyIndex], ); await onSessionConnect(previousSsession); return previousSsession; } - },[session, onSessionConnect]); + }, + [session, onSessionConnect], + ); - const createClient = useCallback( async () => { + const createClient = useCallback(async () => { isSignClientInitializing.current = true; - try{ + try { const signClient = await SignClient.init({ projectId: VITE_WALLET_CONNECT_ID, metadata: { - name: 'Laconic Pay', - description: 'App for payments', + name: 'Snowball', + description: 'App for deploying apps', url: window.location.href, - icons: ['https://avatars.githubusercontent.com/u/92608123'] - } + icons: ['https://avatars.githubusercontent.com/u/92608123'], + }, }); setSignClient(signClient); await checkPersistedState(signClient); await subscribeToEvents(signClient); setLoadingSession(false); - - } catch(e) { + } catch (e) { console.error('error in createClient', e); } isSignClientInitializing.current = false; @@ -163,7 +181,7 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element }, [session, createCosmosClient]); useEffect(() => { - if(!signClient){ + if (!signClient) { return; } @@ -176,16 +194,15 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element return ( {children} diff --git a/packages/frontend/src/utils/constants.ts b/packages/frontend/src/utils/constants.ts index 57bd5391..8e2d77b0 100644 --- a/packages/frontend/src/utils/constants.ts +++ b/packages/frontend/src/utils/constants.ts @@ -9,3 +9,4 @@ export const VITE_GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID; export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID; export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY; export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY; +export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID; diff --git a/packages/frontend/src/utils/web3modal.ts b/packages/frontend/src/utils/web3modal.ts index b89a6aff..45a6d204 100644 --- a/packages/frontend/src/utils/web3modal.ts +++ b/packages/frontend/src/utils/web3modal.ts @@ -3,5 +3,5 @@ import { VITE_WALLET_CONNECT_ID } from 'utils/constants'; export const walletConnectModal = new WalletConnectModal({ projectId: VITE_WALLET_CONNECT_ID!, - chains:['cosmos:theta-testnet-001'] + chains:['cosmos:theta-testnet-001', 'cosmos:laconic_9000-1'], });