From 1e2971ac8ef8db7264234a0531dc722e6cb03ab3 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Tue, 29 Mar 2022 18:37:26 +0530
Subject: [PATCH 01/11] major UI changes

---
 args/app-config.json   |    1 +
 docs/css/components.js | 1601 ++++++++++++++--------------------------
 docs/css/main.css      |  301 ++++----
 docs/css/main.min.css  |    2 +-
 docs/css/main.scss     |  303 ++++----
 docs/index.html        |  698 ++++++++++--------
 6 files changed, 1292 insertions(+), 1614 deletions(-)
 create mode 100644 args/app-config.json

diff --git a/args/app-config.json b/args/app-config.json
new file mode 100644
index 0000000..635cc90
--- /dev/null
+++ b/args/app-config.json
@@ -0,0 +1 @@
+{"secret":"9qWGMLljSaHWGfm4tfXMxukjig43fBtafjZ","port":"8080","sql_user":"user","sql_pwd":"Qwerty@123","sql_db":"exchange","sql_host":"localhost","backup-port":"8081","backup-floIDs":[]}
\ No newline at end of file
diff --git a/docs/css/components.js b/docs/css/components.js
index 31f5316..ab48ccc 100644
--- a/docs/css/components.js
+++ b/docs/css/components.js
@@ -9,30 +9,24 @@ smButton.innerHTML = `
             box-sizing: border-box;
 }       
 :host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
     display: inline-flex;
     width: auto;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
     --padding: 0.6rem 1.2rem;
     --border-radius: 0.3rem;
-    --background: rgba(var(--text-color), 0.1);
+    --background: rgba(var(--text-color, (17,17,17)), 0.1);
 }
 :host([variant='primary']) .button{
-    background: var(--accent-color);
-    color: rgba(var(--background-color), 1);
+    background: var(--accent-color,teal);
+    color: rgba(var(--background-color, (255,255,255)), 1);
 }
 :host([variant='outlined']) .button{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+            box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset;
     background: transparent; 
-    color: var(--accent-color);
+    color: var(--accent-color,teal);
 }
 :host([variant='no-outline']) .button{
     background: inherit; 
-    color: var(--accent-color);
+    color: var(--accent-color,teal);
 }
 :host([disabled]){
     pointer-events: none;
@@ -40,19 +34,12 @@ smButton.innerHTML = `
 }
 .button {
     position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     width: 100%;
     padding: var(--padding);
     cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
             user-select: none;
     border-radius: var(--border-radius); 
-    -webkit-box-pack: center; 
-        -ms-flex-pack: center; 
             justify-content: center;
     transition: box-shadow 0.3s, background-color 0.3s;
     font-family: inherit;
@@ -70,8 +57,8 @@ smButton.innerHTML = `
     pointer-events: none;
     cursor: not-allowed;
     opacity: 0.6;
-    color: rgba(var(--text-color), 1);
-    background-color: rgba(var(--text-color), 0.3);
+    color: rgba(var(--text-color, (17,17,17)), 1);
+    background-color: rgba(var(--text-color, (17,17,17)), 0.3);
 }
 @media (hover: hover){
     :host(:not([disabled])) .button:hover,
@@ -81,8 +68,8 @@ smButton.innerHTML = `
     }
     :host([variant='outlined']:not([disabled])) .button:hover,
     :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
     }
 }
 @media (hover: none){
@@ -91,8 +78,8 @@ smButton.innerHTML = `
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
     }
     :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
     }
 }
 </style>
@@ -153,27 +140,26 @@ customElements.define('sm-button',
     })
 const smForm = document.createElement('template');
 smForm.innerHTML = `
-    <style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    }
-    :host{
-        display: flex;
-        --gap: 1rem;
-        width: 100%;
-    }
-    form{
-        display: grid;
-        gap: var(--gap);
-        width: 100%;
-    }
-    </style>
-	<form part="form" onsubmit="return false">
-		<slot></slot>
-	</form>
-`;
+        <style>
+        *{
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+        :host{
+            display: flex;
+            width: 100%;
+        }
+        form{
+            display: grid;
+            gap: var(--gap, 1.5rem);
+            width: 100%;
+        }
+        </style>
+        <form part="form" onsubmit="return false">
+            <slot></slot>
+        </form>
+    `;
 
 customElements.define('sm-form', class extends HTMLElement {
     constructor() {
@@ -215,9 +201,9 @@ customElements.define('sm-form', class extends HTMLElement {
         }
     }
     handleKeydown(e) {
-        if (e.key === 'Enter' && e.target.tagName !== 'SM-TEXTAREA') {
+        if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) {
             if (this.allRequiredValid) {
-                if (this.submitButton && this.submitButton.tagName === 'SM-BUTTON') {
+                if (this.submitButton) {
                     this.submitButton.click()
                 }
                 this.dispatchEvent(new CustomEvent('submit', {
@@ -257,231 +243,207 @@ customElements.define('sm-form', class extends HTMLElement {
 
 const smInput = document.createElement('template')
 smInput.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration { display: none; }
-input[type=number] {
--moz-appearance:textfield;
-}
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0; 
-}
-input::-ms-reveal,
-input::-ms-clear {
-  display: none;
-}
-input:invalid{
-    outline: none;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-}
-::-moz-focus-inner{
-border: none;
-}
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
-    --success-color: #00C853;
-    --danger-color: red;
-    --width: 100%;
-    --icon-gap: 0.5rem;
-    --border-radius: 0.3rem;
-    --padding: 0.7rem 1rem;
-    --background: rgba(var(--text-color), 0.06);
-}
-.hide{
-   opacity: 0 !important;
-   pointer-events: none !important;
-}
-.hide-completely{
-    display: none;
-}
-.icon {
-    fill: rgba(var(--text-color), 0.6);
-    height: 1.4rem;
-    width: 1.4rem;
-    border-radius: 1rem;
-    cursor: pointer;
-    min-width: 0;
-}
-
-:host(.round) .input{
-    border-radius: 10rem;
-}
-.input {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    cursor: text;
-    min-width: 0;
-    text-align: left;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    position: relative;
-    gap: var(--icon-gap);
-    padding: var(--padding);
-    border-radius: var(--border-radius);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
-    background: var(--background);
-    width: 100%;
-    outline: none;
-}
-.input.readonly .clear{
-    opacity: 0 !important;
-    margin-right: -2rem;
-    pointer-events: none !important;
-}
-.readonly{
-    pointer-events: none;
-}
-.input:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
-}
-.disabled{
-    pointer-events: none;
-    opacity: 0.6;
-}
-.label {
-    font-size: inherit;
-    opacity: .7;
-    font-weight: 400;
-    position: absolute;
-    top: 0;
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    -o-transition: transform 0.3s;
-    transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    -webkit-transform-origin: left;
-    -ms-transform-origin: left;
-        transform-origin: left;
-    pointer-events: none;
-    white-space: nowrap;
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-       text-overflow: ellipsis;
-    width: 100%;
-    user-select: none;
-    will-change: transform;
-}
-.outer-container{
-    position: relative;
-    width: var(--width);
-}
-.container{
-    width: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    position: relative;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-}    
-input{
-    font-size: inherit;
+    <style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-results-button,
+    input[type="search"]::-webkit-search-results-decoration { display: none; }
+    input[type=number] {
+    -moz-appearance:textfield;
+    }
+    input[type=number]::-webkit-inner-spin-button, 
+    input[type=number]::-webkit-outer-spin-button { 
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin: 0; 
+    }
+    input::-ms-reveal,
+    input::-ms-clear {
+      display: none;
+    }
+    input:invalid{
+        outline: none;
+        -webkit-box-shadow: none;
+                box-shadow: none;
+    }
+    ::-moz-focus-inner{
     border: none;
-    background: transparent;
-    outline: none;
-    color: rgba(var(--text-color), 1);
-    width: 100%;
-}
-:host(:not([variant="outlined"])) .animate-label .container input {
-    -webkit-transform: translateY(0.6rem);
-            -ms-transform: translateY(0.6rem);
-        transform: translateY(0.6rem);
     }
-  
-:host(:not([variant="outlined"])) .animate-label .label {
-    -webkit-transform: translateY(-0.7em) scale(0.8);
-            -ms-transform: translateY(-0.7em) scale(0.8);
-        transform: translateY(-0.7em) scale(0.8);
-    opacity: 1;
-    color: var(--accent-color)
-}
-:host([variant="outlined"]) .input {
-    box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset;
-    background: rgba(var(--background-color), 1);
-}
-:host([variant="outlined"]) .label {
-    width: max-content;
-    margin-left: -0.5rem;
-    padding: 0 0.5rem;
-}
-:host([variant="outlined"]) .animate-label .label {
-    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
-            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
-        transform: translate(0.1rem, -1.5rem) scale(0.8);
-    opacity: 1;
-    background: rgba(var(--background-color), 1);
-}
-.animate-label:focus-within:not(.readonly) .label{
-    color: var(--accent-color)
-}
-.feedback-text:not(:empty){
-    display: flex;
-    width: 100%;
-    text-align: left;
-    font-size: 0.9rem;
-    align-items: center;
-    padding: 0.8rem 0;
-    color: rgba(var(--text-color), 0.8);
-}
-.success{
-    color: var(--success-color);
-}
-.error{
-    color: var(--danger-color);
-}
-.status-icon{
-    margin-right: 0.2rem;
-}
-.status-icon--error{
-    fill: var(--danger-color);
-}
-.status-icon--success{
-    fill: var(--success-color);
-}
-@media (any-hover: hover){
-    .icon:hover{
-        background: rgba(var(--text-color), 0.1);
+    :host{
+        display: flex;
+        --success-color: #00C853;
+        --danger-color: red;
+        --width: 100%;
+        --icon-gap: 0.5rem;
+        --background: rgba(var(--text-color, (17,17,17)), 0.06);
     }
-}
-</style>
-<div class="outer-container">
-    <label part="input" class="input">
-        <slot name="icon"></slot>
-        <div class="container">
-            <input type="text"/>
-            <div part="placeholder" class="label"></div>
-        </div>
-        <svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
-    </label>
-    <p class="feedback-text"></p>
-</div>
-`;
+    .hide{
+       display: none !important;
+    }
+    button{
+        display: flex;
+        border: none;
+        background: none;
+        padding: 0;
+        border-radius: 1rem;
+        min-width: 0;
+        cursor: pointer;
+    }
+    button:focus{
+        outline: var(--accent-color, teal) solid medium;
+    }
+    .icon {
+        height: 1.4rem;
+        width: 1.4rem;
+        fill: rgba(var(--text-color, (17,17,17)), 0.6);
+    }
+    
+    :host(.round) .input{
+        border-radius: 10rem;
+    }
+    .input {
+        display: flex;
+        cursor: text;
+        min-width: 0;
+        text-align: left;
+                align-items: center;
+        position: relative;
+        gap: var(--icon-gap);
+        padding: var(--padding, 0.6rem 0.8rem);
+        border-radius: var(--border-radius,0.3rem);
+        transition: opacity 0.3s, box-shadow 0.2s;
+        background: var(--background);
+        width: 100%;
+        outline: none;
+        min-height: 3.5rem;
+    }
+    .input.readonly .clear{
+        opacity: 0 !important;
+        margin-right: -2rem;
+        pointer-events: none !important;
+    }
+    .readonly{
+        pointer-events: none;
+    }
+    .input:focus-within:not(.readonly){
+        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
+    }
+    .disabled{
+        pointer-events: none;
+        opacity: 0.6;
+    }
+    .label {
+        grid-area: 1/1/2/2;
+        font-size: inherit;
+        opacity: .7;
+        font-weight: 400;
+        transition: -webkit-transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s, color .03;
+            transform-origin: left;
+        pointer-events: none;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 100%;
+        user-select: none;
+        will-change: transform;
+    }
+    .outer-container{
+        position: relative;
+        width: var(--width);
+    }
+    .container{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        position: relative;
+        align-items: center;
+    }    
+    input{
+        grid-area: 1/1/2/2;
+        font-size: inherit;
+        border: none;
+        background: transparent;
+        outline: none;
+        color: inherit;
+        font-family: inherit;
+        width: 100%;
+        caret-color: var(--accent-color, teal);
+    }
+    :host([animate]) .input:focus-within .container input,
+    .animate-placeholder .container input {
+        -webkit-transform: translateY(0.6rem);
+                -ms-transform: translateY(0.6rem);
+            transform: translateY(0.6rem);
+        }
+      
+        :host([animate]) .input:focus-within .label,
+        .animate-placeholder .label {
+        -webkit-transform: translateY(-0.7em) scale(0.8);
+                -ms-transform: translateY(-0.7em) scale(0.8);
+            transform: translateY(-0.7em) scale(0.8);
+        opacity: 1;
+        color: var(--accent-color,teal)
+    }
+    :host([variant="outlined"]) .input {
+        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
+        background: rgba(var(--background-color, (255,255,255)), 1);
+    }
+    .animate-placeholder:focus-within:not(.readonly) .label{
+        color: var(--accent-color,teal)
+    }
+    .feedback-text:not(:empty){
+        display: flex;
+        width: 100%;
+        text-align: left;
+        font-size: 0.9rem;
+        align-items: center;
+        padding: 0.8rem 0;
+        color: rgba(var(--text-color, (17,17,17)), 0.8);
+    }
+    .success{
+        color: var(--success-color);
+    }
+    .error{
+        color: var(--danger-color);
+    }
+    .status-icon{
+        margin-right: 0.2rem;
+    }
+    .status-icon--error{
+        fill: var(--danger-color);
+    }
+    .status-icon--success{
+        fill: var(--success-color);
+    }
+    @media (any-hover: hover){
+        .icon:hover{
+            background: rgba(var(--text-color, (17,17,17)), 0.1);
+        }
+    }
+    </style>
+    <div class="outer-container">
+        <label part="input" class="input">
+            <slot name="icon"></slot>
+            <div class="container">
+                <input type="text"/>
+                <div part="placeholder" class="label"></div>
+                <button class="clear hide" title="Clear" tabindex="-1">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
+                </button>
+            </div>
+            <slot name="right"></slot>
+        </label>
+        <p class="feedback-text"></p>
+    </div>
+    `;
 customElements.define('sm-input',
     class extends HTMLElement {
 
@@ -500,11 +462,11 @@ customElements.define('sm-input',
             this._helperText = '';
             this._errorText = '';
             this.isRequired = false;
-            this.hideRequired = false;
             this.validationFunction = undefined;
             this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
 
             this.reset = this.reset.bind(this);
+            this.clear = this.clear.bind(this);
             this.focusIn = this.focusIn.bind(this);
             this.focusOut = this.focusOut.bind(this);
             this.fireEvent = this.fireEvent.bind(this);
@@ -590,9 +552,9 @@ customElements.define('sm-input',
                         this.feedbackText.classList.add('error');
                         this.feedbackText.classList.remove('success');
                         this.feedbackText.innerHTML = `
-                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
-                        ${this._errorText}
-                        `;
+                                <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
+                            ${this._errorText}
+                            `;
                     }
                 }
                 return (_isValid && _customValid);
@@ -601,6 +563,10 @@ customElements.define('sm-input',
         reset() {
             this.value = '';
         }
+        clear() {
+            this.value = '';
+            this.input.focus();
+        }
 
         focusIn() {
             this.input.focus();
@@ -625,22 +591,20 @@ customElements.define('sm-input',
                     this.clearBtn.classList.remove('hide');
                 } else {
                     this.clearBtn.classList.add('hide');
-                    if (this.isRequired && !this.hideRequired) {
-                        this.feedbackText.textContent = '*required';
-                    }
                 }
             }
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
             if (this.input.value !== '') {
                 if (this.animate)
-                    this.inputParent.classList.add('animate-label');
+                    this.inputParent.classList.add('animate-placeholder');
                 else
                     this.label.classList.add('hide');
             } else {
                 if (this.animate)
-                    this.inputParent.classList.remove('animate-label');
+                    this.inputParent.classList.remove('animate-placeholder');
                 else
                     this.label.classList.remove('hide');
+                this.feedbackText.textContent = '';
             }
         }
         vibrate() {
@@ -661,7 +625,7 @@ customElements.define('sm-input',
             this.animate = this.hasAttribute('animate');
             this.setAttribute('role', 'textbox');
             this.input.addEventListener('input', this.checkInput);
-            this.clearBtn.addEventListener('click', this.reset);
+            this.clearBtn.addEventListener('click', this.clear);
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
@@ -694,11 +658,6 @@ customElements.define('sm-input',
                 }
                 else if (name === 'required') {
                     this.isRequired = this.hasAttribute('required');
-                    if (this.isRequired && !this.hideRequired) {
-                        this.feedbackText.textContent = '';
-                    } else {
-                        this.feedbackText.textContent = '*required';
-                    }
                     if (this.isRequired) {
                         this.setAttribute('aria-required', 'true');
                     }
@@ -706,9 +665,6 @@ customElements.define('sm-input',
                         this.setAttribute('aria-required', 'false');
                     }
                 }
-                else if (name === 'hiderequired') {
-                    this.hideRequired = this.hasAttribute('hiderequired')
-                }
                 else if (name === 'readonly') {
                     if (this.hasAttribute('readonly')) {
                         this.inputParent.classList.add('readonly');
@@ -728,157 +684,152 @@ customElements.define('sm-input',
         }
         disconnectedCallback() {
             this.input.removeEventListener('input', this.checkInput);
-            this.clearBtn.removeEventListener('click', this.reset);
+            this.clearBtn.removeEventListener('click', this.clear);
         }
     })
 const smNotifications = document.createElement('template')
 smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        --accent-color: #4d2588;
-        --text-color: 17, 17, 17;
-        --background-color: 255, 255, 255;
-        --danger-color: red;
-        --icon-height: 1.5rem;
-        --icon-width: 1.5rem;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: grid;
-        width: 100%;
-        gap: 0.5rem;
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        z-index: 100;
-        max-height: 100%;
-        padding: 1rem;
-        overflow: hidden auto;
-        -ms-scroll-chaining: none;
-            overscroll-behavior: contain;
-    }
-    .notification-panel:empty{
-        display:none;
-    }
-    .notification{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        position: relative;
-        border-radius: 0.3rem;
-        background: rgba(var(--background-color), 1);
-        overflow: hidden;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-        padding: 1rem;
-        align-items: center;
-    }
-    .icon-container:not(:empty){
-        margin-right: 0.5rem;
-        height: var(--icon-height);
-        width: var(--icon-width);
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        -webkit-box-flex: 1;
-            -ms-flex: 1;
-                flex: 1;
-        color: rgba(var(--text-color), 0.9);
-        overflow-wrap: break-word;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    .icon {
-        height: 100%;
-        width: 100%;
-        fill: rgba(var(--text-color), 0.7);
-    }
-    .icon--success {
-        fill: var(--green);
-      }
-      .icon--failure,
-      .icon--error {
-        fill: var(--danger-color);
-      }
-    .close{
-        height: 2rem;
-        width: 2rem;
-        border: none;
-        cursor: pointer;
-        margin-left: 1rem;
-        border-radius: 50%;
-        padding: 0.3rem;
-        transition: background-color 0.3s, transform 0.3s;
-        background-color: transparent;
-    }
-    .close:active{
-        transform: scale(0.9);
-    }
-    @media screen and (min-width: 640px){
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+        } 
+        :host{
+            display: flex;
+            --icon-height: 1.5rem;
+            --icon-width: 1.5rem;
+        }
+        .hide{
+            opacity: 0 !important;
+            pointer-events: none !important;
+        }
         .notification-panel{
-            max-width: 28rem;
-            width: max-content;
+            display: grid;
+            width: 100%;
+            gap: 0.5rem;
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            z-index: 100;
+            max-height: 100%;
+            padding: 1rem;
+            overflow: hidden auto;
+            -ms-scroll-chaining: none;
+                overscroll-behavior: contain;
+        }
+        .notification-panel:empty{
+            display:none;
         }
         .notification{
-            width: auto;
-            border: solid 1px rgba(var(--text-color), 0.2);
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            position: relative;
+            border-radius: 0.3rem;
+            background: rgba(var(--background-color, (255,255,255)), 1);
+            overflow: hidden;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            -ms-word-break: break-all;
+            word-break: break-all;
+            word-break: break-word;
+            -ms-hyphens: auto;
+            -webkit-hyphens: auto;
+            hyphens: auto;
+            max-width: 100%;
+            padding: 1rem;
+            align-items: center;
         }
-    }
-    @media (any-hover: hover){
-        ::-webkit-scrollbar{
-            width: 0.5rem;
+        .icon-container:not(:empty){
+            margin-right: 0.5rem;
+            height: var(--icon-height);
+            width: var(--icon-width);
         }
-        
-        ::-webkit-scrollbar-thumb{
-            background: rgba(var(--text-color), 0.3);
-            border-radius: 1rem;
-            &:hover{
-                background: rgba(var(--text-color), 0.5);
+        h4:first-letter,
+        p:first-letter{
+            text-transform: uppercase;
+        }
+        h4{
+            font-weight: 400;
+        }
+        p{
+            line-height: 1.6;
+            -webkit-box-flex: 1;
+                -ms-flex: 1;
+                    flex: 1;
+            color: rgba(var(--text-color, (17,17,17)), 0.9);
+            overflow-wrap: break-word;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            -ms-word-break: break-all;
+            word-break: break-all;
+            word-break: break-word;
+            -ms-hyphens: auto;
+            -webkit-hyphens: auto;
+            hyphens: auto;
+            max-width: 100%;
+        }
+        .notification:last-of-type{
+            margin-bottom: 0;
+        }
+        .icon {
+            height: 100%;
+            width: 100%;
+            fill: rgba(var(--text-color, (17,17,17)), 0.7);
+        }
+        .icon--success {
+            fill: var(--green);
+          }
+          .icon--failure,
+          .icon--error {
+            fill: var(--danger-color);
+          }
+        .close{
+            height: 2rem;
+            width: 2rem;
+            border: none;
+            cursor: pointer;
+            margin-left: 1rem;
+            border-radius: 50%;
+            padding: 0.3rem;
+            transition: background-color 0.3s, transform 0.3s;
+            background-color: transparent;
+        }
+        .close:active{
+            transform: scale(0.9);
+        }
+        @media screen and (min-width: 640px){
+            .notification-panel{
+                max-width: 28rem;
+                width: max-content;
+            }
+            .notification{
+                width: auto;
+                border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
             }
         }
-        .close:hover{
-            background-color: rgba(var(--text-color), 0.1);
+        @media (any-hover: hover){
+            ::-webkit-scrollbar{
+                width: 0.5rem;
+            }
+            
+            ::-webkit-scrollbar-thumb{
+                background: rgba(var(--text-color, (17,17,17)), 0.3);
+                border-radius: 1rem;
+                &:hover{
+                    background: rgba(var(--text-color, (17,17,17)), 0.5);
+                }
+            }
+            .close:hover{
+                background-color: rgba(var(--text-color, (17,17,17)), 0.1);
+            }
         }
-    }
-</style>
-<div class="notification-panel"></div>
-`
+    </style>
+    <div class="notification-panel"></div>
+    `;
+
 
 customElements.define('sm-notifications', class extends HTMLElement {
     constructor() {
@@ -911,21 +862,21 @@ customElements.define('sm-notifications', class extends HTMLElement {
 
     createNotification(message, options = {}) {
         const { pinned = false, icon = '' } = options;
-        const notification = document.createElement('div')
+        const notification = document.createElement('output')
         notification.id = this.randString(8)
         notification.classList.add('notification');
         let composition = ``;
         composition += `
-            <div class="icon-container">${icon}</div>
-            <p>${message}</p>
-            `;
+                <div class="icon-container">${icon}</div>
+                <p>${message}</p>
+                `;
         if (pinned) {
             notification.classList.add('pinned');
             composition += `
-                <button class="close">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-                </button>
-            `;
+                    <button class="close">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+                    </button>
+                `;
         }
         notification.innerHTML = composition;
         return notification;
@@ -1023,9 +974,6 @@ smPopup.innerHTML = `
     display: -ms-grid;
     display: grid;
     z-index: 10;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
     --width: 100%;
     --height: auto;
     --min-width: auto;
@@ -1080,7 +1028,7 @@ smPopup.innerHTML = `
     min-height: var(--min-height);
     max-height: 90vh;
     border-radius: var(--border-radius);
-    background: rgba(var(--background-color), 1);
+    background: rgba(var(--background-color, (255,255,255)), 1);
     -webkit-box-shadow: 0 -1rem 2rem #00000020;
             box-shadow: 0 -1rem 2rem #00000020;
 }
@@ -1140,7 +1088,7 @@ smPopup.innerHTML = `
     .handle{
         height: 0.3rem;
         width: 2rem;
-        background: rgba(var(--text-color), .4);
+        background: rgba(var(--text-color, (17,17,17)), .4);
         border-radius: 1rem;
         margin: 0.5rem 0;
     }
@@ -1151,10 +1099,10 @@ smPopup.innerHTML = `
     }
     
     ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color), 0.3);
+        background: rgba(var(--text-color, (17,17,17)), 0.3);
         border-radius: 1rem;
         &:hover{
-            background: rgba(var(--text-color), 0.5);
+            background: rgba(var(--text-color, (17,17,17))), 0.5);
         }
     }
 }
@@ -1405,7 +1353,7 @@ customElements.define('sm-popup', class extends HTMLElement {
     }
 
     updateFocusableList() {
-        this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
+        this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
         this.autoFocus = this.querySelector('[autofocus]')
     }
 
@@ -1467,17 +1415,12 @@ spinner.innerHTML = `
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
 }
-:host{
-    --accent-color: #4d2588;
-    --height: 1.6rem;
-    --width: 1.6rem;
-}
 .loader {
-    height: var(--height);
-    width: var(--weight);
+    height: var(--size, 1.5rem);
+    width: var(--size, 1.5rem);
     stroke-width: 8;
     overflow: visible;
-    stroke: var(--accent-color);
+    stroke: var(--accent-color, teal);
     fill: none;
     stroke-dashoffset: 180;
     stroke-dasharray: 180;
@@ -1501,7 +1444,7 @@ spinner.innerHTML = `
 <svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>
 
 `;
-class SquareLoader extends HTMLElement {
+class SpinnerLoader extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({
@@ -1509,7 +1452,7 @@ class SquareLoader extends HTMLElement {
         }).append(spinner.content.cloneNode(true));
     }
 }
-window.customElements.define('sm-spinner', SquareLoader);
+window.customElements.define('sm-spinner', SpinnerLoader);
 
 const themeToggle = document.createElement('template');
 themeToggle.innerHTML = `
@@ -1544,7 +1487,7 @@ themeToggle.innerHTML = `
         pointer-events: none;
         transition: transform 0.3s, opacity 0.3s;
         transform: translate(-50%, -50%) scale(1.2);
-        background-color: rgba(var(--text-color), 0.12);
+        background-color: rgba(var(--text-color,(17,17,17)), 0.12);
     }
     :host(:focus-within) .theme-toggle{
         outline: none;
@@ -1557,7 +1500,7 @@ themeToggle.innerHTML = `
         position: absolute;
         height: 100%;
         width: 100%;
-        fill: rgba(var(--text-color), 1);
+        fill: rgba(var(--text-color,(17,17,17)), 1);
         transition: transform 0.3s, opacity 0.1s;
     }
     
@@ -1703,13 +1646,8 @@ smCopy.innerHTML = `
 :host{
     display: -webkit-box;
     display: flex;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
     --padding: 0;
-    --background-color: inherit;
-    --button-background-color: rgba(var(--text-color), 0.2);
-    --button-border-radius: 0.3rem;
+    --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);
 }
 .copy{
     display: grid;
@@ -1719,10 +1657,15 @@ smCopy.innerHTML = `
     align-items: center;
     grid-template-columns: minmax(0, 1fr) auto;
 }
-.copy-content{
+:host(:not([clip-text])) .copy-content{
     overflow-wrap: break-word;
     word-wrap: break-word;
 }
+:host([clip-text]) .copy-content{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .copy-button{
     display: inline-flex;
     justify-content: center;
@@ -1730,7 +1673,7 @@ smCopy.innerHTML = `
     border: none;
     padding: 0.4rem;
     background-color: inherit;
-    border-radius: var(--button-border-radius);
+    border-radius: var(--button-border-radius, 0.3rem);
 }
 .copy-button:active{
     background-color: var(--button-background-color);
@@ -1738,7 +1681,7 @@ smCopy.innerHTML = `
 .icon{
     height: 1.2rem;
     width: 1.2rem;
-    fill: rgba(var(--text-color), 0.8);
+    fill: rgba(var(--text-color, (17,17,17)), 0.8);
 }
 @media (any-hover: hover){
     .copy:hover .copy-button{
@@ -1811,134 +1754,130 @@ customElements.define('sm-copy',
     });
 const stripSelect = document.createElement('template');
 stripSelect.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    }  
-    :host{
-        --accent-color: #4d2588;
-        --text-color: 17, 17, 17;
-        --background-color: 255, 255, 255;
-        --gap: 0.5rem;
-        padding: 1rem 0;
-    }
-    .hide{
-        display: none !important;
-    }
-    input[type="radio"]{
-        display: none;
-    }
-    .scrolling-container{
-        position: relative;
-        display: flex;
-        align-items: center;
-    }
-    .strip-select{
-        position: relative;
-    }
-    :host([multiline]) .strip-select{
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        overflow: auto hidden;
-    }
-    :host(:not([multiline])) .strip-select{
-        display: grid;
-        grid-auto-flow: column;
-        gap: var(--gap);
-        max-width: 100%;   
-        align-items: center;
-        overflow: auto hidden;
-    }
-    .nav-button{
-        display: flex;
-        top: 50%;
-        z-index: 2;
-        border: none;
-        padding: 0.3rem;
-        cursor: pointer;
-        position: absolute;
-        align-items: center;
-        background: rgba(var(--background-color), 1);
-        transform: translateY(-50%);
-    }
-    .nav-button--right{
-        right: 0;
-    }
-    .cover{
-        position: absolute;
-        z-index: 1;
-        width: 5rem;
-        height: 100%;
-        pointer-events: none;
-    }
-    .nav-button--right::before{
-        background-color: red;
-    }
-    .icon{
-        height: 1.5rem;
-        width: 1.5rem;
-        fill: rgba(var(--text-color), .8);
-    }
-    @media (hover: none){
-        ::-webkit-scrollbar {
-            height: 0;
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+        }  
+        :host{
+            padding: 1rem 0;
         }
-        .nav-button{
+        .hide{
+            display: none !important;
+        }
+        input[type="radio"]{
             display: none;
         }
+        .scrolling-container{
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
         .strip-select{
+            position: relative;
+        }
+        :host([multiline]) .strip-select{
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--gap, 0.5rem);
             overflow: auto hidden;
         }
+        :host(:not([multiline])) .strip-select{
+            display: grid;
+            grid-auto-flow: column;
+            gap: var(--gap, 0.5rem);
+            max-width: 100%;   
+            align-items: center;
+            overflow: auto hidden;
+        }
+        .nav-button{
+            display: flex;
+            top: 50%;
+            z-index: 2;
+            border: none;
+            padding: 0.3rem;
+            cursor: pointer;
+            position: absolute;
+            align-items: center;
+            background: rgba(var(--background-color,(255,255,255)), 1);
+            transform: translateY(-50%);
+        }
+        .nav-button--right{
+            right: 0;
+        }
         .cover{
-            width: 2rem;
+            position: absolute;
+            z-index: 1;
+            width: 5rem;
+            height: 100%;
+            pointer-events: none;
         }
-        .cover--left{
-            background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent);
+        .nav-button--right::before{
+            background-color: red;
         }
-        .cover--right{
-            right: 0;
-            background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1));
+        .icon{
+            height: 1.5rem;
+            width: 1.5rem;
+            fill: rgba(var(--text-color,(17,17,17)), .8);
         }
-    }
-    @media (hover: hover){
-        ::-webkit-scrollbar-track {
-            background-color: transparent !important;
+        @media (hover: none){
+            ::-webkit-scrollbar {
+                height: 0;
+            }
+            .nav-button{
+                display: none;
+            }
+            .strip-select{
+                overflow: auto hidden;
+            }
+            .cover{
+                width: 2rem;
+            }
+            .cover--left{
+                background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);
+            }
+            .cover--right{
+                right: 0;
+                background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));
+            }
         }
-        ::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
+        @media (hover: hover){
+            ::-webkit-scrollbar-track {
+                background-color: transparent !important;
+            }
+            ::-webkit-scrollbar {
+                height: 0;
+                background-color: transparent;
+            }
+            .strip-select{
+                overflow: hidden;
+            }
+            .cover--left{
+                background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);
+            }
+            .cover--right{
+                right: 0;
+                background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);
+            }
         }
-        .strip-select{
-            overflow: hidden;
-        }
-        .cover--left{
-            background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);
-        }
-        .cover--right{
-            right: 0;
-            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);
-        }
-    }
-</style>
-<section class="scrolling-container">
-    <div class="cover cover--left hide"></div>
-    <button class="nav-button nav-button--left hide">
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
-    </button>
-    <section class="strip-select">
-        <slot></slot>
+    </style>
+    <section class="scrolling-container">
+        <div class="cover cover--left hide"></div>
+        <button class="nav-button nav-button--left hide">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
+        </button>
+        <section class="strip-select">
+            <slot></slot>
+        </section>
+        <button class="nav-button nav-button--right hide">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
+        </button>
+        <div class="cover cover--right hide"></div>
     </section>
-    <button class="nav-button nav-button--right hide">
-        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
-    </button>
-    <div class="cover cover--right hide"></div>
-</section>
-
-`;
+    
+    `;
 customElements.define('strip-select', class extends HTMLElement {
     constructor() {
         super();
@@ -2078,47 +2017,41 @@ customElements.define('strip-select', class extends HTMLElement {
 //Strip option
 const stripOption = document.createElement('template');
 stripOption.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    }  
-    :host{
-        --border-radius: 2rem;
-        --background-color: inherit;
-        --active-option-color: inherit;
-        --active-option-background-color: rgba(var(--text-color), .2);
-    }
-    .strip-option{
-        display: flex;
-        flex-shrink: 0;
-        cursor: pointer;
-        white-space: nowrap;
-        padding: 0.5rem 0.8rem;
-        transition: background 0.3s;
-        border-radius: var(--border-radius);
-        -webkit-tap-highlight-color: transparent;
-    }
-    :host([active]) .strip-option{
-        color: var(--active-option-color);
-        background-color: var(--active-option-background-color);
-    }
-    :host(:focus-within){
-        outline: none;
-    }
-    :host(:focus-within) .strip-option{
-        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-    }
-    :host(:hover:not([active])) .strip-option{
-        background-color: rgba(var(--text-color), 0.06);
-    }
-</style>
-<label class="strip-option">
-    <slot></slot>
-</label>
-`;
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+        }  
+        .strip-option{
+            display: flex;
+            flex-shrink: 0;
+            cursor: pointer;
+            white-space: nowrap;
+            padding: var(--padding, 0.4rem 0.6rem);
+            transition: background 0.3s;
+            border-radius: var(--border-radius, 2rem);
+            -webkit-tap-highlight-color: transparent;
+        }
+        :host([active]) .strip-option{
+            color: var(--active-option-color, rgba(var(--background-color,white)));
+            background-color: var(--active-background-color, var(--accent-color, teal));
+        }
+        :host(:focus-within){
+            outline: none;
+        }
+        :host(:focus-within) .strip-option{
+            box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
+        }
+        :host(:hover:not([active])) .strip-option{
+            background-color: rgba(var(--text-color,(17,17,17)), 0.06);
+        }
+    </style>
+    <label class="strip-option">
+        <slot></slot>
+    </label>
+    `;
 customElements.define('strip-option', class extends HTMLElement {
     constructor() {
         super();
@@ -2177,7 +2110,7 @@ slideButton.innerHTML = `
             display: flex;
             align-items: center;
             width: 100%;
-            background-color: rgba(var(--text-color), 0.1);
+            background-color: rgba(var(--text-color,(17,17,17)), 0.1);
             border-radius: var(--button-border-radius, 0.3rem);
             overscroll-behavior: contain;
             touch-action: pan;
@@ -2213,7 +2146,7 @@ slideButton.innerHTML = `
         }
         :host([disabled]) .slide-thumb{
             pointer-events: none;
-            background-color: rgba(var(--text-color), 0.5);
+            background-color: rgba(var(--text-color,(17,17,17)), 0.5);
         }
     </style>
     <div class="slide-button">
@@ -2321,9 +2254,6 @@ smSelect.innerHTML = `
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
     --min-width: 100%;
 }
 :host([disabled]) .select{
@@ -2347,7 +2277,7 @@ smSelect.innerHTML = `
     height: 1.2rem;
     width: 1.2rem;
     margin-left: 0.5rem;
-    fill: rgba(var(--text-color), 0.7);
+    fill: rgba(var(--text-color, (17,17,17)), 0.7);
 }      
 .selected-option-text{
     font-size: inherit;
@@ -2365,7 +2295,7 @@ smSelect.innerHTML = `
     grid-template-columns: 1fr auto;
         grid-template-areas: 'heading heading' '. .';
     padding: var(--padding,0.6rem 0.8rem);
-    background: rgba(var(--text-color), 0.06);
+    background: rgba(var(--text-color,(17,17,17)), 0.06);
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
@@ -2373,8 +2303,8 @@ smSelect.innerHTML = `
     z-index: 2;
 }
 .selection:focus{
-    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color) 
+    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color, teal);
+            box-shadow: 0 0 0 0.1rem var(--accent-color, teal) 
 }
 :host([align-select="left"]) .options{
     left: 0;
@@ -2398,8 +2328,8 @@ smSelect.innerHTML = `
             flex-direction: column;
     min-width: var(--min-width);
     max-height: var(--max-height, auto);
-    background: rgba(var(--background-color), 1);
-    border: solid 1px rgba(var(--text-color), 0.2);
+    background: rgba(var(--background-color,(255,255,255)), 1);
+    border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
     border-radius: var(--border-radius, 0.5rem);
     z-index: 1;
     -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
@@ -2420,10 +2350,10 @@ smSelect.innerHTML = `
     }
     
     ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color), 0.3);
+        background: rgba(var(--text-color,(17,17,17)), 0.3);
         border-radius: 1rem;
         &:hover{
-            background: rgba(var(--text-color), 0.5);
+            background: rgba(var(--text-color,(17,17,17)), 0.5);
         }
     }
 }
@@ -2684,13 +2614,13 @@ smOption.innerHTML = `
 }
 :host(:focus){
     outline: none;
-    background: rgba(var(--text-color), 0.1);
+    background: rgba(var(--text-color,(17,17,17)), 0.1);
 }
 .icon {
     opacity: 0;
     height: 1.2rem;
     width: 1.2rem;
-    fill: rgba(var(--text-color), 0.8);
+    fill: rgba(var(--text-color,(17,17,17)), 0.8);
 }
 :host(:focus) .option .icon{
     opacity: 0.4
@@ -2700,7 +2630,7 @@ smOption.innerHTML = `
 }
 @media (hover: hover){
     .option:hover{
-        background: rgba(var(--text-color), 0.1);
+        background: rgba(var(--text-color,(17,17,17)), 0.1);
     }
     :host(:not(.check-selected):hover) .icon{
         opacity: 0.4
@@ -2738,13 +2668,10 @@ smCheckbox.innerHTML = `
         display: -webkit-inline-box;
         display: -ms-inline-flexbox;
         display: inline-flex;
-        --accent-color: #4d2588;
-        --text-color: 17, 17, 17;
-        --background-color: 255, 255, 255;
         --height: 1.2rem;
         --width: 1.2rem;
         --border-radius: 0.2rem;
-        --border-color: rgba(var(--text-color), 0.7);
+        --border-color: rgba(var(--text-color,(17,17,17)), 0.7);
     }
     :host([disabled]) {
         opacity: 0.6;
@@ -2769,7 +2696,7 @@ smCheckbox.innerHTML = `
     }
     .checkbox:active .icon,
     .checkbox:focus-within .icon{
-        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+        box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
     }
     
     input {
@@ -2786,11 +2713,11 @@ smCheckbox.innerHTML = `
     
     :host([checked]) .checkmark {
         stroke-dashoffset: 0;
-        stroke: rgba(var(--background-color), 1);
+        stroke: rgba(var(--background-color,(255,255,255)), 1);
     }
     :host([checked]) .icon {
-        background: var(--accent-color);
-        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+        background: var(--accent-color, teal);
+        box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
     }    
     .icon {
         fill: none;
@@ -2918,390 +2845,4 @@ customElements.define('sm-checkbox', class extends HTMLElement {
         this.removeEventListener('keydown', this.handleKeyDown)
         this.removeEventListener('change', this.handleClick)
     }
-})
-const smTabHeader = document.createElement('template')
-smTabHeader.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        --accent-color: #4d2588;
-        --text-color: 17, 17, 17;
-        --background-color: 255, 255, 255;
-        --gap: 1rem;
-        --justify-content: flex-start;
-        --tab-indicator-border-radius: 0.3rem;
-    }
-    .tabs{
-        position: relative;
-        display: -ms-grid;
-        display: grid;
-        width: 100%;
-    }
-    .tab-header{
-        display: -ms-grid;
-        display: grid;
-        grid-auto-flow: column;
-        justify-content: var(--justify-content);
-        gap: var(--gap);
-        position: relative;
-        overflow: auto hidden;
-        max-width: 100%;
-        scrollbar-width: 0;
-    }
-    .indicator{
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 0.15rem;
-        border-radius: 1rem 1rem 0 0;  
-        background: var(--accent-color);
-        -webkit-transition: width 0.3s, -webkit-transform 0.3s;
-        transition: width 0.3s, -webkit-transform 0.3s;
-        -o-transition: transform 0.3s, width 0.3s;
-        transition: transform 0.3s, width 0.3s;
-        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
-        pointer-events: none;
-    }
-    :host([variant="tab"]) .indicator{
-        height: 100%;
-        border-radius: var(--tab-indicator-border-radius);
-    }
-    :host([variant="tab"]) .tab-header{
-        border-bottom: none; 
-    }
-    .hide-completely{
-        display: none;
-    }
-    :host([variant="tab"]) .tab-header{
-        gap: 0.2rem;
-        display: -ms-inline-grid;
-        display: inline-grid;
-        justify-self: flex-start;
-        border-radius: 0.3rem;
-    }
-    :host([variant="tab"]) slot::slotted(.active){
-        color: rgba(var(--background-color), 1);
-    }
-    slot::slotted(.active){
-        color: var(--accent-color);
-        opacity: 1;
-    }
-    @media (any-hover: none){
-        .tab-header::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        .tab-header::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-    }         
-    @media (any-hover: hover){
-        .tab-header{
-            overflow: hidden;
-        }
-    }         
-</style>
-<div part="tab-container" class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot></slot>
-        <div part="indicator" class="indicator"></div>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tab-header', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smTabHeader.content.cloneNode(true))
-
-        this.prevTab
-        this.allTabs
-        this.activeTab
-
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-
-        this.changeTab = this.changeTab.bind(this)
-        this.handleClick = this.handleClick.bind(this)
-        this.handlePanelChange = this.handlePanelChange.bind(this)
-        this.moveIndiactor = this.moveIndiactor.bind(this)
-    }
-
-    fireEvent(index) {
-        this.dispatchEvent(
-            new CustomEvent(`switchedtab${this.target}`, {
-                bubbles: true,
-                detail: {
-                    index: parseInt(index)
-                }
-            })
-        )
-    }
-
-    moveIndiactor(tabDimensions) {
-        this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-    }
-
-
-    changeTab(target) {
-        if (target === this.prevTab || !target.closest('sm-tab'))
-            return
-        if (this.prevTab)
-            this.prevTab.classList.remove('active')
-        target.classList.add('active')
-
-        this.tabHeader.scrollTo({
-            behavior: 'smooth',
-            left: target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft
-        })
-        this.moveIndiactor(target.getBoundingClientRect())
-        this.prevTab = target;
-        this.activeTab = target;
-    }
-    handleClick(e) {
-        if (e.target.closest('sm-tab')) {
-            this.changeTab(e.target)
-            this.fireEvent(e.target.dataset.index)
-        }
-    }
-
-    handlePanelChange(e) {
-        this.changeTab(this.allTabs[e.detail.index])
-    }
-
-    connectedCallback() {
-        if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
-        this.target = this.getAttribute('target')
-
-        this.tabSlot.addEventListener('slotchange', () => {
-            this.allTabs = this.tabSlot.assignedElements();
-            this.allTabs.forEach((tab, index) => {
-                tab.dataset.index = index
-            })
-        })
-
-        this.addEventListener('click', this.handleClick)
-        document.addEventListener(`switchedpanel${this.target}`, this.handlePanelChange)
-
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => {
-                if (this.prevTab) {
-                    let tabDimensions = this.activeTab.getBoundingClientRect();
-                    this.moveIndiactor(tabDimensions)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    this.indicator.style.transition = 'none'
-                    if (this.activeTab) {
-                        let tabDimensions = this.activeTab.getBoundingClientRect();
-                        this.moveIndiactor(tabDimensions)
-                    } else {
-                        this.allTabs[0].classList.add('active')
-                        let tabDimensions = this.allTabs[0].getBoundingClientRect();
-                        this.moveIndiactor(tabDimensions)
-                        this.fireEvent(0)
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                        this.activeTab = this.prevTab;
-                    }
-                }
-            })
-        }, {
-            threshold: 1.0
-        })
-        observer.observe(this)
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.handleClick)
-        document.removeEventListener(`switchedpanel${this.target}`, this.handlePanelChange)
-    }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        position: relative;
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        z-index: 1;
-        --padding: 0.8rem 1rem;
-    }
-    .tab{
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none;
-        -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        white-space: nowrap;
-        padding: var(--padding);
-        font-weight: 500;
-        word-spacing: 0.1rem;
-        text-align: center;
-        -webkit-transition: color 0.3s;
-        -o-transition: color 0.3s;
-        transition: color 0.3s;
-        text-transform: capitalize;
-        height: 100%;
-    }
-    @media (hover: hover){
-        :host(.active) .tab{
-            opacity: 1;
-        }
-        .tab{
-            opacity: 0.7
-        }
-        .tab:hover{
-            opacity: 1
-        }
-    }
-</style>
-<div part="tab" class="tab">
-<slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        }).append(smTab.content.cloneNode(true))
-    }
-})
-
-// tab-panels
-
-const smTabPanels = document.createElement('template')
-smTabPanels.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-:host{
-    width: 100%;
-}
-.panel-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    scroll-snap-type: x mandatory;
-    content-visibility: auto;
-}
-::slotted(*){
-    min-width: 100%;
-    scroll-snap-align: center;
-}
-@media (any-hover: none) {
-    .panel-container{
-        overflow-x: auto;
-        scrollbar-width: none;
-    }
-    .container {
-        overflow-y: scroll;
-    }
-    ::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-    }
-}
-</style>
-<div part="panel-container" class="panel-container">
-    <slot>Nothing to see here.</slot>
-</div>
-`;
-
-customElements.define('sm-tab-panels', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smTabPanels.content.cloneNode(true))
-
-        this.isTransitioning = false
-
-        this.panelContainer = this.shadowRoot.querySelector('.panel-container');
-        this.handleTabChange = this.handleTabChange.bind(this)
-    }
-    handleTabChange(e) {
-        this.isTransitioning = true
-        this.panelContainer.scrollTo({
-            left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft,
-            behavior: 'smooth'
-        })
-        setTimeout(() => {
-            this.isTransitioning = false
-        }, 300);
-    }
-    fireEvent(index) {
-        this.dispatchEvent(
-            new CustomEvent(`switchedpanel${this.id}`, {
-                bubbles: true,
-                detail: {
-                    index: parseInt(index)
-                }
-            })
-        )
-    }
-    connectedCallback() {
-        const slot = this.shadowRoot.querySelector('slot');
-        slot.addEventListener('slotchange', (e) => {
-            this.allPanels = e.target.assignedElements()
-            this.allPanels.forEach((panel, index) => {
-                panel.dataset.index = index
-                intersectionObserver.observe(panel)
-            })
-        })
-        document.addEventListener(`switchedtab${this.id}`, this.handleTabChange)
-
-        const intersectionObserver = new IntersectionObserver(entries => {
-
-            entries.forEach(entry => {
-                if (!this.isTransitioning && entry.isIntersecting) {
-                    this.fireEvent(entry.target.dataset.index)
-                }
-            })
-        }, {
-            threshold: 0.6
-        })
-    }
-    disconnectedCallback() {
-        intersectionObserver.disconnect()
-        document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange)
-    }
 })
\ No newline at end of file
diff --git a/docs/css/main.css b/docs/css/main.css
index becb420..c088db3 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -16,38 +16,29 @@ body {
 }
 
 body {
-  color: rgba(var(--text-color), 1);
-  background: rgba(var(--background-color), 1);
-}
-body,
-body * {
   --accent-color: #504dff;
-  --accent-color--light: #eeeeff;
-  --text-color: 36, 36, 36;
-  --background-color: 255, 255, 255;
-  --foreground-color: rgb(250, 252, 255);
+  --text-color: 20, 20, 20;
+  --background-color: 240, 240, 240;
+  --foreground-color: 250, 250, 250;
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
-  --yellow: #f3a600;
-  --loan-color: rgb(255, 171, 93);
   scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  color: rgba(var(--text-color), 1);
+  background-color: rgba(var(--background-color), 1);
+  transition: background-color 0.3s;
 }
 
-body[data-theme=dark],
-body[data-theme=dark] * {
+body[data-theme=dark] {
   --accent-color: #a3a1ff;
-  --accent-color--light: rgba(142, 140, 255, 0.06);
-  --text-color: 230, 230, 230;
-  --text-color-light: 170, 170, 170;
+  --text-color: 220, 220, 220;
   --background-color: 10, 10, 10;
-  --foreground-color: rgb(24, 24, 24);
+  --foreground-color: 24, 24, 24;
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
-  --yellow: #ffd13a;
-  --loan-color: rgb(255, 232, 170);
 }
 body[data-theme=dark] sm-popup::part(popup) {
-  background-color: var(--foreground-color);
+  background-color: rgba(var(--foreground-color), 1);
 }
 
 p,
@@ -128,7 +119,6 @@ a:any-link:focus-visible {
 sm-input {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
-  --background: var(--accent-color--light);
 }
 
 sm-button {
@@ -149,6 +139,10 @@ sm-button.danger {
   color: rgba(var(--background-color), 1);
 }
 
+sm-form {
+  --gap: 1rem;
+}
+
 ul {
   list-style: none;
 }
@@ -166,7 +160,7 @@ ul {
   pointer-events: none;
 }
 
-.hide-completely {
+.hide {
   display: none !important;
 }
 
@@ -313,11 +307,21 @@ ul {
 
 .interact {
   position: relative;
+  overflow: hidden;
   cursor: pointer;
-  transition: transform 0.3s;
   -webkit-tap-highlight-color: transparent;
 }
 
+.ripple {
+  height: 8rem;
+  width: 8rem;
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+  pointer-events: none;
+}
+
 .empty-state {
   display: grid;
   justify-content: center;
@@ -336,15 +340,11 @@ ul {
 }
 
 .icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.2rem;
+  height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
 }
 
-.button__icon {
-  height: 1.2rem;
-  width: 1.2rem;
-}
 .button__icon--left {
   margin-right: 0.5rem;
 }
@@ -392,12 +392,6 @@ ul {
   margin-bottom: 1.5rem;
 }
 
-button:active,
-.button:active,
-.interact:active {
-  transform: scale(0.96);
-}
-
 .popup__header {
   display: grid;
   gap: 0.5rem;
@@ -506,6 +500,10 @@ sm-checkbox {
   height: 100%;
 }
 
+.mobile-page {
+  align-items: flex-start;
+}
+
 #landing {
   grid-template-rows: auto 1fr;
 }
@@ -547,10 +545,10 @@ sm-checkbox {
 
 #home {
   height: 100%;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
   align-content: flex-start;
-  grid-template-columns: minmax(0, 1fr);
 }
 
 #login_form__priv_key {
@@ -558,34 +556,90 @@ sm-checkbox {
 }
 
 #main_header {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
   display: grid;
   gap: 1rem;
+  padding: 1.5rem;
+  width: 100%;
   align-items: center;
   grid-template-columns: 1fr auto auto;
   grid-column: 1/-1;
 }
 
-#flo_exchange_rate {
+#main_navbar {
+  width: 100%;
+}
+
+.main_navbar__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 0.5rem 0;
+}
+.main_navbar__item .item__title,
+.main_navbar__item .icon {
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
+}
+.main_navbar__item .item__title {
+  color: rgba(var(--text-color), 0.8);
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+.main_navbar__item .icon {
+  height: 1.2rem;
+  margin-bottom: 0.3rem;
+}
+.main_navbar__item--active .item__title {
+  color: var(--accent-color);
+}
+.main_navbar__item--active .icon {
+  fill: var(--accent-color);
+}
+
+#pages_container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+#pages_container > * {
+  width: min(42rem, 100%);
+}
+
+#exchange {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.listed-asset {
+  position: relative;
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
   padding: 1rem;
   border-radius: 0.5rem;
-  border: solid rgba(var(--text-color), 0.2) thin;
-  background-color: rgba(var(--background-color), 1);
+  opacity: 0.8;
+  font-weight: 400;
+  transition: background-color 0.3s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  color: inherit;
+}
+.listed-asset__icon {
+  display: flex;
+}
+.listed-asset__icon .icon {
+  height: 1.5rem;
+  width: 1.5rem;
 }
 
 #flo_rate {
   font-weight: 700;
 }
 
-#trade_form,
-#login_form {
-  align-self: flex-start;
-  padding: 1rem 1.5rem 1.5rem 1.5rem;
-}
-
 .quantity-selector .button {
   flex: 1;
   padding: 0.5rem 0.6rem;
@@ -604,24 +658,17 @@ sm-checkbox {
   min-width: 8ch;
 }
 
-#my_orders_section,
-#market_orders_section {
-  padding-top: 1rem;
+#my_orders,
+#market {
+  width: min(42rem, 100%);
+  grid-template-rows: auto 1fr;
 }
-#my_orders_section .icon,
-#market_orders_section .icon {
+#my_orders .icon,
+#market .icon {
   height: 1.2rem;
   width: 1.2rem;
 }
 
-.orders_section__header {
-  padding: 0 1.5rem;
-}
-
-#my_orders_section__header {
-  height: 2.4rem;
-}
-
 #orders_section__header--primary sm-tab-header {
   --gap: 1.5rem;
 }
@@ -631,7 +678,7 @@ sm-checkbox {
 }
 
 .list__item {
-  padding: 0.5rem 1.5rem;
+  padding: 0.5rem 0;
   display: grid;
 }
 
@@ -720,13 +767,11 @@ sm-checkbox {
 }
 #market_orders_list .list__header {
   margin-bottom: 0.5rem;
-  padding: 0 1.5rem;
   grid-template-columns: repeat(3, 1fr) 2rem;
 }
 
-#user_section {
+#wallet {
   gap: 1.5rem;
-  padding: 1.5rem;
   align-content: flex-start;
 }
 
@@ -943,53 +988,16 @@ sm-checkbox {
   }
 }
 @media screen and (max-width: 40rem) {
-  #main_header {
-    padding: 0 1.5rem;
-  }
-
   sm-button {
     --padding: 0.9rem 1.6rem;
   }
 
-  #home > :last-child {
-    padding-bottom: 5rem;
-  }
-
-  #bottom_nav {
-    position: fixed;
-    bottom: 0;
-    background-color: var(--foreground-color);
-    width: 100%;
-  }
-
-  .bottom_nav__item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1;
-    padding: 0.5rem 0;
-  }
-  .bottom_nav__item .item__title,
-.bottom_nav__item .icon {
-    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-  .bottom_nav__item .item__title {
-    color: rgba(var(--text-color), 0.8);
-    font-size: 0.8rem;
-    font-weight: 500;
-  }
-  .bottom_nav__item .icon {
-    height: 1.2rem;
-    margin-bottom: 0.3rem;
-  }
-  .bottom_nav__item--active .item__title {
-    color: var(--accent-color);
+  .main_navbar__item--active .item__title {
     transform: translateY(100%);
     opacity: 0;
   }
-  .bottom_nav__item--active .icon {
+  .main_navbar__item--active .icon {
     transform: translateY(50%) scale(1.2);
-    fill: var(--accent-color);
   }
 
   .hide-on-mobile {
@@ -1029,45 +1037,69 @@ sm-checkbox {
     grid-template-columns: 1fr 90vw 1fr;
   }
 
-  #home {
-    padding: 0 4vmax;
-    gap: 1rem;
-  }
-
   .hide-on-desktop {
     display: none;
   }
 
-  .card {
-    border-radius: 0.5rem;
-    background-color: var(--foreground-color);
-    border: solid thin rgba(var(--text-color), 0.1);
-  }
-}
-@media screen and (min-width: 48rem) {
   #home {
-    grid-template-rows: -webkit-min-content 1fr;
-    grid-template-rows: min-content 1fr;
-    grid-template-columns: 24rem minmax(0, 1fr);
-  }
-  #home.signed-in #orders_list,
-#home.signed-in #market_orders_list {
-    height: 32vmin;
-    overflow-y: auto;
+    display: grid;
+    grid-template-columns: 12rem 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "header header" "nav .";
   }
 
-  #orders_section {
-    grid-row: span 2;
+  #main_header {
+    grid-area: header;
+  }
+
+  #main_navbar {
+    grid-area: nav;
+    flex-direction: column;
+    height: 100%;
+    padding: 0 0.5rem;
+  }
+
+  .main_navbar__item {
+    padding: 1.5rem 1rem;
+    width: 100%;
+    flex: 0;
+    flex-direction: row;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s;
+  }
+  .main_navbar__item .icon {
+    margin-bottom: 0;
+    margin-right: 0.5rem;
+  }
+  .main_navbar__item .item__title {
+    font-size: 0.9rem;
+  }
+  .main_navbar__item--active {
+    background-color: rgba(var(--text-color), 0.06);
+  }
+
+  #exchange {
+    display: grid;
+    grid-template-columns: 16rem 1fr;
+  }
+
+  .listed-asset--active {
+    opacity: 1;
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  .listed-asset--active::before {
+    content: "";
+    position: absolute;
+    width: 0.25rem;
+    border-radius: 0 0.2rem 0.2rem 0;
+    height: 50%;
+    background-color: var(--accent-color);
   }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
-
-  #home.signed-in {
-    grid-template-columns: 24rem minmax(0, 1fr) 20rem;
-  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {
@@ -1088,15 +1120,6 @@ sm-checkbox {
     background: rgba(var(--text-color), 0.5);
   }
 
-  .interact,
-button {
-    transition: background-color 0.3s, transform 0.3s;
-  }
-  .interact:hover,
-button:hover {
-    background-color: var(--accent-color--light);
-  }
-
   .order-card .cancel-order {
     justify-self: flex-end;
     overflow: hidden;
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index 61c9249..7be631d 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 255, 255, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem;--background: var(--accent-color--light)}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}button:active,.button:active,.interact:active{transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:grid;align-items:flex-start;align-content:flex-start;grid-template-columns:minmax(0, 1fr)}#login_form__priv_key{margin-top:1rem}#main_header{margin-top:1.5rem;margin-bottom:1rem;display:grid;gap:1rem;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#flo_exchange_rate{grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem;border-radius:.5rem;border:solid rgba(var(--text-color), 0.2) thin;background-color:rgba(var(--background-color), 1)}#flo_rate{font-weight:700}#trade_form,#login_form{align-self:flex-start;padding:1rem 1.5rem 1.5rem 1.5rem}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders_section,#market_orders_section{padding-top:1rem}#my_orders_section .icon,#market_orders_section .icon{height:1.2rem;width:1.2rem}.orders_section__header{padding:0 1.5rem}#my_orders_section__header{height:2.4rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 1.5rem;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;padding:0 1.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#user_section{gap:1.5rem;padding:1.5rem;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){#main_header{padding:0 1.5rem}sm-button{--padding: 0.9rem 1.6rem}#home>:last-child{padding-bottom:5rem}#bottom_nav{position:fixed;bottom:0;background-color:var(--foreground-color);width:100%}.bottom_nav__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.bottom_nav__item .item__title,.bottom_nav__item .icon{transition:.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.bottom_nav__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.bottom_nav__item .icon{height:1.2rem;margin-bottom:.3rem}.bottom_nav__item--active .item__title{color:var(--accent-color);transform:translateY(100%);opacity:0}.bottom_nav__item--active .icon{transform:translateY(50%) scale(1.2);fill:var(--accent-color)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{padding:0 4vmax;gap:1rem}.hide-on-desktop{display:none}.card{border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.1)}}@media screen and (min-width: 48rem){#home{grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;grid-template-columns:24rem minmax(0, 1fr)}#home.signed-in #orders_list,#home.signed-in #market_orders_list{height:32vmin;overflow-y:auto}#orders_section{grid-row:span 2}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}#home.signed-in{grid-template-columns:24rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact,button{transition:background-color .3s,transform .3s}.interact:hover,button:hover{background-color:var(--accent-color--light)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}#exchange{display:grid;gap:1.5rem}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:12rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#exchange{display:grid;grid-template-columns:16rem 1fr}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index 4d3fd38..16274f3 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -16,40 +16,28 @@ body {
 }
 
 body {
-  &,
-  * {
-    --accent-color: #504dff;
-    --accent-color--light: #eeeeff;
-    --text-color: 36, 36, 36;
-    --background-color: 255, 255, 255;
-    --foreground-color: rgb(250, 252, 255);
-    --danger-color: rgb(255, 75, 75);
-    --green: #1cad59;
-    --yellow: #f3a600;
-    --loan-color: rgb(255, 171, 93);
-    scrollbar-width: thin;
-  }
-
+  --accent-color: #504dff;
+  --text-color: 20, 20, 20;
+  --background-color: 240, 240, 240;
+  --foreground-color: 250, 250, 250;
+  --danger-color: rgb(255, 75, 75);
+  --green: #1cad59;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
   color: rgba(var(--text-color), 1);
-  background: rgba(var(--background-color), 1);
+  background-color: rgba(var(--background-color), 1);
+  transition: background-color 0.3s;
 }
 
 body[data-theme="dark"] {
-  &,
-  * {
-    --accent-color: #a3a1ff;
-    --accent-color--light: rgba(142, 140, 255, 0.06);
-    --text-color: 230, 230, 230;
-    --text-color-light: 170, 170, 170;
-    --background-color: 10, 10, 10;
-    --foreground-color: rgb(24, 24, 24);
-    --danger-color: rgb(255, 106, 106);
-    --green: #00e676;
-    --yellow: #ffd13a;
-    --loan-color: rgb(255, 232, 170);
-  }
+  --accent-color: #a3a1ff;
+  --text-color: 220, 220, 220;
+  --background-color: 10, 10, 10;
+  --foreground-color: 24, 24, 24;
+  --danger-color: rgb(255, 106, 106);
+  --green: #00e676;
   sm-popup::part(popup) {
-    background-color: var(--foreground-color);
+    background-color: rgba(var(--foreground-color), 1);
   }
 }
 
@@ -119,7 +107,6 @@ a:any-link:focus-visible {
 sm-input {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
-  --background: var(--accent-color--light);
 }
 sm-button {
   text-transform: uppercase;
@@ -143,6 +130,9 @@ sm-button {
     color: rgba(var(--background-color), 1);
   }
 }
+sm-form {
+  --gap: 1rem;
+}
 ul {
   list-style: none;
 }
@@ -160,7 +150,7 @@ ul {
   pointer-events: none;
 }
 
-.hide-completely {
+.hide {
   display: none !important;
 }
 
@@ -308,10 +298,23 @@ ul {
 
 .interact {
   position: relative;
+  overflow: hidden;
   cursor: pointer;
-  transition: transform 0.3s;
   -webkit-tap-highlight-color: transparent;
 }
+.ripple {
+  height: 8rem;
+  width: 8rem;
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: radial-gradient(
+    circle,
+    rgba(var(--text-color), 0.3) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
+  pointer-events: none;
+}
 .empty-state {
   display: grid;
   justify-content: center;
@@ -330,15 +333,12 @@ ul {
 }
 
 .icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.2rem;
+  height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
 }
 
 .button__icon {
-  height: 1.2rem;
-  width: 1.2rem;
-
   &--left {
     margin-right: 0.5rem;
   }
@@ -379,13 +379,6 @@ ul {
 #prompt_message {
   margin-bottom: 1.5rem;
 }
-
-button:active,
-.button:active,
-.interact:active {
-  transform: scale(0.96);
-}
-
 .popup__header {
   display: grid;
   gap: 0.5rem;
@@ -487,6 +480,9 @@ sm-checkbox {
 .page {
   height: 100%;
 }
+.mobile-page {
+  align-items: flex-start;
+}
 #landing {
   grid-template-rows: auto 1fr;
   header {
@@ -527,42 +523,94 @@ sm-checkbox {
 }
 #home {
   height: 100%;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
   align-content: flex-start;
-  grid-template-columns: minmax(0, 1fr);
 }
 #login_form__priv_key {
   margin-top: 1rem;
 }
 
 #main_header {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
   display: grid;
   gap: 1rem;
+  padding: 1.5rem;
+  width: 100%;
   align-items: center;
   grid-template-columns: 1fr auto auto;
   grid-column: 1/-1;
 }
+#main_navbar {
+  width: 100%;
+}
+.main_navbar__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 0.5rem 0;
+  .item__title,
+  .icon {
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+      opacity 0.3s;
+  }
+  .item__title {
+    color: rgba(var(--text-color), 0.8);
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+  .icon {
+    height: 1.2rem;
+    margin-bottom: 0.3rem;
+  }
+  &--active {
+    .item__title {
+      color: var(--accent-color);
+    }
+    .icon {
+      fill: var(--accent-color);
+    }
+  }
+}
+#pages_container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+  & > * {
+    width: min(42rem, 100%);
+  }
+}
 
-#flo_exchange_rate {
+#exchange {
+  display: grid;
+  gap: 1.5rem;
+}
+.listed-asset {
+  position: relative;
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
   padding: 1rem;
   border-radius: 0.5rem;
-  border: solid rgba(var(--text-color), 0.2) thin;
-  background-color: rgba(var(--background-color), 1);
+  opacity: 0.8;
+  font-weight: 400;
+  transition: background-color 0.3s;
+  user-select: none;
+  color: inherit;
+  &__icon {
+    display: flex;
+    .icon {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
 }
 #flo_rate {
   font-weight: 700;
 }
-
-#trade_form,
-#login_form {
-  align-self: flex-start;
-  padding: 1rem 1.5rem 1.5rem 1.5rem;
-}
 .quantity-selector {
   .button {
     flex: 1;
@@ -581,20 +629,15 @@ sm-checkbox {
   font-weight: 500;
   min-width: 8ch;
 }
-#my_orders_section,
-#market_orders_section {
-  padding-top: 1rem;
+#my_orders,
+#market {
+  width: min(42rem, 100%);
+  grid-template-rows: auto 1fr;
   .icon {
     height: 1.2rem;
     width: 1.2rem;
   }
 }
-.orders_section__header {
-  padding: 0 1.5rem;
-}
-#my_orders_section__header {
-  height: 2.4rem;
-}
 #orders_section__header--primary {
   sm-tab-header {
     --gap: 1.5rem;
@@ -606,7 +649,7 @@ sm-checkbox {
 }
 
 .list__item {
-  padding: 0.5rem 1.5rem;
+  padding: 0.5rem 0;
   display: grid;
 }
 .order-card {
@@ -697,13 +740,11 @@ sm-checkbox {
   }
   .list__header {
     margin-bottom: 0.5rem;
-    padding: 0 1.5rem;
     grid-template-columns: repeat(3, 1fr) 2rem;
   }
 }
-#user_section {
+#wallet {
   gap: 1.5rem;
-  padding: 1.5rem;
   align-content: flex-start;
 }
 .wallet_actions__wrapper {
@@ -879,52 +920,16 @@ sm-checkbox {
   }
 }
 @media screen and (max-width: 40rem) {
-  #main_header {
-    padding: 0 1.5rem;
-  }
   sm-button {
     --padding: 0.9rem 1.6rem;
   }
-  #home {
-    & > :last-child {
-      padding-bottom: 5rem;
-    }
-  }
-  #bottom_nav {
-    position: fixed;
-    bottom: 0;
-    background-color: var(--foreground-color);
-    width: 100%;
-  }
-  .bottom_nav__item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1;
-    padding: 0.5rem 0;
-    .item__title,
-    .icon {
-      transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
+  .main_navbar__item--active {
     .item__title {
-      color: rgba(var(--text-color), 0.8);
-      font-size: 0.8rem;
-      font-weight: 500;
+      transform: translateY(100%);
+      opacity: 0;
     }
     .icon {
-      height: 1.2rem;
-      margin-bottom: 0.3rem;
-    }
-    &--active {
-      .item__title {
-        color: var(--accent-color);
-        transform: translateY(100%);
-        opacity: 0;
-      }
-      .icon {
-        transform: translateY(50%) scale(1.2);
-        fill: var(--accent-color);
-      }
+      transform: translateY(50%) scale(1.2);
     }
   }
   .hide-on-mobile {
@@ -959,33 +964,59 @@ sm-checkbox {
   .page-layout {
     grid-template-columns: 1fr 90vw 1fr;
   }
-  #home {
-    padding: 0 4vmax;
-    gap: 1rem;
-  }
   .hide-on-desktop {
     display: none;
   }
-  .card {
-    border-radius: 0.5rem;
-    background-color: var(--foreground-color);
-    border: solid thin rgba(var(--text-color), 0.1);
-  }
-}
-@media screen and (min-width: 48rem) {
   #home {
-    grid-template-rows: min-content 1fr;
-    grid-template-columns: 24rem minmax(0, 1fr);
-    &.signed-in {
-      #orders_list,
-      #market_orders_list {
-        height: 32vmin;
-        overflow-y: auto;
-      }
+    display: grid;
+    grid-template-columns: 12rem 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "header header" "nav .";
+  }
+  #main_header {
+    grid-area: header;
+  }
+  #main_navbar {
+    grid-area: nav;
+    flex-direction: column;
+    height: 100%;
+    padding: 0 0.5rem;
+  }
+  .main_navbar__item {
+    padding: 1.5rem 1rem;
+    width: 100%;
+    flex: 0;
+    flex-direction: row;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s;
+    .icon {
+      margin-bottom: 0;
+      margin-right: 0.5rem;
+    }
+    .item__title {
+      font-size: 0.9rem;
+    }
+    &--active {
+      background-color: rgba(var(--text-color), 0.06);
     }
   }
-  #orders_section {
-    grid-row: span 2;
+  #exchange {
+    display: grid;
+    grid-template-columns: 16rem 1fr;
+  }
+  .listed-asset {
+    &--active {
+      opacity: 1;
+      background-color: rgba(var(--text-color), 0.06);
+      &::before {
+        content: "";
+        position: absolute;
+        width: 0.25rem;
+        border-radius: 0 0.2rem 0.2rem 0;
+        height: 50%;
+        background-color: var(--accent-color);
+      }
+    }
   }
 }
 @media screen and (max-width: 64rem) {
@@ -994,9 +1025,6 @@ sm-checkbox {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
-  #home.signed-in {
-    grid-template-columns: 24rem minmax(0, 1fr) 20rem;
-  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {
@@ -1017,13 +1045,6 @@ sm-checkbox {
       background: rgba(var(--text-color), 0.5);
     }
   }
-  .interact,
-  button {
-    transition: background-color 0.3s, transform 0.3s;
-    &:hover {
-      background-color: var(--accent-color--light);
-    }
-  }
   .order-card {
     .cancel-order {
       justify-self: flex-end;
diff --git a/docs/index.html b/docs/index.html
index e0fd2c4..4049262 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -21,12 +21,8 @@
     <script>console.debug(floExchangeAPI);</script>
 </head>
 
-<body class="hide-completely">
+<body class="hide">
     <sm-notifications id="notification_drawer"></sm-notifications>
-    <audio id="notification_sound">
-        <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
-        <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
-    </audio>
     <sm-popup id="confirmation_popup">
         <h4 id="confirm_title"></h4>
         <p id="confirm_message"></p>
@@ -59,7 +55,7 @@
                 </div>
             </div>
             <theme-toggle></theme-toggle>
-            <button id="user_popup_button" class="hide-completely" onclick="showPopup('user_popup')">
+            <button id="user_popup_button" class="hide" onclick="showPopup('user_popup')">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
                     <path d="M0 0h24v24H0V0z" fill="none" />
@@ -68,71 +64,70 @@
                 </svg>
             </button>
         </header>
-        <section id="dashboard" class="card mobile-page">
-            <sm-form id="login_form" class="hide-">
-                <div class="grid gap-0-5">
-                    <h4>Login</h4>
-                    <p>Please login for trading and accessing your account.</p>
+        <section id="pages_container">
+            <section id="exchange" class="mobile-page">
+                <sm-form id="login_form">
+                    <div class="grid gap-0-5">
+                        <h4>Login</h4>
+                        <p>Please login for exchange.</p>
+                    </div>
+                    <sm-input type="password" id="login_form__priv_key" placeholder="Private key" animate required>
+                    </sm-input>
+                    </sm-input>
+                    <sm-checkbox id="remember_me" checked>
+                        <span class="button__icon--right">
+                            Remember me
+                        </span>
+                    </sm-checkbox>
+                    <input type="text" id="sign_in_code" style="display: none;" hidden />
+                    <input type="text" id="sign_in_hash" style="display: none;" hidden />
+                    <div id="login_button_wrapper" class="stateful-button-wrapper">
+                        <sm-button variant="primary" onclick="UI_evt.login();">Log in</sm-button>
+                    </div>
+                    <sm-button onclick="showPopup('registration_popup')" style="display: none;" disabled>Not registered?
+                        click here!</sm-button>
+                    <div class="grid gap-0-5">
+                        <p>Don't have FLO credentials?</p>
+                        <sm-button onclick="showPopup('sign_up_popup')">Generate FLO credentials</sm-button>
+                    </div>
+                    <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
+                </sm-form>
+                <div class="grid gap-1 align-start hide user-content">
+                    <h4>Assets</h4>
+                    <ul id="listed_assets" class="user-content hide"></ul>
                 </div>
-                <sm-input type="password" id="login_form__priv_key" placeholder="Private key" variant="outlined" animate
-                    required hiderequired></sm-input>
-                <sm-checkbox id="remember_me" checked>
-                    <span class="button__icon--right">
-                        Remember me
-                    </span>
-                </sm-checkbox>
-                <input type="text" id="sign_in_code" style="display: none;" hidden />
-                <input type="text" id="sign_in_hash" style="display: none;" hidden />
-                <div id="login_button_wrapper" class="stateful-button-wrapper">
-                    <sm-button variant="primary" onclick="UI_evt.login();">Log in</sm-button>
-                </div>
-                <sm-button onclick="showPopup('registration_popup')" style="display: none;" disabled>Not registered? click here!</sm-button>
-                <div class="grid gap-0-5">
-                    <p>Don't have FLO credentials?</p>
-                    <sm-button onclick="showPopup('sign_up_popup')">Generate FLO credentials</sm-button>
-                </div>
-                <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
-            </sm-form>
-            <sm-form id="trade_form" class="user-content hide-completely">
-                <div id="flo_exchange_rate" class="grid align-center">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                        <path
-                            d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
-                    </svg>
-                    <p><b>FLO</b>/INR</p>
-                    <span id="flo_rate"></span>
-                </div>
-                <div class="flex space-between align-center">
-                    <h4>Trade FLO</h4>
-                    <strip-select id="trade_type_selector" class="tab">
-                        <strip-option value="buy" selected>Buy</strip-option>
-                        <strip-option value="sell">Sell</strip-option>
-                    </strip-select>
-                </div>
-                <sm-select id="get_asset"></sm-select>
-                <sm-input id="get_price" variant="outlined" placeholder="Max price (₹)" type="number" step="0.01"
-                    required hiderequired animate>
-                </sm-input>
-                <sm-input id="get_quantity" variant="outlined" placeholder="Quantity (FLO)" type="number" step="0.0001"
-                    required hiderequired animate></sm-input>
-                <sm-input id="get_total" variant="outlined" placeholder="Total (₹)" type="number" min="0.01" step="0.01"
-                    required hiderequired animate>
-                </sm-input>
-                <div id="quantity_selector" class="flex align-center quantity-selector">
-                    <span id="quantity_type">Rupee</span>
-                    <button class="button" value="0.25">25%</button>
-                    <button class="button" value="0.5">50%</button>
-                    <button class="button" value="0.75">75%</button>
-                    <button class="button" value="1">100%</button>
-                </div>
-                <div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
-                    <sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">BUY FLO
-                    </sm-button>
-                </div>
-            </sm-form>
-        </section>
-        <section id="orders_section" class="grid gap-1">
-            <section id="my_orders_section" class="grid gap-1 card user-content mobile-page hide-on-mobile">
+                <sm-form id="trade_form" class="user-content hide hide-on-mobile">
+                    <div class="flex space-between align-center">
+                        <h4 id="traded_asset">Trade FLO</h4>
+                        <strip-select id="trade_type_selector" class="tab">
+                            <strip-option value="buy" selected>Buy</strip-option>
+                            <strip-option value="sell">Sell</strip-option>
+                        </strip-select>
+                    </div>
+                    <sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required animate>
+                    </sm-input>
+                    <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required animate>
+                    </sm-input>
+                    </sm-input>
+                    <sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" required
+                        animate>
+                    </sm-input>
+                    <div id="quantity_selector" class="flex align-center quantity-selector">
+                        <span id="quantity_type">Rupee</span>
+                        <button class="button" value="0.25" title="Buy FLO worth 25% of total rupee">25%</button>
+                        <button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button>
+                        <button class="button" value="0.75" title="Buy FLO worth 75% of total rupee">75%</button>
+                        <button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</button>
+                    </div>
+                    <div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
+                        <sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">
+                            BUY
+                            FLO
+                        </sm-button>
+                    </div>
+                </sm-form>
+            </section>
+            <section id="my_orders" class="grid gap-1 hide mobile-page">
                 <div id="my_orders_section__header" class="orders_section__header flex">
                     <div id="orders_section__header--primary" class="flex w-100 align-center space-between">
                         <h4>
@@ -143,8 +138,7 @@
                             <strip-option value="completed">History</strip-option>
                         </strip-select>
                     </div>
-                    <div id="orders_section__header--secondary"
-                        class="flex w-100 align-center space-between hide-completely">
+                    <div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide">
                         <button class="" onclick="clearSelection()" title="Clear all selection">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
                                 viewBox="0 0 24 24" width="24px">
@@ -166,7 +160,7 @@
                     No orders placed
                 </p>
             </section>
-            <section id="market_orders_section" class="grid gap-1 card mobile-page hide-on-mobile">
+            <section id="market" class="grid gap-1 hide mobile-page">
                 <div class="orders_section__header flex align-center space-between">
                     <h4 class="flex align-center">
                         Market orders
@@ -189,110 +183,109 @@
                     No orders placed
                 </p>
             </section>
+            <section id="wallet" class="grid mobile-page hide">
+                <h4 class="flex align-center user_section__header">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
+                        viewBox="0 0 24 24" width="24px">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" />
+                        <circle cx="16" cy="12" r="1.5" />
+                    </svg>
+                    My wallet
+                </h4>
+                <div id="wallet_actions">
+                    <p class="label">Select asset</p>
+                    <sm-select id="wallet_asset_selector"></sm-select>
+                    <div class="flex wallet_actions__wrapper">
+                        <button class="button" value="deposit">
+                            Deposit
+                        </button>
+                        <button class="button" value="withdraw">
+                            Withdraw
+                        </button>
+                    </div>
+                </div>
+                <div class="grid gap-0-5">
+                    <h4>Balance</h4>
+                    <div class="grid gap-1">
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path
+                                        d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
+                                </svg>
+                            </div>
+                            <div class="balance-card__token">FLO</div>
+                            <div id="flo_balance"></div>
+                        </div>
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path
+                                        d="M15.3,4.91a4.78,4.78,0,0,0-.39-.5l3.14,0L18.75,2H6L5.25,4.6H9a4.22,4.22,0,0,1,3.06,1,3.16,3.16,0,0,1,.75,1.24H5.93L5.25,9.22h7.62a3.15,3.15,0,0,1-.34.82,3,3,0,0,1-1.37,1.17,5.34,5.34,0,0,1-2.2.4H5.5l0,1.9,7,8.49h3.56v-.17L9.68,14l.09,0a8.07,8.07,0,0,0,3.65-1,5,5,0,0,0,2-2.09A6.29,6.29,0,0,0,16,9.22h2.1l.69-2.42H15.93A5.93,5.93,0,0,0,15.3,4.91Z" />
+                                </svg>
+                            </div>
+                            <div class="balance-card__token">Rupee</div>
+                            <div id="rupee_balance"></div>
+                        </div>
+                    </div>
+                </div>
+            </section>
         </section>
-        <section id="user_section" class="grid card user-content mobile-page hide-completely hide-on-mobile">
-            <h4 class="flex align-center user_section__header">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
-                    viewBox="0 0 24 24" width="24px">
+        <nav id="main_navbar" class="flex align-center">
+            <a href="#/exchange" class="main_navbar__item main_navbar__item--active interact">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
+                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <rect fill="none" height="24" width="24" />
+                    <path
+                        d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M5,19V5h6v14H5z M19,19h-6v-7h6V19z M19,10h-6V5h6V10z" />
+                </svg>
+                <div class="item__title">Exchange</div>
+            </a>
+            <a href="#/my_orders" class="main_navbar__item user-content hide interact">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
+                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <path d="M0,0h24v24H0V0z" fill="none" />
+                    <g>
+                        <path
+                            d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M15,20H6c-0.55,0-1-0.45-1-1v-1h10V20z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
+                        <rect height="2" width="6" x="9" y="7" />
+                        <rect height="2" width="2" x="16" y="7" />
+                        <rect height="2" width="6" x="9" y="10" />
+                        <rect height="2" width="2" x="16" y="10" />
+                    </g>
+                </svg>
+                <div class="item__title">My orders</div>
+            </a>
+            <a href="#/market" class="main_navbar__item interact">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
+                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <g>
+                        <rect fill="none" height="24" width="24" />
+                    </g>
+                    <g>
+                        <g />
+                        <g>
+                            <path
+                                d="M21.9,8.89l-1.05-4.37c-0.22-0.9-1-1.52-1.91-1.52H5.05C4.15,3,3.36,3.63,3.15,4.52L2.1,8.89 c-0.24,1.02-0.02,2.06,0.62,2.88C2.8,11.88,2.91,11.96,3,12.06V19c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-6.94 c0.09-0.09,0.2-0.18,0.28-0.28C21.92,10.96,22.15,9.91,21.9,8.89z M18.91,4.99l1.05,4.37c0.1,0.42,0.01,0.84-0.25,1.17 C19.57,10.71,19.27,11,18.77,11c-0.61,0-1.14-0.49-1.21-1.14L16.98,5L18.91,4.99z M13,5h1.96l0.54,4.52 c0.05,0.39-0.07,0.78-0.33,1.07C14.95,10.85,14.63,11,14.22,11C13.55,11,13,10.41,13,9.69V5z M8.49,9.52L9.04,5H11v4.69 C11,10.41,10.45,11,9.71,11c-0.34,0-0.65-0.15-0.89-0.41C8.57,10.3,8.45,9.91,8.49,9.52z M4.04,9.36L5.05,5h1.97L6.44,9.86 C6.36,10.51,5.84,11,5.23,11c-0.49,0-0.8-0.29-0.93-0.47C4.03,10.21,3.94,9.78,4.04,9.36z M5,19v-6.03C5.08,12.98,5.15,13,5.23,13 c0.87,0,1.66-0.36,2.24-0.95c0.6,0.6,1.4,0.95,2.31,0.95c0.87,0,1.65-0.36,2.23-0.93c0.59,0.57,1.39,0.93,2.29,0.93 c0.84,0,1.64-0.35,2.24-0.95c0.58,0.59,1.37,0.95,2.24,0.95c0.08,0,0.15-0.02,0.23-0.03V19H5z" />
+                        </g>
+                    </g>
+                </svg>
+                <div class="item__title">Market</div>
+            </a>
+            <a href="#/wallet" class="main_navbar__item user-content hide interact">
+                <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="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" />
                     <circle cx="16" cy="12" r="1.5" />
                 </svg>
-                My wallet
-            </h4>
-            <div id="wallet_actions">
-                <p class="label">Select asset</p>
-                <sm-select id="wallet_asset_selector">
-                </sm-select>
-                <div class="flex wallet_actions__wrapper">
-                    <button class="button" value="deposit">
-                        Deposit
-                    </button>
-                    <button class="button" value="withdraw">
-                        Withdraw
-                    </button>
-                </div>
-            </div>
-            <div class="grid gap-0-5">
-                <h4>Balance</h4>
-                <div class="grid gap-1">
-                    <div class="balance-card">
-                        <div class="balance-card__icon">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                <path
-                                    d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
-                            </svg>
-                        </div>
-                        <div class="balance-card__token">FLO</div>
-                        <div id="flo_balance"></div>
-                    </div>
-                    <div class="balance-card">
-                        <div class="balance-card__icon">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                <path
-                                    d="M15.3,4.91a4.78,4.78,0,0,0-.39-.5l3.14,0L18.75,2H6L5.25,4.6H9a4.22,4.22,0,0,1,3.06,1,3.16,3.16,0,0,1,.75,1.24H5.93L5.25,9.22h7.62a3.15,3.15,0,0,1-.34.82,3,3,0,0,1-1.37,1.17,5.34,5.34,0,0,1-2.2.4H5.5l0,1.9,7,8.49h3.56v-.17L9.68,14l.09,0a8.07,8.07,0,0,0,3.65-1,5,5,0,0,0,2-2.09A6.29,6.29,0,0,0,16,9.22h2.1l.69-2.42H15.93A5.93,5.93,0,0,0,15.3,4.91Z" />
-                            </svg>
-                        </div>
-                        <div class="balance-card__token">Rupee</div>
-                        <div id="rupee_balance"></div>
-                    </div>
-                </div>
-            </div>
-        </section>
+                <div class="item__title">Wallet</div>
+            </a>
+        </nav>
     </article>
-    <footer id="bottom_nav" class="flex align-center hide-on-desktop">
-        <a href="#/dashboard" class="bottom_nav__item bottom_nav__item--active">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
-                viewBox="0 0 24 24" width="24px" fill="#000000">
-                <rect fill="none" height="24" width="24" />
-                <path
-                    d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M5,19V5h6v14H5z M19,19h-6v-7h6V19z M19,10h-6V5h6V10z" />
-            </svg>
-            <div class="item__title">Dashboard</div>
-        </a>
-        <a href="#/my_orders" class="bottom_nav__item user-content hide-completely">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
-                viewBox="0 0 24 24" width="24px" fill="#000000">
-                <path d="M0,0h24v24H0V0z" fill="none" />
-                <g>
-                    <path
-                        d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M15,20H6c-0.55,0-1-0.45-1-1v-1h10V20z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
-                    <rect height="2" width="6" x="9" y="7" />
-                    <rect height="2" width="2" x="16" y="7" />
-                    <rect height="2" width="6" x="9" y="10" />
-                    <rect height="2" width="2" x="16" y="10" />
-                </g>
-            </svg>
-            <div class="item__title">My orders</div>
-        </a>
-        <a href="#/market" class="bottom_nav__item">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
-                viewBox="0 0 24 24" width="24px" fill="#000000">
-                <g>
-                    <rect fill="none" height="24" width="24" />
-                </g>
-                <g>
-                    <g />
-                    <g>
-                        <path
-                            d="M21.9,8.89l-1.05-4.37c-0.22-0.9-1-1.52-1.91-1.52H5.05C4.15,3,3.36,3.63,3.15,4.52L2.1,8.89 c-0.24,1.02-0.02,2.06,0.62,2.88C2.8,11.88,2.91,11.96,3,12.06V19c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-6.94 c0.09-0.09,0.2-0.18,0.28-0.28C21.92,10.96,22.15,9.91,21.9,8.89z M18.91,4.99l1.05,4.37c0.1,0.42,0.01,0.84-0.25,1.17 C19.57,10.71,19.27,11,18.77,11c-0.61,0-1.14-0.49-1.21-1.14L16.98,5L18.91,4.99z M13,5h1.96l0.54,4.52 c0.05,0.39-0.07,0.78-0.33,1.07C14.95,10.85,14.63,11,14.22,11C13.55,11,13,10.41,13,9.69V5z M8.49,9.52L9.04,5H11v4.69 C11,10.41,10.45,11,9.71,11c-0.34,0-0.65-0.15-0.89-0.41C8.57,10.3,8.45,9.91,8.49,9.52z M4.04,9.36L5.05,5h1.97L6.44,9.86 C6.36,10.51,5.84,11,5.23,11c-0.49,0-0.8-0.29-0.93-0.47C4.03,10.21,3.94,9.78,4.04,9.36z M5,19v-6.03C5.08,12.98,5.15,13,5.23,13 c0.87,0,1.66-0.36,2.24-0.95c0.6,0.6,1.4,0.95,2.31,0.95c0.87,0,1.65-0.36,2.23-0.93c0.59,0.57,1.39,0.93,2.29,0.93 c0.84,0,1.64-0.35,2.24-0.95c0.58,0.59,1.37,0.95,2.24,0.95c0.08,0,0.15-0.02,0.23-0.03V19H5z" />
-                    </g>
-                </g>
-            </svg>
-            <div class="item__title">Market</div>
-        </a>
-        <a href="#/wallet" class="bottom_nav__item user-content hide-completely">
-            <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="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" />
-                <circle cx="16" cy="12" r="1.5" />
-            </svg>
-            <div class="item__title">Wallet</div>
-        </a>
-    </footer>
     <sm-popup id="user_popup">
         <header slot="header" class="popup__header">
             <button class="popup__header__close" onclick="hidePopup()">
@@ -336,8 +329,8 @@
         <div class="grid gap-1-5">
             <sm-form id="register_section">
                 <p>Enter the private key of FLO ID you want to register.</p>
-                <sm-input id="get_registration_key" variant="outlined" placeholder="Private key" type="password"
-                    required hiderequired></sm-input>
+                <sm-input id="get_registration_key" placeholder="Private key" type="password" required>
+                </sm-input>
                 <sm-button variant="primary" onclick="UI_evt.signup()" disabled>Register</sm-button>
             </sm-form>
         </div>
@@ -364,7 +357,8 @@
                     <sm-copy id="generated_private_key"></sm-copy>
                 </div>
             </div>
-            <sm-button id="sign_up_button" variant="primary" onclick="registerID()" style="display: none;" disabled>Register these credentials
+            <sm-button id="sign_up_button" variant="primary" onclick="registerID()" style="display: none;" disabled>
+                Register these credentials
             </sm-button>
             <strong class="warning">
                 Keep your private key secure and don't share with anyone.
@@ -385,8 +379,8 @@
         </header>
         <sm-form id="wallet_form">
             <input type="text" id="sink_id" style="display: none;" hidden />
-            <sm-input id="get_user_amount" variant="outlined" placeholder="Quantity" type="number" min="0.01"
-                step="0.00001" required hiderequired animate>
+            <sm-input id="get_user_amount" placeholder="Quantity" type="number" min="0.01" step="0.00001" required
+                animate>
             </sm-input>
             <div id="wallet_quantity_selector" class="flex align-center quantity-selector">
                 <span id="wallet_quantity_type">Rupee</span>
@@ -395,14 +389,14 @@
                 <button class="button" value="0.75">75%</button>
                 <button class="button" value="1">100%</button>
             </div>
-            <sm-input id="get_private_key" variant="outlined" placeholder="FLO private key" type="password" required
-                error-text="Invalid private key" hiderequired animate>
+            <sm-input id="get_private_key" placeholder="FLO private key" type="password" required
+                error-text="Invalid private key" animate>
             </sm-input>
             <div id="wallet_popup__cta_wrapper" class="stateful-button-wrapper">
                 <sm-button id="wallet_popup__cta" class="uppercase" variant="primary"></sm-button>
             </div>
         </sm-form>
-        <div id="wallet_result" class="grid gap-2 hide-completely">
+        <div id="wallet_result" class="grid gap-2 hide">
             <div id="wallet_result__icon"></div>
             <div class="grid gap-0-5">
                 <h4 id="wallet_result__title"></h4>
@@ -437,6 +431,18 @@
             </div>
         </div>
     </sm-popup>
+
+    <!-- templates -->
+    <template id="listed_asset_template">
+        <li>
+            <a class="listed-asset interact grid align-center">
+                <div class="listed-asset__icon"></div>
+                <h4 class="listed-asset__name"></h4>
+                <strong class="listed-asset__rate"></strong>
+            </a>
+        </li>
+    </template>
+
     <template id="net_balance_template">
         <span class="available-balance"></span>
     </template>
@@ -724,10 +730,6 @@
                     break;
             }
             getRef("notification_drawer").push(message, { pinned, icon });
-            if (navigator.onLine && sound) {
-                getRef("notification_sound").currentTime = 0;
-                getRef("notification_sound").play();
-            }
             if (mode === 'error') {
                 console.error(message)
             }
@@ -784,8 +786,7 @@
 
         window.addEventListener('hashchange', e => showPage(window.location.hash))
         window.addEventListener("load", () => {
-            showPage(window.location.hash)
-            document.body.classList.remove('hide-completely')
+            document.body.classList.remove('hide')
             document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
             document.addEventListener('keyup', (e) => {
                 if (e.key === 'Escape') {
@@ -795,17 +796,51 @@
             document.addEventListener('copy', () => {
                 notify('copied', 'success')
             })
+            document.addEventListener("pointerdown", (e) => {
+                if (e.target.closest("button:not([disabled]), sm-button:not([disabled]), .interact")) {
+                    createRipple(e, e.target.closest("button, sm-button, .interact"));
+                }
+            });
         });
+        function createRipple(event, target) {
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            const targetDimensions = target.getBoundingClientRect();
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+            circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+            circle.classList.add("ripple");
+            const rippleAnimation = circle.animate(
+                [
+                    {
+                        transform: "scale(4)",
+                        opacity: 0,
+                    },
+                ],
+                {
+                    duration: 600,
+                    fill: "forwards",
+                    easing: "ease-out",
+                }
+            );
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove();
+            };
+        }
 
         const pagesData = {
-            openedPages: [],
+            lastPage: '',
             params: {}
         }
 
         async function showPage(targetPage, options = {}) {
             const { firstLoad, hashChange } = options
             let pageId
-            let params
+            let subPageId
+            let params = {}
+            let searchParams
             if (targetPage === '') {
                 if (typeof proxy.userID === "undefined") {
                     pageId = 'landing'
@@ -814,53 +849,72 @@
                 }
             } else {
                 if (targetPage.includes('/')) {
-                    const pages = targetPage.split('/')
-                    pageId = pages[1]
+                    if (targetPage.includes('?')) {
+                        const splitAddress = targetPage.split('?')
+                        searchParams = splitAddress.pop()
+                        const pages = splitAddress.pop().split('/')
+                        pageId = pages[1]
+                        subPageId = pages[2]
+                    } else {
+                        const pages = targetPage.split('/')
+                        pageId = pages[1]
+                        subPageId = pages[2]
+                    }
                 } else {
                     pageId = targetPage
                 }
             }
-            if (pagesData.lastPage !== pageId) {
-                let target
-                switch (pageId) {
-                    case 'dashboard':
-                        target = 'dashboard'
-                        break;
-                    case 'my_orders':
-                        target = 'my_orders_section'
-                        break;
-                    case 'market':
-                        target = 'market_orders_section'
-                        break;
-                    case 'wallet':
-                        target = 'user_section'
-                        break;
-                }
-                if (target) {
-                    document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide-on-mobile'))
-                    getRef(target).classList.remove('hide-on-mobile')
-                    document.querySelectorAll('.bottom_nav__item').forEach(elem => elem.classList.remove('bottom_nav__item--active'))
-                    document.querySelector(`.bottom_nav__item[href="#/${pageId}"]`).classList.add('bottom_nav__item--active')
-                    getRef(target)?.animate([
-                        {
-                            transform: 'translateY(1rem)',
-                            opacity: 0,
-                        },
-                        {
-                            transform: 'none',
-                            opacity: 1,
-                        },
-                    ],
-                        {
-                            duration: 300,
-                            easing: 'ease'
-                        })
-                    pagesData.lastPage = target
-                    if (!pagesData.openedPages.includes(target)) {
-                        pagesData.openedPages.push(target)
-                    }
-                }
+            if (searchParams) {
+                const urlSearchParams = new URLSearchParams('?' + searchParams);
+                params = Object.fromEntries(urlSearchParams.entries());
             }
+            switch (pageId) {
+                case 'exchange':
+                    if (!params.hasOwnProperty('asset') || params.asset === '') {
+                        params.asset = 'FLO'
+                    }
+                    if (getRef('listed_assets').querySelector('.listed-asset--active'))
+                        getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
+                    getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
+                    getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(2))
+                    getRef('traded_asset').textContent = `Trade ${params.asset}`
+                    getRef('trade_button').textContent = `${tradeType} ${params.asset}`
+                    getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(3))} ${params.asset}`
+                    getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
+                        if (tradeType === 'buy') {
+                            button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
+                        } else {
+                            button.title = `Sell ${button.textContent} of total ${params.asset}`
+                        }
+                    })
+                    break;
+                case 'my_orders':
+                    break;
+                case 'market':
+                    break;
+                case 'wallet':
+                    break;
+            }
+            if (pagesData.lastPage !== pageId) {
+                document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide'))
+                getRef(pageId).classList.remove('hide')
+                document.querySelectorAll('.main_navbar__item').forEach(elem => elem.classList.remove('main_navbar__item--active'))
+                document.querySelector(`.main_navbar__item[href="#/${pageId}"]`).classList.add('main_navbar__item--active')
+                getRef(pageId)?.animate([
+                    {
+                        opacity: 0,
+                    },
+                    {
+                        opacity: 1,
+                    },
+                ],
+                    {
+                        duration: 150,
+                        easing: 'ease'
+                    })
+                pagesData.lastPage = pageId
+            }
+            pagesData.params = params
         }
         // class based lazy loading
         class LazyLoader {
@@ -939,10 +993,27 @@
         }
     </script>
     <script>
