Skip to content

Commit 8944bf2

Browse files
author
Nguyen Anh Tu
committed
demo app multi chain select
1 parent 56660d3 commit 8944bf2

File tree

5 files changed

+67
-40
lines changed

5 files changed

+67
-40
lines changed

‎demo/vue-app-new/package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/vue-app-new/src/MainView.vue‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,33 @@ import { computed, onBeforeMount, ref, watch } from "vue";
88
import AppDashboard from "./components/AppDashboard.vue";
99
import AppHeader from "./components/AppHeader.vue";
1010
import AppSettings from "./components/AppSettings.vue";
11-
import { chainConfigs, clientIds, getDefaultBundlerUrl, NFT_CHECKOUT_CLIENT_ID } from "./config";
11+
import { allChains, chainConfigs, clientIds, getDefaultBundlerUrl, NFT_CHECKOUT_CLIENT_ID } from "./config";
1212
import { formDataStore } from "./store/form";
1313
1414
const formData = formDataStore;
1515
1616
const externalConnectors = ref<ConnectorFn[]>([]);
1717
18-
const chainOptions = computed(() =>
19-
chainConfigs[formData.chainNamespace as ChainNamespaceType].map((x) => ({
20-
name: `${x.chainId} ${x.tickerName}`,
21-
value: x.chainId,
22-
}))
23-
);
18+
const chainOptions = computed(() => {
19+
const allChains: { name: string; value: string; }[] = [];
20+
formData.chainNamespaces.forEach((namespace: ChainNamespaceType) => {
21+
const chainsForNamespace = chainConfigs[namespace].map((x) => ({
22+
name: `${x.chainId} ${x.tickerName}`,
23+
value: x.chainId,
24+
}));
25+
allChains.push(...chainsForNamespace);
26+
});
27+
return allChains;
28+
});
2429
25-
const showAAProviderSettings = computed(() => formData.chainNamespace === CHAIN_NAMESPACES.EIP155);
30+
const showAAProviderSettings = computed(() => formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155));
2631
2732
// Options for reinitializing the web3Auth object
2833
const options = computed((): Web3AuthOptions => {
2934
const { config: whiteLabel, enable: enabledWhiteLabel } = formData.whiteLabel;
30-
const chainConfig = chainConfigs[formData.chainNamespace as ChainNamespaceType].find((x) => x.chainId === formData.chain)!;
35+
// TODO: AA config need multi chain support
36+
const evmChains = chainConfigs[CHAIN_NAMESPACES.EIP155].filter((x) => formData.chains.includes(x.chainId));
37+
const firstEvmChain = evmChains[0];
3138
3239
// Account Abstraction
3340
const { useAccountAbstractionProvider } = formData;
@@ -36,7 +43,7 @@ const options = computed((): Web3AuthOptions => {
3643
accountAbstractionConfig = {
3744
smartAccountType: formData.smartAccountType as string,
3845
smartAccountConfig: undefined,
39-
bundlerConfig: { url: formData.bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId) },
46+
bundlerConfig: { url: formData.bundlerUrl ?? getDefaultBundlerUrl(firstEvmChain.chainId) },
4047
paymasterConfig: formData.paymasterUrl ? { url: formData.paymasterUrl } : undefined,
4148
}
4249
}
@@ -55,7 +62,7 @@ const options = computed((): Web3AuthOptions => {
5562
};
5663
}
5764
58-
65+
const chains = formData.chains.map((chainId) => allChains.find((x) => x.chainId === chainId)!);
5966
return {
6067
clientId: clientIds[formData.network],
6168
web3AuthNetwork: formData.network,
@@ -69,7 +76,7 @@ const options = computed((): Web3AuthOptions => {
6976
// sessionTime?: number;
7077
// useCoreKitKey?: boolean;
7178
// chainConfig,
72-
chains: [chainConfig, chainConfigs.eip155.find((x) => x.chainId === "0xaa36a7")!],
79+
chains,
7380
enableLogging: true,
7481
connectors: externalConnectors.value,
7582
multiInjectedProviderDiscovery: formData.multiInjectedProviderDiscovery,
@@ -117,8 +124,8 @@ onBeforeMount(() => {
117124
// console.log("storedValue", storedValue);
118125
const json = JSON.parse(storedValue);
119126
formData.connectors = json.connectors;
120-
formData.chain = json.chain;
121-
formData.chainNamespace = json.chainNamespace;
127+
formData.chains = json.chains;
128+
formData.chainNamespaces = json.chainNamespaces;
122129
formData.loginProviders = json.loginProviders;
123130
formData.showWalletDiscovery = json.showWalletDiscovery;
124131
formData.multiInjectedProviderDiscovery = json.multiInjectedProviderDiscovery;
@@ -133,7 +140,7 @@ onBeforeMount(() => {
133140
}
134141
} catch (error) { }
135142
}
136-
if (!chainOptions.value.find((option) => option.value === formData.chain)) formData.chain = chainOptions.value[0]?.value;
143+
if (!chainOptions.value.find((option) => option.value === formData.chains[0])) formData.chains = [chainOptions.value[0]?.value];
137144
});
138145
139146
watch(formData, () => {
@@ -154,8 +161,8 @@ watch(
154161
155162
const configs = computed<Web3AuthContextConfig>(() => {
156163
const plugins = [];
157-
if (formData.chainNamespace === CHAIN_NAMESPACES.EIP155 || formData.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
158-
if (formData.nftCheckoutPlugin.enable && formData.chainNamespace === CHAIN_NAMESPACES.EIP155) {
164+
if (formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155) || formData.chainNamespaces.includes(CHAIN_NAMESPACES.SOLANA)) {
165+
if (formData.nftCheckoutPlugin.enable && formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155)) {
159166
const nftCheckoutPlugin = new NFTCheckoutPlugin({
160167
clientId: NFT_CHECKOUT_CLIENT_ID,
161168
});

‎demo/vue-app-new/src/components/AppSettings.vue‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,20 @@ import { formDataStore } from "../store/form";
1818
const formData = formDataStore;
1919
2020
const { status, isConnected, isInitialized, connect } = useWeb3Auth();
21-
22-
const chainOptions = computed(() =>
23-
chainConfigs[formData.chainNamespace as ChainNamespaceType].map((x) => ({
24-
name: `${x.chainId} ${x.tickerName}`,
25-
value: x.chainId,
26-
}))
27-
);
21+
const chainOptions = computed(() => {
22+
const allChains: { name: string; value: string; }[] = [];
23+
formData.chainNamespaces.forEach((namespace: ChainNamespaceType) => {
24+
const chainsForNamespace = chainConfigs[namespace].map((x) => ({
25+
name: `${x.chainId} ${x.tickerName}`,
26+
value: x.chainId,
27+
}));
28+
allChains.push(...chainsForNamespace);
29+
});
30+
return allChains;
31+
});
2832
2933
const adapterOptions = computed(() =>
30-
formData.chainNamespace === CHAIN_NAMESPACES.EIP155
34+
formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155)
3135
? [
3236
{ name: "coinbase-adapter", value: "coinbase" },
3337
{ name: "wallet-connect-v2-adapter", value: "wallet-connect-v2" },
@@ -47,10 +51,10 @@ const isDisabled = (name: string): boolean => {
4751
return !formData.whiteLabel.enable;
4852
4953
case "walletServicePlugin":
50-
return formData.chainNamespace !== CHAIN_NAMESPACES.EIP155 && formData.chainNamespace !== CHAIN_NAMESPACES.SOLANA;
54+
return !formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155) && !formData.chainNamespaces.includes(CHAIN_NAMESPACES.SOLANA);
5155
5256
case "nftCheckoutPlugin":
53-
return formData.chainNamespace !== CHAIN_NAMESPACES.EIP155;
57+
return !formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155);
5458
5559
case "btnConnect":
5660
return !isInitialized.value;
@@ -62,7 +66,7 @@ const isDisabled = (name: string): boolean => {
6266
return !formData.useAccountAbstractionProvider;
6367
6468
case "accountAbstraction":
65-
return formData.chainNamespace !== CHAIN_NAMESPACES.EIP155;
69+
return !formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155);
6670
6771
default: {
6872
return false;
@@ -76,9 +80,11 @@ const onTabChange = (index: number) => {
7680
};
7781
const isActiveTab = (index: number) => activeTab.value === index;
7882
79-
const onChainNamespaceChange = (value: string) => {
83+
const onChainNamespaceChange = (value: string[]) => {
8084
log.info("onChainNamespaceChange", value);
81-
formData.chain = chainConfigs[value as ChainNamespaceType][0].chainId;
85+
formData.chains = value.map((namespace) =>
86+
chainConfigs[namespace as ChainNamespaceType][0].chainId
87+
);
8288
formData.connectors = [];
8389
};
8490
</script>
@@ -102,17 +108,17 @@ const onChainNamespaceChange = (value: string) => {
102108
<Tab variant="underline" :active="isActiveTab(1)" @click="onTabChange(1)">WhiteLabel</Tab>
103109
<Tab variant="underline" :active="isActiveTab(2)" @click="onTabChange(2)">Login Provider</Tab>
104110
<Tab
105-
v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155 || formData.chainNamespace === CHAIN_NAMESPACES.SOLANA"
111+
v-if="formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155) || formData.chainNamespaces.includes(CHAIN_NAMESPACES.SOLANA)"
106112
variant="underline"
107113
:active="isActiveTab(3)"
108114
@click="onTabChange(3)"
109115
>
110116
Wallet Plugin
111117
</Tab>
112-
<Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(4)" @click="onTabChange(4)">
118+
<Tab v-if="formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155)" variant="underline" :active="isActiveTab(4)" @click="onTabChange(4)">
113119
NFT Checkout Plugin
114120
</Tab>
115-
<Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(5)" @click="onTabChange(5)">
121+
<Tab v-if="formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155)" variant="underline" :active="isActiveTab(5)" @click="onTabChange(5)">
116122
Account Abstraction Provider
117123
</Tab>
118124
</Tabs>
@@ -126,20 +132,22 @@ const onChainNamespaceChange = (value: string) => {
126132
:options="networkOptions"
127133
/>
128134
<Select
129-
v-model="formData.chainNamespace"
135+
v-model="formData.chainNamespaces"
130136
data-testid="selectChainNamespace"
131137
:label="$t('app.chainNamespace')"
132138
:aria-label="$t('app.chainNamespace')"
133139
:placeholder="$t('app.chainNamespace')"
134140
:options="chainNamespaceOptions"
141+
:multiple="true"
135142
@update:model-value="onChainNamespaceChange"
136143
/>
137144
<Select
138-
v-model="formData.chain"
145+
v-model="formData.chains"
139146
data-testid="selectChain"
140147
:label="$t('app.chain')"
141148
:aria-label="$t('app.chain')"
142149
:placeholder="$t('app.chain')"
150+
:multiple="true"
143151
:options="chainOptions"
144152
/>
145153
<Select

‎demo/vue-app-new/src/config.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ export const chainConfigs: Record<ChainNamespaceType, CustomChainConfig[]> = {
104104
[CHAIN_NAMESPACES.OTHER]: [],
105105
};
106106

107+
export const allChains = Object.values(chainConfigs).flat();
108+
107109
export const clientIds: Record<WEB3AUTH_NETWORK_TYPE, string> = {
108110
[WEB3AUTH_NETWORK.MAINNET]: "BJRZ6qdDTbj6Vd5YXvV994TYCqY42-PxldCetmvGTUdoq6pkCqdpuC1DIehz76zuYdaq1RJkXGHuDraHRhCQHvA",
109111
[WEB3AUTH_NETWORK.TESTNET]: "BHr_dKcxC0ecKn_2dZQmQeNdjPgWykMkcodEHkVvPMo71qzOV6SgtoN8KCvFdLN7bf34JOm89vWQMLFmSfIo84A",
@@ -181,8 +183,8 @@ export const getDefaultBundlerUrl = (chainId: string): string => {
181183
export type FormData = {
182184
// authMode: string;
183185
network: WEB3AUTH_NETWORK_TYPE;
184-
chainNamespace: ChainNamespaceType;
185-
chain: string;
186+
chainNamespaces: ChainNamespaceType[];
187+
chains: string[];
186188
whiteLabel: {
187189
enable: boolean;
188190
config: WhiteLabelData;

‎demo/vue-app-new/src/store/form.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import { WEB3AUTH_NETWORK } from "@web3auth/auth";
22
import { CHAIN_NAMESPACES } from "@web3auth/modal";
33
import { reactive } from "vue";
44

5-
import { defaultLoginMethod, FormData, initWhiteLabel } from "../config";
5+
import { chainConfigs, defaultLoginMethod, FormData, initWhiteLabel } from "../config";
66

77
export const formDataStore = reactive<FormData>({
88
// authMode: "",
99
network: WEB3AUTH_NETWORK.TESTNET,
10-
chainNamespace: CHAIN_NAMESPACES.EIP155,
11-
chain: CHAIN_NAMESPACES.EIP155,
10+
chainNamespaces: [CHAIN_NAMESPACES.EIP155],
11+
chains: [chainConfigs[CHAIN_NAMESPACES.EIP155][0].chainId],
1212
whiteLabel: {
1313
enable: false,
1414
config: initWhiteLabel,
@@ -27,4 +27,5 @@ export const formDataStore = reactive<FormData>({
2727
},
2828
useAccountAbstractionProvider: false,
2929
useAAWithExternalWallet: true,
30+
smartAccountType: "safe", // default smart account type to safe
3031
});

0 commit comments

Comments
 (0)