|
|
@ -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,8 +194,7 @@ export const WalletConnectClientProvider = ({ children }: {children: JSX.Element
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ClientContext.Provider
|
|
|
|
<ClientContext.Provider
|
|
|
|
value=
|
|
|
|
value={{
|
|
|
|
{{
|
|
|
|
|
|
|
|
signClient,
|
|
|
|
signClient,
|
|
|
|
onConnect,
|
|
|
|
onConnect,
|
|
|
|
onDisconnect,
|
|
|
|
onDisconnect,
|
|
|
|