+        const listedAssets = {
+            FLO: {
+                icon: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                        d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
+                </svg>`
+            },
+        }
+
         function formatAmount(amount) {
             return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
         }
         const render = {
+            listedAsset(name, rate) {
+                const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild
+                clone.href = `#/exchange?asset=${name}`
+                clone.querySelector('.listed-asset__icon').innerHTML = listedAssets[name] ? listedAssets[name].icon : ''
+                clone.querySelector('.listed-asset__rate').textContent = rate
+                clone.querySelector('.listed-asset__name').textContent = name
+                return clone
+            },
             orderCard(orderDetails = {}) {
                 const { id, asset, quantity, price, time, type } = orderDetails
                 const card = getRef('order_template').content.cloneNode(true).firstElementChild
@@ -1010,12 +1081,21 @@
         let tradeType = 'buy'
         getRef('trade_type_selector').addEventListener('change', e => {
             tradeType = e.detail.value
+            const selectedAsset = pagesData.params.asset
             getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price')
-            getRef('trade_button').textContent = `${tradeType} FLO`
-            getRef('quantity_type').textContent = tradeType === 'buy' ? `Rupee` : `FLO`
+            getRef('trade_button').textContent = `${tradeType} ${selectedAsset}`
+            getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[selectedAsset].net.toFixed(3))} ${selectedAsset}`
+
+            getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
+                if (tradeType === 'buy') {
+                    button.title = `Buy ${selectedAsset} worth ${button.textContent} of total rupee`
+                } else {
+                    button.title = `Sell ${button.textContent} of total ${selectedAsset}`
+                }
+            })
         })
         async function tradeFlo() {
-            const asset = getRef('get_asset').value;
+            const asset = pagesData.params.asset;
             const quantity = parseFloat(getRef('get_quantity').value)
             const price = parseFloat(getRef('get_price').value)
             showProcess('trade_button_wrapper')
@@ -1052,18 +1132,19 @@
                 const target = e.target.closest('button')
                 const unitValue = parseFloat(getRef('get_price').value)
                 const fraction = parseFloat(target.value)
+                const selectedAsset = pagesData.params.asset
                 if (tradeType === 'buy') {
-                    getRef('get_total').value = parseFloat((fraction * balance.rupee).toFixed(2))
-                    getRef('get_quantity').value = parseFloat(((balance.rupee * fraction) / unitValue).toFixed(4))
+                    console.log(parseFloat((fraction * allTokens['rupee'].net).toFixed(2)), parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4)))
+                    getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(2))
+                    getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4))
                 } else {
-                    console.log(fraction, balance.flo, floExchangeRate)
-                    getRef('get_total').value = parseFloat((fraction * balance.flo * floExchangeRate).toFixed(2))
-                    getRef('get_quantity').value = parseFloat((balance.flo * fraction).toFixed(4))
+                    getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(2))
+                    getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(4))
                 }
             }
         })
         getRef('get_price').addEventListener('keyup', e => {
-            const unitValue = parseFloat(getRef('get_price').value) || floExchangeRate
+            const unitValue = parseFloat(getRef('get_price').value) || floGlobals.exchangeRates[pagesData.params.asset]
             const quantity = parseFloat(getRef('get_quantity').value) || 0
             getRef('get_total').value = parseFloat((quantity * unitValue).toFixed(2)) || 0
         })
@@ -1089,16 +1170,14 @@
                 getRef('get_user_amount').setAttribute('step', asset === 'FLO' ? '0.0001' : '0.01')
                 getRef('get_user_amount').setAttribute('min', asset === 'FLO' ? '0.0001' : '0.01')
                 if (type === 'withdraw') {
-                    getRef('get_private_key').classList.add('hide-completely')
-                    getRef('wallet_quantity_selector').classList.remove('hide-completely')
+                    getRef('get_private_key').classList.add('hide')
+                    getRef('wallet_quantity_selector').classList.remove('hide')
                     getRef('get_private_key').removeAttribute('required')
-                    getRef('get_private_key').removeAttribute('hiderequired')
 
                 } else {
                     getRef('get_private_key').setAttribute('required', '')
-                    getRef('wallet_quantity_selector').classList.add('hide-completely')
-                    getRef('get_private_key').setAttribute('hiderequired', '')
-                    getRef('get_private_key').classList.remove('hide-completely')
+                    getRef('wallet_quantity_selector').classList.add('hide')
+                    getRef('get_private_key').classList.remove('hide')
                 }
                 getRef('wallet_form').elementsChanged()
             }
@@ -1128,8 +1207,8 @@
             getRef('wallet_result__description').textContent = description
             getRef('wallet_form').animate(slideOutLeft, animOptions)
                 .onfinish = () => {
-                    getRef('wallet_form').classList.add('hide-completely')
-                    getRef('wallet_result').classList.remove('hide-completely')
+                    getRef('wallet_form').classList.add('hide')
+                    getRef('wallet_result').classList.remove('hide')
                     getRef('wallet_result').animate(slideInLeft, animOptions)
                 }
         }
@@ -1141,8 +1220,8 @@
             }
             getRef('wallet_result').animate(slideOutRight, animOptions)
                 .onfinish = () => {
-                    getRef('wallet_result').classList.add('hide-completely')
-                    getRef('wallet_form').classList.remove('hide-completely')
+                    getRef('wallet_result').classList.add('hide')
+                    getRef('wallet_form').classList.remove('hide')
                     getRef('wallet_form').animate(slideInRight, animOptions)
                 }
         }
@@ -1150,9 +1229,9 @@
             // Get latest balance and exchange rate
             if (e.target.closest('button')) {
                 const target = e.target.closest('button')
-                const asset = getRef('wallet_asset_selector').value.toLowerCase()
+                const asset = getRef('wallet_asset_selector').value
                 const fraction = parseFloat(target.value)
-                getRef('get_user_amount').value = parseFloat((balance[asset] * fraction).toFixed(asset === "flo" ? 4 : 2))
+                getRef('get_user_amount').value = parseFloat((allTokens[asset].net * fraction).toFixed(asset === "rupee" ? 2 : 4))
             }
         })
         getRef('wallet_popup__cta').addEventListener('click', async e => {
@@ -1263,14 +1342,14 @@
                 selectedOrders.delete(target.dataset.id)
             }
             getRef('selected_orders').textContent = `${selectedOrders.size} selected`
-            if (selectedOrders.size === 1 && !getRef('my_orders_section__header').children[0].classList.contains('hide-completely')) {
+            if (selectedOrders.size === 1 && !getRef('my_orders_section__header').children[0].classList.contains('hide')) {
                 getRef('my_orders_section__header').children[0].animate(slideOutLeft, animOptions)
                     .onfinish = () => {
-                        getRef('my_orders_section__header').children[0].classList.add('hide-completely')
-                        getRef('my_orders_section__header').children[1].classList.remove('hide-completely')
+                        getRef('my_orders_section__header').children[0].classList.add('hide')
+                        getRef('my_orders_section__header').children[1].classList.remove('hide')
                         getRef('my_orders_section__header').children[1].animate(slideInLeft, animOptions)
                     }
-            } else if (selectedOrders.size === 0 && getRef('my_orders_section__header').children[0].classList.contains('hide-completely')) {
+            } else if (selectedOrders.size === 0 && getRef('my_orders_section__header').children[0].classList.contains('hide')) {
                 hideMyOrdersOptions()
             }
         })
@@ -1282,8 +1361,8 @@
             }
             getRef('my_orders_section__header').children[1].animate(slideOutRight, animOptions)
                 .onfinish = () => {
-                    getRef('my_orders_section__header').children[1].classList.add('hide-completely')
-                    getRef('my_orders_section__header').children[0].classList.remove('hide-completely')
+                    getRef('my_orders_section__header').children[1].classList.add('hide')
+                    getRef('my_orders_section__header').children[0].classList.remove('hide')
                     getRef('my_orders_section__header').children[0].animate(slideInRight, animOptions)
                 }
         }
@@ -1295,16 +1374,16 @@
             const target = e.target.closest('.more-info')
             showPopup('transaction_info_popup')
             if (target.dataset.buyer !== 'undefined') {
-                getRef('transaction__buyer_wrapper').classList.remove('hide-completely')
+                getRef('transaction__buyer_wrapper').classList.remove('hide')
                 getRef('transaction__buyer').value = target.dataset.buyer
             } else {
-                getRef('transaction__buyer_wrapper').classList.add('hide-completely')
+                getRef('transaction__buyer_wrapper').classList.add('hide')
             }
             if (target.dataset.seller !== 'undefined') {
-                getRef('transaction__seller_wrapper').classList.remove('hide-completely')
+                getRef('transaction__seller_wrapper').classList.remove('hide')
                 getRef('transaction__seller').value = target.dataset.seller
             } else {
-                getRef('transaction__seller_wrapper').classList.add('hide-completely')
+                getRef('transaction__seller_wrapper').classList.add('hide')
             }
             getRef('transaction_time__label').textContent = target.dataset.pending === 'true' ? 'Placed on' : 'Completed on'
             getRef('transaction_time').textContent = getFormattedTime(target.dataset.time)
@@ -1601,30 +1680,33 @@
                 })
             }
         }
-
-        let floExchangeRate = 0
         function updateRate(init = false) {
             floExchangeAPI.getRates().then(rates => {
                 console.debug(rates);
                 if (init) {
-                    let assetList = getRef('get_asset');
-                    let walletList = getRef('wallet_asset_selector');
-                    let c = document.createElement('sm-option');
-                    c.setAttribute('value', floGlobals.currency);
-                    c.innerText = floGlobals.currency;
-                    walletList.appendChild(c);
-                    for (let asset in rates) {
-                        let e = document.createElement('sm-option');
-                        e.setAttribute('value', asset);
-                        e.innerText = asset;
-                        assetList.appendChild(e);
-                        walletList.appendChild(e.cloneNode(true));
-                    }
+                    floGlobals.exchangeRates = rates
+                    getRef('wallet_asset_selector').append(
+                        createElement('sm-option', {
+                            textContent: floGlobals.currency,
+                            attributes: { value: floGlobals.currency },
+                        })
+                    );
+                    Object.entries(rates).sort((a, b) => a[1] < b[1] ? 1 : -1).forEach(([asset, rate]) => {
+                        if (!allTokens.hasOwnProperty(asset)) {
+                            allTokens[asset] = {
+                                total: 0,
+                                locked: 0,
+                                net: 0
+                            }
+                        }
+                        getRef('listed_assets').append(render.listedAsset(asset, formatAmount(parseFloat(rate))));
+                        getRef('wallet_asset_selector').append(createElement('sm-option', {
+                            textContent: asset,
+                            attributes: { value: asset },
+                        }));
+                    })
                 }
-                let flo_rate = rates["FLO"];
-                floExchangeRate = parseFloat(flo_rate)
-                getRef('flo_rate').textContent = formatAmount(parseFloat(flo_rate))
-                getRef('get_price').value = parseFloat(parseFloat(flo_rate).toFixed(2))
+                getRef('get_price').value = parseFloat(parseFloat(rates["FLO"]).toFixed(2))
             }).catch(error => console.error(error))
         }
 
@@ -1632,10 +1714,9 @@
             if (init) {
                 console.info("init");
                 if (!proxy.userID) {
-                    getRef('home').classList.remove('signed-in');
                     floExchangeAPI.getLoginCode().then(response => {
-                        getRef("login_form").classList.remove('hide-completely');
-                        document.querySelectorAll(".user-content").forEach(elem => elem.classList.add('hide-completely'))
+                        getRef("login_form").classList.remove('hide');
+                        document.querySelectorAll(".user-content").forEach(elem => elem.classList.add('hide'))
                         getRef('sign_in_code').value = response.code;
                         getRef('sign_in_hash').value = response.hash;
                         proxy.clear();
@@ -1662,40 +1743,51 @@
             getRef(`${type}_balance`).append(card)
         }
 
-        const balance = {}
-
         let accountDetails = {}
+        const allTokens = {}
         async function account() {
-            floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(acc => {
-                getRef("login_form").classList.add('hide-completely')
-                getRef('home').classList.add('signed-in')
-                getRef('user_popup_button').classList.remove('hide-completely')
+            floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(async acc => {
+                getRef("login_form").classList.add('hide')
+                getRef('user_popup_button').classList.remove('hide')
                 accountDetails = acc
                 console.debug(acc);
                 //Element display
-                document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide-completely'))
-                getRef('trade_form').classList.remove('hide-completely')
+                document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide'))
                 getRef("user_id").value = acc.floID;
                 getRef("sink_id").value = acc.sinkID;
-                //FLO Balance
-                console.debug(acc.vault);
-                let flo_total = acc.vault.reduce((a, x) => a + (x.asset === "FLO" ? x.quantity : 0), 0);
-                let flo_locked = acc.sellOrders.reduce((a, x) => a + x.quantity, 0);
-                let flo_net = flo_total - flo_locked;
-                console.debug("FLO", flo_total, flo_locked, flo_net);
-                balance.flo = flo_net
+                // token balance
+                acc.vault.forEach(({ asset, quantity }) => {
+                    if (!allTokens.hasOwnProperty(asset)) {
+                        allTokens[asset] = {
+                            total: 0,
+                            locked: 0,
+                            net: 0
+                        }
+                    }
+                    allTokens[asset].total += quantity
+                })
+                acc.sellOrders.forEach(({ quantity }) => {
+                    allTokens[asset].locked += quantity
+                })
+                for (const asset in allTokens) {
+                    allTokens[asset].net = allTokens[asset].total - allTokens[asset].locked
+                }
+                console.debug("FLO", allTokens['FLO']);
+                showBalance("flo", allTokens['FLO'].net, allTokens['FLO'].locked)
+                console.log(await floExchangeAPI.getBalance(acc.floID))
 
-                showBalance("flo", flo_net, flo_locked,)
                 //Rupee Balance
-                let rupee_total = acc.cash;
-                let rupee_locked = acc.buyOrders.reduce((a, x) => a + x.quantity * x.maxPrice, 0);
-                let rupee_net = rupee_total - rupee_locked;
-                console.debug("RUPEE", rupee_total, rupee_locked, rupee_net);
-                balance.rupee = rupee_net
-                showBalance("rupee", rupee_net, rupee_locked)
+                allTokens['rupee'] = {
+                    total: acc.cash,
+                    locked: acc.buyOrders.reduce((a, x) => a + x.quantity * x.maxPrice, 0),
+                }
+                allTokens['rupee'].net = allTokens['rupee'].total - allTokens['rupee'].locked
+                console.debug("RUPEE", allTokens['rupee']);
+                showBalance("rupee", allTokens['rupee'].net, allTokens['rupee'].locked)
                 //My orders
                 renderUserOrders();
                 proxy.secret.then(_ => null).catch(_ => null);
+                showPage(window.location.hash)
             }).catch(error => console.error(error))
         };
 

From 6028e2b541ec9918d8815db9816db357a39138b8 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Tue, 29 Mar 2022 23:58:10 +0530
Subject: [PATCH 02/11] UI improvements

---
 docs/css/main.css     |  29 +++++---
 docs/css/main.min.css |   2 +-
 docs/css/main.scss    |  31 ++++++---
 docs/index.html       | 156 +++++++++++++++++++++++++-----------------
 4 files changed, 133 insertions(+), 85 deletions(-)

diff --git a/docs/css/main.css b/docs/css/main.css
index c088db3..26865fb 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -352,6 +352,12 @@ ul {
   margin-left: 0.5rem;
 }
 
+.icon-only {
+  padding: 0.6rem;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+}
+
 .icon-button {
   padding: 0.6rem;
   border-radius: 0.8rem;
@@ -551,6 +557,11 @@ sm-checkbox {
   align-content: flex-start;
 }
 
+#login_form {
+  width: min(24rem, 100%);
+  margin: 0 auto;
+}
+
 #login_form__priv_key {
   margin-top: 1rem;
 }
@@ -608,16 +619,11 @@ sm-checkbox {
   width: min(42rem, 100%);
 }
 
-#exchange {
-  display: grid;
-  gap: 1.5rem;
-}
-
 .listed-asset {
   position: relative;
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 1rem 0;
   border-radius: 0.5rem;
   opacity: 0.8;
   font-weight: 400;
@@ -773,6 +779,7 @@ sm-checkbox {
 #wallet {
   gap: 1.5rem;
   align-content: flex-start;
+  width: min(24rem, 100%);
 }
 
 .wallet_actions__wrapper {
@@ -793,8 +800,7 @@ sm-checkbox {
 .balance-card {
   display: grid;
   align-items: center;
-  gap: 0.3rem 1rem;
-  padding: 0.5rem 0;
+  gap: 0.3rem 0.5rem;
   border-radius: 0.5rem;
 }
 .balance-card.is-locked {
@@ -1078,11 +1084,16 @@ sm-checkbox {
     background-color: rgba(var(--text-color), 0.06);
   }
 
-  #exchange {
+  .is-signed-in #exchange_wrapper {
     display: grid;
+    gap: 1.5rem;
     grid-template-columns: 16rem 1fr;
+    align-items: flex-start;
   }
 
+  .listed-asset {
+    padding: 1rem;
+  }
   .listed-asset--active {
     opacity: 1;
     background-color: rgba(var(--text-color), 0.06);
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index 7be631d..85b8b28 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}#exchange{display:grid;gap:1.5rem}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:12rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#exchange{display:grid;grid-template-columns:16rem 1fr}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:12rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}.is-signed-in #exchange_wrapper{display:grid;gap:1.5rem;grid-template-columns:16rem 1fr;align-items:flex-start}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index 16274f3..f02235f 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -347,6 +347,11 @@ ul {
     margin-left: 0.5rem;
   }
 }
+.icon-only {
+  padding: 0.6rem;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+}
 
 .icon-button {
   padding: 0.6rem;
@@ -528,6 +533,10 @@ sm-checkbox {
   align-items: flex-start;
   align-content: flex-start;
 }
+#login_form {
+  width: min(24rem, 100%);
+  margin: 0 auto;
+}
 #login_form__priv_key {
   margin-top: 1rem;
 }
@@ -584,16 +593,11 @@ sm-checkbox {
     width: min(42rem, 100%);
   }
 }
-
-#exchange {
-  display: grid;
-  gap: 1.5rem;
-}
 .listed-asset {
   position: relative;
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 1rem 0;
   border-radius: 0.5rem;
   opacity: 0.8;
   font-weight: 400;
@@ -746,6 +750,7 @@ sm-checkbox {
 #wallet {
   gap: 1.5rem;
   align-content: flex-start;
+  width: min(24rem, 100%);
 }
 .wallet_actions__wrapper {
   grid-column: span 3;
@@ -763,8 +768,7 @@ sm-checkbox {
 .balance-card {
   display: grid;
   align-items: center;
-  gap: 0.3rem 1rem;
-  padding: 0.5rem 0;
+  gap: 0.3rem 0.5rem;
   border-radius: 0.5rem;
   &.is-locked {
     grid-template-columns: auto 1fr;
@@ -1000,11 +1004,16 @@ sm-checkbox {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
-  #exchange {
-    display: grid;
-    grid-template-columns: 16rem 1fr;
+  .is-signed-in {
+    #exchange_wrapper {
+      display: grid;
+      gap: 1.5rem;
+      grid-template-columns: 16rem 1fr;
+      align-items: flex-start;
+    }
   }
   .listed-asset {
+    padding: 1rem;
     &--active {
       opacity: 1;
       background-color: rgba(var(--text-color), 0.06);
diff --git a/docs/index.html b/docs/index.html
index 4049262..87e4c3c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -92,40 +92,49 @@
                     </div>
                     <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
                 </sm-form>
-                <div class="grid gap-1 align-start hide user-content">
-                    <h4>Assets</h4>
-                    <ul id="listed_assets" class="user-content hide"></ul>
-                </div>
-                <sm-form id="trade_form" class="user-content hide hide-on-mobile">
-                    <div class="flex space-between align-center">
-                        <h4 id="traded_asset">Trade FLO</h4>
-                        <strip-select id="trade_type_selector" class="tab">
-                            <strip-option value="buy" selected>Buy</strip-option>
-                            <strip-option value="sell">Sell</strip-option>
-                        </strip-select>
+                <section id="exchange_wrapper">
+                    <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content hide-on-mobile">
+                        <h4>Assets</h4>
+                        <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
-                    <sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required animate>
-                    </sm-input>
-                    <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required animate>
-                    </sm-input>
-                    </sm-input>
-                    <sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" required
-                        animate>
-                    </sm-input>
-                    <div id="quantity_selector" class="flex align-center quantity-selector">
-                        <span id="quantity_type">Rupee</span>
-                        <button class="button" value="0.25" title="Buy FLO worth 25% of total rupee">25%</button>
-                        <button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button>
-                        <button class="button" value="0.75" title="Buy FLO worth 75% of total rupee">75%</button>
-                        <button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</button>
-                    </div>
-                    <div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
-                        <sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">
-                            BUY
-                            FLO
-                        </sm-button>
-                    </div>
-                </sm-form>
+                    <sm-form id="trade_form" class="user-content hide ">
+                        <div class="flex space-between align-center">
+                            <a href="#/exchange" class="button icon-only hide-on-desktop">
+                                <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                                </svg>
+                            </a>
+                            <h4 id="traded_asset">Trade FLO</h4>
+                            <strip-select id="trade_type_selector" class="tab">
+                                <strip-option value="buy" selected>Buy</strip-option>
+                                <strip-option value="sell">Sell</strip-option>
+                            </strip-select>
+                        </div>
+                        <sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required animate>
+                        </sm-input>
+                        <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required animate>
+                        </sm-input>
+                        </sm-input>
+                        <sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" required
+                            animate>
+                        </sm-input>
+                        <div id="quantity_selector" class="flex align-center quantity-selector">
+                            <span id="quantity_type">Rupee</span>
+                            <button class="button" value="0.25" title="Buy FLO worth 25% of total rupee">25%</button>
+                            <button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button>
+                            <button class="button" value="0.75" title="Buy FLO worth 75% of total rupee">75%</button>
+                            <button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</button>
+                        </div>
+                        <div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
+                            <sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">
+                                BUY
+                                FLO
+                            </sm-button>
+                        </div>
+                    </sm-form>
+                </section>
             </section>
             <section id="my_orders" class="grid gap-1 hide mobile-page">
                 <div id="my_orders_section__header" class="orders_section__header flex">
@@ -209,6 +218,16 @@
                 <div class="grid gap-0-5">
                     <h4>Balance</h4>
                     <div class="grid gap-1">
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path
+                                        d="M15.3,4.91a4.78,4.78,0,0,0-.39-.5l3.14,0L18.75,2H6L5.25,4.6H9a4.22,4.22,0,0,1,3.06,1,3.16,3.16,0,0,1,.75,1.24H5.93L5.25,9.22h7.62a3.15,3.15,0,0,1-.34.82,3,3,0,0,1-1.37,1.17,5.34,5.34,0,0,1-2.2.4H5.5l0,1.9,7,8.49h3.56v-.17L9.68,14l.09,0a8.07,8.07,0,0,0,3.65-1,5,5,0,0,0,2-2.09A6.29,6.29,0,0,0,16,9.22h2.1l.69-2.42H15.93A5.93,5.93,0,0,0,15.3,4.91Z" />
+                                </svg>
+                            </div>
+                            <div class="balance-card__token">Rupee</div>
+                            <div id="rupee_balance"></div>
+                        </div>
                         <div class="balance-card">
                             <div class="balance-card__icon">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -221,13 +240,14 @@
                         </div>
                         <div class="balance-card">
                             <div class="balance-card__icon">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path
-                                        d="M15.3,4.91a4.78,4.78,0,0,0-.39-.5l3.14,0L18.75,2H6L5.25,4.6H9a4.22,4.22,0,0,1,3.06,1,3.16,3.16,0,0,1,.75,1.24H5.93L5.25,9.22h7.62a3.15,3.15,0,0,1-.34.82,3,3,0,0,1-1.37,1.17,5.34,5.34,0,0,1-2.2.4H5.5l0,1.9,7,8.49h3.56v-.17L9.68,14l.09,0a8.07,8.07,0,0,0,3.65-1,5,5,0,0,0,2-2.09A6.29,6.29,0,0,0,16,9.22h2.1l.69-2.42H15.93A5.93,5.93,0,0,0,15.3,4.91Z" />
+                                <svg class="icon" width="64" height="56" viewBox="0 0 64 56" fill="none"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd"
+                                        d="M37.3261 19.7091C37.2823 19.3891 37.2604 19.0614 37.2604 18.7261C37.2604 17.4352 37.4871 16.2887 37.9405 15.2866C38.4101 14.2675 39.0416 13.4777 39.835 12.9172C40.6284 12.3397 41.519 12.051 42.5067 12.051C43.462 12.051 44.2797 12.3057 44.9598 12.8153C45.6399 13.3079 46.1499 13.9618 46.4899 14.7771C46.83 15.5924 47 16.4671 47 17.4013C47 18.6921 46.7652 19.8471 46.2956 20.8662C45.8261 21.8684 45.1865 22.6582 44.3769 23.2357C43.5835 23.7962 42.701 24.0764 41.7295 24.0764C40.7741 24.0764 39.9564 23.8302 39.2763 23.3376C38.8283 22.9937 38.454 22.5802 38.1535 22.0971C37.7343 22.518 37.2952 22.8891 36.8359 23.2102C36.0263 23.7877 35.1034 24.0764 34.0671 24.0764C32.966 24.0764 32.0835 23.6603 31.4197 22.828C30.7558 21.9788 30.3024 20.8323 30.0595 19.3885C29.509 19.5414 28.9261 19.6178 28.3108 19.6178C27.7764 19.6178 27.1854 19.5754 26.5377 19.4904C26.7644 20.5605 26.9506 21.758 27.0963 23.0828C27.2421 24.4076 27.3149 25.4947 27.3149 26.344C27.3149 28.1783 27.0316 29.5796 26.4649 30.5478C25.8981 31.5159 25.1533 32 24.2303 32C23.0645 32 22.2306 31.1338 21.7286 29.4013C21.2429 27.6688 21 25.0531 21 21.5541C21 18.293 21.3319 14.9894 21.9958 11.6433C22.6759 8.28026 23.5988 5.50318 24.7647 3.3121C25.9467 1.10403 27.2421 0 28.6508 0C29.4118 0 30.0028 0.356688 30.4238 1.07006C30.861 1.78344 31.0796 2.7431 31.0796 3.94905C31.0796 7.94055 28.8046 12.2887 24.2546 16.9936C24.0927 18.6582 24.0117 20.1189 24.0117 21.3758C24.0117 23.1253 24.0684 24.9172 24.1818 26.7516C24.2951 28.603 24.4813 29.5287 24.7404 29.5287C25.2262 29.5287 25.469 28.6454 25.469 26.879C25.469 25.5541 25.38 24.2718 25.2019 23.0318C25.0399 21.7919 24.8133 20.4841 24.5218 19.1083C24.5056 18.8875 24.5704 18.6072 24.7161 18.2675C24.878 17.9278 25.0723 17.6306 25.299 17.3758C25.5257 17.121 25.7281 16.9936 25.9062 16.9936C26.1167 16.9936 26.4487 17.0106 26.902 17.0446C27.4202 17.0786 27.8088 17.0955 28.0679 17.0955C28.6508 17.0955 29.2499 17.0106 29.8652 16.8408V16.7643C29.8652 14.6921 30.1162 12.3312 30.6181 9.68153C31.1363 7.03185 31.8892 4.75584 32.877 2.8535C33.8809 0.951168 35.071 0 36.4473 0C37.2246 0 37.8318 0.382166 38.2689 1.1465C38.7223 1.89384 38.949 2.9724 38.949 4.38217C38.949 5.75796 38.7061 7.3206 38.2204 9.07006C37.7346 10.8195 37.0302 12.5011 36.1073 14.1147C35.1843 15.7113 34.0995 16.9936 32.8527 17.9618C32.9174 19.1677 33.0875 20.0255 33.3627 20.535C33.638 21.0276 34.0428 21.2739 34.5771 21.2739C35.241 21.2739 35.8239 21.0786 36.3259 20.6879C36.614 20.4539 36.9474 20.1277 37.3261 19.7091ZM27.0478 4.07643C27.485 3.04034 27.8493 2.52229 28.1407 2.52229C28.5455 2.52229 28.748 3.04034 28.748 4.07643C28.7318 5.53716 28.3755 7.10828 27.6793 8.78981C26.983 10.4544 25.9872 12.0594 24.6918 13.6051C24.9995 11.7028 25.3638 9.90234 25.7848 8.20382C26.2058 6.48832 26.6268 5.11253 27.0478 4.07643ZM34.7229 4.43312C35.1762 3.15924 35.573 2.52229 35.913 2.52229C36.3664 2.52229 36.5931 3.16773 36.5931 4.4586C36.5931 5.49469 36.4554 6.65817 36.1802 7.94905C35.9211 9.22293 35.5082 10.4883 34.9415 11.7452C34.3747 12.9851 33.6866 14.0382 32.877 14.9045C32.9579 13.0531 33.1765 11.1592 33.5327 9.22293C33.889 7.28663 34.2857 5.69002 34.7229 4.43312ZM43.3811 20.3822C43.0086 21.0106 42.5472 21.3248 41.9966 21.3248C41.5109 21.3248 41.1061 21.0955 40.7822 20.6369C40.4584 20.1783 40.2964 19.465 40.2964 18.4968C40.2964 17.2739 40.4827 16.3567 40.8551 15.7452C41.2437 15.1168 41.7295 14.8025 42.3124 14.8025C42.7658 14.8025 43.1544 15.0403 43.4782 15.5159C43.802 15.9915 43.964 16.6964 43.964 17.6306C43.964 18.8365 43.7697 19.7537 43.3811 20.3822ZM23.5795 37.5556C23.0372 39.1867 22.6225 40.8605 22.3354 42.5769C20.9523 42.8675 19.7215 43.0456 18.6428 43.1111C18.3936 40.9185 17.6149 39.0815 16.3066 37.6C14.9984 36.0889 13.3007 35.2593 11.2137 35.1111C13.4565 32.4741 15.0607 29.9556 16.0263 27.5556C16.9919 25.1556 17.4747 22.7407 17.4747 20.3111C17.4747 18.4444 17.0386 16.9333 16.1665 15.7778C15.2943 14.5926 14.1418 14 12.7089 14C10.0612 14 7.77173 15.5852 5.84048 18.7556C3.94038 21.8963 2.49194 25.7185 1.49516 30.2222C0.498388 34.6963 0 38.8444 0 42.6667C0 46.9926 0.716432 50.2963 2.1493 52.5778C3.58216 54.8593 5.87163 56 9.0177 56C11.1047 56 13.0048 55.2444 14.718 53.7333C16.4624 52.2222 17.646 50.237 18.269 47.7778C19.5276 47.7279 20.7273 47.594 21.8682 47.3762C21.8565 47.76 21.8507 48.1457 21.8507 48.5333C21.8507 51.1407 22.0843 53.037 22.5516 54.2222C23.0499 55.4074 23.891 56 25.0746 56C26.0403 56 26.7411 55.763 27.1772 55.2889C27.6445 54.7852 28.0494 53.837 28.392 52.4444C28.8593 50.637 29.4667 48.9185 30.2143 47.2889C30.993 45.6593 31.7406 44.3556 32.457 43.3778C33.2046 42.3704 33.7809 41.8667 34.1858 41.8667C34.5284 41.8667 34.6998 42.1037 34.6998 42.5778C34.6998 43.2889 34.4973 44.5778 34.0924 46.4444C33.6563 48.5778 33.4382 50.0593 33.4382 50.8889C33.4382 52.5481 33.8432 53.8222 34.653 54.7111C35.4629 55.5704 36.6622 56 38.2508 56C40.2132 56 41.9575 55.4963 43.4838 54.4889C44.678 53.7165 45.808 52.7786 46.874 51.6753C47.0272 51.9921 47.1913 52.2929 47.3663 52.5778C48.7992 54.8593 51.0731 56 54.188 56C55.9012 56 57.5054 55.5111 59.0005 54.5333C60.4957 53.5259 61.695 52.1333 62.5983 50.3556C63.5328 48.5778 64 46.5778 64 44.3556C64 42.7556 63.6885 41.2741 63.0655 39.9111C62.4737 38.5481 61.6015 37.437 60.449 36.5778C59.3276 35.7185 58.0038 35.2296 56.4775 35.1111C58.7202 32.4741 60.3244 29.9556 61.29 27.5556C62.2556 25.1556 62.7385 22.7407 62.7385 20.3111C62.7385 18.4444 62.3024 16.9333 61.4302 15.7778C60.558 14.5926 59.4055 14 57.9726 14C55.3249 14 53.0355 15.5852 51.1042 18.7556C49.2041 21.8963 47.7557 25.7185 46.7589 30.2222C45.7621 34.6963 45.2637 38.8444 45.2637 42.6667C45.2637 44.3055 45.3643 45.7977 45.5655 47.1431C44.3991 48.4396 43.4404 49.4067 42.6895 50.0444C41.8485 50.7556 41.1165 51.1111 40.4935 51.1111C39.5902 51.1111 39.1385 50.5185 39.1385 49.3333C39.1385 48.5037 39.4344 46.8 40.0263 44.2222C40.7116 41.2 41.0542 39.1111 41.0542 37.9556C41.0542 36.0296 40.0419 35.0667 38.0172 35.0667C36.9892 35.0667 35.8523 35.4074 34.6063 36.0889C33.3915 36.7704 32.1455 37.9111 30.8684 39.5111C29.5913 41.1111 28.4388 43.1852 27.4108 45.7333C27.5354 44.4296 27.6912 43.3333 27.8781 42.4444C28.065 41.5556 28.3142 40.5185 28.6257 39.3333C29.0929 37.6741 29.3265 36.6074 29.3265 36.1333C29.3265 35.7185 29.2019 35.437 28.9527 35.2889C28.7035 35.1407 28.2674 35.0667 27.6445 35.0667C26.4919 35.0667 25.5886 35.2741 24.9345 35.6889C24.3115 36.0741 23.8598 36.6963 23.5795 37.5556ZM11.6342 18.4C11.0113 18.4 10.326 19.2889 9.57839 21.0667C8.86196 22.8148 8.19225 25.2 7.56926 28.2222C6.94628 31.2444 6.47904 34.5481 6.16755 38.1333C8.2234 34.5481 9.85873 31.3926 11.0736 28.6667C12.3195 25.9111 12.9425 23.4667 12.9425 21.3333C12.9425 20.3852 12.8179 19.6593 12.5687 19.1556C12.3507 18.6519 12.0392 18.4 11.6342 18.4ZM9.2046 51.2889C10.1702 51.2889 11.0268 50.9037 11.7744 50.1333C12.522 49.363 13.0204 48.2519 13.2696 46.8C12.3039 46.1778 11.5564 45.363 11.0268 44.3556C10.5284 43.3481 10.2792 42.2815 10.2792 41.1556C10.2792 40.7407 10.3415 40.1778 10.4661 39.4667H10.326C9.04885 39.4667 7.97421 40.0741 7.10203 41.2889C6.261 42.4741 5.84048 44.0741 5.84048 46.0889C5.84048 47.7778 6.16755 49.0667 6.82168 49.9556C7.50697 50.8444 8.30127 51.2889 9.2046 51.2889ZM56.3373 28.6667C55.1225 31.3926 53.4871 34.5481 51.4313 38.1333C51.7428 34.5481 52.21 31.2444 52.833 28.2222C53.456 25.2 54.1257 22.8148 54.8421 21.0667C55.5897 19.2889 56.275 18.4 56.898 18.4C57.3029 18.4 57.6144 18.6519 57.8325 19.1556C58.0816 19.6593 58.2062 20.3852 58.2062 21.3333C58.2062 23.4667 57.5833 25.9111 56.3373 28.6667ZM57.0381 49.5556C56.3217 50.6519 55.434 51.2 54.3749 51.2C53.4404 51.2 52.6617 50.8 52.0387 50C51.4157 49.1704 51.1042 47.8667 51.1042 46.0889C51.1042 44.0444 51.478 42.4889 52.2256 41.4222C52.9732 40.3556 53.8921 39.8222 54.9823 39.8222C55.8545 39.8222 56.6021 40.237 57.225 41.0667C57.848 41.8963 58.1595 43.1259 58.1595 44.7556C58.1595 46.8593 57.7857 48.4593 57.0381 49.5556Z" />
                                 </svg>
                             </div>
-                            <div class="balance-card__token">Rupee</div>
-                            <div id="rupee_balance"></div>
+                            <div class="balance-card__token">flobnb</div>
+                            <div id="flobnb_balance"></div>
                         </div>
                     </div>
                 </div>
@@ -235,11 +255,10 @@
         </section>
         <nav id="main_navbar" class="flex align-center">
             <a href="#/exchange" class="main_navbar__item main_navbar__item--active interact">
-                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
-                    viewBox="0 0 24 24" width="24px" fill="#000000">
-                    <rect fill="none" height="24" width="24" />
-                    <path
-                        d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M5,19V5h6v14H5z M19,19h-6v-7h6V19z M19,10h-6V5h6V10z" />
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" />
                 </svg>
                 <div class="item__title">Exchange</div>
             </a>
@@ -842,11 +861,11 @@
             let params = {}
             let searchParams
             if (targetPage === '') {
-                if (typeof proxy.userID === "undefined") {
-                    pageId = 'landing'
-                } else {
-                    pageId = 'home'
-                }
+                pageId = 'exchange'
+                // if (typeof proxy.userID === "undefined") {
+                //     pageId = 'landing'
+                // } else {
+                // }
             } else {
                 if (targetPage.includes('/')) {
                     if (targetPage.includes('?')) {
@@ -900,18 +919,18 @@
                 getRef(pageId).classList.remove('hide')
                 document.querySelectorAll('.main_navbar__item').forEach(elem => elem.classList.remove('main_navbar__item--active'))
                 document.querySelector(`.main_navbar__item[href="#/${pageId}"]`).classList.add('main_navbar__item--active')
-                getRef(pageId)?.animate([
-                    {
-                        opacity: 0,
-                    },
-                    {
-                        opacity: 1,
-                    },
-                ],
-                    {
-                        duration: 150,
-                        easing: 'ease'
-                    })
+                // getRef(pageId)?.animate([
+                //     {
+                //         opacity: 0,
+                //     },
+                //     {
+                //         opacity: 1,
+                //     },
+                // ],
+                //     {
+                //         duration: 150,
+                //         easing: 'ease'
+                //     })
                 pagesData.lastPage = pageId
             }
             pagesData.params = params
@@ -1000,6 +1019,13 @@
                         d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
                 </svg>`
             },
+            flobnb: {
+                icon: `
+                <svg class="icon" width="64" height="56" viewBox="0 0 64 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3261 19.7091C37.2823 19.3891 37.2604 19.0614 37.2604 18.7261C37.2604 17.4352 37.4871 16.2887 37.9405 15.2866C38.4101 14.2675 39.0416 13.4777 39.835 12.9172C40.6284 12.3397 41.519 12.051 42.5067 12.051C43.462 12.051 44.2797 12.3057 44.9598 12.8153C45.6399 13.3079 46.1499 13.9618 46.4899 14.7771C46.83 15.5924 47 16.4671 47 17.4013C47 18.6921 46.7652 19.8471 46.2956 20.8662C45.8261 21.8684 45.1865 22.6582 44.3769 23.2357C43.5835 23.7962 42.701 24.0764 41.7295 24.0764C40.7741 24.0764 39.9564 23.8302 39.2763 23.3376C38.8283 22.9937 38.454 22.5802 38.1535 22.0971C37.7343 22.518 37.2952 22.8891 36.8359 23.2102C36.0263 23.7877 35.1034 24.0764 34.0671 24.0764C32.966 24.0764 32.0835 23.6603 31.4197 22.828C30.7558 21.9788 30.3024 20.8323 30.0595 19.3885C29.509 19.5414 28.9261 19.6178 28.3108 19.6178C27.7764 19.6178 27.1854 19.5754 26.5377 19.4904C26.7644 20.5605 26.9506 21.758 27.0963 23.0828C27.2421 24.4076 27.3149 25.4947 27.3149 26.344C27.3149 28.1783 27.0316 29.5796 26.4649 30.5478C25.8981 31.5159 25.1533 32 24.2303 32C23.0645 32 22.2306 31.1338 21.7286 29.4013C21.2429 27.6688 21 25.0531 21 21.5541C21 18.293 21.3319 14.9894 21.9958 11.6433C22.6759 8.28026 23.5988 5.50318 24.7647 3.3121C25.9467 1.10403 27.2421 0 28.6508 0C29.4118 0 30.0028 0.356688 30.4238 1.07006C30.861 1.78344 31.0796 2.7431 31.0796 3.94905C31.0796 7.94055 28.8046 12.2887 24.2546 16.9936C24.0927 18.6582 24.0117 20.1189 24.0117 21.3758C24.0117 23.1253 24.0684 24.9172 24.1818 26.7516C24.2951 28.603 24.4813 29.5287 24.7404 29.5287C25.2262 29.5287 25.469 28.6454 25.469 26.879C25.469 25.5541 25.38 24.2718 25.2019 23.0318C25.0399 21.7919 24.8133 20.4841 24.5218 19.1083C24.5056 18.8875 24.5704 18.6072 24.7161 18.2675C24.878 17.9278 25.0723 17.6306 25.299 17.3758C25.5257 17.121 25.7281 16.9936 25.9062 16.9936C26.1167 16.9936 26.4487 17.0106 26.902 17.0446C27.4202 17.0786 27.8088 17.0955 28.0679 17.0955C28.6508 17.0955 29.2499 17.0106 29.8652 16.8408V16.7643C29.8652 14.6921 30.1162 12.3312 30.6181 9.68153C31.1363 7.03185 31.8892 4.75584 32.877 2.8535C33.8809 0.951168 35.071 0 36.4473 0C37.2246 0 37.8318 0.382166 38.2689 1.1465C38.7223 1.89384 38.949 2.9724 38.949 4.38217C38.949 5.75796 38.7061 7.3206 38.2204 9.07006C37.7346 10.8195 37.0302 12.5011 36.1073 14.1147C35.1843 15.7113 34.0995 16.9936 32.8527 17.9618C32.9174 19.1677 33.0875 20.0255 33.3627 20.535C33.638 21.0276 34.0428 21.2739 34.5771 21.2739C35.241 21.2739 35.8239 21.0786 36.3259 20.6879C36.614 20.4539 36.9474 20.1277 37.3261 19.7091ZM27.0478 4.07643C27.485 3.04034 27.8493 2.52229 28.1407 2.52229C28.5455 2.52229 28.748 3.04034 28.748 4.07643C28.7318 5.53716 28.3755 7.10828 27.6793 8.78981C26.983 10.4544 25.9872 12.0594 24.6918 13.6051C24.9995 11.7028 25.3638 9.90234 25.7848 8.20382C26.2058 6.48832 26.6268 5.11253 27.0478 4.07643ZM34.7229 4.43312C35.1762 3.15924 35.573 2.52229 35.913 2.52229C36.3664 2.52229 36.5931 3.16773 36.5931 4.4586C36.5931 5.49469 36.4554 6.65817 36.1802 7.94905C35.9211 9.22293 35.5082 10.4883 34.9415 11.7452C34.3747 12.9851 33.6866 14.0382 32.877 14.9045C32.9579 13.0531 33.1765 11.1592 33.5327 9.22293C33.889 7.28663 34.2857 5.69002 34.7229 4.43312ZM43.3811 20.3822C43.0086 21.0106 42.5472 21.3248 41.9966 21.3248C41.5109 21.3248 41.1061 21.0955 40.7822 20.6369C40.4584 20.1783 40.2964 19.465 40.2964 18.4968C40.2964 17.2739 40.4827 16.3567 40.8551 15.7452C41.2437 15.1168 41.7295 14.8025 42.3124 14.8025C42.7658 14.8025 43.1544 15.0403 43.4782 15.5159C43.802 15.9915 43.964 16.6964 43.964 17.6306C43.964 18.8365 43.7697 19.7537 43.3811 20.3822ZM23.5795 37.5556C23.0372 39.1867 22.6225 40.8605 22.3354 42.5769C20.9523 42.8675 19.7215 43.0456 18.6428 43.1111C18.3936 40.9185 17.6149 39.0815 16.3066 37.6C14.9984 36.0889 13.3007 35.2593 11.2137 35.1111C13.4565 32.4741 15.0607 29.9556 16.0263 27.5556C16.9919 25.1556 17.4747 22.7407 17.4747 20.3111C17.4747 18.4444 17.0386 16.9333 16.1665 15.7778C15.2943 14.5926 14.1418 14 12.7089 14C10.0612 14 7.77173 15.5852 5.84048 18.7556C3.94038 21.8963 2.49194 25.7185 1.49516 30.2222C0.498388 34.6963 0 38.8444 0 42.6667C0 46.9926 0.716432 50.2963 2.1493 52.5778C3.58216 54.8593 5.87163 56 9.0177 56C11.1047 56 13.0048 55.2444 14.718 53.7333C16.4624 52.2222 17.646 50.237 18.269 47.7778C19.5276 47.7279 20.7273 47.594 21.8682 47.3762C21.8565 47.76 21.8507 48.1457 21.8507 48.5333C21.8507 51.1407 22.0843 53.037 22.5516 54.2222C23.0499 55.4074 23.891 56 25.0746 56C26.0403 56 26.7411 55.763 27.1772 55.2889C27.6445 54.7852 28.0494 53.837 28.392 52.4444C28.8593 50.637 29.4667 48.9185 30.2143 47.2889C30.993 45.6593 31.7406 44.3556 32.457 43.3778C33.2046 42.3704 33.7809 41.8667 34.1858 41.8667C34.5284 41.8667 34.6998 42.1037 34.6998 42.5778C34.6998 43.2889 34.4973 44.5778 34.0924 46.4444C33.6563 48.5778 33.4382 50.0593 33.4382 50.8889C33.4382 52.5481 33.8432 53.8222 34.653 54.7111C35.4629 55.5704 36.6622 56 38.2508 56C40.2132 56 41.9575 55.4963 43.4838 54.4889C44.678 53.7165 45.808 52.7786 46.874 51.6753C47.0272 51.9921 47.1913 52.2929 47.3663 52.5778C48.7992 54.8593 51.0731 56 54.188 56C55.9012 56 57.5054 55.5111 59.0005 54.5333C60.4957 53.5259 61.695 52.1333 62.5983 50.3556C63.5328 48.5778 64 46.5778 64 44.3556C64 42.7556 63.6885 41.2741 63.0655 39.9111C62.4737 38.5481 61.6015 37.437 60.449 36.5778C59.3276 35.7185 58.0038 35.2296 56.4775 35.1111C58.7202 32.4741 60.3244 29.9556 61.29 27.5556C62.2556 25.1556 62.7385 22.7407 62.7385 20.3111C62.7385 18.4444 62.3024 16.9333 61.4302 15.7778C60.558 14.5926 59.4055 14 57.9726 14C55.3249 14 53.0355 15.5852 51.1042 18.7556C49.2041 21.8963 47.7557 25.7185 46.7589 30.2222C45.7621 34.6963 45.2637 38.8444 45.2637 42.6667C45.2637 44.3055 45.3643 45.7977 45.5655 47.1431C44.3991 48.4396 43.4404 49.4067 42.6895 50.0444C41.8485 50.7556 41.1165 51.1111 40.4935 51.1111C39.5902 51.1111 39.1385 50.5185 39.1385 49.3333C39.1385 48.5037 39.4344 46.8 40.0263 44.2222C40.7116 41.2 41.0542 39.1111 41.0542 37.9556C41.0542 36.0296 40.0419 35.0667 38.0172 35.0667C36.9892 35.0667 35.8523 35.4074 34.6063 36.0889C33.3915 36.7704 32.1455 37.9111 30.8684 39.5111C29.5913 41.1111 28.4388 43.1852 27.4108 45.7333C27.5354 44.4296 27.6912 43.3333 27.8781 42.4444C28.065 41.5556 28.3142 40.5185 28.6257 39.3333C29.0929 37.6741 29.3265 36.6074 29.3265 36.1333C29.3265 35.7185 29.2019 35.437 28.9527 35.2889C28.7035 35.1407 28.2674 35.0667 27.6445 35.0667C26.4919 35.0667 25.5886 35.2741 24.9345 35.6889C24.3115 36.0741 23.8598 36.6963 23.5795 37.5556ZM11.6342 18.4C11.0113 18.4 10.326 19.2889 9.57839 21.0667C8.86196 22.8148 8.19225 25.2 7.56926 28.2222C6.94628 31.2444 6.47904 34.5481 6.16755 38.1333C8.2234 34.5481 9.85873 31.3926 11.0736 28.6667C12.3195 25.9111 12.9425 23.4667 12.9425 21.3333C12.9425 20.3852 12.8179 19.6593 12.5687 19.1556C12.3507 18.6519 12.0392 18.4 11.6342 18.4ZM9.2046 51.2889C10.1702 51.2889 11.0268 50.9037 11.7744 50.1333C12.522 49.363 13.0204 48.2519 13.2696 46.8C12.3039 46.1778 11.5564 45.363 11.0268 44.3556C10.5284 43.3481 10.2792 42.2815 10.2792 41.1556C10.2792 40.7407 10.3415 40.1778 10.4661 39.4667H10.326C9.04885 39.4667 7.97421 40.0741 7.10203 41.2889C6.261 42.4741 5.84048 44.0741 5.84048 46.0889C5.84048 47.7778 6.16755 49.0667 6.82168 49.9556C7.50697 50.8444 8.30127 51.2889 9.2046 51.2889ZM56.3373 28.6667C55.1225 31.3926 53.4871 34.5481 51.4313 38.1333C51.7428 34.5481 52.21 31.2444 52.833 28.2222C53.456 25.2 54.1257 22.8148 54.8421 21.0667C55.5897 19.2889 56.275 18.4 56.898 18.4C57.3029 18.4 57.6144 18.6519 57.8325 19.1556C58.0816 19.6593 58.2062 20.3852 58.2062 21.3333C58.2062 23.4667 57.5833 25.9111 56.3373 28.6667ZM57.0381 49.5556C56.3217 50.6519 55.434 51.2 54.3749 51.2C53.4404 51.2 52.6617 50.8 52.0387 50C51.4157 49.1704 51.1042 47.8667 51.1042 46.0889C51.1042 44.0444 51.478 42.4889 52.2256 41.4222C52.9732 40.3556 53.8921 39.8222 54.9823 39.8222C55.8545 39.8222 56.6021 40.237 57.225 41.0667C57.848 41.8963 58.1595 43.1259 58.1595 44.7556C58.1595 46.8593 57.7857 48.4593 57.0381 49.5556Z"/>
+                    </svg>
+                    `
+            }
         }
 
         function formatAmount(amount) {
@@ -1167,8 +1193,8 @@
                 getRef('wallet_popup__cta').textContent = `${type} ${asset}`
                 getRef('wallet_popup__cta').setAttribute('value', type)
                 getRef('wallet_popup__title').textContent = `${type} ${asset}`
-                getRef('get_user_amount').setAttribute('step', asset === 'FLO' ? '0.0001' : '0.01')
-                getRef('get_user_amount').setAttribute('min', asset === 'FLO' ? '0.0001' : '0.01')
+                getRef('get_user_amount').setAttribute('step', asset === 'rupee' ? '0.01' : '0.0001')
+                getRef('get_user_amount').setAttribute('min', asset === 'rupee' ? '0.01' : '0.0001')
                 if (type === 'withdraw') {
                     getRef('get_private_key').classList.add('hide')
                     getRef('wallet_quantity_selector').classList.remove('hide')
@@ -1734,9 +1760,9 @@
             getRef(`${type}_balance`).innerHTML = ''
             const templateToClone = lockedBalance ? 'locked_balance_template' : 'net_balance_template';
             const card = getRef(templateToClone).content.cloneNode(true)
-            card.querySelector('.available-balance').textContent = type === 'flo' ? parseFloat(availableBalance.toFixed(4)) : formatAmount(availableBalance)
+            card.querySelector('.available-balance').textContent = type === 'rupee' ? formatAmount(availableBalance) : parseFloat(availableBalance.toFixed(4))
             if (lockedBalance) {
-                card.querySelector('.locked-balance').textContent = type === 'flo' ? parseFloat(lockedBalance.toFixed(4)) : formatAmount(lockedBalance)
+                card.querySelector('.locked-balance').textContent = type === 'rupee' ? formatAmount(lockedBalance) : parseFloat(lockedBalance.toFixed(4))
             }
             getRef(`${type}_balance`).className = lockedBalance ? 'grid balance-card__amount-wrapper' : ''
             getRef(`${type}_balance`).parentNode.className = `balance-card ${lockedBalance ? 'is-locked' : ''}`
@@ -1747,6 +1773,7 @@
         const allTokens = {}
         async function account() {
             floExchangeAPI.getAccount(proxy.userID, await proxy.secret).then(async acc => {
+                document.body.classList.add('is-signed-in');
                 getRef("login_form").classList.add('hide')
                 getRef('user_popup_button').classList.remove('hide')
                 accountDetails = acc
@@ -1775,6 +1802,7 @@
                 console.debug("FLO", allTokens['FLO']);
                 showBalance("flo", allTokens['FLO'].net, allTokens['FLO'].locked)
                 console.log(await floExchangeAPI.getBalance(acc.floID))
+                showBalance("flobnb", allTokens['flobnb'].net, allTokens['flobnb'].locked)
 
                 //Rupee Balance
                 allTokens['rupee'] = {

From c35220df7e0168c5f9813f2da616550ff77c97f7 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Wed, 30 Mar 2022 20:18:42 +0530
Subject: [PATCH 03/11] making exchange UI mobile friendly

---
 docs/index.html | 65 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 87e4c3c..1dcb240 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -93,11 +93,11 @@
                     <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
                 </sm-form>
                 <section id="exchange_wrapper">
-                    <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content hide-on-mobile">
+                    <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content">
                         <h4>Assets</h4>
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
-                    <sm-form id="trade_form" class="user-content hide ">
+                    <sm-form id="trade_form" class="user-content hide hide-on-mobile">
                         <div class="flex space-between align-center">
                             <a href="#/exchange" class="button icon-only hide-on-desktop">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -889,23 +889,32 @@
             }
             switch (pageId) {
                 case 'exchange':
-                    if (!params.hasOwnProperty('asset') || params.asset === '') {
+                    if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') {
                         params.asset = 'FLO'
                     }
-                    if (getRef('listed_assets').querySelector('.listed-asset--active'))
-                        getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
-                    getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
-                    getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(2))
-                    getRef('traded_asset').textContent = `Trade ${params.asset}`
-                    getRef('trade_button').textContent = `${tradeType} ${params.asset}`
-                    getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(3))} ${params.asset}`
-                    getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
-                        if (tradeType === 'buy') {
-                            button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
-                        } else {
-                            button.title = `Sell ${button.textContent} of total ${params.asset}`
-                        }
-                    })
+                    if (params.hasOwnProperty('asset') && params.asset !== '') {
+                        if (getRef('listed_assets').querySelector('.listed-asset--active'))
+                            getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
+                        getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
+                        getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(2))
+                        getRef('traded_asset').textContent = `Trade ${params.asset}`
+                        getRef('trade_button').textContent = `${tradeType} ${params.asset}`
+                        getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(3))} ${params.asset}`
+                        getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
+                            if (tradeType === 'buy') {
+                                button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
+                            } else {
+                                button.title = `Sell ${button.textContent} of total ${params.asset}`
+                            }
+                        })
+                    }
+                    if (params.hasOwnProperty('asset') && params.asset !== '') {
+                        getRef('exchange_wrapper').children[0].classList.add('hide-on-mobile')
+                        getRef('exchange_wrapper').children[1].classList.remove('hide-on-mobile')
+                    } else {
+                        getRef('exchange_wrapper').children[1].classList.add('hide-on-mobile')
+                        getRef('exchange_wrapper').children[0].classList.remove('hide-on-mobile')
+                    }
                     break;
                 case 'my_orders':
                     break;
