From 5d9ddbc164998aefb7ffd28cf5031a007a5ef166 Mon Sep 17 00:00:00 2001
From: daniel-vahn <d.vonahn@chainsulting.de>
Date: Tue, 14 May 2024 09:38:07 +0200
Subject: [PATCH] implemented disconnect

---
 src/App.tsx                                   | 11 ++-
 .../connectOverlay/ConnectOverlay.tsx         | 72 +++++++++++++------
 2 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 579dae7..57ef361 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 // import { useTonWallet } from '@tonconnect/ui-react';
 import WebApp from '@twa-dev/sdk';
 import axios from 'axios';
+import { RootState } from './redux/store';
 
 import Avatar from './components/utils/Avatar';
 import BackButton from './components/buttons/BackButton';
@@ -28,6 +29,7 @@ import receiveIcon from './assets/receive_icon.svg';
 import sellIcon from './assets/sell_icon.svg';
 import { useTonWallet } from '@tonconnect/ui-react';
 import WalletConnectModal from './components/connectors/WalletConnectModal';
+import { useSelector } from 'react-redux';
 
 enum View {
     LANDING = 0,
@@ -43,6 +45,11 @@ const BRIDGE_URL = import.meta.env.VITE_BRIDGE_URL || '';
 function App() {
     const [view, setView] = useState<View>(View.LANDING);
 
+    // Connection State
+    const connectionState = useSelector(
+        (state: RootState) => state.connection.connectionState
+    );
+
     const skip = () => {
         setView(view + 1);
     };
@@ -203,7 +210,9 @@ function App() {
                 <div className="components-container">
                     <div className="flex justify-between">
                         <BackButton goBack={goBack} />
-                        {account && <SkipButton skip={skip} />}
+                        {connectionState === 'connected' && (
+                            <SkipButton skip={skip} />
+                        )}
                     </div>
                     <Avatar src={avatarPhone} />
                     <div className="flex flex-col bg-white pt-4 px-8 pb-8 gap-4 rounded-t-3xl rounded-b-xl shadow-custom-white">
diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
index 86f224f..0826aea 100644
--- a/src/components/connectOverlay/ConnectOverlay.tsx
+++ b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -165,6 +165,16 @@ const ConnectOverlay: React.FC<Props> = ({
         WebApp.openLink(`https://etherscan.io/address/${account}`);
     };
 
+    // Handle Disconnect
+    const handelDisconnect = () => {
+        window.localStorage.removeItem('providerId');
+        window.localStorage.removeItem('walletConnectURI');
+        window.localStorage.removeItem('walletProvider');
+        window.localStorage.removeItem('walletconnect');
+        window.localStorage.removeItem('WALLETCONNECT_DEEPLINK_CHOICE');
+        dispatch(setConnectionState('disconnected'));
+    };
+
     return (
         <div className={`connect-overlay ${slideAnimation}`}>
             <div className="flex justify-between text-left py-3 px-4">
@@ -296,35 +306,51 @@ const ConnectOverlay: React.FC<Props> = ({
                 </>
             )}
             {connectionState === 'connected' && (
-                <div className="my-5 mx-7 border-solid border border-gray-200 rounded-lg">
-                    <div className="flex align-middle justify-start items-center my-2 mx-1 p-2 gap-4">
-                        <div className="w-8 h-8 object-contain">
-                            <img
-                                className="w-full h-full"
-                                src={accountIconPlaceholder}
-                                alt=""
-                            />
+                <div className="flex flex-col gap-4 py-5 px-7">
+                    <div className="border-solid border border-gray-200 rounded-lg">
+                        <div className="flex align-middle justify-start items-center my-2 mx-1 p-2 gap-4">
+                            <div className="w-8 h-8 object-contain">
+                                <img
+                                    className="w-full h-full"
+                                    src={accountIconPlaceholder}
+                                    alt=""
+                                />
+                            </div>
+                            {account && <p>{truncateText(account, 8, 8)}</p>}
+                        </div>
+                        <div className="flex justify-between my-2 mx-1 p-2 mr-4 gap-4">
+                            <div
+                                className="flex align-middle justify-start items-center gap-2"
+                                onClick={copyAccountToClipboard}
+                            >
+                                <img src={copyIcon} alt="" />
+                                <p className="text-xs text-customGrayAccountDetails font-normal">
+                                    Copy Address
+                                </p>
+                            </div>
+                            <div
+                                className="flex align-middle justify-start items-center gap-2"
+                                onClick={viewOnExplorer}
+                            >
+                                <img src={documentIcon} alt="" />
+                                <p className="text-xs text-customGrayAccountDetails font-normal">
+                                    View on explorer
+                                </p>
+                            </div>
                         </div>
-                        {account && <p>{truncateText(account, 8, 8)}</p>}
                     </div>
-                    <div className="flex justify-between my-2 mx-1 p-2 mr-4 gap-4">
-                        <div
-                            className="flex align-middle justify-start items-center gap-2"
-                            onClick={copyAccountToClipboard}
-                        >
-                            <img src={copyIcon} alt="" />
-                            <p className="text-xs text-customGrayAccountDetails font-normal">
-                                Copy Address
+                    <div className="flex justify-between">
+                        <div className="flex align-middle items-center">
+                            <p className="text-xs">
+                                Connected with{' '}
+                                {window.localStorage.getItem('walletProvider')}
                             </p>
                         </div>
                         <div
-                            className="flex align-middle justify-start items-center gap-2"
-                            onClick={viewOnExplorer}
+                            className="border border-red-300 rounded-xl py-4 px-6 bg-red-100"
+                            onClick={handelDisconnect}
                         >
-                            <img src={documentIcon} alt="" />
-                            <p className="text-xs text-customGrayAccountDetails font-normal">
-                                View on explorer
-                            </p>
+                            <p className="text-base font-normal">Disconnect</p>
                         </div>
                     </div>
                 </div>