Merge pull request #17 from push-protocol/SIMULATE-16-Retry-logic-for…

…-Connect-Push-Wallet-Button

Fixed the retry logic for ConnectPushWallet Button

packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx

@@ -7,7 +7,7 @@ export type ConnectPushWalletButtonProps = {
 };
 
 const ConnectPushWalletButton: FC<ConnectPushWalletButtonProps> = () => {
-  const { connectionStatus, handleConnectToPushWallet } =
+  const { connectionStatus, handleConnectToPushWallet, handleNewConnectionRequest } =
     usePushWalletContext();
 
   const isConnectButtonDisbaled =
@@ -18,11 +18,15 @@ const ConnectPushWalletButton: FC<ConnectPushWalletButtonProps> = () => {
   const isLoading =
     connectionStatus === 'connecting' || connectionStatus === 'authenticating';
 
+  const handleConnectWalletButton = () => {
+    connectionStatus === 'retry' ? handleNewConnectionRequest() : handleConnectToPushWallet()
+  }
+
   return (
     <div>
       <button
         className="send-button"
-        onClick={handleConnectToPushWallet}
+        onClick={handleConnectWalletButton}
         disabled={isConnectButtonDisbaled}
         style={{
           backgroundColor: '#d548ec',

packages/ui-kit/src/lib/wallet/components/WalletProvider.tsx

@@ -20,6 +20,7 @@ export type WalletContextType = {
   account: string | null;
   connectionStatus: ConnectionStatus;
   handleConnectToPushWallet: () => void;
+  handleNewConnectionRequest: () => void;
   handleSendSignRequestToPushWallet: (data: Uint8Array) => Promise<Uint8Array>;
 };
 
@@ -72,6 +73,7 @@ export const WalletProvider: React.FC<WalletProviderProps> = ({
   };
 
   const handleNewConnectionRequest = () => {
+    setConnectionStatus('authenticating');
     sendMessageToPushWallet({
       type: APP_TO_WALLET_ACTION.NEW_CONNECTION_REQUEST,
     });
@@ -82,7 +84,6 @@ export const WalletProvider: React.FC<WalletProviderProps> = ({
       setConnectionStatus('connected');
       setAccount(response.account);
     } else {
-      setConnectionStatus('authenticating');
       handleNewConnectionRequest();
     }
   };
@@ -93,17 +94,14 @@ export const WalletProvider: React.FC<WalletProviderProps> = ({
   };
 
   const handleAppConnectionRejection = () => {
-    setConnectionStatus('notConnected');
+    setConnectionStatus('retry');
     setAccount(null);
   };
 
   const handleUserLogOutEvent = () => {
-    // TODO: Fix this case
     setConnectionStatus('notConnected');
     setAccount(null);
 
-    // TODO: Fix this afterwards
-    window.location.reload();
   };
 
   const handleWalletTabClosed = () => {
@@ -197,6 +195,7 @@ export const WalletProvider: React.FC<WalletProviderProps> = ({
         connectionStatus,
         handleConnectToPushWallet,
         handleSendSignRequestToPushWallet,
+        handleNewConnectionRequest,
       }}
     >
       {children}

packages/ui-kit/src/lib/wallet/wallet.constants.ts

@@ -1,8 +1,12 @@
-import { ConnectionStatus } from "./wallet.types";
+import { ConnectionStatus } from './wallet.types';
 
-export const walletConnectionButtonStatusMapper: Record<ConnectionStatus, string> = {
-    notConnected: "Connect to Push Wallet",
-    connecting: "Connecting to Push Wallet",
-    authenticating: "Authenticating Push Wallet",
-    connected: "Connected to Push Wallet",
-}
+export const walletConnectionButtonStatusMapper: Record<
+  ConnectionStatus,
+  string
+> = {
+  notConnected: 'Connect to Push Wallet',
+  connecting: 'Connecting to Push Wallet',
+  authenticating: 'Authenticating Push Wallet',
+  connected: 'Connected to Push Wallet',
+  retry: 'Retry Connecting to Push Wallet',
+};

packages/ui-kit/src/lib/wallet/wallet.types.ts

@@ -21,7 +21,8 @@ export type ConnectionStatus =
   | 'notConnected'
   | 'connecting'
   | 'authenticating'
-  | 'connected';
+  | 'connected'
+  | 'retry';
 
 export type WalletEventRespoonse = {
   signature?: Uint8Array;