@@ -1010,6 +1019,26 @@
                 this.render()
             }
         }
+        function animateTo(element, keyframes, options) {
+            const anime = element.animate(keyframes, { ...options, fill: 'both' })
+            anime.finished.then(() => {
+                anime.commitStyles()
+                anime.cancel()
+            })
+            return anime
+        }
+        let isMobileView = false
+        const mobileQuery = window.matchMedia('(max-width: 40rem)')
+        function handleMobileChange(e) {
+            isMobileView = e.matches
+            if (!isMobileView) {
+                getRef('exchange_wrapper').children[0].style = ''
+                getRef('exchange_wrapper').children[1].style = ''
+            }
+        }
+        mobileQuery.addEventListener('change', handleMobileChange)
+
+        handleMobileChange(mobileQuery)
     </script>
     <script>
         const listedAssets = {
@@ -1815,7 +1844,7 @@
                 //My orders
                 renderUserOrders();
                 proxy.secret.then(_ => null).catch(_ => null);
-                showPage(window.location.hash)
+                showPage(window.location.hash, { firstLoad: true });
             }).catch(error => console.error(error))
         };
 

From ef7172869b7f9d004982a334f206c4e9c30c76e7 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 31 Mar 2022 00:25:58 +0530
Subject: [PATCH 04/11] UI changes

