fix: promisify connect on native (#2547)

packages/app/hooks/use-wallet/use-wallet.ts

@@ -12,9 +12,9 @@ import { baseChain } from "../creator-token/utils";
 import { useStableCallback } from "../use-stable-callback";
 import { ConnectResult, UseWalletReturnType } from "./types";
 import { useRandomWallet } from "./use-random-wallet";
+import { walletConnectPromiseCallback } from "./wallet-connect-promise-callback";
 
 const useWallet = (): UseWalletReturnType => {
-  const walletConnectedPromiseResolveCallback = useRef<any>(null);
   const walletDisconnectedPromiseResolveCallback = useRef<any>(null);
   const web3Modal = useWeb3Modal();
   const mobileSDK = useWalletMobileSDK();
@@ -54,30 +54,27 @@ const useWallet = (): UseWalletReturnType => {
 
   // WalletConnect connected
   useEffect(() => {
-    if (
-      walletConnectedPromiseResolveCallback.current &&
-      web3Modal.isConnected
-    ) {
-      walletConnectedPromiseResolveCallback.current({
+    if (walletConnectPromiseCallback.resolve && web3Modal.isConnected) {
+      walletConnectPromiseCallback.resolve({
         address: web3Modal.address,
         walletName: "",
       });
-      walletConnectedPromiseResolveCallback.current = null;
+      walletConnectPromiseCallback.resolve = null;
     }
   }, [web3Modal]);
 
   // Coinbase connected
   useEffect(() => {
     if (
-      walletConnectedPromiseResolveCallback.current &&
+      walletConnectPromiseCallback.resolve &&
       mobileSDK.connected &&
       mobileSDK.address
     ) {
-      walletConnectedPromiseResolveCallback.current({
+      walletConnectPromiseCallback.resolve({
         address: mobileSDK.address,
         walletName: mobileSDK.metadata?.name,
       });
-      walletConnectedPromiseResolveCallback.current = null;
+      walletConnectPromiseCallback.resolve = null;
     }
   }, [mobileSDK]);
 
@@ -149,8 +146,9 @@ const useWallet = (): UseWalletReturnType => {
       address,
       connect: async () => {
         walletConnectInstanceRef.current.open();
-        return new Promise<ConnectResult>((resolve) => {
-          walletConnectedPromiseResolveCallback.current = resolve;
+        return new Promise<ConnectResult>((resolve, reject) => {
+          walletConnectPromiseCallback.resolve = resolve;
+          walletConnectPromiseCallback.reject = reject;
         });
       },
       disconnect: async () => {

packages/app/hooks/use-wallet/wallet-connect-promise-callback.ts

@@ -0,0 +1,4 @@
+export let walletConnectPromiseCallback = {
+  resolve: null as null | ((value: any) => void),
+  reject: null as null | ((reason?: any) => void),
+};

packages/app/providers/wallet-provider.tsx

@@ -10,6 +10,7 @@ import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
 import { useWalletMobileSDK } from "app/hooks/use-wallet-mobile-sdk";
+import { walletConnectPromiseCallback } from "app/hooks/use-wallet/wallet-connect-promise-callback";
 import type { IProviderMetadata } from "app/lib/react-native-web3-modal";
 import { Web3Modal } from "app/lib/react-native-web3-modal";
 import { RenderModalProps } from "app/lib/react-native-web3-modal/components/Web3Modal";
@@ -258,7 +259,16 @@ function WalletConnectQRCodeModal(props: RenderModalProps) {
     <FullWindowOverlay>
       <View tw="flex-1 bg-white dark:bg-black">
         <View style={{ paddingTop: insets.top }} />
-        <ModalHeader title="Connect my wallet" onClose={props.onDismiss} />
+        <ModalHeader
+          title="Connect my wallet"
+          onClose={() => {
+            props.onDismiss?.();
+            if (walletConnectPromiseCallback.reject) {
+              walletConnectPromiseCallback.reject();
+              walletConnectPromiseCallback.reject = null;
+            }
+          }}
+        />
         <View tw="justify-center bg-white p-4 dark:bg-black">
           <PressableScale
             key={`wallet-cbw`}