diff --git a/css/main.css b/css/main.css
index f9f0d06..a3c5ac2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -969,6 +969,35 @@ aside h4 {
   margin-bottom: 2rem;
 }
 
+.transaction__phase {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.transaction__phase:not(:last-of-type) {
+  position: relative;
+  margin-bottom: 2rem;
+}
+.transaction__phase:not(:last-of-type)::after {
+  content: "";
+  position: absolute;
+  width: 0.1rem;
+  height: 100%;
+  left: 0.3rem;
+  border-right: dashed 0.1rem rgba(var(--text-color), 0.5);
+  top: calc(100% + 0.4rem);
+}
+.transaction__phase .icon {
+  height: 1rem;
+  width: 1rem;
+}
+.transaction__phase sm-spinner {
+  --size: 1rem;
+}
+.transaction__phase .confirmed {
+  fill: var(--green);
+}
+
 .user-action-result__icon {
   justify-self: center;
   height: 4rem;
diff --git a/css/main.min.css b/css/main.min.css
index 2d34697..e8aca0a 100644
--- a/css/main.min.css
+++ b/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.5rem)}html,body{height:100%}body{--accent-color: #3d5afe;--accent-color-rgb: 77, 119, 255;--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--foreground-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--accent-color-rgb: 160, 182, 255;--secondary-color: #d60739;--text-color: 210, 210, 210;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}h1,h2,h3,h4,h5,h6{letter-spacing:-0.01em;font-weight:700}p,strong{line-height:1.7;color:rgba(var(--text-color), 0.9);max-width:70ch;font-size:.9rem}img{-o-object-fit:cover;object-fit:cover}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)}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}input[type=datetime-local]{width:100%;padding:.8rem .6rem;border:none;border-radius:.5rem;font-weight:500;font-family:inherit;font-size:inherit;color:inherit;background-color:rgba(var(--text-color), 0.06)}input[type=datetime-local]:focus{outline:none;box-shadow:0 0 0 .1rem var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.5rem 1rem;border-radius:.5rem;justify-content:center;flex-shrink:0}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{padding:.8rem 1rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid var(--accent-color) 1px;background-color:rgba(0,0,0,0);color:var(--accent-color)}.button--outlined .icon{fill:var(--accent-color)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{height:100%;padding:0;padding:.4rem;border-radius:.3rem;aspect-ratio:1/1}.icon-only .icon{height:1em;width:1em}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}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;gap:1rem;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}fieldset{border:none}sm-input{--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-spinner{--size: 1.3rem;--stroke-width: 0.1rem}sm-chips{--gap: 0.3rem}sm-chip{position:relative;font-size:.9rem;--border-radius: 0.5rem;--padding: 0.5rem 0.8rem;--background: rgba(var(--text-color), 0.06);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:500}sm-chip[selected]{--background: var(--accent-color);color:rgba(var(--background-color), 1)}sm-select{font-size:.9rem;font-weight:500;--padding: 0.6rem 0.3rem 0.6rem 0.6rem}sm-option{font-size:.9rem}ul{list-style:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.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}.text-align-left{text-align:left}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-content-start{align-content:flex-start}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-content-start{justify-content:start}.justify-content-center{justify-content:center}.justify-items-center{justify-items:center}.justify-right{margin-left:auto}.align-self-start{align-self:start}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.space-evenly{justify-content:space-evenly}.w-100{width:100%}.h-100{height:100%}.padding-block-1{padding-block:1rem}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-right-1{margin-right:1rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.margin-top-1{margin-top:1rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-2{margin-bottom:2rem}.margin-block-0-5{margin-block:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.hidden{display:none !important}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ws-pre-line{white-space:pre-line}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:max(1rem,3vw)}.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}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.password-field label{display:flex;flex-shrink:0}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center;justify-items:center;isolation:isolate}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1;width:100%}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:1rem}#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{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1;margin-left:-1rem;justify-self:flex-start}ul[type=circle],menu[type=circle]{padding:1.5rem 2.5rem;list-style:circle}ul[type=circle] li,menu[type=circle] li{margin-bottom:1rem}ul[type=circle] li:last-of-type,menu[type=circle] li:last-of-type{margin-bottom:0}ul,menu{list-style:none}#main_header{grid-area:header;display:grid;align-items:center;grid-template-columns:1fr auto;gap:1rem;padding:1rem;border-bottom:solid thin rgba(var(--text-color), 0.3);grid-column:1/-1}#logo{color:inherit;margin-right:auto}.app-brand{display:flex;gap:.3rem;align-items:center}.app-brand .icon{height:1.2rem;width:1.2rem}.app-name__company{font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8)}#meta_mask_status_button{gap:.3rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.06);padding:.3rem .6rem;font-weight:500}#meta_mask_status_button .icon-wrapper{position:relative;display:grid;place-content:center}#meta_mask_status_button .icon-wrapper::after{content:"";position:absolute;width:.5rem;height:.5rem;border-radius:50%;top:0;right:0}#meta_mask_status_button .icon-wrapper>*{grid-area:1/1}#meta_mask_status_button[data-status=connected]{pointer-events:none}#meta_mask_status_button[data-status=connected] .icon-wrapper::after{background-color:var(--green)}#meta_mask_status_button[data-status=disconnected] .icon-wrapper::after{background-color:var(--danger-color)}theme-toggle{justify-self:end;align-self:center}.label{text-transform:capitalize;font-size:.8rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8);margin-top:1.5rem;font-weight:500}.label:first-of-type{margin-top:0}.label+:is(h1,h2,h3,h4,h5,h6,p,span,sm-copy,a){font-weight:700}main{display:grid;height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "pages" "navbar"}#main_navbar{grid-area:navbar;display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;gap:.5rem;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{width:2rem;transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color)}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;view-transition-name:indicator}#page_container{display:flex;overflow:auto;grid-area:pages}#page_container[data-page=home]>:nth-child(2){flex:1}#page_container[data-page=send]{align-items:flex-start}#page_container[data-page=send]>*{padding:1rem;margin:0 auto}#page_container[data-page=create]{margin:0 auto;padding:4vw 1rem;gap:2rem;flex-direction:column;width:min(100%,42rem)}aside{view-transition-name:search-history;padding-bottom:1.5rem}aside>*{padding:0 1rem}aside h4{padding:1rem}.contact{display:grid;gap:.5rem;align-items:center;border:solid thin rgba(var(--text-color), 0.3);padding:.5rem;border-radius:.5rem}.contact sm-chips{background-color:rgba(var(--text-color), 0.06);padding:.2rem .3rem;border-radius:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.contact sm-chip{--padding: 0.3rem 0.5rem;font-size:.8rem;--border-radius: 0.3rem}.contact sm-copy{font-size:.9rem;font-weight:500}#balance_section{margin-top:3vw;align-content:start;padding:1.5rem}#balance_section>*{max-width:36rem;margin:0 auto}#input_wrapper{display:grid;gap:.5rem}#eth_balance_wrapper{background-color:rgba(var(--text-color), 0.06);padding:max(1rem,1.5vw);border-radius:.5rem;width:100%}#eth_balance_wrapper li:not(:last-of-type){border-bottom:solid thin rgba(var(--text-color), 0.3);padding-bottom:.5rem}#error_section{display:grid;height:100%;gap:.5rem;place-content:center;place-items:center;text-align:center;grid-column:1/-1}#error_section .icon{height:8rem;width:8rem;padding:2rem;background-color:rgba(var(--text-color), 0.06);border-radius:5rem;margin-bottom:2rem}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;-webkit-animation:popup 1s;animation:popup 1s;padding:1rem}.user-action-result__icon.pending{fill:var(--yellow);background-color:rgba(var(--text-color), 0.03)}.user-action-result__icon.confirmed{fill:rgba(var(--background-color), 1);background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}#generated_addresses{background-color:rgba(var(--text-color), 0.06);padding:max(1rem,1.5vw);border-radius:.5rem}#generated_addresses li:not(:last-of-type){padding-bottom:1rem;border-bottom:solid thin rgba(var(--text-color), 0.3)}@media only screen and (max-width: 640px){.hide-on-small{display:none}#page_container[data-page=home]{flex-direction:column}#page_container[data-page=home]>:first-child{order:1}}@media only screen and (min-width: 640px){sm-popup{--width: 24rem}.popup__header{padding:1rem 1.5rem 0 1.5rem}main{grid-template-columns:10rem 1fr;grid-template-areas:"header header" "navbar pages";grid-template-rows:auto 1fr}#main_navbar{border-top:none;flex-direction:column;background-color:rgba(0,0,0,0);border-right:solid thin rgba(var(--text-color), 0.3)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}.nav-item{flex-direction:row;justify-content:flex-start;padding:.8rem 1rem .8rem .5rem;flex:1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}aside{border-right:solid thin rgba(var(--text-color), 0.3);overflow-y:auto}aside h4{position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 1);z-index:1}#input_wrapper{grid-template-columns:1fr auto}}@media only screen and (min-width: 1280px){.page{margin:0 8vw}}@media(hover: hover){.hover{cursor:pointer}::-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:not([disabled],.button--primary){transition:background-color .3s}.interact:not([disabled],.button--primary):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@media(prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){-webkit-animation:none !important;animation:none !important}}
\ 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.5rem)}html,body{height:100%}body{--accent-color: #3d5afe;--accent-color-rgb: 77, 119, 255;--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--foreground-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--accent-color-rgb: 160, 182, 255;--secondary-color: #d60739;--text-color: 210, 210, 210;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}h1,h2,h3,h4,h5,h6{letter-spacing:-0.01em;font-weight:700}p,strong{line-height:1.7;color:rgba(var(--text-color), 0.9);max-width:70ch;font-size:.9rem}img{-o-object-fit:cover;object-fit:cover}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)}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}input[type=datetime-local]{width:100%;padding:.8rem .6rem;border:none;border-radius:.5rem;font-weight:500;font-family:inherit;font-size:inherit;color:inherit;background-color:rgba(var(--text-color), 0.06)}input[type=datetime-local]:focus{outline:none;box-shadow:0 0 0 .1rem var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.5rem 1rem;border-radius:.5rem;justify-content:center;flex-shrink:0}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{padding:.8rem 1rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid var(--accent-color) 1px;background-color:rgba(0,0,0,0);color:var(--accent-color)}.button--outlined .icon{fill:var(--accent-color)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{height:100%;padding:0;padding:.4rem;border-radius:.3rem;aspect-ratio:1/1}.icon-only .icon{height:1em;width:1em}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}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;gap:1rem;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}fieldset{border:none}sm-input{--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-spinner{--size: 1.3rem;--stroke-width: 0.1rem}sm-chips{--gap: 0.3rem}sm-chip{position:relative;font-size:.9rem;--border-radius: 0.5rem;--padding: 0.5rem 0.8rem;--background: rgba(var(--text-color), 0.06);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:500}sm-chip[selected]{--background: var(--accent-color);color:rgba(var(--background-color), 1)}sm-select{font-size:.9rem;font-weight:500;--padding: 0.6rem 0.3rem 0.6rem 0.6rem}sm-option{font-size:.9rem}ul{list-style:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.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}.text-align-left{text-align:left}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-content-start{align-content:flex-start}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-content-start{justify-content:start}.justify-content-center{justify-content:center}.justify-items-center{justify-items:center}.justify-right{margin-left:auto}.align-self-start{align-self:start}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.space-evenly{justify-content:space-evenly}.w-100{width:100%}.h-100{height:100%}.padding-block-1{padding-block:1rem}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-right-1{margin-right:1rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.margin-top-1{margin-top:1rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-2{margin-bottom:2rem}.margin-block-0-5{margin-block:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.hidden{display:none !important}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ws-pre-line{white-space:pre-line}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:max(1rem,3vw)}.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}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.password-field label{display:flex;flex-shrink:0}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center;justify-items:center;isolation:isolate}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1;width:100%}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:1rem}#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{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1;margin-left:-1rem;justify-self:flex-start}ul[type=circle],menu[type=circle]{padding:1.5rem 2.5rem;list-style:circle}ul[type=circle] li,menu[type=circle] li{margin-bottom:1rem}ul[type=circle] li:last-of-type,menu[type=circle] li:last-of-type{margin-bottom:0}ul,menu{list-style:none}#main_header{grid-area:header;display:grid;align-items:center;grid-template-columns:1fr auto;gap:1rem;padding:1rem;border-bottom:solid thin rgba(var(--text-color), 0.3);grid-column:1/-1}#logo{color:inherit;margin-right:auto}.app-brand{display:flex;gap:.3rem;align-items:center}.app-brand .icon{height:1.2rem;width:1.2rem}.app-name__company{font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8)}#meta_mask_status_button{gap:.3rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.06);padding:.3rem .6rem;font-weight:500}#meta_mask_status_button .icon-wrapper{position:relative;display:grid;place-content:center}#meta_mask_status_button .icon-wrapper::after{content:"";position:absolute;width:.5rem;height:.5rem;border-radius:50%;top:0;right:0}#meta_mask_status_button .icon-wrapper>*{grid-area:1/1}#meta_mask_status_button[data-status=connected]{pointer-events:none}#meta_mask_status_button[data-status=connected] .icon-wrapper::after{background-color:var(--green)}#meta_mask_status_button[data-status=disconnected] .icon-wrapper::after{background-color:var(--danger-color)}theme-toggle{justify-self:end;align-self:center}.label{text-transform:capitalize;font-size:.8rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8);margin-top:1.5rem;font-weight:500}.label:first-of-type{margin-top:0}.label+:is(h1,h2,h3,h4,h5,h6,p,span,sm-copy,a){font-weight:700}main{display:grid;height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "pages" "navbar"}#main_navbar{grid-area:navbar;display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;gap:.5rem;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{width:2rem;transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color)}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;view-transition-name:indicator}#page_container{display:flex;overflow:auto;grid-area:pages}#page_container[data-page=home]>:nth-child(2){flex:1}#page_container[data-page=send]{align-items:flex-start}#page_container[data-page=send]>*{padding:1rem;margin:0 auto}#page_container[data-page=create]{margin:0 auto;padding:4vw 1rem;gap:2rem;flex-direction:column;width:min(100%,42rem)}aside{view-transition-name:search-history;padding-bottom:1.5rem}aside>*{padding:0 1rem}aside h4{padding:1rem}.contact{display:grid;gap:.5rem;align-items:center;border:solid thin rgba(var(--text-color), 0.3);padding:.5rem;border-radius:.5rem}.contact sm-chips{background-color:rgba(var(--text-color), 0.06);padding:.2rem .3rem;border-radius:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.contact sm-chip{--padding: 0.3rem 0.5rem;font-size:.8rem;--border-radius: 0.3rem}.contact sm-copy{font-size:.9rem;font-weight:500}#balance_section{margin-top:3vw;align-content:start;padding:1.5rem}#balance_section>*{max-width:36rem;margin:0 auto}#input_wrapper{display:grid;gap:.5rem}#eth_balance_wrapper{background-color:rgba(var(--text-color), 0.06);padding:max(1rem,1.5vw);border-radius:.5rem;width:100%}#eth_balance_wrapper li:not(:last-of-type){border-bottom:solid thin rgba(var(--text-color), 0.3);padding-bottom:.5rem}#error_section{display:grid;height:100%;gap:.5rem;place-content:center;place-items:center;text-align:center;grid-column:1/-1}#error_section .icon{height:8rem;width:8rem;padding:2rem;background-color:rgba(var(--text-color), 0.06);border-radius:5rem;margin-bottom:2rem}.transaction__phase{display:flex;align-items:center;gap:1rem}.transaction__phase:not(:last-of-type){position:relative;margin-bottom:2rem}.transaction__phase:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:100%;left:.3rem;border-right:dashed .1rem rgba(var(--text-color), 0.5);top:calc(100% + .4rem)}.transaction__phase .icon{height:1rem;width:1rem}.transaction__phase sm-spinner{--size: 1rem}.transaction__phase .confirmed{fill:var(--green)}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;-webkit-animation:popup 1s;animation:popup 1s;padding:1rem}.user-action-result__icon.pending{fill:var(--yellow);background-color:rgba(var(--text-color), 0.03)}.user-action-result__icon.confirmed{fill:rgba(var(--background-color), 1);background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}#generated_addresses{background-color:rgba(var(--text-color), 0.06);padding:max(1rem,1.5vw);border-radius:.5rem}#generated_addresses li:not(:last-of-type){padding-bottom:1rem;border-bottom:solid thin rgba(var(--text-color), 0.3)}@media only screen and (max-width: 640px){.hide-on-small{display:none}#page_container[data-page=home]{flex-direction:column}#page_container[data-page=home]>:first-child{order:1}}@media only screen and (min-width: 640px){sm-popup{--width: 24rem}.popup__header{padding:1rem 1.5rem 0 1.5rem}main{grid-template-columns:10rem 1fr;grid-template-areas:"header header" "navbar pages";grid-template-rows:auto 1fr}#main_navbar{border-top:none;flex-direction:column;background-color:rgba(0,0,0,0);border-right:solid thin rgba(var(--text-color), 0.3)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}.nav-item{flex-direction:row;justify-content:flex-start;padding:.8rem 1rem .8rem .5rem;flex:1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}aside{border-right:solid thin rgba(var(--text-color), 0.3);overflow-y:auto}aside h4{position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 1);z-index:1}#input_wrapper{grid-template-columns:1fr auto}}@media only screen and (min-width: 1280px){.page{margin:0 8vw}}@media(hover: hover){.hover{cursor:pointer}::-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:not([disabled],.button--primary){transition:background-color .3s}.interact:not([disabled],.button--primary):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@media(prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){-webkit-animation:none !important;animation:none !important}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 2c005a8..2bab491 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -38,10 +38,12 @@ body[data-theme="dark"] {
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
   --yellow: rgb(255, 213, 5);
+
   ::-webkit-calendar-picker-indicator {
     filter: invert(1);
   }
 }