---
 docs/index.html | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 1dcb240..026b1d7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -94,7 +94,7 @@
                 </sm-form>
                 <section id="exchange_wrapper">
                     <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content">
-                        <h4>Assets</h4>
+                        <h4>Tokens</h4>
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
                     <sm-form id="trade_form" class="user-content hide hide-on-mobile">
@@ -896,10 +896,10 @@
                         if (getRef('listed_assets').querySelector('.listed-asset--active'))
                             getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
                         getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
-                        getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(2))
+                        getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
                         getRef('traded_asset').textContent = `Trade ${params.asset}`
                         getRef('trade_button').textContent = `${tradeType} ${params.asset}`
-                        getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(3))} ${params.asset}`
+                        getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}`
                         getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
                             if (tradeType === 'buy') {
                                 button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
@@ -1054,11 +1054,16 @@
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3261 19.7091C37.2823 19.3891 37.2604 19.0614 37.2604 18.7261C37.2604 17.4352 37.4871 16.2887 37.9405 15.2866C38.4101 14.2675 39.0416 13.4777 39.835 12.9172C40.6284 12.3397 41.519 12.051 42.5067 12.051C43.462 12.051 44.2797 12.3057 44.9598 12.8153C45.6399 13.3079 46.1499 13.9618 46.4899 14.7771C46.83 15.5924 47 16.4671 47 17.4013C47 18.6921 46.7652 19.8471 46.2956 20.8662C45.8261 21.8684 45.1865 22.6582 44.3769 23.2357C43.5835 23.7962 42.701 24.0764 41.7295 24.0764C40.7741 24.0764 39.9564 23.8302 39.2763 23.3376C38.8283 22.9937 38.454 22.5802 38.1535 22.0971C37.7343 22.518 37.2952 22.8891 36.8359 23.2102C36.0263 23.7877 35.1034 24.0764 34.0671 24.0764C32.966 24.0764 32.0835 23.6603 31.4197 22.828C30.7558 21.9788 30.3024 20.8323 30.0595 19.3885C29.509 19.5414 28.9261 19.6178 28.3108 19.6178C27.7764 19.6178 27.1854 19.5754 26.5377 19.4904C26.7644 20.5605 26.9506 21.758 27.0963 23.0828C27.2421 24.4076 27.3149 25.4947 27.3149 26.344C27.3149 28.1783 27.0316 29.5796 26.4649 30.5478C25.8981 31.5159 25.1533 32 24.2303 32C23.0645 32 22.2306 31.1338 21.7286 29.4013C21.2429 27.6688 21 25.0531 21 21.5541C21 18.293 21.3319 14.9894 21.9958 11.6433C22.6759 8.28026 23.5988 5.50318 24.7647 3.3121C25.9467 1.10403 27.2421 0 28.6508 0C29.4118 0 30.0028 0.356688 30.4238 1.07006C30.861 1.78344 31.0796 2.7431 31.0796 3.94905C31.0796 7.94055 28.8046 12.2887 24.2546 16.9936C24.0927 18.6582 24.0117 20.1189 24.0117 21.3758C24.0117 23.1253 24.0684 24.9172 24.1818 26.7516C24.2951 28.603 24.4813 29.5287 24.7404 29.5287C25.2262 29.5287 25.469 28.6454 25.469 26.879C25.469 25.5541 25.38 24.2718 25.2019 23.0318C25.0399 21.7919 24.8133 20.4841 24.5218 19.1083C24.5056 18.8875 24.5704 18.6072 24.7161 18.2675C24.878 17.9278 25.0723 17.6306 25.299 17.3758C25.5257 17.121 25.7281 16.9936 25.9062 16.9936C26.1167 16.9936 26.4487 17.0106 26.902 17.0446C27.4202 17.0786 27.8088 17.0955 28.0679 17.0955C28.6508 17.0955 29.2499 17.0106 29.8652 16.8408V16.7643C29.8652 14.6921 30.1162 12.3312 30.6181 9.68153C31.1363 7.03185 31.8892 4.75584 32.877 2.8535C33.8809 0.951168 35.071 0 36.4473 0C37.2246 0 37.8318 0.382166 38.2689 1.1465C38.7223 1.89384 38.949 2.9724 38.949 4.38217C38.949 5.75796 38.7061 7.3206 38.2204 9.07006C37.7346 10.8195 37.0302 12.5011 36.1073 14.1147C35.1843 15.7113 34.0995 16.9936 32.8527 17.9618C32.9174 19.1677 33.0875 20.0255 33.3627 20.535C33.638 21.0276 34.0428 21.2739 34.5771 21.2739C35.241 21.2739 35.8239 21.0786 36.3259 20.6879C36.614 20.4539 36.9474 20.1277 37.3261 19.7091ZM27.0478 4.07643C27.485 3.04034 27.8493 2.52229 28.1407 2.52229C28.5455 2.52229 28.748 3.04034 28.748 4.07643C28.7318 5.53716 28.3755 7.10828 27.6793 8.78981C26.983 10.4544 25.9872 12.0594 24.6918 13.6051C24.9995 11.7028 25.3638 9.90234 25.7848 8.20382C26.2058 6.48832 26.6268 5.11253 27.0478 4.07643ZM34.7229 4.43312C35.1762 3.15924 35.573 2.52229 35.913 2.52229C36.3664 2.52229 36.5931 3.16773 36.5931 4.4586C36.5931 5.49469 36.4554 6.65817 36.1802 7.94905C35.9211 9.22293 35.5082 10.4883 34.9415 11.7452C34.3747 12.9851 33.6866 14.0382 32.877 14.9045C32.9579 13.0531 33.1765 11.1592 33.5327 9.22293C33.889 7.28663 34.2857 5.69002 34.7229 4.43312ZM43.3811 20.3822C43.0086 21.0106 42.5472 21.3248 41.9966 21.3248C41.5109 21.3248 41.1061 21.0955 40.7822 20.6369C40.4584 20.1783 40.2964 19.465 40.2964 18.4968C40.2964 17.2739 40.4827 16.3567 40.8551 15.7452C41.2437 15.1168 41.7295 14.8025 42.3124 14.8025C42.7658 14.8025 43.1544 15.0403 43.4782 15.5159C43.802 15.9915 43.964 16.6964 43.964 17.6306C43.964 18.8365 43.7697 19.7537 43.3811 20.3822ZM23.5795 37.5556C23.0372 39.1867 22.6225 40.8605 22.3354 42.5769C20.9523 42.8675 19.7215 43.0456 18.6428 43.1111C18.3936 40.9185 17.6149 39.0815 16.3066 37.6C14.9984 36.0889 13.3007 35.2593 11.2137 35.1111C13.4565 32.4741 15.0607 29.9556 16.0263 27.5556C16.9919 25.1556 17.4747 22.7407 17.4747 20.3111C17.4747 18.4444 17.0386 16.9333 16.1665 15.7778C15.2943 14.5926 14.1418 14 12.7089 14C10.0612 14 7.77173 15.5852 5.84048 18.7556C3.94038 21.8963 2.49194 25.7185 1.49516 30.2222C0.498388 34.6963 0 38.8444 0 42.6667C0 46.9926 0.716432 50.2963 2.1493 52.5778C3.58216 54.8593 5.87163 56 9.0177 56C11.1047 56 13.0048 55.2444 14.718 53.7333C16.4624 52.2222 17.646 50.237 18.269 47.7778C19.5276 47.7279 20.7273 47.594 21.8682 47.3762C21.8565 47.76 21.8507 48.1457 21.8507 48.5333C21.8507 51.1407 22.0843 53.037 22.5516 54.2222C23.0499 55.4074 23.891 56 25.0746 56C26.0403 56 26.7411 55.763 27.1772 55.2889C27.6445 54.7852 28.0494 53.837 28.392 52.4444C28.8593 50.637 29.4667 48.9185 30.2143 47.2889C30.993 45.6593 31.7406 44.3556 32.457 43.3778C33.2046 42.3704 33.7809 41.8667 34.1858 41.8667C34.5284 41.8667 34.6998 42.1037 34.6998 42.5778C34.6998 43.2889 34.4973 44.5778 34.0924 46.4444C33.6563 48.5778 33.4382 50.0593 33.4382 50.8889C33.4382 52.5481 33.8432 53.8222 34.653 54.7111C35.4629 55.5704 36.6622 56 38.2508 56C40.2132 56 41.9575 55.4963 43.4838 54.4889C44.678 53.7165 45.808 52.7786 46.874 51.6753C47.0272 51.9921 47.1913 52.2929 47.3663 52.5778C48.7992 54.8593 51.0731 56 54.188 56C55.9012 56 57.5054 55.5111 59.0005 54.5333C60.4957 53.5259 61.695 52.1333 62.5983 50.3556C63.5328 48.5778 64 46.5778 64 44.3556C64 42.7556 63.6885 41.2741 63.0655 39.9111C62.4737 38.5481 61.6015 37.437 60.449 36.5778C59.3276 35.7185 58.0038 35.2296 56.4775 35.1111C58.7202 32.4741 60.3244 29.9556 61.29 27.5556C62.2556 25.1556 62.7385 22.7407 62.7385 20.3111C62.7385 18.4444 62.3024 16.9333 61.4302 15.7778C60.558 14.5926 59.4055 14 57.9726 14C55.3249 14 53.0355 15.5852 51.1042 18.7556C49.2041 21.8963 47.7557 25.7185 46.7589 30.2222C45.7621 34.6963 45.2637 38.8444 45.2637 42.6667C45.2637 44.3055 45.3643 45.7977 45.5655 47.1431C44.3991 48.4396 43.4404 49.4067 42.6895 50.0444C41.8485 50.7556 41.1165 51.1111 40.4935 51.1111C39.5902 51.1111 39.1385 50.5185 39.1385 49.3333C39.1385 48.5037 39.4344 46.8 40.0263 44.2222C40.7116 41.2 41.0542 39.1111 41.0542 37.9556C41.0542 36.0296 40.0419 35.0667 38.0172 35.0667C36.9892 35.0667 35.8523 35.4074 34.6063 36.0889C33.3915 36.7704 32.1455 37.9111 30.8684 39.5111C29.5913 41.1111 28.4388 43.1852 27.4108 45.7333C27.5354 44.4296 27.6912 43.3333 27.8781 42.4444C28.065 41.5556 28.3142 40.5185 28.6257 39.3333C29.0929 37.6741 29.3265 36.6074 29.3265 36.1333C29.3265 35.7185 29.2019 35.437 28.9527 35.2889C28.7035 35.1407 28.2674 35.0667 27.6445 35.0667C26.4919 35.0667 25.5886 35.2741 24.9345 35.6889C24.3115 36.0741 23.8598 36.6963 23.5795 37.5556ZM11.6342 18.4C11.0113 18.4 10.326 19.2889 9.57839 21.0667C8.86196 22.8148 8.19225 25.2 7.56926 28.2222C6.94628 31.2444 6.47904 34.5481 6.16755 38.1333C8.2234 34.5481 9.85873 31.3926 11.0736 28.6667C12.3195 25.9111 12.9425 23.4667 12.9425 21.3333C12.9425 20.3852 12.8179 19.6593 12.5687 19.1556C12.3507 18.6519 12.0392 18.4 11.6342 18.4ZM9.2046 51.2889C10.1702 51.2889 11.0268 50.9037 11.7744 50.1333C12.522 49.363 13.0204 48.2519 13.2696 46.8C12.3039 46.1778 11.5564 45.363 11.0268 44.3556C10.5284 43.3481 10.2792 42.2815 10.2792 41.1556C10.2792 40.7407 10.3415 40.1778 10.4661 39.4667H10.326C9.04885 39.4667 7.97421 40.0741 7.10203 41.2889C6.261 42.4741 5.84048 44.0741 5.84048 46.0889C5.84048 47.7778 6.16755 49.0667 6.82168 49.9556C7.50697 50.8444 8.30127 51.2889 9.2046 51.2889ZM56.3373 28.6667C55.1225 31.3926 53.4871 34.5481 51.4313 38.1333C51.7428 34.5481 52.21 31.2444 52.833 28.2222C53.456 25.2 54.1257 22.8148 54.8421 21.0667C55.5897 19.2889 56.275 18.4 56.898 18.4C57.3029 18.4 57.6144 18.6519 57.8325 19.1556C58.0816 19.6593 58.2062 20.3852 58.2062 21.3333C58.2062 23.4667 57.5833 25.9111 56.3373 28.6667ZM57.0381 49.5556C56.3217 50.6519 55.434 51.2 54.3749 51.2C53.4404 51.2 52.6617 50.8 52.0387 50C51.4157 49.1704 51.1042 47.8667 51.1042 46.0889C51.1042 44.0444 51.478 42.4889 52.2256 41.4222C52.9732 40.3556 53.8921 39.8222 54.9823 39.8222C55.8545 39.8222 56.6021 40.237 57.225 41.0667C57.848 41.8963 58.1595 43.1259 58.1595 44.7556C58.1595 46.8593 57.7857 48.4593 57.0381 49.5556Z"/>
                     </svg>
                     `
+            },
+            mining: {
+                icon: `<svg class="icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.0861 14.6534C22.3924 14.3472 22.7898 14.1486 23.2186 14.0876L44.6946 11.0319C45.2676 10.9504 45.8455 11.1432 46.2547 11.5524C47.2381 12.5358 46.8168 14.2128 45.4853 14.6146L28.6869 19.6843C28.3711 19.7796 28.0838 19.9515 27.8505 20.1848L27.0092 21.0261L28.3236 22.3404C29.0306 23.0475 29.0976 24.1522 28.5245 24.9346L52.2562 48.6662C53.0372 49.4473 53.0372 50.7136 52.2562 51.4946L51.4947 52.2561C50.7137 53.0372 49.4473 53.0372 48.6663 52.2561L24.9346 28.5245C24.1522 29.0976 23.0475 29.0306 22.3404 28.3236L21.0261 27.0092L20.1848 27.8505C19.9515 28.0838 19.7796 28.3711 19.6843 28.6869L14.6146 45.4853C14.2128 46.8168 12.5358 47.2381 11.5524 46.2547C11.1432 45.8455 10.9504 45.2675 11.0319 44.6946L14.0876 23.2186C14.1486 22.7898 14.3472 22.3924 14.6534 22.0861L15.3949 21.3447C14.8777 20.6386 14.8818 19.67 15.4072 18.9681C14.8209 18.1848 14.8837 17.0693 15.5958 16.3572L16.3573 15.5958C17.0694 14.8837 18.1848 14.8208 18.9681 15.4072C19.6701 14.8818 20.6386 14.8777 21.3447 15.3949L22.0861 14.6534Z"/>
+                    </svg>`
             }
         }
 
         function formatAmount(amount) {
-            return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+            return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 })
         }
         const render = {
             listedAsset(name, rate) {
@@ -1139,7 +1144,7 @@
             const selectedAsset = pagesData.params.asset
             getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price')
             getRef('trade_button').textContent = `${tradeType} ${selectedAsset}`
-            getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[selectedAsset].net.toFixed(3))} ${selectedAsset}`
+            getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[selectedAsset].net.toFixed(4))} ${selectedAsset}`
 
             getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
                 if (tradeType === 'buy') {
@@ -1189,11 +1194,11 @@
                 const fraction = parseFloat(target.value)
                 const selectedAsset = pagesData.params.asset
                 if (tradeType === 'buy') {
-                    console.log(parseFloat((fraction * allTokens['rupee'].net).toFixed(2)), parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4)))
-                    getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(2))
+                    console.log(parseFloat((fraction * allTokens['rupee'].net).toFixed(4)), parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4)))
+                    getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(4))
                     getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / unitValue).toFixed(4))
                 } else {
-                    getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(2))
+                    getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * floGlobals.exchangeRates[selectedAsset]).toFixed(4))
                     getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(4))
                 }
             }
@@ -1201,11 +1206,11 @@
         getRef('get_price').addEventListener('keyup', e => {
             const unitValue = parseFloat(getRef('get_price').value) || floGlobals.exchangeRates[pagesData.params.asset]
             const quantity = parseFloat(getRef('get_quantity').value) || 0
-            getRef('get_total').value = parseFloat((quantity * unitValue).toFixed(2)) || 0
+            getRef('get_total').value = parseFloat((quantity * unitValue).toFixed(4)) || 0
         })
         getRef('get_quantity').addEventListener('keyup', e => {
             const unitValue = parseFloat(getRef('get_price').value)
-            getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(2)) || 0
+            getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(4)) || 0
         })
         getRef('get_total').addEventListener('keyup', e => {
             const unitValue = parseFloat(getRef('get_price').value)
@@ -1222,8 +1227,8 @@
                 getRef('wallet_popup__cta').textContent = `${type} ${asset}`
                 getRef('wallet_popup__cta').setAttribute('value', type)
                 getRef('wallet_popup__title').textContent = `${type} ${asset}`
-                getRef('get_user_amount').setAttribute('step', asset === 'rupee' ? '0.01' : '0.0001')
-                getRef('get_user_amount').setAttribute('min', asset === 'rupee' ? '0.01' : '0.0001')
+                getRef('get_user_amount').setAttribute('step', asset === 'rupee' ? '0.01' : '0.00001')
+                getRef('get_user_amount').setAttribute('min', asset === 'rupee' ? '0.01' : '0.00001')
                 if (type === 'withdraw') {
                     getRef('get_private_key').classList.add('hide')
                     getRef('wallet_quantity_selector').classList.remove('hide')
@@ -1761,7 +1766,7 @@
                         }));
                     })
                 }
-                getRef('get_price').value = parseFloat(parseFloat(rates["FLO"]).toFixed(2))
+                getRef('get_price').value = parseFloat(parseFloat(rates["FLO"]).toFixed(4))
             }).catch(error => console.error(error))
         }
 

From 7e70902971d4bbc72299b41633e525d9b1ccf009 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 31 Mar 2022 00:51:10 +0530
Subject: [PATCH 05/11] updating

---
 docs/scripts/floExchangeAPI.js | 10 +++++++
 src/app.js                     |  1 +
 src/coupling.js                |  2 +-
 src/market.js                  | 20 +++++++++++---
 src/price.js                   | 50 ++++++++++++++++++++++++++++++----
 src/request.js                 | 20 ++++++++++++++
 6 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/docs/scripts/floExchangeAPI.js b/docs/scripts/floExchangeAPI.js
index 8fac499..dd40c14 100644
--- a/docs/scripts/floExchangeAPI.js
+++ b/docs/scripts/floExchangeAPI.js
@@ -577,6 +577,16 @@
         });
     }
 
+    exchangeAPI.getRateHistory = function(asset, duration = null) {
+        return new Promise((resolve, reject) => {
+            fetch_api('/rate-history?asset=' + asset + (duration ? '&duration=' + duration : ""))
+                .then(result => responseParse(result)
+                    .then(result => resolve(result))
+                    .catch(error => reject(error)))
+                .catch(error => reject(error));
+        });
+    }
+
     exchangeAPI.getBalance = function(floID = null, token = null) {
         return new Promise((resolve, reject) => {
             if (!floID && !token)
diff --git a/src/app.js b/src/app.js
index ac5ec04..a461304 100644
--- a/src/app.js
+++ b/src/app.js
@@ -75,6 +75,7 @@ module.exports = function App(secret, DB) {
 
     //get rates, balance and tx
     app.get('/get-rates', Request.GetRates);
+    app.get('/rate-history', Request.GetRateHistory);
     app.get('/get-balance', Request.GetBalance);
     app.get('/get-transaction', Request.GetTransaction);
 
diff --git a/src/coupling.js b/src/coupling.js
index ebca484..56a92cb 100644
--- a/src/coupling.js
+++ b/src/coupling.js
@@ -11,7 +11,7 @@ var DB; //container for database
 
 function startCouplingForAsset(asset) {
     price.getRates(asset).then(cur_rate => {
-        cur_rate = cur_rate.toFixed(3);
+        cur_rate = cur_rate.toFixed(8);
         group.getBestPairs(asset, cur_rate)
             .then(bestPairQueue => processCoupling(bestPairQueue))
             .catch(error => console.error("initiateCoupling", error))
diff --git a/src/market.js b/src/market.js
index bd6bd28..d438c7e 100644
--- a/src/market.js
+++ b/src/market.js
@@ -30,6 +30,17 @@ function logout(floID) {
     })
 }
 
+function getRateHistory(asset, duration) {
+    return new Promise((resolve, reject) => {
+        if (!asset || !assetList.includes(asset))
+            reject(INVALID(`Invalid asset(${asset})`));
+        else
+            coupling.price.getHistory(asset, duration)
+            .then(result => resolve(result))
+            .catch(error => reject(error))
+    })
+}
+
 function getBalance(floID, token) {
     return new Promise((resolve, reject) => {
         if (floID && !floCrypto.validateAddr(floID))
@@ -58,7 +69,7 @@ getBalance.floID_token = (floID, token) => new Promise((resolve, reject) => {
     ).then(result => resolve({
         floID,
         token,
-        balance: result[0].balance.toFixed(4)
+        balance: result[0].balance.toFixed(8)
     })).catch(error => reject(error))
 });
 
@@ -71,9 +82,9 @@ getBalance.floID = (floID) => new Promise((resolve, reject) => {
             floID,
             balance: {}
         };
-        response.balance[floGlobals.currency] = result[0][0].balance.toFixed(4);
+        response.balance[floGlobals.currency] = result[0][0].balance.toFixed(8);
         for (let row of result[1])
-            response.balance[row.asset] = row.balance.toFixed(4);
+            response.balance[row.asset] = row.balance.toFixed(8);
         resolve(response);
     }).catch(error => reject(error))
 });
@@ -88,7 +99,7 @@ getBalance.token = (token) => new Promise((resolve, reject) => {
             balance: {}
         };
         for (let row of result)
-            response.balance[row.floID] = row.balance.toFixed(4);
+            response.balance[row.floID] = row.balance.toFixed(8);
         resolve(response);
     }).catch(error => reject(error))
 });
@@ -621,6 +632,7 @@ module.exports = {
     addBuyOrder,
     addSellOrder,
     cancelOrder,
+    getRateHistory,
     getBalance,
     getAccountDetails,
     getTransactionDetails,
diff --git a/src/price.js b/src/price.js
index c2e439d..3c6e91a 100644
--- a/src/price.js
+++ b/src/price.js
@@ -20,14 +20,14 @@ var currentRate = {}, //container for FLO price (from API or by model)
 const updateLastTime = asset => lastTime[asset] = Date.now();
 
 //store FLO price in DB every 1 hr
-function storeRate(asset, rate) {
-    DB.query("INSERT INTO PriceHistory (asset, rate) VALUE (?, ?)", [asset, rate.toFixed(3)])
+function storeHistory(asset, rate) {
+    DB.query("INSERT INTO PriceHistory (asset, rate) VALUE (?, ?)", [asset, rate.toFixed(8)])
         .then(_ => null).catch(error => console.error(error))
 }
 setInterval(() => {
     for (let asset in currentRate)
-        storeRate(asset, currentRate[asset]);
-}, REC_HISTORY_INTERVAL)
+        storeHistory(asset, currentRate[asset]);
+}, REC_HISTORY_INTERVAL);
 
 function getPastRate(asset, hrs = 24) {
     return new Promise((resolve, reject) => {
@@ -37,6 +37,45 @@ function getPastRate(asset, hrs = 24) {
     });
 }
 
+function getHistory(asset, duration) {
+    return new Promise((resolve, reject) => {
+        duration = getHistory.validateDuration(duration);
+        let statement = "SELECT " +
+            (!duration || duration.endsWith("month") || duration.endsWith("year") ? "DATE(rec_time) AS time, AVG(rate) as rate" : "rec_time AS time, rate") +
+            " FROM PriceHistory WHERE asset=?" + (duration ? " AND rec_time >= NOW() - INTERVAL " + duration : "") +
+            (!duration || duration.endsWith("month") || duration.endsWith("year") ? " GROUP BY time" : "") +
+            " ORDER BY time";
+        DB.query(statement, asset)
+            .then(result => resolve(result))
+            .catch(error => reject(error))
+    });
+}
+
+getHistory.validateDuration = duration => {
+    let n = duration.match(/\d+/g),
+        d = duration.match(/\D+/g);
+    n = n ? n[0] || 1 : 1;
+    d = d ? d[0].replace(/[-\s]/g, '') : "";
+    switch (d.toLowerCase()) {
+        case "day":
+        case "days":
+            return n + " day";
+        case "week":
+        case "weeks":
+            return n + " week";
+        case "month":
+        case "months":
+            return n + " month";
+        case "year":
+        case "years":
+            return n + " year";
+        case "alltime":
+            return null;
+        default:
+            return '1 day';
+    }
+}
+
 function loadRate(asset) {
     return new Promise((resolve, reject) => {
         if (typeof currentRate[asset] !== "undefined")
@@ -60,7 +99,7 @@ function fetchRates() {
             fetchRates.USD_INR().then(INR_rate => {
                 let FLO_INR_rate = FLO_rate * INR_rate;
                 console.debug('Rates:', FLO_rate, INR_rate, FLO_INR_rate);
-                storeRate(FLO_INR_rate);
+                storeHistory(FLO_INR_rate);
                 resolve(FLO_INR_rate);
             }).catch(error => reject(error))
         }).catch(error => reject(error))
@@ -153,6 +192,7 @@ function checkForRatedSellers(asset) {
 
 module.exports = {
     getRates,
+    getHistory,
     updateLastTime,
     noOrder(asset, buy, sell) {
         noBuyOrder[asset] = buy;
diff --git a/src/request.js b/src/request.js
index 424ccfb..d9ad6b7 100644
--- a/src/request.js
+++ b/src/request.js
@@ -334,6 +334,25 @@ function GetRates(req, res) {
 
 }
 
+function GetRateHistory(req, res) {
+    if (!serving)
+        res.status(INVALID.e_code).send(INVALID_SERVER_MSG);
+    else {
+        let asset = req.query.asset,
+            duration = req.query.duration || "";
+        market.getRateHistory(asset, duration)
+            .then(result => res.send(result))
+            .catch(error => {
+                if (error instanceof INVALID)
+                    res.status(INVALID.e_code).send(error.message);
+                else {
+                    console.error(error);
+                    res.status(INTERNAL.e_code).send("Unable to process! Try again later!");
+                }
+            });
+    }
+}
+
 function GetTransaction(req, res) {
     if (!serving)
         res.status(INVALID.e_code).send(INVALID_SERVER_MSG);
@@ -385,6 +404,7 @@ module.exports = {
     ListBuyOrders,
     ListTradeTransactions,
     GetRates,
+    GetRateHistory,
     GetTransaction,
     GetBalance,
     Account,

From d060d573cfabc3c01e2dfcce6384a149f1597ad8 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 31 Mar 2022 18:50:19 +0530
Subject: [PATCH 06/11] Adding charting feature

---
 docs/css/components.js |   3 ++
 docs/css/main.css      |  46 +++++++++++++++---
 docs/css/main.min.css  |   2 +-
 docs/css/main.scss     |  47 ++++++++++++++----
 docs/index.html        | 106 ++++++++++++++++++++++++++++++++++++++---
 5 files changed, 182 insertions(+), 22 deletions(-)

diff --git a/docs/css/components.js b/docs/css/components.js
index ab48ccc..9753e20 100644
--- a/docs/css/components.js
+++ b/docs/css/components.js
@@ -1544,6 +1544,9 @@ class ThemeToggle extends HTMLElement {
     static get observedAttributes() {
         return ['checked'];
     }
+    get theme() {
+        return this.hasTheme;
+    }
 
     daylight() {
         this.hasTheme = 'light';
diff --git a/docs/css/main.css b/docs/css/main.css
index 26865fb..a9ac69e 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -457,8 +457,8 @@ details[open] > summary .icon {
 
 strip-select {
   --gap: 0;
-  background-color: var(--accent-color--light);
-  border-radius: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.2rem;
 }
 
 strip-option {
@@ -469,10 +469,10 @@ strip-option {
   --active-option-background-color: var(--accent-color);
 }
 strip-option:first-of-type {
-  --border-radius: 0.3rem 0 0 0.3rem;
+  --border-radius: 0.2rem 0 0 0.2rem;
 }
 strip-option:last-of-type {
-  --border-radius: 0 0.3rem 0.3rem 0;
+  --border-radius: 0 0.2rem 0.2rem 0;
 }
 
 sm-select,
@@ -1049,9 +1049,9 @@ sm-checkbox {
 
   #home {
     display: grid;
-    grid-template-columns: 12rem 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas: "header header" "nav .";
+    grid-template-areas: "header header" "nav pages";
   }
 
   #main_header {
@@ -1084,13 +1084,33 @@ sm-checkbox {
     background-color: rgba(var(--text-color), 0.06);
   }
 
+  #pages_container {
+    grid-area: pages;
+  }
+
+  .is-signed-in #exchange {
+    display: flex;
+    width: 100%;
+  }
   .is-signed-in #exchange_wrapper {
     display: grid;
+    width: 100%;
+    height: 100%;
     gap: 1.5rem;
-    grid-template-columns: 16rem 1fr;
+    grid-template-columns: 16rem minmax(0, 1fr);
     align-items: flex-start;
   }
 
+  #price_history_chart {
+    overflow: hidden;
+    border-radius: 0.5rem;
+    height: 20rem;
+  }
+
+  #asset_list_wrapper {
+    grid-row: 1/3;
+  }
+
   .listed-asset {
     padding: 1rem;
   }
@@ -1107,10 +1127,22 @@ sm-checkbox {
     background-color: var(--accent-color);
   }
 }
+@media screen and (max-width: 64rem) and (min-width: 40rem) {
+  .main_navbar__item .icon {
+    margin-right: 0;
+  }
+  .main_navbar__item .item__title {
+    display: none;
+  }
+}
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
+
+  .is-signed-in #exchange_wrapper {
+    grid-template-columns: 16rem minmax(0, 1fr) 20rem;
+  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index 85b8b28..12a084b 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:12rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}.is-signed-in #exchange_wrapper{display:grid;gap:1.5rem;grid-template-columns:16rem 1fr;align-items:flex-start}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}.is-signed-in #exchange_wrapper{grid-template-columns:16rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index f02235f..76b73f0 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -443,8 +443,8 @@ details {
 }
 strip-select {
   --gap: 0;
-  background-color: var(--accent-color--light);
-  border-radius: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.2rem;
 }
 strip-option {
   font-weight: 500;
@@ -453,10 +453,10 @@ strip-option {
   --active-option-color: rgba(var(--background-color), 1);
   --active-option-background-color: var(--accent-color);
   &:first-of-type {
-    --border-radius: 0.3rem 0 0 0.3rem;
+    --border-radius: 0.2rem 0 0 0.2rem;
   }
   &:last-of-type {
-    --border-radius: 0 0.3rem 0.3rem 0;
+    --border-radius: 0 0.2rem 0.2rem 0;
   }
 }
 sm-select,
@@ -973,9 +973,9 @@ sm-checkbox {
   }
   #home {
     display: grid;
-    grid-template-columns: 12rem 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas: "header header" "nav .";
+    grid-template-areas: "header header" "nav pages";
   }
   #main_header {
     grid-area: header;
@@ -1004,14 +1004,32 @@ sm-checkbox {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
+  #pages_container {
+    grid-area: pages;
+  }
   .is-signed-in {
+    #exchange {
+      display: flex;
+      width: 100%;
+    }
     #exchange_wrapper {
       display: grid;
+      width: 100%;
+      height: 100%;
       gap: 1.5rem;
-      grid-template-columns: 16rem 1fr;
+      grid-template-columns: 16rem minmax(0, 1fr);
       align-items: flex-start;
     }
   }
+  #price_history_chart {
+    overflow: hidden;
+    border-radius: 0.5rem;
+    height: 20rem;
+    // grid-column: 1/-1;
+  }
+  #asset_list_wrapper {
+    grid-row: 1/3;
+  }
   .listed-asset {
     padding: 1rem;
     &--active {
@@ -1028,12 +1046,25 @@ sm-checkbox {
     }
   }
 }
-@media screen and (max-width: 64rem) {
+@media screen and (max-width: 64rem) and (min-width: 40rem) {
+  .main_navbar__item {
+    .icon {
+      margin-right: 0;
+    }
+    .item__title {
+      display: none;
+    }
+  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
+  .is-signed-in {
+    #exchange_wrapper {
+      grid-template-columns: 16rem minmax(0, 1fr) 20rem;
+    }
+  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {
diff --git a/docs/index.html b/docs/index.html
index 026b1d7..2f1eb02 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,6 +18,7 @@
     <script src="scripts/floBlockchainAPI.js"></script>
     <script src="scripts/floTokenAPI.js"></script>
     <script src="scripts/floExchangeAPI.js"></script>
+    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
     <script>console.debug(floExchangeAPI);</script>
 </head>
 
@@ -54,7 +55,7 @@
                     <h4>RanchiMall Market</h4>
                 </div>
             </div>
-            <theme-toggle></theme-toggle>
+            <theme-toggle id="theme_toggle"></theme-toggle>
             <button id="user_popup_button" class="hide" onclick="showPopup('user_popup')">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
@@ -93,10 +94,36 @@
                     <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
                 </sm-form>
                 <section id="exchange_wrapper">
-                    <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content">
+                    <div id="asset_list_wrapper" class="grid gap-1 align-start hide user-content">
                         <h4>Tokens</h4>
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
+                    <div id="price_chart_wrapper" class="flex direction-column gap-0-5">
+                        <div class="flex align-center space-between" style="z-index: 5;">
+                            <h4 id="chart_asset"></h4>
+                            <div class="flex align-center justify-right gap-0-5">
+                                <sm-select>
+                                    <sm-option value="1">1</sm-option>
+                                    <sm-option value="2">2</sm-option>
+                                    <sm-option value="3">3</sm-option>
+                                    <sm-option value="4">4</sm-option>
+                                    <sm-option value="5">5</sm-option>
+                                    <sm-option value="6">6</sm-option>
+                                    <sm-option value="7">7</sm-option>
+                                </sm-select>
+                                <strip-select>
+                                    <strip-option value="day" selected>D</strip-option>
+                                    <strip-option value="week">W</strip-option>
+                                    <strip-option value="month">M</strip-option>
+                                    <strip-option value="year">Y</strip-option>
+                                    <strip-option value="all-time">ALL</strip-option>
+                                </strip-select>
+                            </div>
+                        </div>
+                        <div class="flex" style="position: relative;">
+                            <div id="price_history_chart"></div>
+                        </div>
+                    </div>
                     <sm-form id="trade_form" class="user-content hide hide-on-mobile">
                         <div class="flex space-between align-center">
                             <a href="#/exchange" class="button icon-only hide-on-desktop">
@@ -853,7 +880,48 @@
             lastPage: '',
             params: {}
         }
+        function getChartTheme() {
+            const theme = getRef('theme_toggle').value
+            const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
+            const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff'
+            return {
+                chart: {
+                    layout: {
+                        backgroundColor: `rgba(${textColor}, 0.01)`,
+                        lineColor: `rgba(${textColor}, 0.1)`,
+                        textColor: `rgba(${textColor}, 0.8)`,
+                    },
+                    watermark: {
+                        color: 'rgba(0, 0, 0, 0)',
+                    },
+                    crosshair: {
+                        color: '#758696',
+                    },
+                    grid: {
+                        vertLines: {
+                            color: '#2B2B43',
+                        },
+                        horzLines: {
+                            color: '#363C4E',
+                        },
+                    },
+                },
+                series: {
+                    color: accentColor
+                }
+            }
+        }
+        function setChartTheme(e) {
+            const themeToApply = getChartTheme()
+            chart.applyOptions(themeToApply.chart);
+            lineSeries.applyOptions(themeToApply.series);
+        }
 
+        document.addEventListener('themechange', setChartTheme)
+
+
+        let chart
+        let lineSeries
         async function showPage(targetPage, options = {}) {
             const { firstLoad, hashChange } = options
             let pageId
@@ -896,6 +964,7 @@
                         if (getRef('listed_assets').querySelector('.listed-asset--active'))
                             getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
                         getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
+                        getRef('chart_asset').textContent = `${params.asset}/INR`
                         getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
                         getRef('traded_asset').textContent = `Trade ${params.asset}`
                         getRef('trade_button').textContent = `${tradeType} ${params.asset}`
@@ -909,12 +978,37 @@
                         })
                     }
                     if (params.hasOwnProperty('asset') && params.asset !== '') {
-                        getRef('exchange_wrapper').children[0].classList.add('hide-on-mobile')
-                        getRef('exchange_wrapper').children[1].classList.remove('hide-on-mobile')
+                        getRef('asset_list_wrapper').classList.add('hide-on-mobile')
+                        getRef('trade_form').classList.remove('hide-on-mobile')
+
+                        if (firstLoad) {
+                            chart = LightweightCharts.createChart(getRef('price_history_chart'), {
+                                width: 800, height: 600,
+                                timeScale: {
+                                    timeVisible: true,
+                                },
+                            });
+                            lineSeries = chart.addLineSeries();
+                            setChartTheme()
+                        }
+                        floExchangeAPI.getRateHistory(params.asset, '2 weeks').then(data => {
+                            data = data.map(({ time, rate }) => {
+                                return {
+                                    time: new Date(time).getTime() / 1000,
+                                    value: rate
+                                }
+                            })
+                            lineSeries.setData(data);
+                            new ResizeObserver(entries => {
+                                const { width, height } = entries[0].contentRect;
+                                chart.applyOptions({ width, height });
+                            }).observe(getRef('price_history_chart').parentNode);
+                        })
                     } else {
-                        getRef('exchange_wrapper').children[1].classList.add('hide-on-mobile')
-                        getRef('exchange_wrapper').children[0].classList.remove('hide-on-mobile')
+                        getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
+                        getRef('trade_form').classList.add('hide-on-mobile')
                     }
+
                     break;
                 case 'my_orders':
                     break;

From 883a69824895ae0fd3efdb10d108fc2dceede44a Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 31 Mar 2022 22:51:09 +0530
Subject: [PATCH 07/11] Added dynamic asset balance rendering

---
 docs/css/main.css     |   5 ++
 docs/css/main.min.css |   2 +-
 docs/css/main.scss    |   5 ++
 docs/index.html       | 154 ++++++++++++++++++++----------------------
 4 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/docs/css/main.css b/docs/css/main.css
index a9ac69e..426c93c 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -1135,6 +1135,11 @@ sm-checkbox {
     display: none;
   }
 }
+@media screen and (min-width: 64rem) {
+  #home {
+    grid-template-columns: 10rem 1fr;
+  }
+}
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index 12a084b..bcf73e1 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}.is-signed-in #exchange_wrapper{grid-template-columns:16rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}.is-signed-in #exchange_wrapper{grid-template-columns:16rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index 76b73f0..e4791e4 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -1056,6 +1056,11 @@ sm-checkbox {
     }
   }
 }
+@media screen and (min-width: 64rem) {
+  #home {
+    grid-template-columns: 10rem 1fr;
+  }
+}
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
diff --git a/docs/index.html b/docs/index.html
index 2f1eb02..6ab68f5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -95,30 +95,18 @@
                 </sm-form>
                 <section id="exchange_wrapper">
                     <div id="asset_list_wrapper" class="grid gap-1 align-start hide user-content">
-                        <h4>Tokens</h4>
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
-                    <div id="price_chart_wrapper" class="flex direction-column gap-0-5">
+                    <div id="price_chart_wrapper" class="flex direction-column gap-0-5 hide user-content">
                         <div class="flex align-center space-between" style="z-index: 5;">
-                            <h4 id="chart_asset"></h4>
-                            <div class="flex align-center justify-right gap-0-5">
-                                <sm-select>
-                                    <sm-option value="1">1</sm-option>
-                                    <sm-option value="2">2</sm-option>
-                                    <sm-option value="3">3</sm-option>
-                                    <sm-option value="4">4</sm-option>
-                                    <sm-option value="5">5</sm-option>
-                                    <sm-option value="6">6</sm-option>
-                                    <sm-option value="7">7</sm-option>
-                                </sm-select>
-                                <strip-select>
-                                    <strip-option value="day" selected>D</strip-option>
-                                    <strip-option value="week">W</strip-option>
-                                    <strip-option value="month">M</strip-option>
-                                    <strip-option value="year">Y</strip-option>
-                                    <strip-option value="all-time">ALL</strip-option>
-                                </strip-select>
-                            </div>
+                            <div id="chart_asset"></div>
+                            <strip-select>
+                                <strip-option value="day" selected>D</strip-option>
+                                <strip-option value="week">W</strip-option>
+                                <strip-option value="month">M</strip-option>
+                                <strip-option value="year">Y</strip-option>
+                                <strip-option value="all-time">ALL</strip-option>
+                            </strip-select>
                         </div>
                         <div class="flex" style="position: relative;">
                             <div id="price_history_chart"></div>
@@ -244,39 +232,7 @@
                 </div>
                 <div class="grid gap-0-5">
                     <h4>Balance</h4>
-                    <div class="grid gap-1">
-                        <div class="balance-card">
-                            <div class="balance-card__icon">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path
-                                        d="M15.3,4.91a4.78,4.78,0,0,0-.39-.5l3.14,0L18.75,2H6L5.25,4.6H9a4.22,4.22,0,0,1,3.06,1,3.16,3.16,0,0,1,.75,1.24H5.93L5.25,9.22h7.62a3.15,3.15,0,0,1-.34.82,3,3,0,0,1-1.37,1.17,5.34,5.34,0,0,1-2.2.4H5.5l0,1.9,7,8.49h3.56v-.17L9.68,14l.09,0a8.07,8.07,0,0,0,3.65-1,5,5,0,0,0,2-2.09A6.29,6.29,0,0,0,16,9.22h2.1l.69-2.42H15.93A5.93,5.93,0,0,0,15.3,4.91Z" />
-                                </svg>
-                            </div>
-                            <div class="balance-card__token">Rupee</div>
-                            <div id="rupee_balance"></div>
-                        </div>
-                        <div class="balance-card">
-                            <div class="balance-card__icon">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path
-                                        d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
-                                </svg>
-                            </div>
-                            <div class="balance-card__token">FLO</div>
-                            <div id="flo_balance"></div>
-                        </div>
-                        <div class="balance-card">
-                            <div class="balance-card__icon">
-                                <svg class="icon" width="64" height="56" viewBox="0 0 64 56" fill="none"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <path fill-rule="evenodd" clip-rule="evenodd"
-                                        d="M37.3261 19.7091C37.2823 19.3891 37.2604 19.0614 37.2604 18.7261C37.2604 17.4352 37.4871 16.2887 37.9405 15.2866C38.4101 14.2675 39.0416 13.4777 39.835 12.9172C40.6284 12.3397 41.519 12.051 42.5067 12.051C43.462 12.051 44.2797 12.3057 44.9598 12.8153C45.6399 13.3079 46.1499 13.9618 46.4899 14.7771C46.83 15.5924 47 16.4671 47 17.4013C47 18.6921 46.7652 19.8471 46.2956 20.8662C45.8261 21.8684 45.1865 22.6582 44.3769 23.2357C43.5835 23.7962 42.701 24.0764 41.7295 24.0764C40.7741 24.0764 39.9564 23.8302 39.2763 23.3376C38.8283 22.9937 38.454 22.5802 38.1535 22.0971C37.7343 22.518 37.2952 22.8891 36.8359 23.2102C36.0263 23.7877 35.1034 24.0764 34.0671 24.0764C32.966 24.0764 32.0835 23.6603 31.4197 22.828C30.7558 21.9788 30.3024 20.8323 30.0595 19.3885C29.509 19.5414 28.9261 19.6178 28.3108 19.6178C27.7764 19.6178 27.1854 19.5754 26.5377 19.4904C26.7644 20.5605 26.9506 21.758 27.0963 23.0828C27.2421 24.4076 27.3149 25.4947 27.3149 26.344C27.3149 28.1783 27.0316 29.5796 26.4649 30.5478C25.8981 31.5159 25.1533 32 24.2303 32C23.0645 32 22.2306 31.1338 21.7286 29.4013C21.2429 27.6688 21 25.0531 21 21.5541C21 18.293 21.3319 14.9894 21.9958 11.6433C22.6759 8.28026 23.5988 5.50318 24.7647 3.3121C25.9467 1.10403 27.2421 0 28.6508 0C29.4118 0 30.0028 0.356688 30.4238 1.07006C30.861 1.78344 31.0796 2.7431 31.0796 3.94905C31.0796 7.94055 28.8046 12.2887 24.2546 16.9936C24.0927 18.6582 24.0117 20.1189 24.0117 21.3758C24.0117 23.1253 24.0684 24.9172 24.1818 26.7516C24.2951 28.603 24.4813 29.5287 24.7404 29.5287C25.2262 29.5287 25.469 28.6454 25.469 26.879C25.469 25.5541 25.38 24.2718 25.2019 23.0318C25.0399 21.7919 24.8133 20.4841 24.5218 19.1083C24.5056 18.8875 24.5704 18.6072 24.7161 18.2675C24.878 17.9278 25.0723 17.6306 25.299 17.3758C25.5257 17.121 25.7281 16.9936 25.9062 16.9936C26.1167 16.9936 26.4487 17.0106 26.902 17.0446C27.4202 17.0786 27.8088 17.0955 28.0679 17.0955C28.6508 17.0955 29.2499 17.0106 29.8652 16.8408V16.7643C29.8652 14.6921 30.1162 12.3312 30.6181 9.68153C31.1363 7.03185 31.8892 4.75584 32.877 2.8535C33.8809 0.951168 35.071 0 36.4473 0C37.2246 0 37.8318 0.382166 38.2689 1.1465C38.7223 1.89384 38.949 2.9724 38.949 4.38217C38.949 5.75796 38.7061 7.3206 38.2204 9.07006C37.7346 10.8195 37.0302 12.5011 36.1073 14.1147C35.1843 15.7113 34.0995 16.9936 32.8527 17.9618C32.9174 19.1677 33.0875 20.0255 33.3627 20.535C33.638 21.0276 34.0428 21.2739 34.5771 21.2739C35.241 21.2739 35.8239 21.0786 36.3259 20.6879C36.614 20.4539 36.9474 20.1277 37.3261 19.7091ZM27.0478 4.07643C27.485 3.04034 27.8493 2.52229 28.1407 2.52229C28.5455 2.52229 28.748 3.04034 28.748 4.07643C28.7318 5.53716 28.3755 7.10828 27.6793 8.78981C26.983 10.4544 25.9872 12.0594 24.6918 13.6051C24.9995 11.7028 25.3638 9.90234 25.7848 8.20382C26.2058 6.48832 26.6268 5.11253 27.0478 4.07643ZM34.7229 4.43312C35.1762 3.15924 35.573 2.52229 35.913 2.52229C36.3664 2.52229 36.5931 3.16773 36.5931 4.4586C36.5931 5.49469 36.4554 6.65817 36.1802 7.94905C35.9211 9.22293 35.5082 10.4883 34.9415 11.7452C34.3747 12.9851 33.6866 14.0382 32.877 14.9045C32.9579 13.0531 33.1765 11.1592 33.5327 9.22293C33.889 7.28663 34.2857 5.69002 34.7229 4.43312ZM43.3811 20.3822C43.0086 21.0106 42.5472 21.3248 41.9966 21.3248C41.5109 21.3248 41.1061 21.0955 40.7822 20.6369C40.4584 20.1783 40.2964 19.465 40.2964 18.4968C40.2964 17.2739 40.4827 16.3567 40.8551 15.7452C41.2437 15.1168 41.7295 14.8025 42.3124 14.8025C42.7658 14.8025 43.1544 15.0403 43.4782 15.5159C43.802 15.9915 43.964 16.6964 43.964 17.6306C43.964 18.8365 43.7697 19.7537 43.3811 20.3822ZM23.5795 37.5556C23.0372 39.1867 22.6225 40.8605 22.3354 42.5769C20.9523 42.8675 19.7215 43.0456 18.6428 43.1111C18.3936 40.9185 17.6149 39.0815 16.3066 37.6C14.9984 36.0889 13.3007 35.2593 11.2137 35.1111C13.4565 32.4741 15.0607 29.9556 16.0263 27.5556C16.9919 25.1556 17.4747 22.7407 17.4747 20.3111C17.4747 18.4444 17.0386 16.9333 16.1665 15.7778C15.2943 14.5926 14.1418 14 12.7089 14C10.0612 14 7.77173 15.5852 5.84048 18.7556C3.94038 21.8963 2.49194 25.7185 1.49516 30.2222C0.498388 34.6963 0 38.8444 0 42.6667C0 46.9926 0.716432 50.2963 2.1493 52.5778C3.58216 54.8593 5.87163 56 9.0177 56C11.1047 56 13.0048 55.2444 14.718 53.7333C16.4624 52.2222 17.646 50.237 18.269 47.7778C19.5276 47.7279 20.7273 47.594 21.8682 47.3762C21.8565 47.76 21.8507 48.1457 21.8507 48.5333C21.8507 51.1407 22.0843 53.037 22.5516 54.2222C23.0499 55.4074 23.891 56 25.0746 56C26.0403 56 26.7411 55.763 27.1772 55.2889C27.6445 54.7852 28.0494 53.837 28.392 52.4444C28.8593 50.637 29.4667 48.9185 30.2143 47.2889C30.993 45.6593 31.7406 44.3556 32.457 43.3778C33.2046 42.3704 33.7809 41.8667 34.1858 41.8667C34.5284 41.8667 34.6998 42.1037 34.6998 42.5778C34.6998 43.2889 34.4973 44.5778 34.0924 46.4444C33.6563 48.5778 33.4382 50.0593 33.4382 50.8889C33.4382 52.5481 33.8432 53.8222 34.653 54.7111C35.4629 55.5704 36.6622 56 38.2508 56C40.2132 56 41.9575 55.4963 43.4838 54.4889C44.678 53.7165 45.808 52.7786 46.874 51.6753C47.0272 51.9921 47.1913 52.2929 47.3663 52.5778C48.7992 54.8593 51.0731 56 54.188 56C55.9012 56 57.5054 55.5111 59.0005 54.5333C60.4957 53.5259 61.695 52.1333 62.5983 50.3556C63.5328 48.5778 64 46.5778 64 44.3556C64 42.7556 63.6885 41.2741 63.0655 39.9111C62.4737 38.5481 61.6015 37.437 60.449 36.5778C59.3276 35.7185 58.0038 35.2296 56.4775 35.1111C58.7202 32.4741 60.3244 29.9556 61.29 27.5556C62.2556 25.1556 62.7385 22.7407 62.7385 20.3111C62.7385 18.4444 62.3024 16.9333 61.4302 15.7778C60.558 14.5926 59.4055 14 57.9726 14C55.3249 14 53.0355 15.5852 51.1042 18.7556C49.2041 21.8963 47.7557 25.7185 46.7589 30.2222C45.7621 34.6963 45.2637 38.8444 45.2637 42.6667C45.2637 44.3055 45.3643 45.7977 45.5655 47.1431C44.3991 48.4396 43.4404 49.4067 42.6895 50.0444C41.8485 50.7556 41.1165 51.1111 40.4935 51.1111C39.5902 51.1111 39.1385 50.5185 39.1385 49.3333C39.1385 48.5037 39.4344 46.8 40.0263 44.2222C40.7116 41.2 41.0542 39.1111 41.0542 37.9556C41.0542 36.0296 40.0419 35.0667 38.0172 35.0667C36.9892 35.0667 35.8523 35.4074 34.6063 36.0889C33.3915 36.7704 32.1455 37.9111 30.8684 39.5111C29.5913 41.1111 28.4388 43.1852 27.4108 45.7333C27.5354 44.4296 27.6912 43.3333 27.8781 42.4444C28.065 41.5556 28.3142 40.5185 28.6257 39.3333C29.0929 37.6741 29.3265 36.6074 29.3265 36.1333C29.3265 35.7185 29.2019 35.437 28.9527 35.2889C28.7035 35.1407 28.2674 35.0667 27.6445 35.0667C26.4919 35.0667 25.5886 35.2741 24.9345 35.6889C24.3115 36.0741 23.8598 36.6963 23.5795 37.5556ZM11.6342 18.4C11.0113 18.4 10.326 19.2889 9.57839 21.0667C8.86196 22.8148 8.19225 25.2 7.56926 28.2222C6.94628 31.2444 6.47904 34.5481 6.16755 38.1333C8.2234 34.5481 9.85873 31.3926 11.0736 28.6667C12.3195 25.9111 12.9425 23.4667 12.9425 21.3333C12.9425 20.3852 12.8179 19.6593 12.5687 19.1556C12.3507 18.6519 12.0392 18.4 11.6342 18.4ZM9.2046 51.2889C10.1702 51.2889 11.0268 50.9037 11.7744 50.1333C12.522 49.363 13.0204 48.2519 13.2696 46.8C12.3039 46.1778 11.5564 45.363 11.0268 44.3556C10.5284 43.3481 10.2792 42.2815 10.2792 41.1556C10.2792 40.7407 10.3415 40.1778 10.4661 39.4667H10.326C9.04885 39.4667 7.97421 40.0741 7.10203 41.2889C6.261 42.4741 5.84048 44.0741 5.84048 46.0889C5.84048 47.7778 6.16755 49.0667 6.82168 49.9556C7.50697 50.8444 8.30127 51.2889 9.2046 51.2889ZM56.3373 28.6667C55.1225 31.3926 53.4871 34.5481 51.4313 38.1333C51.7428 34.5481 52.21 31.2444 52.833 28.2222C53.456 25.2 54.1257 22.8148 54.8421 21.0667C55.5897 19.2889 56.275 18.4 56.898 18.4C57.3029 18.4 57.6144 18.6519 57.8325 19.1556C58.0816 19.6593 58.2062 20.3852 58.2062 21.3333C58.2062 23.4667 57.5833 25.9111 56.3373 28.6667ZM57.0381 49.5556C56.3217 50.6519 55.434 51.2 54.3749 51.2C53.4404 51.2 52.6617 50.8 52.0387 50C51.4157 49.1704 51.1042 47.8667 51.1042 46.0889C51.1042 44.0444 51.478 42.4889 52.2256 41.4222C52.9732 40.3556 53.8921 39.8222 54.9823 39.8222C55.8545 39.8222 56.6021 40.237 57.225 41.0667C57.848 41.8963 58.1595 43.1259 58.1595 44.7556C58.1595 46.8593 57.7857 48.4593 57.0381 49.5556Z" />
-                                </svg>
-                            </div>
-                            <div class="balance-card__token">flobnb</div>
-                            <div id="flobnb_balance"></div>
-                        </div>
-                    </div>
+                    <ul id="my_assets" class="grid gap-1"></ul>
                 </div>
             </section>
         </section>
@@ -488,18 +444,25 @@
             </a>
         </li>
     </template>
-
+    <template id="asset_balance_card_template">
+        <li class="balance-card">
+            <div class="balance-card__icon"></div>
+            <h4 class="balance-card__token"></h4>
+        </li>
+    </template>
     <template id="net_balance_template">
         <span class="available-balance"></span>
     </template>
     <template id="locked_balance_template">
-        <div class="grid">
-            <span class="label">Locked</span>
-            <span class="locked-balance"></span>
-        </div>
-        <div class="grid">
-            <span class="label">Available</span>
-            <span class="available-balance"></span>
+        <div class="grid balance-card__amount-wrapper">
+            <div class="grid">
+                <span class="label">Locked</span>
+                <span class="locked-balance"></span>
+            </div>
+            <div class="grid">
+                <span class="label">Available</span>
+                <span class="available-balance"></span>
+            </div>
         </div>
     </template>
     <template id="order_template">
@@ -964,7 +927,7 @@
                         if (getRef('listed_assets').querySelector('.listed-asset--active'))
                             getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
                         getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
-                        getRef('chart_asset').textContent = `${params.asset}/INR`
+                        getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(floGlobals.exchangeRates[params.asset])}</p>`
                         getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
                         getRef('traded_asset').textContent = `Trade ${params.asset}`
                         getRef('trade_button').textContent = `${tradeType} ${params.asset}`
