Add required namespaces and use laconic chain ID

This commit is contained in:
Shreerang Kale 2024-10-24 18:56:46 +05:30 committed by IshaVenikar
parent 3033e75a9e
commit a1597900f6
4 changed files with 59 additions and 39 deletions

View File

@ -15,3 +15,5 @@ VITE_BUGSNAG_API_KEY=
VITE_PASSKEY_WALLET_RPID= VITE_PASSKEY_WALLET_RPID=
VITE_TURNKEY_API_BASE_URL= VITE_TURNKEY_API_BASE_URL=
VITE_TURNKEY_ORGANIZATION_ID= VITE_TURNKEY_ORGANIZATION_ID=
VITE_LACONICD_CHAIN_ID=

View File

@ -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 SignClient from '@walletconnect/sign-client';
import { getSdkError } from '@walletconnect/utils'; import { getSdkError } from '@walletconnect/utils';
@ -6,7 +13,10 @@ import { SessionTypes } from '@walletconnect/types';
import { StargateClient } from '@cosmjs/stargate'; import { StargateClient } from '@cosmjs/stargate';
import { walletConnectModal } from '../utils/web3modal'; 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 { interface ClientInterface {
signClient: SignClient | undefined; signClient: SignClient | undefined;
@ -15,7 +25,7 @@ interface ClientInterface {
onConnect: () => Promise<void>; onConnect: () => Promise<void>;
onDisconnect: () => Promise<void>; onDisconnect: () => Promise<void>;
onSessionDelete: () => void; onSessionDelete: () => void;
accounts: {address: string, balance?: string}[] | undefined; accounts: { address: string; balance?: string }[] | undefined;
} }
const ClientContext = createContext({} as ClientInterface); const ClientContext = createContext({} as ClientInterface);
@ -24,11 +34,15 @@ export const useWalletConnectClient = () => {
return useContext(ClientContext); return useContext(ClientContext);
}; };
export const WalletConnectClientProvider = ({ children }: {children: JSX.Element}) => { export const WalletConnectClientProvider = ({
children,
}: {
children: JSX.Element;
}) => {
const [signClient, setSignClient] = useState<SignClient>(); const [signClient, setSignClient] = useState<SignClient>();
const [session, setSession] = useState<SessionTypes.Struct>(); const [session, setSession] = useState<SessionTypes.Struct>();
const [loadingSession, setLoadingSession] = useState(true); const [loadingSession, setLoadingSession] = useState(true);
const [accounts, setAccounts] = useState<{address: string, balance?: string}[]>(); const [accounts, setAccounts] = useState<{ address: string }[]>();
const isSignClientInitializing = useRef<boolean>(false); const isSignClientInitializing = useRef<boolean>(false);
@ -36,14 +50,10 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element
return await StargateClient.connect(endpoint); return await StargateClient.connect(endpoint);
}, []); }, []);
const onSessionConnect = useCallback(async(session: SessionTypes.Struct) => { const onSessionConnect = useCallback(async (session: SessionTypes.Struct) => {
setSession(session); setSession(session);
}, []); }, []);
useEffect(()=>{
console.log(accounts)
}, [accounts])
const subscribeToEvents = useCallback( const subscribeToEvents = useCallback(
async (client: SignClient) => { async (client: SignClient) => {
client.on('session_update', ({ topic, params }) => { client.on('session_update', ({ topic, params }) => {
@ -51,17 +61,24 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element
const currentSession = client.session.get(topic); const currentSession = client.session.get(topic);
const updatedSession = { ...currentSession, namespaces }; const updatedSession = { ...currentSession, namespaces };
setSession(updatedSession); setSession(updatedSession);
});}, });
[setSession] },
[setSession],
); );
const onConnect = async () => { const onConnect = async () => {
console.log({signClient}) const proposalNamespace = {
try { cosmos: {
const { uri, approval } = await signClient!.connect({}); methods: ['cosmos_sendTransaction'],
chains: [`cosmos:${VITE_LACONICD_CHAIN_ID}`],
events: [],
},
};
console.log({uri}) try {
console.log({uri}) const { uri, approval } = await signClient!.connect({
requiredNamespaces: proposalNamespace,
});
if (uri) { if (uri) {
walletConnectModal.openModal({ uri }); walletConnectModal.openModal({ uri });
@ -105,33 +122,34 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element
if (signClient.session.length) { if (signClient.session.length) {
const lastKeyIndex = signClient.session.keys.length - 1; const lastKeyIndex = signClient.session.keys.length - 1;
const previousSsession = signClient.session.get( const previousSsession = signClient.session.get(
signClient.session.keys[lastKeyIndex] signClient.session.keys[lastKeyIndex],
); );
await onSessionConnect(previousSsession); await onSessionConnect(previousSsession);
return previousSsession; return previousSsession;
} }
},[session, onSessionConnect]); },
[session, onSessionConnect],
);
const createClient = useCallback( async () => { const createClient = useCallback(async () => {
isSignClientInitializing.current = true; isSignClientInitializing.current = true;
try{ try {
const signClient = await SignClient.init({ const signClient = await SignClient.init({
projectId: VITE_WALLET_CONNECT_ID, projectId: VITE_WALLET_CONNECT_ID,
metadata: { metadata: {
name: 'Laconic Pay', name: 'Snowball',
description: 'App for payments', description: 'App for deploying apps',
url: window.location.href, url: window.location.href,
icons: ['https://avatars.githubusercontent.com/u/92608123'] icons: ['https://avatars.githubusercontent.com/u/92608123'],
} },
}); });
setSignClient(signClient); setSignClient(signClient);
await checkPersistedState(signClient); await checkPersistedState(signClient);
await subscribeToEvents(signClient); await subscribeToEvents(signClient);
setLoadingSession(false); setLoadingSession(false);
} catch (e) {
} catch(e) {
console.error('error in createClient', e); console.error('error in createClient', e);
} }
isSignClientInitializing.current = false; isSignClientInitializing.current = false;
@ -163,7 +181,7 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element
}, [session, createCosmosClient]); }, [session, createCosmosClient]);
useEffect(() => { useEffect(() => {
if(!signClient){ if (!signClient) {
return; return;
} }
@ -176,16 +194,15 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element
return ( return (
<ClientContext.Provider <ClientContext.Provider
value= value={{
{{ signClient,
signClient, onConnect,
onConnect, onDisconnect,
onDisconnect, onSessionDelete,
onSessionDelete, loadingSession,
loadingSession, session,
session, accounts,
accounts, }}
}}
> >
{children} {children}
</ClientContext.Provider> </ClientContext.Provider>

View File

@ -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_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_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_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;

View File

@ -3,5 +3,5 @@ import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
export const walletConnectModal = new WalletConnectModal({ export const walletConnectModal = new WalletConnectModal({
projectId: VITE_WALLET_CONNECT_ID!, projectId: VITE_WALLET_CONNECT_ID!,
chains:['cosmos:theta-testnet-001'] chains:['cosmos:theta-testnet-001', 'cosmos:laconic_9000-1'],
}); });