UI changes

css/main.css

@@ -857,7 +857,6 @@ theme-toggle {
   align-items: center;
 }
 #page_header h3 {
-  font-weight: 500;
   text-transform: capitalize;
 }
 
@@ -875,7 +874,6 @@ theme-toggle {
 p {
   overflow-wrap: break-word;
   line-height: 1.6em;
-  text-transform: capitalize;
 }
 
 .balance-card {
@@ -885,8 +883,8 @@ p {
   background-size: cover;
   color: white;
   border-radius: 0.5rem;
-  padding: 2rem 1.5rem;
+  padding: max(1.5rem, 3vw);
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
 }
 .balance-card h2,
 .balance-card h3,
@@ -955,6 +953,20 @@ p {
   margin-bottom: 0;
 }
 
+#token_balance_list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.token-balance {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 0.5rem;
+}
+
 .transaction {
   display: grid;
   gap: 1.5rem;

css/main.scss

@@ -780,7 +780,6 @@ theme-toggle {
   padding: 1rem 0;
   align-items: center;
   h3 {
-    font-weight: 500;
     text-transform: capitalize;
   }
 }
@@ -797,7 +796,6 @@ theme-toggle {
 p {
   overflow-wrap: break-word;
   line-height: 1.6em;
-  text-transform: capitalize;
 }
 .balance-card {
   display: flex;
@@ -807,8 +805,8 @@ p {
   background-size: cover;
   color: white;
   border-radius: 0.5rem;
-  padding: 2rem 1.5rem;
+  padding: max(1.5rem, 3vw);
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
   h2,
   h3,
   h4,
@@ -869,6 +867,18 @@ p {
     margin-bottom: 0;
   }
 }
+#token_balance_list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.token-balance {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 0.5rem;
+}
 .transaction {
   display: grid;
   gap: 1.5rem;

index.html

@@ -144,11 +144,13 @@
 		}
 		// fetch data and return json
 		async function fetchJson(url, options = {}) {
-			let response = await fetch(url, options)
+			const response = await fetch(url, options)
+			const json = await response.json()
 			if (response.ok) {
-				return await response.json()
+				return json
 			} else {
-				throw new Error(response.statusText)
+				console.error(json)
+				throw new Error(json.description)
 			}
 		}
 		function getFormattedTime(timestamp, format) {
@@ -343,17 +345,12 @@
 			try {
 				const [floAddress] = state.wildcards
 				if (!floAddress) return;
-				let [addressInfo, addressBalance, addressTxs] = await Promise.all([getAddressInfo(floAddress), getAddressBalance(floAddress), getAddressTxs(floAddress)])
+				let [ownedTokens, floBalance, addressTxs] = await Promise.all([getAddressInfo(floAddress), getAddressBalance(floAddress), getAddressTxs(floAddress)])
-				renderElem(getRef("page_container"), html`${render.addressPage({ balance: addressBalance, address: floAddress })}`);
+				renderElem(getRef("page_container"), html`${render.addressPage({ floBalance, floAddress, ownedTokens })}`);
 				getRef("page_title").textContent = 'Address'
 				renderTransactions('address_transaction_container', addressTxs)
-				const tokenHolders = []
-				for (const token in addressInfo) {
-					tokenHolders.push(render.tokenBalanceCard(token, addressInfo[token].balance))
-				}
-				renderElem(document.getElementById('token_balance_container'), html`${tokenHolders.length ? tokenHolders : html`<div>No tokens found</div>`}`)
 			} catch (e) {
-				notify(e, 'error')
+				renderElem(getRef("page_container"), html`${render.errorPage(e)}`);
 			}
 		})
 		router.addRoute('token', async state => {
@@ -640,28 +637,29 @@
 				`;
 			},
 			addressPage(obj) {
-				let { balance, address } = obj;
+				const { floBalance, floAddress, ownedTokens = {} } = obj;
+				console.log(obj)
 				return html`
 				<div id="address_page" class="page">
 					<div class="balance-card">
-							<h2 class="wrap-around margin-bottom-2">${address}</h2>
+							<h2 class="wrap-around margin-bottom-2">${floAddress}</h2>
-							<h5 class="label">Balance</h5>
+							<h5 class="label">FLO Balance</h5>
-							<h3>${balance} FLO</h3>
+							<h3 class="margin-bottom-2">${floBalance} FLO</h3>
-						</div>
+							<div class="grid gap-0-5">
-						<sm-chips data-target="address_views" onchange="changeView(event)">
+								<h5>Tokens</h5>
-							<sm-chip value="0" selected>Transactions</sm-chip>
+								<ul id="token_balance_list">
-							<sm-chip value="1">Tokens</sm-chip>
+									${Object.keys(ownedTokens).map(token => render.tokenBalanceCard(token, ownedTokens[token].balance))}
-						</sm-chips>
+								</ul>
-						<div id="address_views" class="view-wrapper">
+							</div>
-							<ul id="address_transaction_container" class="transaction-container"></ul>
-							<ul id="token_balance_container" class="hidden"></ul>
 						</div>
+						<h4>Transactions</h4>
+						<ul id="address_transaction_container" class="transaction-container"></ul>
 					</div>
 				`;
 			},
 			tokenBalanceCard(token, balance) {
 				return html`
-				  <li class="card">
+				  <li class="token-balance">
 					<a href=${`#/token/${token}`} class="label token">${token}</a>
 					<h4>${formatAmount(balance, token.toLowerCase() === 'rupee' ? 'inr' : 'usd')}</h4>
 				  </li>