@@ -981,7 +944,7 @@
                         getRef('asset_list_wrapper').classList.add('hide-on-mobile')
                         getRef('trade_form').classList.remove('hide-on-mobile')
 
-                        if (firstLoad) {
+                        if (!chart) {
                             chart = LightweightCharts.createChart(getRef('price_history_chart'), {
                                 width: 800, height: 600,
                                 timeScale: {
@@ -999,16 +962,30 @@
                                 }
                             })
                             lineSeries.setData(data);
+                            let width
+                            let height
                             new ResizeObserver(entries => {
-                                const { width, height } = entries[0].contentRect;
+                                height = entries[0].contentRect.height;
+                                width = entries[0].contentRect.width;
                                 chart.applyOptions({ width, height });
                             }).observe(getRef('price_history_chart').parentNode);
+                            function setLastBarText() {
+                                getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
+                            }
+                            setLastBarText();
+                            chart.subscribeCrosshairMove(function (param) {
+                                if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > width || param.point.y < 0 || param.point.y > height) {
+                                    setLastBarText();
+                                } else {
+                                    const price = param.seriesPrices.get(lineSeries);
+                                    getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(price)}</p>`;
+                                }
+                            });
                         })
                     } else {
                         getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
                         getRef('trade_form').classList.add('hide-on-mobile')
                     }
-
                     break;
                 case 'my_orders':
                     break;
@@ -1136,6 +1113,11 @@
     </script>
     <script>
         const listedAssets = {
+            rupee: {
+                icon: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path
+                                        d="M15.3,4.91a4.78,4.78,0,0,0-.39-.5l3.14,0L18.75,2H6L5.25,4.6H9a4.22,4.22,0,0,1,3.06,1,3.16,3.16,0,0,1,.75,1.24H5.93L5.25,9.22h7.62a3.15,3.15,0,0,1-.34.82,3,3,0,0,1-1.37,1.17,5.34,5.34,0,0,1-2.2.4H5.5l0,1.9,7,8.49h3.56v-.17L9.68,14l.09,0a8.07,8.07,0,0,0,3.65-1,5,5,0,0,0,2-2.09A6.29,6.29,0,0,0,16,9.22h2.1l.69-2.42H15.93A5.93,5.93,0,0,0,15.3,4.91Z" />
+                                </svg>`},
             FLO: {
                 icon: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path
@@ -1220,6 +1202,21 @@
                 card.querySelector('.more-info').dataset.seller = seller
                 return card
             },
+            assetBalanceCard(asset) {
+                const { net, locked } = allTokens[asset]
+                const card = getRef('asset_balance_card_template').content.cloneNode(true).firstElementChild
+                card.className = `balance-card ${locked ? 'is-locked' : ''}`
+                card.querySelector('.balance-card__token').textContent = asset
+                card.querySelector('.balance-card__icon').innerHTML = listedAssets[asset] ? listedAssets[asset].icon : ''
+                const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template';
+                const assetBalance = getRef(templateToClone).content.cloneNode(true)
+                assetBalance.querySelector('.available-balance').textContent = asset === 'rupee' ? formatAmount(net) : parseFloat(net.toFixed(4))
+                if (locked) {
+                    assetBalance.querySelector('.locked-balance').textContent = asset === 'rupee' ? formatAmount(locked) : parseFloat(locked.toFixed(4))
+                }
+                card.appendChild(assetBalance)
+                return card
+            },
         }
 
         function showProcess(id) {
@@ -1884,19 +1881,6 @@
                 account();
         }
 
-        function showBalance(type, availableBalance = 0, lockedBalance = 0) {
-            getRef(`${type}_balance`).innerHTML = ''
-            const templateToClone = lockedBalance ? 'locked_balance_template' : 'net_balance_template';
-            const card = getRef(templateToClone).content.cloneNode(true)
-            card.querySelector('.available-balance').textContent = type === 'rupee' ? formatAmount(availableBalance) : parseFloat(availableBalance.toFixed(4))
-            if (lockedBalance) {
-                card.querySelector('.locked-balance').textContent = type === 'rupee' ? formatAmount(lockedBalance) : parseFloat(lockedBalance.toFixed(4))
-            }
-            getRef(`${type}_balance`).className = lockedBalance ? 'grid balance-card__amount-wrapper' : ''
-            getRef(`${type}_balance`).parentNode.className = `balance-card ${lockedBalance ? 'is-locked' : ''}`
-            getRef(`${type}_balance`).append(card)
-        }
-
         let accountDetails = {}
         const allTokens = {}
         async function account() {
@@ -1928,9 +1912,7 @@
                     allTokens[asset].net = allTokens[asset].total - allTokens[asset].locked
                 }
                 console.debug("FLO", allTokens['FLO']);
-                showBalance("flo", allTokens['FLO'].net, allTokens['FLO'].locked)
                 console.log(await floExchangeAPI.getBalance(acc.floID))
-                showBalance("flobnb", allTokens['flobnb'].net, allTokens['flobnb'].locked)
 
                 //Rupee Balance
                 allTokens['rupee'] = {
@@ -1939,7 +1921,15 @@
                 }
                 allTokens['rupee'].net = allTokens['rupee'].total - allTokens['rupee'].locked
                 console.debug("RUPEE", allTokens['rupee']);
-                showBalance("rupee", allTokens['rupee'].net, allTokens['rupee'].locked)
+
+                // render all assets in wallet
+                const frag = document.createDocumentFragment();
+                for (const asset in allTokens) {
+                    frag.append(render.assetBalanceCard(asset))
+                }
+                getRef('my_assets').innerHTML = ''
+                getRef('my_assets').append(frag)
+
                 //My orders
                 renderUserOrders();
                 proxy.secret.then(_ => null).catch(_ => null);

From 0df9290e154732b289486df8aa94a985f14ee61c Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 2 Apr 2022 18:26:47 +0530
Subject: [PATCH 08/11] Making exchange mobile friendly

---
 docs/css/main.css     |  73 ++++++++++++-----
 docs/css/main.min.css |   2 +-
 docs/css/main.scss    |  71 +++++++++++-----
 docs/index.html       | 182 ++++++++++++++++++++++++------------------
 4 files changed, 213 insertions(+), 115 deletions(-)

diff --git a/docs/css/main.css b/docs/css/main.css
index 426c93c..27509f0 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -332,11 +332,11 @@ ul {
 }
 
 .observe-empty-state:empty {
-  display: none;
+  display: none !important;
 }
 
 .observe-empty-state:not(:empty) + .empty-state {
-  display: none;
+  display: none !important;
 }
 
 .icon {
@@ -664,6 +664,37 @@ sm-checkbox {
   min-width: 8ch;
 }
 
+#exchange_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+#asset_page {
+  height: 100%;
+}
+#asset_page nav {
+  padding: 1rem 0;
+}
+#asset_page nav .icon-only {
+  margin-left: -0.7rem;
+}
+
+#trade_form {
+  height: 100%;
+}
+#trade_form::part(form) {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+#trade_form > * {
+  margin-bottom: 1rem;
+}
+#trade_form > :last-child {
+  margin-top: auto;
+}
+
 #my_orders,
 #market {
   width: min(42rem, 100%);
