From fb4a4a6a0a0a441c4cfbd5cf1d1b2fe13d9caebf Mon Sep 17 00:00:00 2001
From: daniel-vahn <d.vonahn@chainsulting.de>
Date: Fri, 26 Apr 2024 09:38:58 +0200
Subject: [PATCH] Add etherIcon and balance functionality

---
 src/App.tsx             | 24 ++++++++++++++++++++----
 src/assets/ethereum.svg | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/ethereum.svg

diff --git a/src/App.tsx b/src/App.tsx
index 86308f7..b67ee4f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ import avatarTable from './assets/avatar_table.png';
 
 import evmConnectIcon from './assets/EVM_connect_logos.png';
 import tonConnectIcon from './assets/ton_connect.png';
+import etherIcon from './assets/ethereum.svg';
 import sendIcon from './assets/send_icon.svg';
 import receiveIcon from './assets/receive_icon.svg';
 import sellIcon from './assets/sell_icon.svg';
@@ -63,7 +64,9 @@ function App() {
 
     // Get Accounts
     const [account, setAccount] = useState<string | null>(null);
-    const getAccounts = () => {
+    const [balance, setBalance] = useState<string | null>(null);
+
+    const getAccountAndBalance = () => {
         const providerId = window.localStorage.getItem('providerId');
         axios
             .get(BRIDGE_URL + '/accounts/' + providerId, {
@@ -78,6 +81,19 @@ function App() {
                 console.log(response.data.accounts[0]);
                 setAccount(response.data.accounts[0]);
             });
+
+        axios
+            .get(BRIDGE_URL + '/balance/' + account, {
+                withCredentials: true,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'ngrok-skip-browser-warning': 'true',
+                },
+            })
+            .then((response) => {
+                console.log(response.data.balance);
+                setBalance(response.data.balance);
+            });
     };
 
     const handleConnect = () => {
@@ -110,7 +126,7 @@ function App() {
             WebApp.MainButton.textColor = '#ffffff';
             WebApp.MainButton.onClick(openWallet);
 
-            getAccounts();
+            getAccountAndBalance();
         }
         if (view === View.WALLET) {
             WebApp.MainButton.show();
@@ -251,7 +267,7 @@ function App() {
                                     <p>{account}</p>
                                 </div>
                                 <div className="wallet-provider-icon">
-                                    <img src={tonConnectIcon} alt="" />
+                                    <img src={etherIcon} alt="" />
                                 </div>
                                 <div className="wallet-balance-details">
                                     <div className="wallet-balance-header">
@@ -264,7 +280,7 @@ function App() {
                                         />
                                     </div>
                                     <div className="wallet-balance-value">
-                                        200
+                                        {balance || 0}
                                     </div>
                                 </div>
                             </div>
diff --git a/src/assets/ethereum.svg b/src/assets/ethereum.svg
new file mode 100644
index 0000000..4620c0e
--- /dev/null
+++ b/src/assets/ethereum.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1242 962" style="enable-background:new 0 0 1242 962;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#627EEA;}
+	.st1{fill:#FFFFFF;fill-opacity:0.602;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#FFFFFF;fill-opacity:0.2;}
+</style>
+<desc>Created with Sketch.</desc>
+<g id="All">
+	<g id="Developer-Center" transform="translate(-1008.000000, -2285.000000)">
+		<g id="Group-28" transform="translate(382.000000, 2270.799999)">
+			<g id="Group-29" transform="translate(0.000000, 0.200001)">
+				<g id="Group-10" transform="translate(0.000000, 14.000000)">
+					<g id="Group-13">
+						<g id="Group-46" transform="translate(626.400000, 0.000000)">
+							<g id="Group-45">
+								<circle id="Oval" class="st0" cx="620.8" cy="481.5" r="365.8"/>
+								<polygon id="Path" class="st1" points="632.2,207.1 632.2,409.9 803.6,486.5 								"/>
+								<polygon id="Path_1_" class="st2" points="632.2,207.1 460.8,486.5 632.2,409.9 								"/>
+								<polygon id="Path_2_" class="st1" points="632.2,617.9 632.2,755.7 803.7,518.4 								"/>
+								<polygon id="Path_3_" class="st2" points="632.2,755.7 632.2,617.9 460.8,518.4 								"/>
+								<polygon id="Path_4_" class="st3" points="632.2,586 803.6,486.5 632.2,409.9 								"/>
+							</g>
+							<polygon id="Path_5_" class="st1" points="460.8,486.5 632.2,586 632.2,409.9 							"/>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>