From 6e5aa7e691cff1cddeb62cd04428bef9fa7f75c7 Mon Sep 17 00:00:00 2001
From: LueeyC <lueey@6sig.io>
Date: Thu, 26 Sep 2024 21:18:27 +0800
Subject: [PATCH] Resolved the issue with failing to build dist and the problem
 with App.tsx not rendering correctly

---
 dapps/universal-provider-solana/src/App.tsx   | 67 ++++++++++++-------
 .../src/utils/helpers.ts                      |  2 +-
 .../universal-provider-solana/vite.config.ts  |  3 +
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/dapps/universal-provider-solana/src/App.tsx b/dapps/universal-provider-solana/src/App.tsx
index c2eafbd37..a0d338d3a 100644
--- a/dapps/universal-provider-solana/src/App.tsx
+++ b/dapps/universal-provider-solana/src/App.tsx
@@ -1,6 +1,6 @@
 import UniversalProvider from "@walletconnect/universal-provider";
 import { WalletConnectModal } from "@walletconnect/modal";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { signMessage, sendTransaction, SolanaChains } from "./utils/helpers";
 
 const projectId = import.meta.env.VITE_PROJECT_ID;
@@ -20,34 +20,46 @@ const modal = new WalletConnectModal({
 });
 
 // 4. create provider instance
-const provider = await UniversalProvider.init({
-  logger: "error",
-  projectId: projectId,
-  metadata: {
-    name: "WalletConnect x Solana",
-    description: "Solana integration with WalletConnect's Universal Provider",
-    url: "https://walletconnect.com/",
-    icons: ["https://avatars.githubusercontent.com/u/37784886"],
-  },
-});
-
 const App = () => {
   const [isConnected, setIsConnected] = useState(false);
+  const [provider, setProvider] = useState<UniversalProvider | null>(null);
+  const [address, setAddress] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initProvider = async () => {
+      const newProvider = await UniversalProvider.init({
+        logger: "error",
+        projectId: projectId,
+        metadata: {
+          name: "WalletConnect x Solana",
+          description: "Solana integration with WalletConnect's Universal Provider",
+          url: "https://walletconnect.com/",
+          icons: ["https://avatars.githubusercontent.com/u/37784886"],
+        },
+      });
 
-  // 5. get address once loaded
-  const address =
-    provider.session?.namespaces.solana?.accounts[0].split(":")[2];
+      setProvider(newProvider);
 
-  // 6. handle display_uri event and open modal
-  provider.on("display_uri", async (uri: string) => {
-    console.log("uri", uri);
-    await modal.openModal({
-      uri,
-    });
-  });
+      // Set up event listener
+      newProvider.on("display_uri", async (uri: string) => {
+        console.log("uri", uri);
+        await modal.openModal({ uri });
+      });
+    };
+
+    initProvider();
+  }, []);
+
+  useEffect(() => {
+    if (provider && provider.session) {
+      const newAddress = provider.session?.namespaces.solana?.accounts[0].split(":")[2];
+      setAddress(newAddress);
+    }
+  }, [provider, provider?.session]);
 
   // 7. handle connect event
   const connect = async () => {
+    if (!provider) return;
     try {
       await provider.connect({
         namespaces: {
@@ -59,31 +71,34 @@ const App = () => {
         },
       });
       setIsConnected(true);
-      console.log("session", provider.session);
+      console.log("::::::: session", provider.session);
     } catch {
-      console.log("Something went wrong, request cancelled");
+      console.log("####### Something went wrong, request cancelled");
     }
     modal.closeModal();
   };
 
   // 8. handle disconnect event
   const disconnect = async () => {
+    if (!provider) return;
     await provider.disconnect();
     setIsConnected(false);
   };
 
   // 9. handle signMessage and sendTransaction
   const handleSign = async () => {
+    if (!provider || !address) return;
     const res = await signMessage(
       `Can i have authorize this request pls bossman - ${Date.now()}`,
       provider,
-      address!
+      address
     );
     console.log(res);
   };
 
   const handleSend = async () => {
-    const res = await sendTransaction(address!, 1000, provider, address!);
+    if (!provider || !address) return;
+    const res = await sendTransaction(address, 1000, provider, address);
     console.log(res);
   };
 
diff --git a/dapps/universal-provider-solana/src/utils/helpers.ts b/dapps/universal-provider-solana/src/utils/helpers.ts
index 36752d81f..8af63048b 100644
--- a/dapps/universal-provider-solana/src/utils/helpers.ts
+++ b/dapps/universal-provider-solana/src/utils/helpers.ts
@@ -21,7 +21,7 @@ export function verifyTransactionSignature(
   tx: Transaction
 ) {
   return nacl.sign.detached.verify(
-    tx.serializeMessage(),
+    new Uint8Array(tx.serializeMessage()),
     bs58.decode(signature),
     bs58.decode(address)
   );
diff --git a/dapps/universal-provider-solana/vite.config.ts b/dapps/universal-provider-solana/vite.config.ts
index 6d2bea036..800f52ca1 100644
--- a/dapps/universal-provider-solana/vite.config.ts
+++ b/dapps/universal-provider-solana/vite.config.ts
@@ -4,6 +4,9 @@ import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfil
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  build: {
+    target: 'esnext', // Change this to 'esnext' or a more recent version
+  },
   plugins: [react()],
   optimizeDeps: {
     esbuildOptions: {