@@ -675,14 +706,6 @@ sm-checkbox {
   width: 1.2rem;
 }
 
-#orders_section__header--primary sm-tab-header {
-  --gap: 1.5rem;
-}
-#orders_section__header--primary sm-tab {
-  font-size: 0.9rem;
-  --padding: 0.8rem 0;
-}
-
 .list__item {
   padding: 0.5rem 0;
   display: grid;
@@ -990,7 +1013,7 @@ sm-checkbox {
 }
 @media screen and (max-width: 40rem) and (any-hover: none) {
   .cancel-order span {
-    display: none;
+    display: none !important;
   }
 }
 @media screen and (max-width: 40rem) {
@@ -1007,7 +1030,16 @@ sm-checkbox {
   }
 
   .hide-on-mobile {
-    display: none;
+    display: none !important;
+  }
+
+  #asset_page {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #price_chart_wrapper {
+    flex: 1;
   }
 }
 @media screen and (min-width: 40rem) {
@@ -1044,7 +1076,7 @@ sm-checkbox {
   }
 
   .hide-on-desktop {
-    display: none;
+    display: none !important;
   }
 
   #home {
@@ -1132,22 +1164,27 @@ sm-checkbox {
     margin-right: 0;
   }
   .main_navbar__item .item__title {
-    display: none;
+    display: none !important;
   }
 }
 @media screen and (min-width: 64rem) {
   #home {
     grid-template-columns: 10rem 1fr;
   }
