Merge pull request #2163 from Web3Auth/feat/vue-solana-composables

vue solana composables + vue wagmi

Author: chaitanyapotti

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

@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "@solana/web3.js": "^1.98.0",
+    "@tanstack/vue-query": "^5.74.5",
     "@toruslabs/base-controllers": "^8.3.3",
     "@toruslabs/bs58": "^1.0.0",
     "@toruslabs/ethereum-controllers": "^8.3.4",
     "@toruslabs/solana-controllers": "^8.3.3",
     "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^8.0.6",
     "@toruslabs/vue-icons": "^8.0.2",
+    "@wagmi/vue": "^0.1.15",
     "@web3auth/auth": "^10.4.0",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",

demo/vue-app-new/package.json

@@ -17,6 +17,7 @@ import {
 } from "@web3auth/modal";
 
 import { type Web3AuthContextConfig, Web3AuthProvider } from "@web3auth/modal/vue";
+import { WagmiProvider } from "@web3auth/modal/vue/wagmi";
 import { coinbaseConnector } from "@web3auth/no-modal/connectors/coinbase-connector";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
@@ -164,7 +165,7 @@ const modalParams = computed(() => {
       label: "auth",
       loginMethods: loginMethodsConfig.value,
     },
-  } as Record<WALLET_CONNECTOR_TYPE, ModalConfig>;
+  };
   return modalConfig;
 });
 
