From b69304370152bfd0085e484a2485748d85e747df Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 29 Sep 2023 10:40:44 +0300
Subject: [PATCH] feat: connecting app with wallet with button

---
 .../Deposit/ConnectWallet.tsx                 | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Deposit/ConnectWallet.tsx b/src/pages/ValidatorOnboarding/Deposit/ConnectWallet.tsx
index c92c7226..76d82ed4 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ConnectWallet.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/ConnectWallet.tsx
@@ -1,13 +1,30 @@
 import { Avatar, Button } from '@status-im/components'
+import { useConnectWallet } from '@web3-onboard/react'
 import { XStack } from 'tamagui'
+import { ethers } from 'ethers'
 
 const ConnectWallet = () => {
-  const onConnectWalletClick = () => {}
+  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
+
+  const onConnectWalletClick = () => {
+    if (wallet) {
+      disconnect(wallet)
+    } else {
+      connect()
+    }
+  }
+
+  let ethersProvider
+  if (wallet) {
+    ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
+  }
 
   return (
     <XStack space={'$2'} alignItems={'center'}>
       <Avatar type="icon" size={32} icon={<img src={'/icons/eth-logo.svg'} alt="eth-logo" />} />
-      <Button onPress={onConnectWalletClick}>Connect Wallet</Button>
+      <Button disabled={connecting} onPress={onConnectWalletClick}>
+        {connecting ? 'Connecting' : wallet ? 'Disconnect Wallet' : 'Connect Wallet'}
+      </Button>
     </XStack>
   )
 }