+
+  #asset_page {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: minmax(0, 1fr) 20rem;
+  }
+  #asset_page nav {
+    grid-column: 1/-1;
+  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
-
-  .is-signed-in #exchange_wrapper {
-    grid-template-columns: 16rem minmax(0, 1fr) 20rem;
-  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index bcf73e1..59eb201 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}.is-signed-in #exchange_wrapper{grid-template-columns:16rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#exchange_wrapper{display:flex;flex-direction:column;height:100%}#asset_page{height:100%}#asset_page nav{padding:1rem 0}#asset_page nav .icon-only{margin-left:-0.7rem}#trade_form{height:100%}#trade_form::part(form){display:flex;flex-direction:column;gap:0}#trade_form>*{margin-bottom:1rem}#trade_form>:last-child{margin-top:auto}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none !important}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none !important}#asset_page{display:flex;flex-direction:column}#price_chart_wrapper{flex:1}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none !important}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none !important}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}#asset_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0, 1fr) 20rem}#asset_page nav{grid-column:1/-1}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index e4791e4..4c9739f 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -325,11 +325,11 @@ ul {
 }
 
 .observe-empty-state:empty {
-  display: none;
+  display: none !important;
 }
 
 .observe-empty-state:not(:empty) + .empty-state {
-  display: none;
+  display: none !important;
 }
 
 .icon {
@@ -633,6 +633,36 @@ sm-checkbox {
   font-weight: 500;
   min-width: 8ch;
 }
+
+#exchange_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#asset_page {
+  height: 100%;
+  nav {
+    padding: 1rem 0;
+    .icon-only {
+      margin-left: -0.7rem;
+    }
+  }
+}
+#trade_form {
+  height: 100%;
+  &::part(form) {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+  & > * {
+    margin-bottom: 1rem;
+  }
+  & > :last-child {
+    margin-top: auto;
+  }
+}
+
 #my_orders,
 #market {
   width: min(42rem, 100%);
@@ -642,15 +672,6 @@ sm-checkbox {
     width: 1.2rem;
   }
 }
-#orders_section__header--primary {
-  sm-tab-header {
-    --gap: 1.5rem;
-  }
-  sm-tab {
-    font-size: 0.9rem;
-    --padding: 0.8rem 0;
-  }
-}
 
 .list__item {
   padding: 0.5rem 0;
@@ -919,7 +940,7 @@ sm-checkbox {
 @media screen and (max-width: 40rem) and (any-hover: none) {
   .cancel-order {
     span {
-      display: none;
+      display: none !important;
     }
   }
 }
@@ -937,7 +958,14 @@ sm-checkbox {
     }
   }
   .hide-on-mobile {
-    display: none;
+    display: none !important;
+  }
+  #asset_page {
+    display: flex;
+    flex-direction: column;
+  }
+  #price_chart_wrapper {
+    flex: 1;
   }
 }
 @media screen and (min-width: 40rem) {
@@ -969,7 +997,7 @@ sm-checkbox {
     grid-template-columns: 1fr 90vw 1fr;
   }
   .hide-on-desktop {
-    display: none;
+    display: none !important;
   }
   #home {
     display: grid;
@@ -1052,7 +1080,7 @@ sm-checkbox {
       margin-right: 0;
     }
     .item__title {
-      display: none;
+      display: none !important;
     }
   }
 }
@@ -1060,16 +1088,19 @@ sm-checkbox {
   #home {
     grid-template-columns: 10rem 1fr;
   }
+  #asset_page {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: minmax(0, 1fr) 20rem;
+    nav {
+      grid-column: 1/-1;
+    }
+  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
-  .is-signed-in {
-    #exchange_wrapper {
-      grid-template-columns: 16rem minmax(0, 1fr) 20rem;
-    }
-  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {
diff --git a/docs/index.html b/docs/index.html
index 6ab68f5..89c99c3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -93,62 +93,73 @@
                     </div>
                     <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
                 </sm-form>
-                <section id="exchange_wrapper">
-                    <div id="asset_list_wrapper" class="grid gap-1 align-start hide user-content">
+                <section id="exchange_wrapper" class="hide user-content">
+                    <div id="asset_list_wrapper" class="grid gap-1 align-start">
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
-                    <div id="price_chart_wrapper" class="flex direction-column gap-0-5 hide user-content">
-                        <div class="flex align-center space-between" style="z-index: 5;">
-                            <div id="chart_asset"></div>
-                            <strip-select>
-                                <strip-option value="day" selected>D</strip-option>
-                                <strip-option value="week">W</strip-option>
-                                <strip-option value="month">M</strip-option>
-                                <strip-option value="year">Y</strip-option>
-                                <strip-option value="all-time">ALL</strip-option>
-                            </strip-select>
-                        </div>
-                        <div class="flex" style="position: relative;">
-                            <div id="price_history_chart"></div>
-                        </div>
-                    </div>
-                    <sm-form id="trade_form" class="user-content hide hide-on-mobile">
-                        <div class="flex space-between align-center">
-                            <a href="#/exchange" class="button icon-only hide-on-desktop">
+                    <div id="asset_page" class="hide-on-mobile">
+                        <nav class="flex align-center space-between hide-on-desktop">
+                            <a href="#/exchange" class="button icon-only">
                                 <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                                 </svg>
                             </a>
-                            <h4 id="traded_asset">Trade FLO</h4>
-                            <strip-select id="trade_type_selector" class="tab">
-                                <strip-option value="buy" selected>Buy</strip-option>
-                                <strip-option value="sell">Sell</strip-option>
+                            <strip-select id="trading_view_switcher">
+                                <strip-option value="trade" selected>Trade</strip-option>
+                                <strip-option value="chart">Chart</strip-option>
                             </strip-select>
+                        </nav>
+                        <div id="price_chart_wrapper" class="flex direction-column gap-0-5 hide-on-mobile">
+                            <div class="flex align-center space-between">
+                                <div id="chart_asset"></div>
+                                <strip-select id="price_duration_selector">
+                                    <strip-option value="hour" title="1 Hour price interval" selected>H</strip-option>
+                                    <strip-option value="day" title="1 Day price interval">D</strip-option>
+                                </strip-select>
+                            </div>
+                            <div class="flex" style="position: relative; flex: 1">
+                                <div id="price_history_chart"></div>
+                            </div>
                         </div>
-                        <sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required animate>
-                        </sm-input>
-                        <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required animate>
-                        </sm-input>
-                        </sm-input>
-                        <sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" required
-                            animate>
-                        </sm-input>
-                        <div id="quantity_selector" class="flex align-center quantity-selector">
-                            <span id="quantity_type">Rupee</span>
-                            <button class="button" value="0.25" title="Buy FLO worth 25% of total rupee">25%</button>
-                            <button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button>
-                            <button class="button" value="0.75" title="Buy FLO worth 75% of total rupee">75%</button>
-                            <button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</button>
-                        </div>
-                        <div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
-                            <sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">
-                                BUY
-                                FLO
-                            </sm-button>
-                        </div>
-                    </sm-form>
+                        <sm-form id="trade_form">
+                            <div class="flex space-between align-center">
+                                <h4 id="traded_asset">Trade FLO</h4>
+                                <strip-select id="trade_type_selector" class="tab">
+                                    <strip-option value="buy" selected>Buy</strip-option>
+                                    <strip-option value="sell">Sell</strip-option>
+                                </strip-select>
+                            </div>
+                            <sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required
+                                animate>
+                            </sm-input>
+                            <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required
+                                animate>
+                            </sm-input>
+                            </sm-input>
+                            <sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01"
+                                required animate>
+                            </sm-input>
+                            <div id="quantity_selector" class="flex align-center quantity-selector">
+                                <span id="quantity_type">Rupee</span>
+                                <button class="button" value="0.25"
+                                    title="Buy FLO worth 25% of total rupee">25%</button>
+                                <button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button>
+                                <button class="button" value="0.75"
+                                    title="Buy FLO worth 75% of total rupee">75%</button>
+                                <button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</button>
+                            </div>
+                            <div id="trade_button_wrapper"
+                                class="stateful-button-wrapper flex align-center justify-center">
+                                <sm-button id="trade_button" class="uppercase w-100" variant="primary"
+                                    onclick="tradeFlo()">
+                                    BUY
+                                    FLO
+                                </sm-button>
+                            </div>
+                        </sm-form>
+                    </div>
                 </section>
             </section>
             <section id="my_orders" class="grid gap-1 hide mobile-page">
@@ -942,7 +953,8 @@
                     }
                     if (params.hasOwnProperty('asset') && params.asset !== '') {
                         getRef('asset_list_wrapper').classList.add('hide-on-mobile')
-                        getRef('trade_form').classList.remove('hide-on-mobile')
+                        getRef('main_header').classList.add('hide-on-mobile')
+                        getRef('asset_page').classList.remove('hide-on-mobile')
 
                         if (!chart) {
                             chart = LightweightCharts.createChart(getRef('price_history_chart'), {
@@ -954,37 +966,11 @@
                             lineSeries = chart.addLineSeries();
                             setChartTheme()
                         }
-                        floExchangeAPI.getRateHistory(params.asset, '2 weeks').then(data => {
-                            data = data.map(({ time, rate }) => {
-                                return {
-                                    time: new Date(time).getTime() / 1000,
-                                    value: rate
-                                }
-                            })
-                            lineSeries.setData(data);
-                            let width
-                            let height
-                            new ResizeObserver(entries => {
-                                height = entries[0].contentRect.height;
-                                width = entries[0].contentRect.width;
-                                chart.applyOptions({ width, height });
-                            }).observe(getRef('price_history_chart').parentNode);
-                            function setLastBarText() {
-                                getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
-                            }
-                            setLastBarText();
-                            chart.subscribeCrosshairMove(function (param) {
-                                if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > width || param.point.y < 0 || param.point.y > height) {
-                                    setLastBarText();
-                                } else {
-                                    const price = param.seriesPrices.get(lineSeries);
-                                    getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(price)}</p>`;
-                                }
-                            });
-                        })
+                        render.chart(params.asset)
                     } else {
+                        getRef('main_header').classList.remove('hide-on-mobile')
                         getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
-                        getRef('trade_form').classList.add('hide-on-mobile')
+                        getRef('asset_page').classList.add('hide-on-mobile')
                     }
                     break;
                 case 'my_orders':
@@ -1217,6 +1203,36 @@
                 card.appendChild(assetBalance)
                 return card
             },
+            chart(asset, duration = '48 weeks') {
+                floExchangeAPI.getRateHistory(asset, duration).then(data => {
+                    data = data.map(({ time, rate }) => {
+                        return {
+                            time: new Date(time).getTime() / 1000,
+                            value: rate
+                        }
+                    })
+                    lineSeries.setData(data);
+                    let width
+                    let height
+                    new ResizeObserver(entries => {
+                        height = entries[0].contentRect.height;
+                        width = entries[0].contentRect.width;
+                        chart.applyOptions({ width, height });
+                    }).observe(getRef('price_history_chart').parentNode);
+                    function setLastBarText() {
+                        getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
+                    }
+                    setLastBarText();
+                    chart.subscribeCrosshairMove(function (param) {
+                        if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > width || param.point.y < 0 || param.point.y > height) {
+                            setLastBarText();
+                        } else {
+                            const price = param.seriesPrices.get(lineSeries);
+                            getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(price)}</p>`;
+                        }
+                    });
+                })
+            }
         }
 
         function showProcess(id) {
@@ -1229,6 +1245,17 @@
             getRef(id).children[0].disabled = false
             getRef(id).querySelector('sm-spinner')?.remove()
         }
+
+        getRef('trading_view_switcher').addEventListener('change', e => {
+            if (e.target.value === 'trade') {
+                getRef('price_chart_wrapper').classList.add('hide-on-mobile')
+                getRef('trade_form').classList.remove('hide-on-mobile')
+            } else {
+                getRef('trade_form').classList.add('hide-on-mobile')
+                getRef('price_chart_wrapper').classList.remove('hide-on-mobile')
+            }
+        })
+
         let tradeType = 'buy'
         getRef('trade_type_selector').addEventListener('change', e => {
             tradeType = e.detail.value
@@ -1245,6 +1272,9 @@
                 }
             })
         })
+        getRef('price_duration_selector').addEventListener('change', e => {
+            render.chart(pagesData.params.asset, e.detail.value === 'hour' ? '48 weeks' : 'all-time')
+        })
         async function tradeFlo() {
             const asset = pagesData.params.asset;
             const quantity = parseFloat(getRef('get_quantity').value)

From 559ea933c9b3ce9890bc36557fb817ad79d95bab Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sun, 3 Apr 2022 01:32:00 +0530
Subject: [PATCH 09/11] Feature and UX update

---
 docs/css/main.css     |   5 +
 docs/css/main.min.css |   2 +-
 docs/css/main.scss    |   4 +
 docs/index.html       | 489 +++++++++++++++++++++++-------------------
 4 files changed, 280 insertions(+), 220 deletions(-)

diff --git a/docs/css/main.css b/docs/css/main.css
index 27509f0..392f41f 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -1038,6 +1038,11 @@ sm-checkbox {
     flex-direction: column;
   }
 
+  .listed-asset {
+    border-radius: 0;
+    border-bottom: solid thin rgba(var(--text-color), 0.1);
+  }
+
   #price_chart_wrapper {
     flex: 1;
   }
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index 59eb201..c1411b0 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#exchange_wrapper{display:flex;flex-direction:column;height:100%}#asset_page{height:100%}#asset_page nav{padding:1rem 0}#asset_page nav .icon-only{margin-left:-0.7rem}#trade_form{height:100%}#trade_form::part(form){display:flex;flex-direction:column;gap:0}#trade_form>*{margin-bottom:1rem}#trade_form>:last-child{margin-top:auto}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none !important}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none !important}#asset_page{display:flex;flex-direction:column}#price_chart_wrapper{flex:1}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none !important}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none !important}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}#asset_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0, 1fr) 20rem}#asset_page nav{grid-column:1/-1}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#exchange_wrapper{display:flex;flex-direction:column;height:100%}#asset_page{height:100%}#asset_page nav{padding:1rem 0}#asset_page nav .icon-only{margin-left:-0.7rem}#trade_form{height:100%}#trade_form::part(form){display:flex;flex-direction:column;gap:0}#trade_form>*{margin-bottom:1rem}#trade_form>:last-child{margin-top:auto}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none !important}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none !important}#asset_page{display:flex;flex-direction:column}.listed-asset{border-radius:0;border-bottom:solid thin rgba(var(--text-color), 0.1)}#price_chart_wrapper{flex:1}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none !important}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none !important}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}#asset_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0, 1fr) 20rem}#asset_page nav{grid-column:1/-1}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index 4c9739f..4d1ce0a 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -964,6 +964,10 @@ sm-checkbox {
     display: flex;
     flex-direction: column;
   }
+  .listed-asset {
+    border-radius: 0;
+    border-bottom: solid thin rgba(var(--text-color), 0.1);
+  }
   #price_chart_wrapper {
     flex: 1;
   }
diff --git a/docs/index.html b/docs/index.html
index 89c99c3..a4e2167 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -66,10 +66,10 @@
             </button>
         </header>
         <section id="pages_container">
-            <section id="exchange" class="mobile-page">
+            <section id="exchange" class="mobile-page hide">
                 <sm-form id="login_form">
                     <div class="grid gap-0-5">
-                        <h4>Login</h4>
+                        <h2>Login</h2>
                         <p>Please login for exchange.</p>
                     </div>
                     <sm-input type="password" id="login_form__priv_key" placeholder="Private key" animate required>
@@ -95,6 +95,7 @@
                 </sm-form>
                 <section id="exchange_wrapper" class="hide user-content">
                     <div id="asset_list_wrapper" class="grid gap-1 align-start">
+                        <h5>ASSETS</h5>
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
                     <div id="asset_page" class="hide-on-mobile">
@@ -115,8 +116,9 @@
                             <div class="flex align-center space-between">
                                 <div id="chart_asset"></div>
                                 <strip-select id="price_duration_selector">
-                                    <strip-option value="hour" title="1 Hour price interval" selected>H</strip-option>
-                                    <strip-option value="day" title="1 Day price interval">D</strip-option>
+                                    <strip-option value="hour" title="1 Hour price interval" selected>Hour
+                                    </strip-option>
+                                    <strip-option value="day" title="1 Day price interval">Day</strip-option>
                                 </strip-select>
                             </div>
                             <div class="flex" style="position: relative; flex: 1">
@@ -415,7 +417,6 @@
                 <h4 id="wallet_result__title"></h4>
                 <p id="wallet_result__description"></p>
             </div>
-            <button class="button" onclick="hideWalletResult()">Go back</button>
         </div>
     </sm-popup>
     <sm-popup id="transaction_info_popup">
