Skip to content

Commit c86ff1f

Browse files
tanguyenvntanguyenvn
committed
feat: update solana hooks and composables
1 parent 6763380 commit c86ff1f

File tree

6 files changed

+85
-41
lines changed

6 files changed

+85
-41
lines changed

‎packages/modal/src/react/solana/hooks/useSolanaWallet.ts‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createSolanaRpc, type Rpc, type SolanaRpcApi } from "@solana/kit";
22
import type { Wallet } from "@wallet-standard/base";
33
import { CHAIN_NAMESPACES, WALLET_CONNECTORS } from "@web3auth/no-modal";
44
import { SOLANA_METHOD_TYPES } from "@web3auth/ws-embed";
5-
import { useCallback, useMemo } from "react";
5+
import { useCallback, useEffect, useMemo, useState } from "react";
66

77
import { useChain } from "../../hooks/useChain";
88
import { useWeb3Auth } from "../../hooks/useWeb3Auth";
@@ -29,20 +29,37 @@ export type IUseSolanaWallet = {
2929
export const useSolanaWallet = (): IUseSolanaWallet => {
3030
const { connection, web3Auth } = useWeb3Auth();
3131
const { chainNamespace } = useChain();
32+
const [solanaWallet, setSolanaWallet] = useState<Wallet | null>(null);
33+
const [accounts, setAccounts] = useState<string[] | null>(null);
3234

33-
const solanaWallet = useMemo(() => {
34-
if (chainNamespace !== CHAIN_NAMESPACES.SOLANA) return null;
35-
return connection?.solanaWallet ?? null;
35+
/* eslint-disable react-hooks/set-state-in-effect -- intentional */
36+
useEffect(() => {
37+
if (!connection?.solanaWallet) {
38+
setSolanaWallet(null);
39+
setAccounts(null);
40+
return;
41+
}
42+
setSolanaWallet((prev) => {
43+
const shouldSetup = prev === null || chainNamespace === CHAIN_NAMESPACES.SOLANA;
44+
if (!shouldSetup) return prev;
45+
return connection.solanaWallet;
46+
});
3647
}, [connection, chainNamespace]);
3748

38-
const accounts = useMemo((): string[] | null => {
39-
if (chainNamespace !== CHAIN_NAMESPACES.SOLANA || !solanaWallet) return null;
49+
useEffect(() => {
50+
if (!solanaWallet) {
51+
setAccounts(null);
52+
return;
53+
}
4054
const accts = solanaWallet.accounts.map((a) => a.address);
41-
return accts.length > 0 ? accts : null;
42-
}, [solanaWallet, chainNamespace]);
55+
setAccounts(accts.length > 0 ? accts : null);
56+
}, [solanaWallet]);
57+
/* eslint-enable react-hooks/set-state-in-effect */
4358

4459
const rpc = useMemo(() => {
45-
if (!web3Auth || !solanaWallet || chainNamespace !== CHAIN_NAMESPACES.SOLANA) return null;
60+
if (!web3Auth?.currentChain?.rpcTarget || !solanaWallet || chainNamespace !== CHAIN_NAMESPACES.SOLANA) {
61+
return null;
62+
}
4663
return createSolanaRpc(web3Auth.currentChain.rpcTarget);
4764
}, [web3Auth, solanaWallet, chainNamespace]);
4865

‎packages/modal/src/vue/solana/composables/useSolanaWallet.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createSolanaRpc, type Rpc, type SolanaRpcApi } from "@solana/kit";
22
import type { Wallet } from "@wallet-standard/base";
3-
import { WALLET_CONNECTORS } from "@web3auth/no-modal";
3+
import { CHAIN_NAMESPACES, WALLET_CONNECTORS } from "@web3auth/no-modal";
44
import { SOLANA_METHOD_TYPES } from "@web3auth/ws-embed";
55
import { Ref, ref, ShallowRef, shallowRef, watch } from "vue";
66

7-
import { useWeb3Auth } from "../../composables";
7+
import { useChain, useWeb3Auth } from "../../composables";
88

99
export type IUseSolanaWallet = {
1010
accounts: Ref<string[] | null>;
@@ -27,17 +27,19 @@ export type IUseSolanaWallet = {
2727

2828
export const useSolanaWallet = (): IUseSolanaWallet => {
2929
const { connection, web3Auth } = useWeb3Auth();
30+
const { chainNamespace } = useChain();
3031
const accounts = ref<string[] | null>(null);
3132
const solanaWallet = shallowRef<Wallet | null>(null);
3233
const rpc = shallowRef<Rpc<SolanaRpcApi> | null>(null);
3334

3435
const setupWallet = () => {
3536
const wallet = connection.value?.solanaWallet ?? null;
3637
if (!wallet) return;
38+
3739
solanaWallet.value = wallet;
3840
const accts = wallet.accounts.map((a) => a.address);
3941
if (accts.length > 0) accounts.value = accts;
40-
if (web3Auth.value?.currentChain?.rpcTarget) {
42+
if (web3Auth.value?.currentChain?.rpcTarget && chainNamespace.value === CHAIN_NAMESPACES.SOLANA) {
4143
rpc.value = createSolanaRpc(web3Auth.value.currentChain.rpcTarget);
4244
}
4345
};
@@ -61,13 +63,14 @@ export const useSolanaWallet = (): IUseSolanaWallet => {
6163
};
6264

6365
watch(
64-
[connection],
65-
([newConnection]) => {
66+
[connection, chainNamespace],
67+
([newConnection, newChainNamespace]) => {
6668
if (!newConnection?.solanaWallet) {
6769
if (solanaWallet.value) resetWallet();
6870
return;
6971
}
70-
if (!solanaWallet.value) setupWallet();
72+
// setup wallet if not setup or chain namespace is changed to solana
73+
if (!solanaWallet.value || newChainNamespace === CHAIN_NAMESPACES.SOLANA) setupWallet();
7174
},
7275
{ immediate: true }
7376
);

‎packages/modal/src/vue/solana/provider.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createClient, createWalletStandardConnector, type SolanaClient } from "@solana/client";
2-
import { CHAIN_NAMESPACES, log } from "@web3auth/no-modal";
2+
import { CHAIN_NAMESPACES, type CustomChainConfig, log } from "@web3auth/no-modal";
33
import { defineComponent, Fragment, h, provide, ref, watch } from "vue";
44

55
import { useWeb3Auth } from "../composables";
@@ -40,8 +40,15 @@ export const SolanaProvider = defineComponent({
4040
return;
4141
}
4242

43-
const chainConfig = web3Auth.value.coreOptions.chains.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
44-
if (!chainConfig) return;
43+
const currentChain = web3Auth.value.currentChain;
44+
let chainConfig: CustomChainConfig;
45+
if (currentChain?.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
46+
chainConfig = currentChain;
47+
} else {
48+
// use the 1st Solana chain if current chain is not solana
49+
chainConfig = web3Auth.value.coreOptions.chains.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
50+
if (!chainConfig) return;
51+
}
4552

4653
const prevClient = clientRef.value;
4754
try {

‎packages/no-modal/src/react/solana/hooks/useSolanaWallet.ts‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,35 @@ export type IUseSolanaWallet = {
3030
export const useSolanaWallet = (): IUseSolanaWallet => {
3131
const { connection, web3Auth } = useWeb3Auth();
3232
const { chainNamespace } = useChain();
33+
const [solanaWallet, setSolanaWallet] = useState<Wallet | null>(null);
3334
const [accounts, setAccounts] = useState<string[] | null>(null);
3435

35-
const solanaWallet = useMemo(() => {
36-
if (chainNamespace !== CHAIN_NAMESPACES.SOLANA) return null;
37-
return connection?.solanaWallet ?? null;
36+
useEffect(() => {
37+
if (!connection?.solanaWallet) {
38+
setSolanaWallet(null);
39+
setAccounts(null);
40+
return;
41+
}
42+
setSolanaWallet((prev) => {
43+
const shouldSetup = prev === null || chainNamespace === CHAIN_NAMESPACES.SOLANA;
44+
if (!shouldSetup) return prev;
45+
return connection.solanaWallet;
46+
});
3847
}, [connection, chainNamespace]);
3948

49+
useEffect(() => {
50+
if (!solanaWallet) {
51+
setAccounts(null);
52+
return;
53+
}
54+
const accts = solanaWallet.accounts.map((a) => a.address);
55+
setAccounts(accts.length > 0 ? accts : null);
56+
}, [solanaWallet]);
57+
4058
const rpc = useMemo(() => {
41-
if (!web3Auth || !solanaWallet || chainNamespace !== CHAIN_NAMESPACES.SOLANA) return null;
59+
if (!web3Auth?.currentChain?.rpcTarget || !solanaWallet || chainNamespace !== CHAIN_NAMESPACES.SOLANA) {
60+
return null;
61+
}
4262
return createSolanaRpc(web3Auth.currentChain.rpcTarget);
4363
}, [web3Auth, solanaWallet, chainNamespace]);
4464

@@ -54,14 +74,5 @@ export const useSolanaWallet = (): IUseSolanaWallet => {
5474
return privateKey;
5575
}, [web3Auth, connection]);
5676

57-
useEffect(() => {
58-
if (chainNamespace !== CHAIN_NAMESPACES.SOLANA || !solanaWallet) {
59-
setAccounts(null);
60-
return;
61-
}
62-
const accts = solanaWallet.accounts.map((a) => a.address);
63-
if (accts.length > 0) setAccounts(accts);
64-
}, [solanaWallet, chainNamespace]);
65-
6677
return { solanaWallet, accounts, rpc, getPrivateKey };
6778
};

‎packages/no-modal/src/vue/solana/composables/useSolanaWallet.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createSolanaRpc, type Rpc, type SolanaRpcApi } from "@solana/kit";
22
import type { Wallet } from "@wallet-standard/base";
33
import { SOLANA_METHOD_TYPES } from "@web3auth/ws-embed";
4-
import { computed, Ref, ref, ShallowRef, shallowRef, watch } from "vue";
4+
import { Ref, ref, ShallowRef, shallowRef, watch } from "vue";
55

66
import { CHAIN_NAMESPACES } from "../../../base/chain/IChainInterface";
77
import { WALLET_CONNECTORS } from "../../../base/wallet";
@@ -33,16 +33,14 @@ export const useSolanaWallet = (): IUseSolanaWallet => {
3333
const solanaWallet = shallowRef<Wallet | null>(null);
3434
const rpc = shallowRef<Rpc<SolanaRpcApi> | null>(null);
3535

36-
const isSolana = computed(() => chainNamespace.value === CHAIN_NAMESPACES.SOLANA);
37-
3836
const setupWallet = () => {
39-
if (!isSolana.value) return;
4037
const wallet = connection.value?.solanaWallet ?? null;
4138
if (!wallet) return;
39+
4240
solanaWallet.value = wallet;
4341
const accts = wallet.accounts.map((a) => a.address);
4442
if (accts.length > 0) accounts.value = accts;
45-
if (web3Auth.value?.currentChain?.rpcTarget) {
43+
if (web3Auth.value?.currentChain?.rpcTarget && chainNamespace.value === CHAIN_NAMESPACES.SOLANA) {
4644
rpc.value = createSolanaRpc(web3Auth.value.currentChain.rpcTarget);
4745
}
4846
};
@@ -68,11 +66,12 @@ export const useSolanaWallet = (): IUseSolanaWallet => {
6866
watch(
6967
[connection, chainNamespace],
7068
([newConnection, newChainNamespace]) => {
71-
if (!newConnection?.solanaWallet || newChainNamespace !== CHAIN_NAMESPACES.SOLANA) {
69+
if (!newConnection?.solanaWallet) {
7270
if (solanaWallet.value) resetWallet();
7371
return;
7472
}
75-
if (!solanaWallet.value) setupWallet();
73+
// setup wallet if not setup or chain namespace is changed to solana
74+
if (!solanaWallet.value || newChainNamespace === CHAIN_NAMESPACES.SOLANA) setupWallet();
7675
},
7776
{ immediate: true }
7877
);

‎packages/no-modal/src/vue/solana/provider.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createClient, createWalletStandardConnector, type SolanaClient } from "
22
import { defineComponent, Fragment, h, provide, ref, watch } from "vue";
33

44
import { log } from "../../base";
5-
import { CHAIN_NAMESPACES } from "../../base/chain/IChainInterface";
5+
import { CHAIN_NAMESPACES, type CustomChainConfig } from "../../base/chain/IChainInterface";
66
import { useWeb3Auth } from "../composables";
77
import { SOLANA_CLIENT_KEY } from "./constants";
88

@@ -41,8 +41,15 @@ export const SolanaProvider = defineComponent({
4141
return;
4242
}
4343

44-
const chainConfig = web3Auth.value.coreOptions.chains.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
45-
if (!chainConfig) return;
44+
const currentChain = web3Auth.value.currentChain;
45+
let chainConfig: CustomChainConfig;
46+
if (currentChain?.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
47+
chainConfig = currentChain;
48+
} else {
49+
// use the 1st Solana chain if current chain is not solana
50+
chainConfig = web3Auth.value.coreOptions.chains.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
51+
if (!chainConfig) return;
52+
}
4653

4754
const prevClient = clientRef.value;
4855
try {

0 commit comments

Comments
 (0)
⚡