UI fixes

docs/index.html

@@ -244,7 +244,17 @@
                     </div>
                 </div>
                 <div class="grid gap-0-5">
-                    <h4>Balance</h4>
+                    <div class="flex align-center space-between">
+                        <h4>Balance</h4>
+                        <button onclick="refresh();" title="Refresh" style="margin-left: 1rem;">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                width="24px" fill="#000000">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path
+                                    d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+                            </svg>
+                        </button>
+                    </div>
                     <ul id="my_assets" class="grid gap-1"></ul>
                 </div>
             </section>
@@ -1978,14 +1988,14 @@
                 }
             } else
                 console.info("refresh");
-            updateRate(init);
             render.marketOrders();
+            updateRate(init)
             if (proxy.userID)
                 account();
         }
 
         let accountDetails = {}
-        const allTokens = {}
+        let allTokens = {}
         async function account() {
             floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(async acc => {
                 document.body.classList.add('is-signed-in');
@@ -1999,12 +2009,10 @@
                 getRef("sink_id").value = acc.sinkID;
                 // token balance
                 acc.vault.forEach(({ asset, quantity }) => {
-                    if (!allTokens.hasOwnProperty(asset)) {
-                        allTokens[asset] = {
-                            total: 0,
-                            locked: 0,
-                            net: 0
-                        }
+                    allTokens[asset] = {
+                        total: 0,
+                        locked: 0,
+                        net: 0
                     }
                     allTokens[asset].total += quantity
                 })
@@ -2027,9 +2035,9 @@
 
                 // render all assets in wallet
                 const frag = document.createDocumentFragment();
-                for (const asset in allTokens) {
+                Object.entries(allTokens).sort((a, b) => b[1].net - a[1].net).forEach(([asset]) => {
                     frag.append(render.assetBalanceCard(asset))
-                }
+                })
                 getRef('my_assets').innerHTML = ''
                 getRef('my_assets').append(frag)