@@ -227,12 +228,14 @@ const configs = computed<Web3AuthContextConfig>(() => {
 
 <template>
   <Web3AuthProvider :config="configs">
-    <AppHeader />
-    <div class="flex flex-col items-center justify-center">
-      <main class="relative flex flex-col lg:h-[calc(100dvh_-_110px)]">
+    <WagmiProvider>
+      <AppHeader />
+      <div class="flex flex-col items-center justify-center">
+        <main class="relative flex flex-col lg:h-[calc(100dvh_-_110px)]">
         <AppSettings />
         <AppDashboard :chains="options.chains || []" />
-      </main>
-    </div>
+        </main>
+      </div>
+    </WagmiProvider>
   </Web3AuthProvider>
 </template>

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

@@ -2,40 +2,28 @@
 import { Button, Card } from "@toruslabs/vue-components";
 import { CHAIN_NAMESPACES, IProvider, log, WALLET_CONNECTORS, WALLET_PLUGINS } from "@web3auth/modal";
 import { useCheckout, useEnableMFA, useIdentityToken, useManageMFA, useSwitchChain, useWalletConnectScanner, useWalletUI, useWeb3Auth, useWeb3AuthUser } from "@web3auth/modal/vue";
-import { CustomChainConfig, type NFTCheckoutPluginType, type WalletServicesPluginType } from "@web3auth/no-modal";
+import { type CustomChainConfig, type NFTCheckoutPluginType } from "@web3auth/no-modal";
 import { useI18n } from "petite-vue-i18n";
 
-import { Connection } from "@solana/web3.js";
+import { useSignAndSendTransaction, useSignMessage as useSolanaSignMessage, useSignTransaction, useSolanaWallet } from "@web3auth/modal/vue/solana"
+import { useAccount, useBalance, useChainId, useSignMessage, useSignTypedData } from "@wagmi/vue";
+
+import { LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { ProviderConfig } from "@toruslabs/base-controllers";
 import { SUPPORTED_NETWORKS } from "@toruslabs/ethereum-controllers";
 import { computed, ref, watch } from "vue";
 import { NFT_CHECKOUT_CONTRACT_ID } from "../config";
 import {
-  getAccounts,
-  getBalance,
-  getChainId,
   getPrivateKey,
   sendEth,
-  signEthMessage,
   signTransaction as signEthTransaction,
-  signPersonalMessage,
-  signTypedMessage,
 } from "../services/ethHandlers";
 import {
+  getConnection,
   getBalance as getSolBalance,
   getPrivateKey as getSolPrivateKey,
   signAllTransactions,
-  signAndSendTransaction,
-  signMessage as signSolMessage,
-  signTransaction as signSolTransaction,
 } from "../services/solHandlers";
-// import {
-//   walletSendEth,
-//   walletSignPersonalMessage,
-//   walletSignSolanaMessage,
-//   walletSignSolanaVersionedTransaction,
-//   walletSignTypedMessage,
-// } from "../services/walletServiceHandlers";
 import { formDataStore } from "../store/form";
 import { SOLANA_SUPPORTED_NETWORKS } from "../utils/constants";
 
@@ -58,13 +46,22 @@ const { showWalletUI, loading: showWalletUILoading } = useWalletUI();
 const { showWalletConnectScanner, loading: showWalletConnectScannerLoading } = useWalletConnectScanner();
 const { showCheckout, loading: showCheckoutLoading } = useCheckout();
 const { authenticateUser, loading: authenticateUserLoading } = useIdentityToken();
+const { status, address } = useAccount();
+const { signTypedDataAsync } = useSignTypedData();
+const { signMessageAsync } = useSignMessage();
+const chainId = useChainId();
+const balance = useBalance({ 
+  address: address.value,
+});
+
+const { accounts: solanaAccounts } = useSolanaWallet()
+const { signMessage: signSolanaMessage } = useSolanaSignMessage();
+const { signTransaction: signSolTransaction } = useSignTransaction();
+const { signAndSendTransaction } = useSignAndSendTransaction();
 
 const currentChainId = ref<string | undefined>(web3Auth.value?.currentChain?.chainId);
 const currentChainConfig = computed(() => supportedNetworks[currentChainId.value as keyof typeof supportedNetworks]);
 const currentChainNamespace = computed(() => currentChainConfig.value?.chainNamespace);
-const connection = computed(() => {
-  return currentChainConfig?.value ? new Connection(currentChainConfig?.value.rpcTarget) : null;
-});
 
 const chainChangedListener = (chainId: string) => {
   currentChainId.value = chainId;
@@ -142,28 +139,9 @@ const printToConsole = (...args: unknown[]) => {
   }
 };
 
-// const onWalletSignPersonalMessage = async () => {
-//   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-//   await walletSignPersonalMessage(walletPlugin.wsEmbedInstance.provider, printToConsole);
-// };
-// const onWalletSignTypedData_v4 = async () => {
-//   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-//   await walletSignTypedMessage(walletPlugin.wsEmbedInstance.provider, printToConsole);
-// };
-// const onWalletSendEth = async () => {
-//   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-//   await walletSendEth(walletPlugin.wsEmbedInstance.provider, printToConsole);
-// };
-
-// const onWalletSignSolanaMessage = async () => {
-//   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-//   await walletSignSolanaMessage(walletPlugin.wsEmbedInstance.provider as IProvider, printToConsole);
-// };
-
-// const onWalletSignSolanaVersionedTransaction = async () => {
-//   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-//   await walletSignSolanaVersionedTransaction(walletPlugin.wsEmbedInstance.provider as IProvider, connection.value as Connection, printToConsole);
-// };
+watch(status, (newStatus) => {
+  console.log("wagmi status", newStatus);
+}, { immediate: true });
 
 // NFT Checkout
 const showPaidMintNFTCheckout = async () => {
@@ -190,35 +168,66 @@ const onSendEth = async () => {
 };
 
 const onSignEthMessage = async () => {
-  await signEthMessage(provider.value as IProvider, printToConsole);
+  const result = await signMessageAsync({
+    message: "Hello, Bob!",
+  });
+  printToConsole("result", result);
 };
 
 const onGetAccounts = async () => {
-  await getAccounts(provider.value as IProvider, printToConsole);
+  printToConsole('account', address.value);
 };
 
 const onGetPrivateKey = async () => {
   await getPrivateKey(provider.value as IProvider, printToConsole);
 };
 
 const getConnectedChainId = async () => {
-  await getChainId(provider.value as IProvider, printToConsole);
+  printToConsole('chainId', chainId.value);
 };
 
 const onGetBalance = async () => {
-  await getBalance(provider.value as IProvider, printToConsole);
+  printToConsole("balance", balance.data.value?.formatted);
 };
 
 const onSignEthTransaction = async () => {
   await signEthTransaction(provider.value as IProvider, printToConsole);
 };
 
 const onSignTypedData_v4 = async () => {
-  await signTypedMessage(provider.value as IProvider, printToConsole);
+  const result = await signTypedDataAsync({
+    types: {
+      Person: [
+        { name: "name", type: "string" },
+          { name: 'wallet', type: 'address' },
+        ],
+        Mail: [
+          { name: 'from', type: 'Person' },
+          { name: 'to', type: 'Person' },
+          { name: 'contents', type: 'string' },
+        ],
+      },
+      primaryType: 'Mail',
+      message: {
+        from: {
+          name: "Cow",
+          wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+        },
+        to: {
+          name: "Bob",
+          wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+        },
+        contents: "Hello, Bob!",
+      },
+    });
+  printToConsole("result", result);
 };
 
 const onSignPersonalMsg = async () => {
-  await signPersonalMessage(provider.value as IProvider, printToConsole);
+  const result = await signMessageAsync({
+    message: "Hello, Bob!",
+  });
+  printToConsole("result", result);
 };
 
 // Solana
@@ -227,15 +236,52 @@ const onGetSolPrivateKey = async () => {
 };
 
 const onSignAndSendTransaction = async () => {
-  await signAndSendTransaction(provider.value as IProvider, printToConsole);
+  if (!solanaAccounts.value) throw new Error('No account connected');
+  const conn = await getConnection(provider.value as IProvider);
+  const block = await conn.getLatestBlockhash("finalized");
+  const pubKey = solanaAccounts.value[0];
+
+  const transactionInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(pubKey),
+      toPubkey: new PublicKey(pubKey),
+      lamports: 0.01 * LAMPORTS_PER_SOL,
+    });
+
+    const transaction = new Transaction({
+      blockhash: block.blockhash,
+      lastValidBlockHeight: block.lastValidBlockHeight,
+      feePayer: new PublicKey(pubKey),
+    }).add(transactionInstruction);
+  
+  const data = await signAndSendTransaction(transaction);
+  printToConsole('result', data);
 };
 
 const onSignSolTransaction = async () => {
-  await signSolTransaction(provider.value as IProvider, printToConsole);
+  if (!solanaAccounts.value) throw new Error('No account connected');
+  const conn = await getConnection(provider.value as IProvider);
+  const block = await conn.getLatestBlockhash("finalized");
+  const pubKey = solanaAccounts.value[0];
+
+  const transactionInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(pubKey),
+      toPubkey: new PublicKey(pubKey),
+      lamports: 0.01 * LAMPORTS_PER_SOL,
+    });
+
+  const transaction = new Transaction({
+    blockhash: block.blockhash,
+    lastValidBlockHeight: block.lastValidBlockHeight,
+    feePayer: new PublicKey(pubKey),
+  }).add(transactionInstruction);
+
+  const result = await signSolTransaction(transaction)
+  printToConsole('result', result);
 };
 
 const onSignSolMessage = async () => {
-  await signSolMessage(provider.value as IProvider, printToConsole);
+  const result = await signSolanaMessage("Hello, Bob!");
+  printToConsole("result", result);
 };
 
 const onGetSolBalance = async () => {

demo/vue-app-new/src/components/AppDashboard.vue

@@ -1,6 +1,7 @@
 import "./global";
 import "./style.css";
 
+import { VueQueryPlugin } from "@tanstack/vue-query";
 import { createI18n, PathValue } from "petite-vue-i18n";
 import { createApp } from "vue";
 
@@ -33,4 +34,5 @@ const app = createApp(App);
 
 app.use(createIcons);
 app.use(i18n);
+app.use(VueQueryPlugin);
 app.mount("#app");

demo/vue-app-new/src/main.ts

@@ -3,7 +3,7 @@ import { Connection, LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } f
 import { CustomChainConfig, IProvider, log, SolanaWallet, TransactionOrVersionedTransaction } from "@web3auth/modal";
 import { SOLANA_METHOD_TYPES } from "@web3auth/ws-embed";
 
-const getConnection = async (provider: IProvider): Promise<Connection> => {
+export const getConnection = async (provider: IProvider): Promise<Connection> => {
   const solanaWallet = new SolanaWallet(provider);
 
   const connectionConfig = await solanaWallet.request<never, CustomChainConfig>({ method: "solana_provider_config" });