@@ -806,6 +807,7 @@
 
         window.addEventListener('hashchange', e => showPage(window.location.hash))
         window.addEventListener("load", () => {
+            showPage(window.location.hash, { firstLoad: true });
             document.body.classList.remove('hide')
             document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
             document.addEventListener('keyup', (e) => {
@@ -854,48 +856,6 @@
             lastPage: '',
             params: {}
         }
-        function getChartTheme() {
-            const theme = getRef('theme_toggle').value
-            const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
-            const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff'
-            return {
-                chart: {
-                    layout: {
-                        backgroundColor: `rgba(${textColor}, 0.01)`,
-                        lineColor: `rgba(${textColor}, 0.1)`,
-                        textColor: `rgba(${textColor}, 0.8)`,
-                    },
-                    watermark: {
-                        color: 'rgba(0, 0, 0, 0)',
-                    },
-                    crosshair: {
-                        color: '#758696',
-                    },
-                    grid: {
-                        vertLines: {
-                            color: '#2B2B43',
-                        },
-                        horzLines: {
-                            color: '#363C4E',
-                        },
-                    },
-                },
-                series: {
-                    color: accentColor
-                }
-            }
-        }
-        function setChartTheme(e) {
-            const themeToApply = getChartTheme()
-            chart.applyOptions(themeToApply.chart);
-            lineSeries.applyOptions(themeToApply.series);
-        }
-
-        document.addEventListener('themechange', setChartTheme)
-
-
-        let chart
-        let lineSeries
         async function showPage(targetPage, options = {}) {
             const { firstLoad, hashChange } = options
             let pageId
@@ -904,10 +864,6 @@
             let searchParams
             if (targetPage === '') {
                 pageId = 'exchange'
-                // if (typeof proxy.userID === "undefined") {
-                //     pageId = 'landing'
-                // } else {
-                // }
             } else {
                 if (targetPage.includes('/')) {
                     if (targetPage.includes('?')) {
@@ -929,74 +885,112 @@
                 const urlSearchParams = new URLSearchParams('?' + searchParams);
                 params = Object.fromEntries(urlSearchParams.entries());
             }
-            switch (pageId) {
-                case 'exchange':
-                    if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') {
-                        params.asset = 'FLO'
-                    }
-                    if (params.hasOwnProperty('asset') && params.asset !== '') {
-                        if (getRef('listed_assets').querySelector('.listed-asset--active'))
-                            getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
-                        getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
-                        getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(floGlobals.exchangeRates[params.asset])}</p>`
-                        getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
-                        getRef('traded_asset').textContent = `Trade ${params.asset}`
-                        getRef('trade_button').textContent = `${tradeType} ${params.asset}`
-                        getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}`
-                        getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
-                            if (tradeType === 'buy') {
-                                button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
-                            } else {
-                                button.title = `Sell ${button.textContent} of total ${params.asset}`
-                            }
-                        })
-                    }
-                    if (params.hasOwnProperty('asset') && params.asset !== '') {
-                        getRef('asset_list_wrapper').classList.add('hide-on-mobile')
-                        getRef('main_header').classList.add('hide-on-mobile')
-                        getRef('asset_page').classList.remove('hide-on-mobile')
-
-                        if (!chart) {
-                            chart = LightweightCharts.createChart(getRef('price_history_chart'), {
-                                width: 800, height: 600,
-                                timeScale: {
-                                    timeVisible: true,
-                                },
-                            });
-                            lineSeries = chart.addLineSeries();
-                            setChartTheme()
-                        }
-                        render.chart(params.asset)
-                    } else {
-                        getRef('main_header').classList.remove('hide-on-mobile')
-                        getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
-                        getRef('asset_page').classList.add('hide-on-mobile')
-                    }
-                    break;
-                case 'my_orders':
-                    break;
-                case 'market':
-                    break;
-                case 'wallet':
-                    break;
+            if (typeof proxy.userID === "undefined" && !['exchange', 'market'].includes(pageId)) {
+                pageId = 'exchange'
+                history.replaceState(null, null, '#/exchange')
             }
+            if (!firstLoad)
+                switch (pageId) {
+                    case 'exchange':
+                        if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') {
+                            params.asset = 'FLO'
+                        }
+                        if (params.hasOwnProperty('asset') && params.asset !== '') {
+                            if (getRef('listed_assets').querySelector('.listed-asset--active'))
+                                getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
+                            getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
+                            getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(floGlobals.exchangeRates[params.asset])}</p>`
+                            getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
+                            getRef('traded_asset').textContent = `Trade ${params.asset}`
+                            getRef('trade_button').textContent = `${tradeType} ${params.asset}`
+                            getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}`
+                            getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
+                                if (tradeType === 'buy') {
+                                    button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
+                                } else {
+                                    button.title = `Sell ${button.textContent} of total ${params.asset}`
+                                }
+                            })
+                        }
+                        const animOptions = {
+                            duration: 150,
+                            easing: 'ease',
+                            fill: 'forwards',
+                        }
+                        if (params.hasOwnProperty('asset') && params.asset !== '') {
+                            if (isMobileView) {
+                                if (!getRef('asset_list_wrapper').classList.contains('hide-on-mobile')) {
+                                    animateTo(getRef('main_header'), slideOutLeft, animOptions)
+                                    animateTo(getRef('asset_list_wrapper'), slideOutLeft, animOptions).onfinish = () => {
+                                        getRef('main_header').classList.add('hide-on-mobile')
+                                        getRef('asset_list_wrapper').classList.add('hide-on-mobile')
+                                        getRef('asset_page').classList.remove('hide-on-mobile')
+                                        animateTo(getRef('asset_page'), slideInLeft, animOptions)
+                                    }
+                                }
+                            } else {
+                                getRef('main_header').classList.add('hide-on-mobile')
+                                getRef('asset_list_wrapper').classList.add('hide-on-mobile')
+                                getRef('asset_page').classList.remove('hide-on-mobile')
+                            }
+
+                            if (!chart) {
+                                chart = LightweightCharts.createChart(getRef('price_history_chart'), {
+                                    width: 800, height: 600,
+                                    timeScale: {
+                                        timeVisible: true,
+                                    },
+                                });
+                                lineSeries = chart.addLineSeries();
+                                setChartTheme()
+                            }
+                            render.chart(params.asset)
+                        } else {
+                            if (isMobileView) {
+                                if (!getRef('asset_page').classList.contains('hide-on-mobile')) {
+                                    animateTo(getRef('asset_page'), slideOutRight, animOptions).onfinish = () => {
+                                        getRef('asset_page').classList.add('hide-on-mobile')
+                                        getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
+                                        animateTo(getRef('asset_list_wrapper'), slideInRight, animOptions)
+                                        getRef('main_header').classList.remove('hide-on-mobile')
+                                        animateTo(getRef('main_header'), slideInRight, animOptions)
+                                    }
+                                }
+                            } else {
+                                getRef('asset_page').classList.add('hide-on-mobile')
+                                getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
+                            }
+                        }
+                        break;
+                    case 'my_orders':
+                        break;
+                    case 'market':
+                        break;
+                    case 'wallet':
+                        break;
+                }
             if (pagesData.lastPage !== pageId) {
                 document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide'))
                 getRef(pageId).classList.remove('hide')
                 document.querySelectorAll('.main_navbar__item').forEach(elem => elem.classList.remove('main_navbar__item--active'))
                 document.querySelector(`.main_navbar__item[href="#/${pageId}"]`).classList.add('main_navbar__item--active')
-                // getRef(pageId)?.animate([
-                //     {
-                //         opacity: 0,
-                //     },
-                //     {
-                //         opacity: 1,
-                //     },
-                // ],
-                //     {
-                //         duration: 150,
-                //         easing: 'ease'
-                //     })
+                getRef('pages_container').style.overflowY = "hidden";
+                getRef(pageId).animate([
+                    {
+                        opacity: 0,
+                        transform: 'translateY(1rem)'
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translateY(0)'
+                    },
+                ],
+                    {
+                        duration: 150,
+                        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+                    }).onfinish = () => {
+                        getRef('pages_container').style.overflowY = "";
+                    }
                 pagesData.lastPage = pageId
             }
             pagesData.params = params
@@ -1089,8 +1083,9 @@
         function handleMobileChange(e) {
             isMobileView = e.matches
             if (!isMobileView) {
-                getRef('exchange_wrapper').children[0].style = ''
-                getRef('exchange_wrapper').children[1].style = ''
+                getRef('main_header').style = ''
+                getRef('asset_list_wrapper').style = ''
+                getRef('asset_page').style = ''
             }
         }
         mobileQuery.addEventListener('change', handleMobileChange)
@@ -1131,6 +1126,7 @@
             listedAsset(name, rate) {
                 const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild
                 clone.href = `#/exchange?asset=${name}`
+                clone.dataset.listedAsset = name
                 clone.querySelector('.listed-asset__icon').innerHTML = listedAssets[name] ? listedAssets[name].icon : ''
                 clone.querySelector('.listed-asset__rate').textContent = rate
                 clone.querySelector('.listed-asset__name').textContent = name
@@ -1232,6 +1228,100 @@
                         }
                     });
                 })
+            },
+            userOrders() {
+                let { buyOrders, sellOrders, transactions } = accountDetails
+                getRef('orders_list').innerHTML = '';
+                const frag = document.createDocumentFragment()
+                const ordersType = getRef('my_orders_category_selector').value
+                if (ordersType === 'open') {
+                    const allOpenOrders = [...buyOrders, ...sellOrders].sort((a, b) => new Date(b.time_placed).getTime() - new Date(a.time_placed).getTime())
+                    allOpenOrders.forEach(order => {
+                        const { id, asset, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
+                        const orderDetails = {
+                            id,
+                            asset,
+                            quantity,
+                            type: minPrice ? 'sell' : 'buy',
+                            price: minPrice || maxPrice,
+                            time: time_placed
+                        }
+                        frag.append(render.orderCard(orderDetails))
+                    })
+                } else {
+                    transactions.forEach(transaction => {
+                        const { asset, quantity, unitValue, tx_time, buyer, seller } = transaction
+                        let type, other;
+                        if (seller === proxy.userID) {
+                            type = 'Sold';
+                            other = buyer === proxy.userID ? 'MySelf' : buyer;
+                        } else if (buyer === proxy.userID) {
+                            type = 'Bought';
+                            other = seller;
+                        } else
+                            return;
+                        const transactionDetails = {
+                            buyer,
+                            seller,
+                            type,
+                            other,
+                            asset,
+                            quantity,
+                            unitValue,
+                            time: tx_time
+                        }
+                        frag.append(render.transactionCard(transactionDetails))
+                    });
+                }
+                getRef('orders_list').append(frag)
+            },
+            async marketOrders() {
+                const frag = document.createDocumentFragment()
+                getRef('market_orders_list').innerHTML = '';
+                const ordersType = getRef('market_orders_category_selector').value
+                if (ordersType === 'open') {
+                    try {
+                        const [buyOrders, sellOrders] = await Promise.all([floExchangeAPI.getBuyList(), floExchangeAPI.getSellList()])
+                        const allOpenOrders = [...buyOrders, ...sellOrders].sort((a, b) => new Date(b.time_placed).getTime() - new Date(a.time_placed).getTime())
+                        allOpenOrders.forEach(order => {
+                            const { floID, asset, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
+                            const orderDetails = {
+                                floID,
+                                asset,
+                                quantity,
+                                type: minPrice ? 'sell' : 'buy',
+                                unitValue: minPrice || maxPrice,
+                                time: time_placed
+                            }
+                            frag.append(render.marketOrderCard(orderDetails))
+                        })
+                    }
+                    catch (err) {
+                        notify(err.data, 'error')
+                    }
+                } else {
+                    try {
+                        const marketTransactions = await floExchangeAPI.getTradeList()
+                        marketTransactions.forEach(transaction => {
+                            const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction
+                            const transactionDetails = {
+                                buyer,
+                                seller,
+                                asset,
+                                quantity,
+                                unitValue,
+                                time: tx_time
+                            }
+                            frag.append(render.marketTransactionCard(transactionDetails))
+                        })
+                        const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
+                        getRef('market_orders_list').append(marketTransactionList)
+                    }
+                    catch (err) {
+                        notify(err.data, 'error')
+                    }
+                }
+                getRef('market_orders_list').append(frag)
             }
         }
 
@@ -1246,6 +1336,47 @@
             getRef(id).querySelector('sm-spinner')?.remove()
         }
 
+        let chart
+        let lineSeries
+        function getChartTheme() {
+            const theme = getRef('theme_toggle').value
+            const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
+            const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff'
+            return {
+                chart: {
+                    layout: {
+                        backgroundColor: `rgba(${textColor}, 0.01)`,
+                        lineColor: `rgba(${textColor}, 0.1)`,
+                        textColor: `rgba(${textColor}, 0.8)`,
+                    },
+                    watermark: {
+                        color: 'rgba(0, 0, 0, 0)',
+                    },
+                    crosshair: {
+                        color: '#758696',
+                    },
+                    grid: {
+                        vertLines: {
+                            color: '#2B2B43',
+                        },
+                        horzLines: {
+                            color: '#363C4E',
+                        },
+                    },
+                },
+                series: {
+                    color: accentColor
+                }
+            }
+        }
+        function setChartTheme(e) {
+            const themeToApply = getChartTheme()
+            chart.applyOptions(themeToApply.chart);
+            lineSeries.applyOptions(themeToApply.series);
+        }
+
+        document.addEventListener('themechange', setChartTheme)
+
         getRef('trading_view_switcher').addEventListener('change', e => {
             if (e.target.value === 'trade') {
                 getRef('price_chart_wrapper').classList.add('hide-on-mobile')
@@ -1644,103 +1775,9 @@
             })
         }
 
-        function renderUserOrders() {
-            let { buyOrders, sellOrders, transactions } = accountDetails
-            getRef('orders_list').innerHTML = '';
-            const frag = document.createDocumentFragment()
-            const ordersType = getRef('my_orders_category_selector').value
-            if (ordersType === 'open') {
-                const allOpenOrders = [...buyOrders, ...sellOrders].sort((a, b) => new Date(b.time_placed).getTime() - new Date(a.time_placed).getTime())
-                allOpenOrders.forEach(order => {
-                    const { id, asset, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
-                    const orderDetails = {
-                        id,
-                        asset,
-                        quantity,
-                        type: minPrice ? 'sell' : 'buy',
-                        price: minPrice || maxPrice,
-                        time: time_placed
-                    }
-                    frag.append(render.orderCard(orderDetails))
-                })
-            } else {
-                transactions.forEach(transaction => {
-                    const { asset, quantity, unitValue, tx_time, buyer, seller } = transaction
-                    let type, other;
-                    if (seller === proxy.userID) {
-                        type = 'Sold';
-                        other = buyer === proxy.userID ? 'MySelf' : buyer;
-                    } else if (buyer === proxy.userID) {
-                        type = 'Bought';
-                        other = seller;
-                    } else
-                        return;
-                    const transactionDetails = {
-                        buyer,
-                        seller,
-                        type,
-                        other,
-                        asset,
-                        quantity,
-                        unitValue,
-                        time: tx_time
-                    }
-                    frag.append(render.transactionCard(transactionDetails))
-                });
-            }
-            getRef('orders_list').append(frag)
-        }
-        getRef('my_orders_category_selector').addEventListener('change', renderUserOrders)
+        getRef('my_orders_category_selector').addEventListener('change', render.userOrders)
 
-        getRef('market_orders_category_selector').addEventListener('change', renderMarketOrders)
-        async function renderMarketOrders() {
-            const frag = document.createDocumentFragment()
-            getRef('market_orders_list').innerHTML = '';
-            const ordersType = getRef('market_orders_category_selector').value
-            if (ordersType === 'open') {
-                try {
-                    const [buyOrders, sellOrders] = await Promise.all([floExchangeAPI.getBuyList(), floExchangeAPI.getSellList()])
-                    const allOpenOrders = [...buyOrders, ...sellOrders].sort((a, b) => new Date(b.time_placed).getTime() - new Date(a.time_placed).getTime())
-                    allOpenOrders.forEach(order => {
-                        const { floID, asset, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
-                        const orderDetails = {
-                            floID,
-                            asset,
-                            quantity,
-                            type: minPrice ? 'sell' : 'buy',
-                            unitValue: minPrice || maxPrice,
-                            time: time_placed
-                        }
-                        frag.append(render.marketOrderCard(orderDetails))
-                    })
-                }
-                catch (err) {
-                    notify(err.data, 'error')
-                }
-            } else {
-                try {
-                    const marketTransactions = await floExchangeAPI.getTradeList()
-                    marketTransactions.forEach(transaction => {
-                        const { seller, buyer, asset, quantity, unitValue, tx_time } = transaction
-                        const transactionDetails = {
-                            buyer,
-                            seller,
-                            asset,
-                            quantity,
-                            unitValue,
-                            time: tx_time
-                        }
-                        frag.append(render.marketTransactionCard(transactionDetails))
-                    })
-                    const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
-                    getRef('market_orders_list').append(marketTransactionList)
-                }
-                catch (err) {
-                    notify(err.data, 'error')
-                }
-            }
-            getRef('market_orders_list').append(frag)
-        }
+        getRef('market_orders_category_selector').addEventListener('change', render.marketOrders)
         getRef('market_orders_list').addEventListener('click', e => {
             if (e.target.closest('.more-info')) {
                 showMoreDetails(e)
@@ -1880,14 +1917,25 @@
                                 net: 0
                             }
                         }
+                        // dynamically render listed assets if not already rendered
                         getRef('listed_assets').append(render.listedAsset(asset, formatAmount(parseFloat(rate))));
                         getRef('wallet_asset_selector').append(createElement('sm-option', {
                             textContent: asset,
                             attributes: { value: asset },
                         }));
                     })
+                } else {
+                    // update rates in UI
+                    for (const asset in rates) {
+                        const rate = rates[asset]
+                        const listedAsset = getRef(`listed_assets`).querySelector(`[data-listed-asset="${asset}"]`)
+                        if (listedAsset) {
+                            listedAsset.querySelector('.listed-asset__rate').textContent = formatAmount(parseFloat(rate))
+                        }
+                    }
                 }
-                getRef('get_price').value = parseFloat(parseFloat(rates["FLO"]).toFixed(4))
+                if (pagesData.params.hasOwnProperty('asset' && pagesData.params.asset !== ''))
+                    getRef('get_price').value = parseFloat(parseFloat(rates[pagesData.params.asset]).toFixed(4))
             }).catch(error => console.error(error))
         }
 
@@ -1906,7 +1954,7 @@
             } else
                 console.info("refresh");
             updateRate(init);
-            renderMarketOrders();
+            render.marketOrders();
             if (proxy.userID)
                 account();
         }
@@ -1961,10 +2009,13 @@
                 getRef('my_assets').append(frag)
 
                 //My orders
-                renderUserOrders();
+                render.userOrders();
                 proxy.secret.then(_ => null).catch(_ => null);
-                showPage(window.location.hash, { firstLoad: true });
+                showPage(window.location.hash);
             }).catch(error => console.error(error))
+                .finally(() => {
+                    hideProcess('login_button_wrapper')
+                })
         };
 
         const UI_evt = {
@@ -2010,10 +2061,10 @@
                     getRef('sign_in_code').value = null;
                     getRef('sign_in_hash').value = null;
                     account();
-                }).catch(error => notify(error.data, 'error'))
-                    .finally(() => {
-                        hideProcess('login_button_wrapper')
-                    })
+                }).catch(error => {
+                    notify(error.data, 'error')
+                    hideProcess('login_button_wrapper')
+                })
             }
 
         };

From 5170870c8276f7c1bb7522c44d51192a7ee9841a Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sun, 3 Apr 2022 01:45:46 +0530
Subject: [PATCH 10/11] UI fixes

---
 docs/css/components.js | 40 ++++++++++++++++++++--------------------
 docs/index.html        | 15 +++++++++++----
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/docs/css/components.js b/docs/css/components.js
index 9753e20..55257ee 100644
--- a/docs/css/components.js
+++ b/docs/css/components.js
@@ -140,26 +140,26 @@ customElements.define('sm-button',
     })
 const smForm = document.createElement('template');
 smForm.innerHTML = `
-        <style>
-        *{
-            padding: 0;
-            margin: 0;
-            box-sizing: border-box;
-        }
-        :host{
-            display: flex;
-            width: 100%;
-        }
-        form{
-            display: grid;
-            gap: var(--gap, 1.5rem);
-            width: 100%;
-        }
-        </style>
-        <form part="form" onsubmit="return false">
-            <slot></slot>
-        </form>
-    `;
+            <style>
+            *{
+                padding: 0;
+                margin: 0;
+                box-sizing: border-box;
+            }
+            :host{
+                display: flex;
+                width: 100%;
+            }
+            form{
+                display: grid;
+                gap: var(--gap, 1.5rem);
+                width: 100%;
+            }
+            </style>
+            <form part="form" onsubmit="return false">
+                <slot></slot>
+            </form>
+        `;
 
 customElements.define('sm-form', class extends HTMLElement {
     constructor() {
diff --git a/docs/index.html b/docs/index.html
index a4e2167..fcd670b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -72,8 +72,8 @@
                         <h2>Login</h2>
                         <p>Please login for exchange.</p>
                     </div>
-                    <sm-input type="password" id="login_form__priv_key" placeholder="Private key" animate required>
-                    </sm-input>
+                    <sm-input type="password" id="login_form__priv_key" placeholder="Private key"
+                        error-text="Invalid private key" data-private-key animate required>
                     </sm-input>
                     <sm-checkbox id="remember_me" checked>
                         <span class="button__icon--right">
@@ -405,7 +405,7 @@
                 <button class="button" value="1">100%</button>
             </div>
             <sm-input id="get_private_key" placeholder="FLO private key" type="password" required
-                error-text="Invalid private key" animate>
+                error-text="Invalid private key" data-private-key="" animate>
             </sm-input>
             <div id="wallet_popup__cta_wrapper" class="stateful-button-wrapper">
                 <sm-button id="wallet_popup__cta" class="uppercase" variant="primary"></sm-button>
@@ -809,6 +809,7 @@
         window.addEventListener("load", () => {
             showPage(window.location.hash, { firstLoad: true });
             document.body.classList.remove('hide')
+            document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr)
             document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
             document.addEventListener('keyup', (e) => {
                 if (e.key === 'Escape') {
@@ -921,8 +922,10 @@
                             if (isMobileView) {
                                 if (!getRef('asset_list_wrapper').classList.contains('hide-on-mobile')) {
                                     animateTo(getRef('main_header'), slideOutLeft, animOptions)
+                                    animateTo(getRef('main_navbar'), slideOutLeft, animOptions)
                                     animateTo(getRef('asset_list_wrapper'), slideOutLeft, animOptions).onfinish = () => {
                                         getRef('main_header').classList.add('hide-on-mobile')
+                                        getRef('main_navbar').classList.add('hide-on-mobile')
                                         getRef('asset_list_wrapper').classList.add('hide-on-mobile')
                                         getRef('asset_page').classList.remove('hide-on-mobile')
                                         animateTo(getRef('asset_page'), slideInLeft, animOptions)
@@ -930,6 +933,7 @@
                                 }
                             } else {
                                 getRef('main_header').classList.add('hide-on-mobile')
+                                getRef('main_navbar').classList.add('hide-on-mobile')
                                 getRef('asset_list_wrapper').classList.add('hide-on-mobile')
                                 getRef('asset_page').classList.remove('hide-on-mobile')
                             }
@@ -953,7 +957,9 @@
                                         getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
                                         animateTo(getRef('asset_list_wrapper'), slideInRight, animOptions)
                                         getRef('main_header').classList.remove('hide-on-mobile')
+                                        getRef('main_navbar').classList.remove('hide-on-mobile')
                                         animateTo(getRef('main_header'), slideInRight, animOptions)
+                                        animateTo(getRef('main_navbar'), slideInRight, animOptions)
                                     }
                                 }
                             } else {
@@ -1086,6 +1092,7 @@
                 getRef('main_header').style = ''
                 getRef('asset_list_wrapper').style = ''
                 getRef('asset_page').style = ''
+                getRef('main_navbar').style = ''
             }
         }
         mobileQuery.addEventListener('change', handleMobileChange)
@@ -2012,7 +2019,7 @@
                 render.userOrders();
                 proxy.secret.then(_ => null).catch(_ => null);
                 showPage(window.location.hash);
-            }).catch(error => console.error(error))
+            }).catch(error => notify(error.data, 'error'))
                 .finally(() => {
                     hideProcess('login_button_wrapper')
                 })

From dbf71f250670e4258fe5785416ad9066444774f0 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sun, 3 Apr 2022 16:02:11 +0530
Subject: [PATCH 11/11] UI fixes

---
 docs/css/main.css     | 27 ++++++++++++++++++++++-----
 docs/css/main.min.css |  2 +-
 docs/css/main.scss    | 33 ++++++++++++++++++++++-----------
 docs/index.html       | 39 ++++++++++++++++++++++++++-------------
 4 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/docs/css/main.css b/docs/css/main.css
index 392f41f..8dab656 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -613,9 +613,9 @@ sm-checkbox {
   width: 100%;
   justify-content: center;
   overflow-y: auto;
-  padding: 0 1.5rem;
 }
 #pages_container > * {
+  padding: 0 1.5rem;
   width: min(42rem, 100%);
 }
 
@@ -664,6 +664,10 @@ sm-checkbox {
   min-width: 8ch;
 }
 
+#exchange {
+  padding: 0;
+}
+
 #exchange_wrapper {
   display: flex;
   flex-direction: column;
@@ -673,10 +677,11 @@ sm-checkbox {
 #asset_page {
   height: 100%;
 }
-#asset_page nav {
+
+#asset_page__nav {
   padding: 1rem 0;
 }
-#asset_page nav .icon-only {
+#asset_page__nav .icon-only {
   margin-left: -0.7rem;
 }
 
@@ -1033,6 +1038,16 @@ sm-checkbox {
     display: none !important;
   }
 
+  #asset_page__nav {
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+  }
+
+  #trade_form,
+#asset_list_wrapper,
+#chart_header {
+    padding: 0 1.5rem;
+  }
+
   #asset_page {
     display: flex;
     flex-direction: column;
@@ -1043,7 +1058,7 @@ sm-checkbox {
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
 
-  #price_chart_wrapper {
+  #price_chart_container {
     flex: 1;
   }
 }
@@ -1128,6 +1143,7 @@ sm-checkbox {
   .is-signed-in #exchange {
     display: flex;
     width: 100%;
+    padding: 0 1.5rem;
   }
   .is-signed-in #exchange_wrapper {
     display: grid;
@@ -1182,7 +1198,8 @@ sm-checkbox {
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;
   }
-  #asset_page nav {
+
+  #asset_page__nav {
     grid-column: 1/-1;
   }
 }
diff --git a/docs/css/main.min.css b/docs/css/main.min.css
index c1411b0..ff90cd3 100644
--- a/docs/css/main.min.css
+++ b/docs/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#exchange_wrapper{display:flex;flex-direction:column;height:100%}#asset_page{height:100%}#asset_page nav{padding:1rem 0}#asset_page nav .icon-only{margin-left:-0.7rem}#trade_form{height:100%}#trade_form::part(form){display:flex;flex-direction:column;gap:0}#trade_form>*{margin-bottom:1rem}#trade_form>:last-child{margin-top:auto}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none !important}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none !important}#asset_page{display:flex;flex-direction:column}.listed-asset{border-radius:0;border-bottom:solid thin rgba(var(--text-color), 0.1)}#price_chart_wrapper{flex:1}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none !important}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none !important}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}#asset_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0, 1fr) 20rem}#asset_page nav{grid-column:1/-1}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #504dff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s}body[data-theme=dark]{--accent-color: #a3a1ff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto}#pages_container>*{padding:0 1.5rem;width:min(42rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}#flo_rate{font-weight:700}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#exchange{padding:0}#exchange_wrapper{display:flex;flex-direction:column;height:100%}#asset_page{height:100%}#asset_page__nav{padding:1rem 0}#asset_page__nav .icon-only{margin-left:-0.7rem}#trade_form{height:100%}#trade_form::part(form){display:flex;flex-direction:column;gap:0}#trade_form>*{margin-bottom:1rem}#trade_form>:last-child{margin-top:auto}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}#my_orders .icon,#market .icon{height:1.2rem;width:1.2rem}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{gap:1.5rem;align-content:flex-start;width:min(24rem,100%)}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem .5rem;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none !important}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none !important}#asset_page__nav{padding:1rem 1.5rem 1.5rem 1.5rem}#trade_form,#asset_list_wrapper,#chart_header{padding:0 1.5rem}#asset_page{display:flex;flex-direction:column}.listed-asset{border-radius:0;border-bottom:solid thin rgba(var(--text-color), 0.1)}#price_chart_container{flex:1}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none !important}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%;padding:0 1.5rem}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{overflow:hidden;border-radius:.5rem;height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none !important}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}#asset_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0, 1fr) 20rem}#asset_page__nav{grid-column:1/-1}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/docs/css/main.scss b/docs/css/main.scss
index 4d1ce0a..a95e518 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -588,8 +588,8 @@ sm-checkbox {
   width: 100%;
   justify-content: center;
   overflow-y: auto;
-  padding: 0 1.5rem;
   & > * {
+    padding: 0 1.5rem;
     width: min(42rem, 100%);
   }
 }
@@ -633,7 +633,9 @@ sm-checkbox {
   font-weight: 500;
   min-width: 8ch;
 }
-
+#exchange {
+  padding: 0;
+}
 #exchange_wrapper {
   display: flex;
   flex-direction: column;
@@ -641,11 +643,11 @@ sm-checkbox {
 }
 #asset_page {
   height: 100%;
-  nav {
-    padding: 1rem 0;
-    .icon-only {
-      margin-left: -0.7rem;
-    }
+}
+#asset_page__nav {
+  padding: 1rem 0;
+  .icon-only {
+    margin-left: -0.7rem;
   }
 }
 #trade_form {
@@ -960,6 +962,14 @@ sm-checkbox {
   .hide-on-mobile {
     display: none !important;
   }
+  #asset_page__nav {
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+  }
+  #trade_form,
+  #asset_list_wrapper,
+  #chart_header {
+    padding: 0 1.5rem;
+  }
   #asset_page {
     display: flex;
     flex-direction: column;
@@ -968,7 +978,7 @@ sm-checkbox {
     border-radius: 0;
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
-  #price_chart_wrapper {
+  #price_chart_container {
     flex: 1;
   }
 }
@@ -1043,6 +1053,7 @@ sm-checkbox {
     #exchange {
       display: flex;
       width: 100%;
+      padding: 0 1.5rem;
     }
     #exchange_wrapper {
       display: grid;
@@ -1096,9 +1107,9 @@ sm-checkbox {
     display: grid;
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;
-    nav {
-      grid-column: 1/-1;
-    }
+  }
+  #asset_page__nav {
+    grid-column: 1/-1;
   }
 }
 @media screen and (min-width: 72rem) {
diff --git a/docs/index.html b/docs/index.html
index fcd670b..5fca21b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -99,7 +99,7 @@
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
                     <div id="asset_page" class="hide-on-mobile">
-                        <nav class="flex align-center space-between hide-on-desktop">
+                        <nav id="asset_page__nav" class="flex align-center space-between hide-on-desktop">
                             <a href="#/exchange" class="button icon-only">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                                     width="24px" fill="#000000">
@@ -112,8 +112,8 @@
                                 <strip-option value="chart">Chart</strip-option>
                             </strip-select>
                         </nav>
-                        <div id="price_chart_wrapper" class="flex direction-column gap-0-5 hide-on-mobile">
-                            <div class="flex align-center space-between">
+                        <div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile">
+                            <div id="chart_header" class="flex align-center space-between">
                                 <div id="chart_asset"></div>
                                 <strip-select id="price_duration_selector">
                                     <strip-option value="hour" title="1 Hour price interval" selected>Hour
@@ -121,7 +121,7 @@
                                     <strip-option value="day" title="1 Day price interval">Day</strip-option>
                                 </strip-select>
                             </div>
-                            <div class="flex" style="position: relative; flex: 1">
+                            <div id="price_chart_wrapper" class="flex" style="position: relative; flex: 1">
                                 <div id="price_history_chart"></div>
                             </div>
                         </div>
@@ -947,6 +947,7 @@
                                 });
                                 lineSeries = chart.addLineSeries();
                                 setChartTheme()
+                                chartObserver.observe(getRef('price_chart_wrapper'))
                             }
                             render.chart(params.asset)
                         } else {
@@ -1129,6 +1130,11 @@
         function formatAmount(amount) {
             return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 })
         }
+
+        const chartDimensions = {
+            height: 0,
+            width: 0
+        }
         const render = {
             listedAsset(name, rate) {
                 const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild
@@ -1215,19 +1221,17 @@
                         }
                     })
                     lineSeries.setData(data);
-                    let width
-                    let height
                     new ResizeObserver(entries => {
-                        height = entries[0].contentRect.height;
-                        width = entries[0].contentRect.width;
-                        chart.applyOptions({ width, height });
-                    }).observe(getRef('price_history_chart').parentNode);
+                        chartDimensions.height = entries[0].contentRect.height;
+                        chartDimensions.width = entries[0].contentRect.width;
+                        chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
+                    }).observe(getRef('price_chart_wrapper'));
                     function setLastBarText() {
                         getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
                     }
                     setLastBarText();
                     chart.subscribeCrosshairMove(function (param) {
-                        if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > width || param.point.y < 0 || param.point.y > height) {
+                        if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > chartDimensions.width || param.point.y < 0 || param.point.y > chartDimensions.height) {
                             setLastBarText();
                         } else {
                             const price = param.seriesPrices.get(lineSeries);
@@ -1343,6 +1347,15 @@
             getRef(id).querySelector('sm-spinner')?.remove()
         }
 
+        const chartObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting && chart) {
+                const { width, height } = entries[0].target.getBoundingClientRect()
+                chartDimensions.height = height;
+                chartDimensions.width = width;
+                chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
+            }
+        })
+
         let chart
         let lineSeries
         function getChartTheme() {
@@ -1386,11 +1399,11 @@
 
         getRef('trading_view_switcher').addEventListener('change', e => {
             if (e.target.value === 'trade') {
-                getRef('price_chart_wrapper').classList.add('hide-on-mobile')
+                getRef('price_chart_container').classList.add('hide-on-mobile')
                 getRef('trade_form').classList.remove('hide-on-mobile')
             } else {
                 getRef('trade_form').classList.add('hide-on-mobile')
-                getRef('price_chart_wrapper').classList.remove('hide-on-mobile')
+                getRef('price_chart_container').classList.remove('hide-on-mobile')
             }
         })