+
 h1,
 h2,
 h3,
@@ -52,6 +54,7 @@ h6 {
   font-weight: 700;
   // font-family: "Rubik", sans-serif;
 }
+
 p,
 strong {
   line-height: 1.7;
@@ -72,6 +75,7 @@ a:where([class]) {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
   }
 }
+
 a {
   color: var(--accent-color);
 }
@@ -79,6 +83,7 @@ a {
 a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
+
 input[type="datetime-local"] {
   width: 100%;
   padding: 0.8rem 0.6rem;
@@ -89,11 +94,13 @@ input[type="datetime-local"] {
   font-size: inherit;
   color: inherit;
   background-color: rgba(var(--text-color), 0.06);
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 0.1rem var(--accent-color);
   }
 }
+
 button,
 .button {
   user-select: none;
@@ -112,6 +119,7 @@ button,
   border-radius: 0.5rem;
   justify-content: center;
   flex-shrink: 0;
+
   &:focus-visible {
     outline: var(--accent-color) solid medium;
   }
@@ -124,6 +132,7 @@ button,
 .button {
   background-color: rgba(var(--text-color), 0.02);
   border: solid thin rgba(var(--text-color), 0.06);
+
   &--primary {
     padding: 0.8rem 1rem;
     color: rgba(var(--background-color), 1);
@@ -133,15 +142,19 @@ button,
       fill: rgba(var(--background-color), 1);
     }
   }
+
   &--colored {
     color: var(--accent-color);
+
     .icon {
       fill: var(--accent-color);
     }
   }
+
   &--danger {
     background-color: #ff737310;
     color: var(--danger-color);
+
     .icon {
       fill: var(--danger-color);
     }
@@ -155,14 +168,17 @@ button,
     border: solid var(--accent-color) 1px;
     background-color: transparent;
     color: var(--accent-color);
+
     .icon {
       fill: var(--accent-color);
     }
   }
+
   &--transparent {
     background-color: transparent;
   }
 }
+
 button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -190,6 +206,7 @@ button:disabled {
   padding: 0.4rem;
   border-radius: 0.3rem;
   aspect-ratio: 1/1;
+
   .icon {
     height: 1em;
     width: 1em;
@@ -214,13 +231,15 @@ details[open] {
     margin-bottom: 1rem;
   }
 
-  & > summary .down-arrow {
+  &>summary .down-arrow {
     transform: rotate(180deg);
   }
 }
+
 fieldset {
   border: none;
 }
+
 sm-input {
   --border-radius: 0.5rem;
   --background-color: rgba(var(--foreground-color), 1);
@@ -243,28 +262,34 @@ sm-chip {
   --background: rgba(var(--text-color), 0.06);
   user-select: none;
   font-weight: 500;
+
   &[selected] {
     --background: var(--accent-color);
     color: rgba(var(--background-color), 1);
   }
 }
+
 sm-select {
   font-size: 0.9rem;
   font-weight: 500;
   --padding: 0.6rem 0.3rem 0.6rem 0.6rem;
 }
+
 sm-option {
   font-size: 0.9rem;
 }
+
 ul {
   list-style: none;
 }
+
 .interact {
   position: relative;
   overflow: hidden;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
+
 .overflow-ellipsis {
   width: 100%;
   overflow: hidden;
@@ -309,6 +334,7 @@ ul {
 .flex-1 {
   flex: 1;
 }
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -348,6 +374,7 @@ ul {
 .text-align-right {
   text-align: right;
 }
+
 .text-align-left {
   text-align: left;
 }
@@ -355,9 +382,11 @@ ul {
 .align-items-start {
   align-items: flex-start;
 }
+
 .align-items-center {
   align-items: center;
 }
+
 .align-content-start {
   align-content: flex-start;
 }
@@ -381,6 +410,7 @@ ul {
 .justify-start {
   justify-items: start;
 }
+
 .justify-content-start {
   justify-content: start;
 }
@@ -388,6 +418,7 @@ ul {
 .justify-content-center {
   justify-content: center;
 }
+
 .justify-items-center {
   justify-items: center;
 }
@@ -395,9 +426,11 @@ ul {
 .justify-right {
   margin-left: auto;
 }
+
 .align-self-start {
   align-self: start;
 }
+
 .align-self-center {
   align-self: center;
 }
@@ -425,6 +458,7 @@ ul {
 .space-between {
   justify-content: space-between;
 }
+
 .space-evenly {
   justify-content: space-evenly;
 }
@@ -444,9 +478,11 @@ ul {
 .margin-right-0-3 {
   margin-right: 0.3rem;
 }
+
 .margin-right-0-5 {
   margin-right: 0.5rem;
 }
+
 .margin-right-1 {
   margin-right: 1rem;
 }
@@ -458,18 +494,23 @@ ul {
 .margin-left-auto {
   margin-left: auto;
 }
+
 .margin-right-auto {
   margin-right: auto;
 }
+
 .margin-top-1 {
   margin-top: 1rem;
 }
+
 .margin-bottom-0-5 {
   margin-bottom: 0.5rem;
 }
+
 .margin-bottom-1 {
   margin-bottom: 1rem;
 }
+
 .margin-bottom-2 {
   margin-bottom: 2rem;
 }
@@ -477,6 +518,7 @@ ul {
 .margin-block-0-5 {
   margin-block: 0.5rem;
 }
+
 .margin-block-1 {
   margin-block: 1rem;
 }
@@ -524,6 +566,7 @@ ul {
 .flow-column {
   grid-auto-flow: column;
 }
+
 .w-100 {
   width: 100%;
 }
@@ -539,6 +582,7 @@ ul {
 .weight-500 {
   font-weight: 500;
 }
+
 .ws-pre-line {
   white-space: pre-line;
 }
@@ -555,13 +599,12 @@ ul {
   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%
-  );
+  background: radial-gradient(circle,
+      rgba(var(--text-color), 0.3) 0%,
+      rgba(0, 0, 0, 0) 50%);
   pointer-events: none;
 }
+
 .interactive {
   position: relative;
   overflow: hidden;
@@ -573,30 +616,36 @@ ul {
   display: none;
 }
 
-.observe-empty-state:not(:empty) ~ .empty-state {
+.observe-empty-state:not(:empty)~.empty-state {
   display: none;
 }
+
 .password-field {
   label {
     display: flex;
     flex-shrink: 0;
-    input:checked ~ .visible {
+
+    input:checked~.visible {
       display: none;
     }
-    input:not(:checked) ~ .invisible {
+
+    input:not(:checked)~.invisible {
       display: none;
     }
   }
 }
+
 .multi-state-button {
   display: grid;
   text-align: center;
   align-items: center;
   justify-items: center;
   isolation: isolate;
-  & > * {
+
+  &>* {
     grid-area: 1/1/2/2;
   }
+
   button {
     z-index: 1;
     width: 100%;
@@ -606,21 +655,26 @@ ul {
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
+
   h4 {
     margin-bottom: 1rem;
   }
+
   sm-button {
     margin: 0;
   }
+
   .flex {
     padding: 0;
     margin-top: 1rem;
+
     sm-button:first-of-type {
       margin-right: 0.6rem;
       margin-left: auto;
     }
   }
 }
+
 #prompt_message {
   margin-bottom: 1.5rem;
 }
@@ -632,37 +686,45 @@ ul {
   width: 100%;
   padding: 0 1.5rem;
   align-items: center;
-  & > * {
+
+  &>* {
     grid-row: 1;
   }
+
   h3,
   h4 {
     grid-column: 1/-1;
     justify-self: center;
     align-self: center;
   }
+
   &__close {
     grid-column: 1;
     margin-left: -1rem;
     justify-self: flex-start;
   }
 }
+
 ul,
 menu {
   &[type="circle"] {
     padding: 1.5rem 2.5rem;
     list-style: circle;
+
     li {
       margin-bottom: 1rem;
+
       &:last-of-type {
         margin-bottom: 0;
       }
     }
   }
+
   & {
     list-style: none;
   }
 }
+
 #main_header {
   grid-area: header;
   display: grid;
@@ -673,19 +735,23 @@ menu {
   border-bottom: solid thin rgba(var(--text-color), 0.3);
   grid-column: 1/-1;
 }
+
 #logo {
   color: inherit;
   margin-right: auto;
 }
+
 .app-brand {
   display: flex;
   gap: 0.3rem;
   align-items: center;
+
   .icon {
     height: 1.2rem;
     width: 1.2rem;
   }
 }
+
 .app-name {
   &__company {
     font-size: 0.8rem;
@@ -693,16 +759,19 @@ menu {
     color: rgba(var(--text-color), 0.8);
   }
 }
+
 #meta_mask_status_button {
   gap: 0.3rem;
   border-radius: 2rem;
   background-color: rgba(var(--text-color), 0.06);
   padding: 0.3rem 0.6rem;
   font-weight: 500;
+
   .icon-wrapper {
     position: relative;
     display: grid;
     place-content: center;
+
     &::after {
       content: "";
       position: absolute;
@@ -712,24 +781,30 @@ menu {
       top: 0;
       right: 0;
     }
-    & > * {
+
+    &>* {
       grid-area: 1/1;
     }
   }
+
   &[data-status="connected"] {
     pointer-events: none;
+
     .icon-wrapper::after {
       background-color: var(--green);
     }
   }
+
   &[data-status="disconnected"] .icon-wrapper::after {
     background-color: var(--danger-color);
   }
 }
+
 theme-toggle {
   justify-self: end;
   align-self: center;
 }
+
 .label {
   text-transform: capitalize;
   font-size: 0.8rem;
@@ -737,35 +812,43 @@ theme-toggle {
   color: rgba(var(--text-color), 0.8);
   margin-top: 1.5rem;
   font-weight: 500;
+
   &:first-of-type {
     margin-top: 0;
   }
-  & + :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) {
+
+  &+ :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) {
     font-weight: 700;
   }
 }
+
 main {
   display: grid;
   height: 100%;
   grid-template-rows: auto 1fr auto;
   grid-template-areas: "header" "pages" "navbar";
 }
+
 #main_navbar {
   grid-area: navbar;
   display: flex;
   background: rgba(var(--text-color), 0.03);
+
   &.hide-away {
     position: absolute;
   }
+
   ul {
     display: flex;
     height: 100%;
     width: 100%;
+
     li {
       width: 100%;
     }
   }
 }
+
 .nav-item {
   position: relative;
   display: flex;
@@ -780,20 +863,25 @@ main {
   font-size: 0.8rem;
   border-radius: 0.3rem;
   font-weight: 500;
+
   .icon {
     width: 2rem;
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
+
   &__title {
     transition: opacity 0.2s,
       transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
+
   &--active {
     color: var(--accent-color);
+
     .icon {
       fill: var(--accent-color);
     }
   }
+
   &__indicator {
     position: absolute;
     bottom: 0;
@@ -804,6 +892,7 @@ main {
     view-transition-name: indicator;
   }
 }
+
 // body.loaded .nav-item {
 //   &__indicator {
 //     view-transition-name: indicator;
@@ -813,18 +902,22 @@ main {
   display: flex;
   overflow: auto;
   grid-area: pages;
+
   &[data-page="home"] {
-    & > :nth-child(2) {
+    &> :nth-child(2) {
       flex: 1;
     }
   }
+
   &[data-page="send"] {
     align-items: flex-start;
-    & > * {
+
+    &>* {
       padding: 1rem;
       margin: 0 auto;
     }
   }
+
   &[data-page="create"] {
     margin: 0 auto;
     padding: 4vw 1rem;
@@ -833,16 +926,21 @@ main {
     width: min(100%, 42rem);
   }
 }
+
 aside {
   view-transition-name: search-history;
-  & > * {
+
+  &>* {
     padding: 0 1rem;
   }
+
   h4 {
     padding: 1rem;
   }
+
   padding-bottom: 1.5rem;
 }
+
 .contact {
   display: grid;
   gap: 0.5rem;
@@ -850,40 +948,48 @@ aside {
   border: solid thin rgba(var(--text-color), 0.3);
   padding: 0.5rem;
   border-radius: 0.5rem;
+
   sm-chips {
     background-color: rgba(var(--text-color), 0.06);
     padding: 0.2rem 0.3rem;
     border-radius: 0.5rem;
     width: fit-content;
   }
+
   sm-chip {
     --padding: 0.3rem 0.5rem;
     font-size: 0.8rem;
     --border-radius: 0.3rem;
   }
+
   sm-copy {
     font-size: 0.9rem;
     font-weight: 500;
   }
 }
+
 #balance_section {
   margin-top: 3vw;
   align-content: start;
   padding: 1.5rem;
-  & > * {
+
+  &>* {
     max-width: 36rem;
     margin: 0 auto;
   }
 }
+
 #input_wrapper {
   display: grid;
   gap: 0.5rem;
 }
+
 #eth_balance_wrapper {
   background-color: rgba(var(--text-color), 0.06);
   padding: max(1rem, 1.5vw);
   border-radius: 0.5rem;
   width: 100%;
+
   li {
     &:not(:last-of-type) {
       border-bottom: solid thin rgba(var(--text-color), 0.3);
@@ -891,6 +997,7 @@ aside {
     }
   }
 }
+
 #error_section {
   display: grid;
   height: 100%;
@@ -899,6 +1006,7 @@ aside {
   place-items: center;
   text-align: center;
   grid-column: 1/-1;
+
   .icon {
     height: 8rem;
     width: 8rem;
@@ -908,6 +1016,42 @@ aside {
     margin-bottom: 2rem;
   }
 }
+
+.transaction__phase {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  &:not(:last-of-type) {
+    position: relative;
+    margin-bottom: 2rem;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0.1rem;
+      height: 100%;
+      left: 0.3rem;
+      border-right: dashed 0.1rem rgba(var(--text-color), 0.5);
+      top: calc(100% + 0.4rem);
+
+    }
+  }
+
+  .icon {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  sm-spinner {
+    --size: 1rem;
+  }
+
+  .confirmed {
+    fill: var(--green);
+  }
+}
+
 .user-action-result__icon {
   justify-self: center;
   height: 4rem;
@@ -915,38 +1059,47 @@ aside {
   border-radius: 5rem;
   animation: popup 1s;
   padding: 1rem;
+
   &.pending {
     fill: var(--yellow);
     background-color: rgba(var(--text-color), 0.03);
   }
+
   &.confirmed {
     fill: rgba(var(--background-color), 1);
     background-color: #0bbe56;
   }
+
   &.failed {
     background-color: rgba(var(--text-color), 0.03);
     fill: var(--danger-color);
   }
 }
+
 @keyframes popup {
   0% {
     opacity: 0;
     transform: scale(0.2) translateY(600%);
   }
+
   10% {
     transform: scale(0.2) translateY(5rem);
     opacity: 1;
   }
+
   40% {
     transform: scale(0.2) translateY(0);
   }
+
   80% {
     transform: scale(1.1) translateY(0);
   }
+
   100% {
     transform: scale(1) translateY(0);
   }
 }
+
 #generated_addresses {
   background-color: rgba(var(--text-color), 0.06);
   padding: max(1rem, 1.5vw);
@@ -959,47 +1112,57 @@ aside {
     }
   }
 }
+
 @media only screen and (max-width: 640px) {
   .hide-on-small {
     display: none;
   }
+
   #page_container {
     &[data-page="home"] {
       flex-direction: column;
-      & > :first-child {
+
+      &> :first-child {
         order: 1;
       }
     }
   }
 }
+
 @media only screen and (min-width: 640px) {
   sm-popup {
     --width: 24rem;
   }
+
   .popup__header {
     padding: 1rem 1.5rem 0 1.5rem;
   }
+
   main {
     grid-template-columns: 10rem 1fr;
     grid-template-areas: "header header" "navbar pages";
     grid-template-rows: auto 1fr;
   }
+
   #main_navbar {
     border-top: none;
     flex-direction: column;
     background-color: transparent;
     border-right: solid thin rgba(var(--text-color), 0.3);
+
     ul {
       flex-direction: column;
       gap: 0.5rem;
       padding: 0.3rem;
     }
   }
+
   .nav-item {
     flex-direction: row;
     justify-content: flex-start;
     padding: 0.8rem 1rem 0.8rem 0.5rem;
     flex: 1;
+
     &__indicator {
       width: 0.25rem;
       height: 50%;
@@ -1008,9 +1171,11 @@ aside {
       bottom: auto;
     }
   }
+
   aside {
     border-right: solid thin rgba(var(--text-color), 0.3);
     overflow-y: auto;
+
     h4 {
       position: sticky;
       top: 0;
@@ -1018,19 +1183,23 @@ aside {
       z-index: 1;
     }
   }
+
   #input_wrapper {
     grid-template-columns: 1fr auto;
   }
 }
+
 @media only screen and (min-width: 1280px) {
   .page {
     margin: 0 8vw;
   }
 }
+
 @media (hover: hover) {
   .hover {
     cursor: pointer;
   }
+
   ::-webkit-scrollbar {
     width: 0.5rem;
     height: 0.5rem;
@@ -1044,23 +1213,29 @@ aside {
       background: rgba(var(--text-color), 0.5);
     }
   }
+
   .interact:not([disabled], .button--primary) {
     transition: background-color 0.3s;
+
     &:hover {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
+
   .button:not([disabled]) {
     transition: background-color 0.3s, filter 0.3s;
+
     &:hover {
       filter: contrast(2);
     }
   }
 }
+
 @media (prefers-reduced-motion) {
+
   ::view-transition-group(*),
   ::view-transition-old(*),
   ::view-transition-new(*) {
     animation: none !important;
   }
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index f142293..1c89f08 100644
--- a/index.html
+++ b/index.html
@@ -923,11 +923,16 @@
             switch (status) {
                 case 'pending':
                     renderElem(getRef('transaction_result_popup__content'), html`
-                        <svg class="icon user-action-result__icon pending" 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="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
-                        <div class="grid gap-0-5 justify-center text-center">
-                            <h4>Transaction sent</h4>
-                            <p>Waiting for confirmation from blockchain</p>
-                        </div>
+                        <ul>
+                            <li class="transaction__phase">
+                                <svg class="icon confirmed" 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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
+                                <h4>Transaction sent</h4>
+                            </li>
+                            <li class="transaction__phase">
+                                <sm-spinner></sm-spinner>
+                                <p>Waiting for transaction to be confirmed</p>
+                            </li>
+                        </ul>
                         <div class="grid">
                             <span class="label">Transaction ID</span>
                             <sm-copy value=${txHash}></sm-copy>
diff --git a/index.min.html b/index.min.html
new file mode 100644
index 0000000..bc620fd
--- /dev/null
+++ b/index.min.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>FLO Ethereum</title> <link rel="stylesheet" href="css/main.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet"> </head> <body class="hidden">  <sm-popup id="confirmation_popup">   <div class="flex align-center gap-0-5 margin-left-auto"> <button class="button cancel-button">Cancel</button> <button class="button button--primary confirm-button">OK</button> </div> </sm-popup> <main> <header id="main_header"> <div id="logo" class="app-brand"> <svg id="main_logo" class="icon" viewBox="0 0 27.25 32"> <title>RanchiMall</title> <path d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z"/> </svg> <div class="app-name"> <div class="app-name__company">RanchiMall</div> <h4 class="app-name__title"> FLO Ethereum </h4> </div> </div> <button id="meta_mask_status_button" class="button interactive flex align-center hidden" data-status="disconnected" onclick="connectToMetaMask()"> <div class="icon-wrapper"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 318.6 318.6"> <style>.st1,.st6{fill:#e4761b;stroke:#e4761b;stroke-linecap:round;stroke-linejoin:round}.st6{fill:#f6851b;stroke:#f6851b}</style> <path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round" d="m274.1 35.5-99.5 73.9L193 65.8z"/> <path d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z" class="st1"/> <path d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z" class="st1"/> <path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round" d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z"/> <path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z"/> <path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round" d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z"/> <path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round" d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z"/> <path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z" class="st6"/> <path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round" d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z"/> <path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z"/> <path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round" d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z"/> <path d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z" class="st6"/> </svg> </div> <div id="meta_mask_status">Disconnected</div> </button>  </header> <nav id="main_navbar"> <ul> <li> <a class="nav-item nav-item--active interactive" href="#/balance"> <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> <span class="nav-item__title"> Balance </span>  </a> </li> <li> <a class="nav-item interactive" href="#/send"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">  <path d="M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z"> </path> </svg> <span class="nav-item__title"> Send </span> </a> </li> <li> <a class="nav-item interactive" href="#/create"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">  <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"> </path> </svg> <span class="nav-item__title"> Create </span> </a> </li> </ul> </nav>  </main> <sm-popup id="transaction_result_popup"> <header slot="header" class="popup__header"> <div class="flex align-center"> <button class="popup__header__close" onclick="closePopup()"> <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/> </svg> </button> </div> </header>  </sm-popup> <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script> <script src="scripts/components.min.js" type="text/javascript"></script> <script src="scripts/btcwallet_scripts_lib.js" type="text/javascript"></script> <script src="scripts/btcOperator.js" type="text/javascript"></script> <script src="scripts/floCrypto.js" type="text/javascript"></script> <script src="scripts/tap_combined.js" type="text/javascript"></script> <script src="scripts/keccak.js" type="text/javascript"></script> <script src="scripts/floEthereum.js" type="text/javascript"></script> <script src="scripts/compactIDB.js" type="text/javascript"></script> <script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js" type="text/javascript"></script> <script src="scripts/ethOperator.js" type="text/javascript"></script> <script>const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(e){return document.getElementById(e)}uiGlobals.connectionErrorNotification=[],navigator.onLine||uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error")),window.addEventListener("offline",(()=>{uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error"))})),window.addEventListener("online",(()=>{uiGlobals.connectionErrorNotification.forEach((e=>{getRef("notification_drawer").remove(e)})),notify("We are back online.","success")}));let zIndex=50;function openPopup(e,t){return void 0===popupStack.peek()&&document.addEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()})),zIndex++,getRef(e).setAttribute("style",`z-index: ${zIndex}`),getRef(e).show({pinned:t})}function closePopup(e={}){void 0!==popupStack.peek()&&popupStack.peek().popup.hide(e)}function notify(e,t,n={}){let o;switch(t){case"success":o='<svg class="icon icon--success" 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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>';break;case"error":o='<svg class="icon 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>',n.pinned=!0}return"error"===t&&console.error(e),getRef("notification_drawer").push(e,{icon:o,...n})}document.addEventListener("popupopened",(async e=>{e.target.id})),document.addEventListener("popupclosed",(e=>{zIndex--,e.target.id}));const getConfirmation=(e,t={})=>new Promise((n=>{const{message:o="",cancelText:i="Cancel",confirmText:s="OK",danger:a=!1}=t;getRef("confirm_title").innerText=e,getRef("confirm_message").innerText=o;const r=getRef("confirmation_popup").querySelector(".cancel-button"),c=getRef("confirmation_popup").querySelector(".confirm-button");c.textContent=s,r.textContent=i,a?c.classList.add("button--danger"):c.classList.remove("button--danger");const{opened:l,closed:d}=openPopup("confirmation_popup");c.onclick=()=>{closePopup({payload:!0})},r.onclick=()=>{closePopup()},d.then((e=>{c.onclick=null,r.onclick=null,n(!!e)}))}));function createRipple(e,t){const n=document.createElement("span"),o=Math.max(t.clientWidth,t.clientHeight),i=o/2,s=t.getBoundingClientRect();n.style.width=n.style.height=`${o}px`,n.style.left=e.clientX-(s.left+i)+"px",n.style.top=e.clientY-(s.top+i)+"px",n.classList.add("ripple");const a=n.animate([{opacity:1,transform:"scale(0)"},{transform:"scale(4)",opacity:0}],{duration:600,fill:"forwards",easing:"ease-out"});t.append(n),a.onfinish=()=>{n.remove()}}function buttonLoader(e,t){const n="string"==typeof e?document.getElementById(e):e;if(!n)return;n.dataset.hasOwnProperty("wasDisabled")||(n.dataset.wasDisabled=n.disabled);const o={duration:200,fill:"forwards",easing:"ease"};if(t)n.disabled=!0,n.parentNode.append(document.createElement("sm-spinner")),n.animate([{clipPath:"circle(100%)"},{clipPath:"circle(0)"}],o);else{n.disabled="true"===n.dataset.wasDisabled,n.animate([{clipPath:"circle(0)"},{clipPath:"circle(100%)"}],o).onfinish=e=>{n.removeAttribute("data-original-state")};const e=n.parentNode.querySelector("sm-spinner");e&&e.remove()}}class Router{constructor(e={}){const{routes:t={},state:n={},routingStart:o,routingEnd:i}=e;this.routes=t,this.state=n,this.routingStart=o,this.routingEnd=i,this.lastPage=null,window.addEventListener("hashchange",(e=>this.routeTo(window.location.hash)))}addRoute(e,t){this.routes[e]=t}handleRouting=async e=>{this.routingStart&&this.routingStart(this.state),this.routes[e]?(await this.routes[e](this.state),this.lastPage=e):this.routes[404]?this.routes[404](this.state):console.error(`No route found for '${e}' and no '404' route is defined.`),this.routingEnd&&this.routingEnd(this.state)};async routeTo(e){try{let t,n=[],o={},[i,s]=e.split("?");i.includes("#")&&(i=i.split("#")[1]),i.includes("/")?[,t,...n]=i.split("/"):t=i,this.state={page:t,wildcards:n,lastPage:this.lastPage,params:o},s&&(o=new URLSearchParams(s),this.state.params=Object.fromEntries(o)),document.startViewTransition?document.startViewTransition((async()=>{await this.handleRouting(t)})):await this.handleRouting(t)}catch(e){console.error(e)}}}</script> <script>const assetIcons={ether:'<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <g clip-path="url(#clip0_201_2)"> <path d="M12 0L19.6368 12.4368L12.1633 16.8L4.36325 12.4368L12 0Z"/> <path d="M12 24L4.36325 13.6099L11.8367 18L19.6368 13.6099L12 24Z"/> </g> <defs> <clipPath id="clip0_201_2"> <rect width="24" height="24" fill="white"/> </clipPath> </defs> </svg>',usdc:'<svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="86977684-12db-4850-8f30-233a7c267d11" viewBox="0 0 2000 2000"> <path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/> <path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/> <path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/></svg>',usdt:'<svg class="icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 339.43 295.27"><title>tether-usdt-logo</title><path d="M62.15,1.45l-61.89,130a2.52,2.52,0,0,0,.54,2.94L167.95,294.56a2.55,2.55,0,0,0,3.53,0L338.63,134.4a2.52,2.52,0,0,0,.54-2.94l-61.89-130A2.5,2.5,0,0,0,275,0H64.45a2.5,2.5,0,0,0-2.3,1.45h0Z" style="fill:#50af95;fill-rule:evenodd"/><path d="M191.19,144.8v0c-1.2.09-7.4,0.46-21.23,0.46-11,0-18.81-.33-21.55-0.46v0c-42.51-1.87-74.24-9.27-74.24-18.13s31.73-16.25,74.24-18.15v28.91c2.78,0.2,10.74.67,21.74,0.67,13.2,0,19.81-.55,21-0.66v-28.9c42.42,1.89,74.08,9.29,74.08,18.13s-31.65,16.24-74.08,18.12h0Zm0-39.25V79.68h59.2V40.23H89.21V79.68H148.4v25.86c-48.11,2.21-84.29,11.74-84.29,23.16s36.18,20.94,84.29,23.16v82.9h42.78V151.83c48-2.21,84.12-11.73,84.12-23.14s-36.09-20.93-84.12-23.15h0Zm0,0h0Z" style="fill:#fff;fill-rule:evenodd"/><script xmlns=""/></svg>'};window.smCompConfig={"sm-input":[{selector:"[data-eth-address]",customValidation:e=>e?{isValid:ethOperator.isValidAddress(e),errorText:'Invalid address.<br> It usually starts with "0x"'}:{isValid:!1,errorText:"Please enter a Ethereum address"}},{selector:"[data-private-key]",customValidation:e=>e?{isValid:floCrypto.getPubKeyHex(e),errorText:'Invalid private key.<br> It usually starts with "L" or "R".'}:{isValid:!1,errorText:"Please enter a private key"}}]};const router=new Router({routingStart(e){},routingEnd(e){let{page:t}=e;t||(t="search"),"send"!==t&&(taprootScriptTxDetails={});const a=getRef("main_navbar").querySelector(".nav-item--active");a&&(a.classList.remove("nav-item--active"),a.querySelector(".nav-item__indicator")?.remove());const s=getRef("main_navbar").querySelector(`.nav-item[href="#/${t}"]`);s&&(s.classList.add("nav-item--active"),s.append(html.node`<div class="nav-item__indicator"></div>`))}});function setMetaMaskStatus(e){e?(getRef("meta_mask_status").textContent="Connected",getRef("meta_mask_status_button").dataset.status="connected"):(getRef("meta_mask_status").textContent="Disconnected",getRef("meta_mask_status_button").dataset.status="disconnected")}function renderHome(e){getRef("page_container").dataset.page="home",renderElem(getRef("page_container"),html`
+                <aside id="saved_addresses_wrapper" class="flex flex-direction-column">
+                    <h4>
+                        Searched addresses
+                    </h4>
+                    <ul id="searched_addresses_list" class="grid gap-0-5"></ul>
+                </aside>
+                <section id="balance_section" class="grid gap-1-5">
+                    <h2>
+                        Check Ether, USDC and USDT balance
+                    </h2>
+                    <sm-form oninvalid="handleInvalidSearch()">
+                        <div id="input_wrapper">
+                            <sm-input id="private_key_input" class="password-field flex-1" placeholder="FLO/BTC private key"
+                                type="password" data-private-key animate required>
+                                <svg class="icon" slot="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"></rect> </g> <g> <path d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z"> </path> </g> </svg>
+                                <label slot="right" class="interact">
+                                    <input type="checkbox" class="hidden" autocomplete="off" readonly
+                                        onchange="togglePrivateKeyVisibility(this)">
+                                    <svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <title>Hide password</title> <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"></path> <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"> </path> </svg>
+                                    <svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <title>Show password</title> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"> </path> </svg>
+                                </label>
+                            </sm-input>
+                            <div class="multi-state-button">
+                                <button id="check_balance_button" class="button button--primary h-100 w-100" type="submit" onclick="checkBalance()" disabled>
+                                    Check balance
+                                </button>
+                            </div>
+                        </div>
+                    </sm-form>
+                    <div id="eth_balance_wrapper" class="grid gap-2 hidden">
+                        <div class="grid">
+                            <div class="label">ETH address</div>
+                            <sm-copy id="eth_address"></sm-copy>
+                        </div>
+                        <div class="grid">
+                            <div class="label">FLO address</div>
+                            <sm-copy id="flo_address"></sm-copy>
+                        </div>
+                        <div class="grid gap-1">
+                            <h4>Balance</h4>
+                            <ul id="eth_address_balance" class="flex flex-direction-column gap-0-5">
+                                <li class="flex align-center space-between">
+                                    <p>Ether</p>
+                                    <b id="ether_balance">0</b>
+                                </li>
+                                <li class="flex align-center space-between">
+                                    <p>USDC</p>
+                                    <b id="usdc_balance">0</b>
+                                </li>
+                                <li class="flex align-center space-between">
+                                    <p>USDT</p>
+                                    <b id="usdt_balance">0</b>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+            `),!window.ethereum||window.currentChainId&&"0x1"===window.currentChainId||renderError("Please switch MetaMask to Ethereum Mainnet"),renderSearchedAddressList()}function renderError(e,t){e||(e="MetaMask not installed"),t||(t=""),renderElem(getRef("page_container"),html`
+                <section id="error_section">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 318.6 318.6">
+                        <style>
+                            .st1,
+                            .st6 {
+                                fill: #e4761b;
+                                stroke: #e4761b;
+                                stroke-linecap: round;
+                                stroke-linejoin: round
+                            }
+
+                            .st6 {
+                                fill: #f6851b;
+                                stroke: #f6851b
+                            }
+                        </style>
+                        <path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round" d="m274.1 35.5-99.5 73.9L193 65.8z" /> <path d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z" class="st1" /> <path d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z" class="st1" /> <path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round" d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z" /> <path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z" /> <path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round" d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z" /> <path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round" d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z" /> <path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z" class="st6" /> <path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round" d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z" /> <path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z" /> <path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round" d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z" /> <path d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z" class="st6" />
+                    </svg>
+                    <h2 id="error__title">${e}</h2>
+                    <p>${t}</p>
+                </section>
+            `)}function renderSearchedAddressList(){compactIDB.readAllData("contacts").then((e=>{if(!getRef("searched_addresses_list"))return;if(0===Object.keys(e).length)return void renderElem(getRef("searched_addresses_list"),html`<li class="flex align-center justify-center">
+                        <p>Your searched addresses will appear here for easier access in future.</p>    
+                    </li>`);const t=[];for(const a in e){const{ethAddress:s}=e[a];t.push(html`
+                        <li class="contact" .dataset=${{floAddress:a,ethAddress:s}}>
+                            <sm-chips onchange=${e=>e.target.closest(".contact").querySelector("sm-copy").value=e.target.value}>
+                                <sm-chip value=${a} selected>FLO</sm-chip>
+                                <sm-chip value=${s}>ETH</sm-chip>
+                            </sm-chips>
+                            <sm-copy value="${a}"></sm-copy>
+                            <div class="flex align-center space-between gap-0-5">
+                                <button class="button button--small" onclick=${()=>deleteContact(a)}>
+                                    Delete
+                                </button>
+                                <button class="button button--colored button--small" onclick=${()=>checkBalance(s,a)}>Check balance</button>
+                            </div>
+                        </li>`)}renderElem(getRef("searched_addresses_list"),html`${t}`)})).catch((e=>{console.error(e)}))}function checkBalance(e,t){if(!e){const a=document.querySelector("[data-private-key]").value.trim();/^[0-9a-fA-F]{64}$/.test(a)&&(a=coinjs.privkey2wif(a));const s=coinjs.wif2privkey(a).privkey;e=floEthereum.ethAddressFromPrivateKey(s),t=floCrypto.getFloID(a)}e&&(buttonLoader("check_balance_button",!0),Promise.all([ethOperator.getBalance(e),ethOperator.getTokenBalance(e,"usdc"),ethOperator.getTokenBalance(e,"usdt")]).then((([a,s,n])=>{compactIDB.readData("contacts",t).then((a=>{a||compactIDB.addData("contacts",{ethAddress:e},t).then((()=>{renderSearchedAddressList()})).catch((e=>{console.error(e)}))})),getRef("eth_address").value=e,getRef("flo_address").value=t,getRef("ether_balance").textContent=`${a} ETH`,getRef("usdc_balance").textContent=`${s} USDC`,getRef("usdt_balance").textContent=`${n} USDT`,getRef("eth_balance_wrapper").classList.remove("hidden"),getRef("eth_balance_wrapper").animate([{transform:"translateY(-1rem)",opacity:0},{transform:"none",opacity:1}],{easing:"ease",duration:300,fill:"forwards"})})).catch((e=>{notify(e,"error")})).finally((()=>{buttonLoader("check_balance_button",!1)})))}function handleInvalidSearch(){document.startViewTransition?document.startViewTransition((()=>{getRef("eth_balance_wrapper").classList.add("hidden")})):getRef("eth_balance_wrapper").classList.add("hidden")}async function deleteContact(e){await getConfirmation("Delete contact",{message:"Are you sure you want to delete this contact?"})&&compactIDB.removeData("contacts",e).then((()=>{renderSearchedAddressList()})).catch((e=>{console.error(e)}))}function togglePrivateKeyVisibility(e){const t=e.closest("sm-input");t.type="password"===t.type?"text":"password",t.focusIn()}function checkSenderBalance(){let e;const t=getRef("private_key_input").value.trim();if(!t)return notify("Please enter sender's private key to check balance");e=floEthereum.ethAddressFromPrivateKey(coinjs.wif2privkey(t).privkey),getRef("sender_balance_container").classList.remove("hidden"),renderElem(getRef("sender_balance_container"),html` Loading balance...<sm-spinner></sm-spinner> `);const a=[ethOperator.getBalance(e)],s=getRef("asset_selector").value;"ether"!==s&&a.push(ethOperator.getTokenBalance(e,s)),Promise.all(a).then((([t,a])=>{renderElem(getRef("sender_balance_container"),html`
+                    <div class="grid gap-1 w-100" style="padding: 1rem; border-radius: 0.5rem; border: solid thin rgba(var(--text-color),0.3)">
+                        <div class="grid">
+                            <p class="label">Sender address</p>
+                            <sm-copy value=${e}><p>${e}<p></sm-copy>
+                        </div>
+                        <p>
+                            Balance: <b class="amount-shown">${t} ETH</b> ${"ether"!==s?html`| <b class="amount-shown">${a} ${s.toUpperCase()}</b>`:""}
+                        </p>
+                    </div>
+                `)})).catch((e=>{notify(e,"error")}))}function handleSenderInput(e){getRef("check_balance_button").disabled=!e.target.isValid,e.target.isValid||getRef("sender_balance_container").classList.add("hidden")}function handleAssetChange(e){const t=e.target.value,a=getRef("send_tx_form").querySelector(".receiver-amount");a.value="",a.setAttribute("error-text",`Amount should be grater than 0.000001 ${t.toUpperCase()}`),document.querySelectorAll(".asset-symbol").forEach((e=>{e.innerHTML=assetIcons[t]})),getRef("send_tx_button").textContent=`Send ${t.toUpperCase()}`}async function sendTx(){const e=getRef("send_tx_form").querySelector(".receiver-address").value.trim(),t=getRef("send_tx_form").querySelector(".receiver-amount").value.trim(),a=getRef("asset_selector").value;try{const s=await getConfirmation("Send transaction",{message:`You are about to send ${t} ${a.toUpperCase()} to ${e}`,confirmText:"Send"});if(buttonLoader("send_tx_button",!0),!s)return;let n=getRef("private_key_input").value.trim();switch(/^[0-9a-fA-F]{64}$/.test(n)&&(n=coinjs.privkey2wif(n)),n=coinjs.wif2privkey(n).privkey,a){case"ether":{const a=await ethOperator.sendTransaction({privateKey:n,receiver:e,amount:t});showTransactionResult("pending",{txHash:a.hash}),await a.wait(),showTransactionResult("confirmed",{txHash:a.hash});break}case"usdc":case"usdt":{const s=await ethOperator.sendToken({privateKey:n,receiver:e,amount:t,token:a});showTransactionResult("pending",{txHash:s.hash}),await s.wait(),showTransactionResult("confirmed",{txHash:s.hash});break}}getRef("send_tx_form").reset(),getRef("sender_balance_container").classList.add("hidden")}catch(e){console.error(e.message);const t=/\(error=({.*?}),/,s=e.message.match(t);if(s&&s[1]){const{code:t}=JSON.parse(s[1]);showTransactionResult("failed",-32e3===t?{description:`Insufficient ${a.toUpperCase()} balance`}:{description:e.message})}}finally{buttonLoader("send_tx_button",!1)}}function showTransactionResult(e,{txHash:t,description:a=""}){switch(e){case"pending":renderElem(getRef("transaction_result_popup__content"),html`
+                        <ul>
+                            <li class="transaction__phase">
+                                <svg class="icon confirmed" 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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
+                                <h4>Transaction sent</h4>
+                            </li>
+                            <li class="transaction__phase">
+                                <sm-spinner></sm-spinner>
+                                <p>Waiting for transaction to be confirmed</p>
+                            </li>
+                        </ul>
+                        <div class="grid">
+                            <span class="label">Transaction ID</span>
+                            <sm-copy value=${t}></sm-copy>
+                        </div>
+                        <a class="button button--primary" target="_blank" href=${`https://etherscan.io/tx/${t}`}>Check transaction status</a>
+                    `);break;case"confirmed":renderElem(getRef("transaction_result_popup__content"),html`
+                        <svg class="icon user-action-result__icon confirmed" 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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
+                        <div class="grid gap-0-5 justify-center text-center">
+                            <h4>Transaction confirmed</h4>
+                            <p>Transaction has been confirmed on the blockchain. </p>
+                        </div>
+                        <div class="grid">
+                            <span class="label">Transaction ID</span>
+                            <sm-copy value=${t}></sm-copy>
+                        </div>
+                        <a class="button button--primary" target="_blank" href=${`https://etherscan.io/tx/${t}`}>Check transaction status</a>
+                    `);break;case"failed":renderElem(getRef("transaction_result_popup__content"),html`
+                            <svg class="icon user-action-result__icon failed" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+                            <div class="grid gap-0-5 justify-center text-center">
+                                <h4>Transaction failed</h4>
+                                <p>${a}</p>
+                            </div>
+                        `)}openPopup("transaction_result_popup")}function generateNewID(){const{floID:e,privKey:t}=floCrypto.generateNewID(),a=coinjs.wif2privkey(t).privkey,s=floEthereum.ethAddressFromPrivateKey(a);renderElem(getRef("created_address_wrapper"),html`
+                <ul id="generated_addresses" class="grid gap-1-5">
+                    <li class="grid gap-0-5">
+                        <div>
+                            <h5>FLO Address</h5>
+                            <sm-copy value="${e}"></sm-copy>
+                        </div>
+                        <div>
+                            <h5>Private Key</h5>
+                            <sm-copy value="${t}"></sm-copy>
+                        </div>
+                    </li>
+                    <li class="grid gap-0-5">
+                        <div>
+                            <h5>Equivalent Ethereum Address</h5>
+                            <sm-copy value="${s}"></sm-copy>
+                        </div>
+                        <div>
+                            <h5>Private Key</h5>
+                            <sm-copy value="${a}"></sm-copy>
+                        </div>
+                    </li>
+                </ul>
+            `)}window.addEventListener("load",(()=>{router.routeTo(location.hash),document.body.classList.remove("hidden"),document.addEventListener("copy",(()=>{notify("copied","success")})),document.addEventListener("pointerdown",(e=>{e.target.closest("button:not(:disabled), .interactive:not(:disabled)")&&createRipple(e,e.target.closest("button, .interactive"))})),compactIDB.initDB("floEthereum",{contacts:{}}).then((e=>{console.log(e)})).catch((e=>{console.error(e)})),window.ethereum&&(window.ethereum.on("chainChanged",(e=>{window.currentChainId=e,"0x1"!==e?renderError("Please switch MetaMask to Ethereum Mainnet"):router.routeTo(location.hash)})),window.ethereum.request({method:"eth_chainId"}).then((e=>{window.currentChainId=e,"0x1"!==e?renderError("Please switch MetaMask to Ethereum Mainnet"):router.routeTo(location.hash)}))),void 0!==window.ethereum&&(ethereum.on("accountsChanged",(e=>{getRef("eth_balance_wrapper").classList.add("hidden"),setMetaMaskStatus(e.length>0)})),ethereum.on("connect",(e=>{setMetaMaskStatus(e.length>0)})),ethereum.on("disconnect",(e=>{setMetaMaskStatus(!1)})))})),router.addRoute("404",(()=>{renderElem(getRef("page_container"),html`
+                <h1>Page not found</h1>
+            `)})),router.addRoute("",renderHome),router.addRoute("balance",renderHome),router.addRoute("send",(e=>{getRef("page_container").dataset.page="send",renderElem(getRef("page_container"),html`
+                <sm-form id="send_tx_form" style="width: min(32rem, 100%)">
+                    <fieldset class="flex flex-direction-column gap-0-5">
+                        <div class="flex space-between align-center">
+                            <div class="flex flex-direction-column gap-0-5">
+                                <h4>Sender</h4>
+                                <p>Amount will be deducted from equivalent Ethereum address</p>
+                            </div>
+                            <button id="check_balance_button" class="button button--small button--colored" onclick="checkSenderBalance()" disabled>
+                                Check balance
+                            </button>
+                        </div>
+                        <sm-input id="private_key_input" placeholder="Sender's FLO/BTC private key" oninput=${handleSenderInput} data-private-key class="password-field" type="password" animate required>
+                            <svg class="icon" slot="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"></rect> </g> <g> <path d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z"> </path> </g> </svg>
+                            <label slot="right" class="interact">
+                                <input type="checkbox" class="hidden" autocomplete="off" readonly onchange="togglePrivateKeyVisibility(this)">
+                                <svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <title>Hide password</title> <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"></path> <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"> </path> </svg>
+                                <svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <title>Show password</title> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"> </path> </svg>
+                            </label>
+                        </sm-input>
+                        <div id="sender_balance_container" class="flex align-center gap-0-3 hidden"></div>
+                    </fieldset>
+                    <fieldset class="flex flex-direction-column gap-1">
+                        <div class="flex flex-direction-column gap-0-5">
+                            <h4>Receiver</h4>
+                            <div class="grid gap-0-5">
+                                <sm-input class="receiver-address" placeholder="Receiver's Ethereum address" data-eth-address animate required ></sm-input>
+                                <div class="flex flex-direction-column gap-0-5">
+                                    <sm-input class="receiver-amount amount-shown flex-1" placeholder="Amount" type="number" step="0.000001" min="0.000001" error-text="Amount should be grater than 0.000001 ETHER" animate required>
+                                        <div class="asset-symbol flex" slot="icon">
+                                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <g clip-path="url(#clip0_201_2)"> <path d="M12 0L19.6368 12.4368L12.1633 16.8L4.36325 12.4368L12 0Z"/> <path d="M12 24L4.36325 13.6099L11.8367 18L19.6368 13.6099L12 24Z"/> </g> <defs> <clipPath id="clip0_201_2"> <rect width="24" height="24" fill="white"/> </clipPath> </defs> </svg>
+                                        </div>
+                                    </sm-input>
+                                    <sm-chips id="asset_selector" onchange=${handleAssetChange}>
+                                        <sm-chip value="ether" selected>ETHER</sm-chip>
+                                        <sm-chip value="usdc">USDC</sm-chip>
+                                        <sm-chip value="usdt">USDT</sm-chip>
+                                    </sm-chips>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="multi-state-button">
+                            <button id="send_tx_button" class="button button--primary" type="submit" disabled onclick="sendTx()">Send ETHER</button>
+                        </div>
+                    </fieldset>
+                </sm-form>
+            `),!window.ethereum||window.currentChainId&&"0x1"===window.currentChainId||renderError("Please switch MetaMask to Ethereum Mainnet")})),router.addRoute("create",(e=>{getRef("page_container").dataset.page="create",renderElem(getRef("page_container"),html`
+                <div class="grid gap-1">
+                    <h2>
+                        Don't have an Ethereum address? Create one
+                    </h2>
+                    <button class="button button--primary interactive gap-0-5 margin-right-auto" onclick=${generateNewID}>
+                        <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>
+                                    <path
+                                        d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z" />
+                                </g>
+                            </g>
+                        </svg>
+                        Generate new address
+                    </button>
+                </div>
+                <div id="created_address_wrapper" class="grid gap-1"></div>
+            `)}))</script> 
\ No newline at end of file