diff --git a/.github/workflows/push-dappbundle.yml b/.github/workflows/push-dappbundle.yml
new file mode 100644
index 0000000..cb07c9f
--- /dev/null
+++ b/.github/workflows/push-dappbundle.yml
@@ -0,0 +1,32 @@
+name: Workflow push to Dappbundle
+on: [push]
+jobs:
+ build:
+ name: Build
+ runs-on: self-hosted
+ steps:
+ - name: Executing remote command
+ uses: appleboy/ssh-action@v1.0.0
+ with:
+ host: ${{ secrets.R_HOST }}
+ username: ${{ secrets.P_USERNAME }}
+ password: ${{ secrets.P_PASSWORD }}
+ port: ${{ secrets.SSH_PORT }}
+ script: |
+ if [ -d "${{ secrets.DEPLOYMENT_LOCATION}}/dappbundle" ]; then
+ echo "Folder exists. Skipping Git clone."
+ else
+ echo "Folder does not exist. Cloning repository..."
+ cd ${{ secrets.DEPLOYMENT_LOCATION}}/ && git clone https://github.com/ranchimall/dappbundle.git
+ fi
+
+ if [ -d "${{ secrets.DEPLOYMENT_LOCATION}}/dappbundle/${{ github.event.repository.name }}" ]; then
+ echo "Repository exists. Remove folder "
+ rm -r "${{ secrets.DEPLOYMENT_LOCATION}}/dappbundle/${{ github.event.repository.name }}"
+ fi
+
+ echo "Cloning repository..."
+ cd ${{ secrets.DEPLOYMENT_LOCATION}}/dappbundle && git clone https://github.com/ranchimall/${{ github.event.repository.name }}
+
+ cd "${{ secrets.DEPLOYMENT_LOCATION}}/dappbundle/${{ github.event.repository.name }}" && rm -rf .gitattributes .git .github .gitignore
+ cd ${{ secrets.DEPLOYMENT_LOCATION}}/dappbundle/ && git add . && git commit -m "Workflow updating files of ${{ github.event.repository.name }}" && git push "https://saketongit:${{ secrets.RM_ACCESS_TOKEN }}@github.com/ranchimall/dappbundle.git"
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..6c2991d
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,1291 @@
+* {
+ 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: 0.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 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) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+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;
+ border: none;
+ border-radius: 0.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 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: transparent;
+ overflow: hidden;
+ color: inherit;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.5rem 1rem;
+ border-radius: 0.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: 0.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, 0.062745098);
+ color: var(--danger-color);
+}
+.button--danger .icon {
+ fill: var(--danger-color);
+}
+.button--small {
+ padding: 0.4rem 0.6rem;
+}
+.button--outlined {
+ border: solid var(--accent-color) 1px;
+ background-color: transparent;
+ color: var(--accent-color);
+}
+.button--outlined .icon {
+ fill: var(--accent-color);
+}
+.button--transparent {
+ background-color: transparent;
+}
+
+button:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ filter: saturate(0);
+}
+
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 0.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: 0.4rem;
+ border-radius: 0.3rem;
+ aspect-ratio: 1/1;
+}
+.icon-only .icon {
+ height: 1em;
+ width: 1em;
+}
+
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.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: 0.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: 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;
+ 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: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.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: 0.3rem;
+}
+
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-right-1 {
+ margin-right: 1rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.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: 0.5rem;
+}
+
+.margin-bottom-1 {
+ margin-bottom: 1rem;
+}
+
+.margin-bottom-2 {
+ margin-bottom: 2rem;
+}
+
+.margin-block-0-5 {
+ margin-block: 0.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: 0.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: 0.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: transparent;
+}
+
+.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: 0.6rem;
+ margin-left: auto;
+}
+
+#prompt_message {
+ margin-bottom: 1.5rem;
+}
+
+.popup__header {
+ position: relative;
+ display: grid;
+ gap: 0.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: 0.3rem;
+ align-items: center;
+}
+.app-brand .icon {
+ height: 1.2rem;
+ width: 1.2rem;
+}
+
+.app-name__company {
+ font-size: 0.8rem;
+ font-weight: 500;
+ 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;
+}
+#meta_mask_status_button .icon-wrapper {
+ position: relative;
+ display: grid;
+ place-content: center;
+}
+#meta_mask_status_button .icon-wrapper::after {
+ content: "";
+ position: absolute;
+ width: 0.5rem;
+ height: 0.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: 0.8rem;
+ margin-bottom: 0.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: 0.5rem;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 0.3rem;
+ color: var(--text-color);
+ font-size: 0.8rem;
+ border-radius: 0.3rem;
+ font-weight: 500;
+}
+.nav-item .icon {
+ width: 2rem;
+ transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item__title {
+ transition: opacity 0.2s, transform 0.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: 0.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);
+}
+#page_container[data-page=retrieve] {
+ align-items: flex-start;
+}
+#page_container[data-page=retrieve] > * {
+ padding: 1rem;
+ margin: 0 auto;
+}
+
+
+aside {
+ view-transition-name: search-history;
+ padding-bottom: 1.5rem;
+}
+aside > * {
+ padding: 0 1rem;
+}
+aside h4 {
+ padding: 1rem;
+}
+
+.contact {
+ display: grid;
+ gap: 0.5rem;
+ align-items: center;
+ border: solid thin rgba(var(--text-color), 0.3);
+ padding: 0.5rem;
+ border-radius: 0.5rem;
+}
+.contact sm-chips {
+ background-color: rgba(var(--text-color), 0.06);
+ padding: 0.2rem 0.3rem;
+ border-radius: 0.5rem;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+.contact sm-chip {
+ --padding: 0.3rem 0.5rem;
+ font-size: 0.8rem;
+ --border-radius: 0.3rem;
+}
+.contact sm-copy {
+ font-size: 0.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: 0.5rem;
+}
+
+#eth_balance_wrapper {
+ background-color: rgba(var(--text-color), 0.06);
+ padding: max(1rem, 1.5vw);
+ border-radius: 0.5rem;
+ width: 100%;
+}
+#eth_balance_wrapper li:not(:last-of-type) {
+ border-bottom: solid thin rgba(var(--text-color), 0.3);
+ padding-bottom: 0.5rem;
+}
+
+/* Transaction list styling matching BTC wallet */
+.transaction {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.8rem;
+ padding: 1rem;
+ border-bottom: solid thin rgba(var(--text-color), 0.1);
+}
+
+.transaction:last-child {
+ border-bottom: none;
+}
+
+.transaction__icon {
+ display: flex;
+ align-items: flex-start;
+ padding-top: 0.2rem;
+}
+
+.transaction__icon .icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ fill: rgba(var(--text-color), 0.7);
+}
+
+.transaction.in .icon {
+ fill: var(--green);
+}
+
+.transaction.out .icon.sent {
+ fill: var(--danger-color);
+}
+
+.transaction__time {
+ font-size: 0.85rem;
+ color: rgba(var(--text-color), 0.7);
+}
+
+.transaction__amount {
+ font-weight: 600;
+ font-size: 0.95rem;
+}
+
+.transaction.in .transaction__amount {
+ color: var(--green);
+}
+
+.transaction.out .transaction__amount {
+ color: var(--danger-color);
+}
+
+.transaction__receiver {
+ font-size: 0.9rem;
+ color: rgba(var(--text-color), 0.9);
+ word-break: break-all;
+}
+
+.tx-participant {
+ color: var(--accent-color);
+ text-decoration: none;
+ font-family: monospace;
+ font-size: 0.85rem;
+}
+
+.tx-participant:hover {
+ text-decoration: underline;
+}
+
+.wrap-around {
+ word-break: break-all;
+}
+
+.transaction__id {
+ display: inline-flex;
+ align-items: center;
+}
+
+.transaction__id .icon {
+ width: 1rem;
+ height: 1rem;
+ fill: currentColor;
+}
+
+#transaction_list {
+ max-height: 500px;
+ overflow-y: auto;
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+}
+
+#transaction_list::-webkit-scrollbar {
+ display: none; /* Chrome, Safari and Opera */
+}
+
+#error_section {
+ display: grid;
+ height: 100%;
+ gap: 0.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: 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;
+ 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: 0.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: transparent;
+ border-right: solid thin rgba(var(--text-color), 0.3);
+ }
+ #main_navbar 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;
+ }
+ .nav-item__indicator {
+ width: 0.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: 0.5rem;
+ height: 0.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 0.3s;
+ }
+ .interact:not([disabled], .button--primary):hover {
+ background-color: rgba(var(--text-color), 0.06);
+ }
+ .button:not([disabled]) {
+ transition: background-color 0.3s, filter 0.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;
+ }
+}
+.transaction__time {
+ font-size: 0.75rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
+ min-width: 0;
+}
+.transaction__amount {
+ font-size: 0.75rem;
+ margin-left: auto;
+ white-space: nowrap;
+ flex-shrink: 0;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5d50d85
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1995 @@
+
+
+
+
+
+
+ FLO Mantle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RanchiMall
+
+ FLO Mantle
+
+
+
${icon}
` : ""} ${action ? `` : ""} `, action && notification.querySelector(".action").addEventListener("click", action.callback), notification.querySelector(".close").addEventListener("click", (() => { this.removeNotification(notification) })), pinned || setTimeout((() => { this.removeNotification(notification, this.isBigViewport ? "left" : "top") }), timeout), notification } push(message, options = {}) { const notification = this.createNotification(message, options); return this.isBigViewport ? this.notificationPanel.append(notification) : this.notificationPanel.prepend(notification), notification.scrollIntoView({ behavior: "smooth" }), this.notificationPanel.animate([{ transform: `translateY(${this.isBigViewport ? "" : "-"}${notification.clientHeight}px)` }, { transform: "none" }], this.animationOptions), notification.animate([{ transform: "translateY(-1rem)", opacity: "0" }, { transform: "none", opacity: "1" }], this.animationOptions).onfinish = e => { e.target.commitStyles(), e.target.cancel() }, notification.id } removeNotification(notification, direction = "left") { if (!notification) return; const sign = "left" === direction || "top" === direction ? "-" : "+"; this.isBigViewport || "top" !== direction ? notification.animate([{ transform: this.currentX ? `translateX(${this.currentX}px)` : "none", opacity: "1" }, { transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`, opacity: "0" }], this.animationOptions).onfinish = () => { notification.remove() } : notification.animate([{ transform: this.currentX ? `translateY(${this.currentX}px)` : "none", opacity: "1" }, { transform: `translateY(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`, opacity: "0" }], this.animationOptions).onfinish = () => { notification.remove() } } remove(id) { const notification = this.notificationPanel.querySelector(`#${id}`); notification && this.removeNotification(notification) } clearAll() { Array.from(this.notificationPanel.children).forEach((child => { this.removeNotification(child) })) } handleTouchMove(e) { this.currentX = e.touches[0].clientX - this.startX, this.currentTarget.style.transform = `translateX(${this.currentX}px)` } handleOrientationChange(e) { this.isBigViewport = e.matches, e.matches } connectedCallback() { this.handleOrientationChange(this.mediaQuery), this.mediaQuery.addEventListener("change", this.handleOrientationChange), this.notificationPanel.addEventListener("touchstart", (e => { e.target.closest(".close") ? this.removeNotification(e.target.closest(".notification")) : e.target.closest(".notification") && (this.swipeThreshold = e.target.closest(".notification").getBoundingClientRect().width / 2, this.currentTarget = e.target.closest(".notification"), this.startTime = Date.now(), this.startX = e.touches[0].clientX, this.startY = e.touches[0].clientY, this.notificationPanel.addEventListener("touchmove", this.handleTouchMove, { passive: !0 })) }), { passive: !0 }), this.notificationPanel.addEventListener("touchend", (e => { this.endX = e.changedTouches[0].clientX, this.endY = e.changedTouches[0].clientY, this.swipeDistance = Math.abs(this.endX - this.startX), this.swipeTime = Date.now() - this.startTime, this.endX > this.startX ? this.swipeDirection = "right" : this.swipeDirection = "left", this.swipeTime < this.swipeTimeThreshold ? this.swipeDistance > 50 && this.removeNotification(this.currentTarget, this.swipeDirection) : this.swipeDistance > this.swipeThreshold ? this.removeNotification(this.currentTarget, this.swipeDirection) : this.currentTarget.animate([{ transform: `translateX(${this.currentX}px)` }, { transform: "none" }], this.animationOptions).onfinish = e => { e.target.commitStyles(), e.target.cancel() }, this.notificationPanel.removeEventListener("touchmove", this.handleTouchMove), this.currentX = 0 })) } disconnectedCallback() { mediaQueryList.removeEventListener("change", handleOrientationChange) } });
+class Stack { constructor() { this.items = [] } push(element) { this.items.push(element) } pop() { return 0 == this.items.length ? "Underflow" : this.items.pop() } peek() { return this.items[this.items.length - 1] } } const popupStack = new Stack, smPopup = document.createElement("template"); smPopup.innerHTML = '', customElements.define("sm-popup", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smPopup.content.cloneNode(!0)), this.allowClosing = !1, this.isOpen = !1, this.offset = 0, this.touchStartY = 0, this.touchEndY = 0, this.touchStartTime = 0, this.touchEndTime = 0, this.touchEndAnimation = void 0, this.focusable, this.autoFocus, this.mutationObserver, this.popupContainer = this.shadowRoot.querySelector(".popup-container"), this.backdrop = this.shadowRoot.querySelector(".backdrop"), this.dialogBox = this.shadowRoot.querySelector(".popup"), this.popupBodySlot = this.shadowRoot.querySelector(".popup-body slot"), this.popupHeader = this.shadowRoot.querySelector(".popup-top") } static get observedAttributes() { return ["open"] } get open() { return this.isOpen } animateTo = (element, keyframes, options) => { const anime = element.animate(keyframes, { ...options, fill: "both" }); return anime.finished.then((() => { anime.commitStyles(), anime.cancel() })), anime }; resumeScrolling = () => { const scrollY = document.body.style.top; window.scrollTo(0, -1 * parseInt(scrollY || "0")), document.body.style.overflow = "", document.body.style.top = "initial" }; setStateOpen = () => { if (!this.isOpen || this.offset) { const animOptions = { duration: 300, easing: "ease" }, initialAnimation = window.innerWidth > 640 ? "scale(1.1)" : `translateY(${this.offset ? `${this.offset}px` : "100%"})`; this.animateTo(this.dialogBox, [{ opacity: this.offset ? 1 : 0, transform: initialAnimation }, { opacity: 1, transform: "none" }], animOptions) } }; show = (options = {}) => { const { pinned: pinned = !1, payload: payload } = options; if (this.isOpen) return; const animOptions = { duration: 300, easing: "ease" }; return this.payload = payload, popupStack.push({ popup: this, permission: pinned }), popupStack.items.length > 1 && this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector(".popup"), [{ transform: "none" }, { transform: window.innerWidth > 640 ? "scale(0.95)" : "translateY(-1.5rem)" }], animOptions), this.popupContainer.classList.remove("hide"), this.offset || (this.backdrop.animate([{ opacity: 0 }, { opacity: 1 }], animOptions).onfinish = () => { this.resolveOpen(this.payload) }, this.dispatchEvent(new CustomEvent("popupopened", { bubbles: !0, composed: !0, detail: { payload: this.payload } })), document.body.style.overflow = "hidden", document.body.style.top = `-${window.scrollY}px`), this.setStateOpen(), this.pinned = pinned, this.isOpen = !0, setTimeout((() => { const elementToFocus = this.autoFocus || this.focusable?.[0] || this.dialogBox; elementToFocus && (elementToFocus.tagName.includes("-") ? elementToFocus.focusIn() : elementToFocus.focus()) }), 0), this.hasAttribute("open") || (this.setAttribute("open", ""), this.addEventListener("keydown", this.detectFocus), this.resizeObserver.observe(this), this.mutationObserver.observe(this, { attributes: !0, childList: !0, subtree: !0 }), this.popupHeader.addEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.addEventListener("mousedown", this.handleSoftDismiss)), { opened: new Promise((resolve => { this.resolveOpen = resolve })), closed: new Promise((resolve => { this.resolveClose = resolve })) } }; hide = (options = {}) => { const { payload: payload } = options, animOptions = { duration: 150, easing: "ease" }; this.backdrop.animate([{ opacity: 1 }, { opacity: 0 }], animOptions), this.animateTo(this.dialogBox, [{ opacity: 1, transform: window.innerWidth > 640 ? "none" : `translateY(${this.offset ? `${this.offset}px` : "0"})` }, { opacity: 0, transform: window.innerWidth > 640 ? "scale(1.1)" : "translateY(100%)" }], animOptions).finished.finally((() => { this.popupContainer.classList.add("hide"), this.dialogBox.style = "", this.removeAttribute("open"), this.forms.length && this.forms.forEach((form => form.reset())), this.dispatchEvent(new CustomEvent("popupclosed", { bubbles: !0, composed: !0, detail: { payload: payload || this.payload } })), this.resolveClose(payload || this.payload), this.isOpen = !1 })), popupStack.pop(), popupStack.items.length ? this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector(".popup"), [{ transform: window.innerWidth > 640 ? "scale(0.95)" : "translateY(-1.5rem)" }, { transform: "none" }], animOptions) : this.resumeScrolling(), this.resizeObserver.disconnect(), this.mutationObserver.disconnect(), this.removeEventListener("keydown", this.detectFocus), this.popupHeader.removeEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.removeEventListener("mousedown", this.handleSoftDismiss) }; handleTouchStart = e => { this.offset = 0, this.popupHeader.addEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), this.touchStartY = e.changedTouches[0].clientY, this.touchStartTime = e.timeStamp }; handleTouchMove = e => { this.touchStartY < e.changedTouches[0].clientY && (this.offset = e.changedTouches[0].clientY - this.touchStartY, this.touchEndAnimation = window.requestAnimationFrame((() => { this.dialogBox.style.transform = `translateY(${this.offset}px)` }))) }; handleTouchEnd = e => { if (this.touchEndTime = e.timeStamp, cancelAnimationFrame(this.touchEndAnimation), this.touchEndY = e.changedTouches[0].clientY, this.threshold = .3 * this.dialogBox.getBoundingClientRect().height, this.touchEndTime - this.touchStartTime > 200) if (this.touchEndY - this.touchStartY > this.threshold) { if (this.pinned) return void this.setStateOpen(); this.hide() } else this.setStateOpen(); else if (this.touchEndY > this.touchStartY) { if (this.pinned) return void this.setStateOpen(); this.hide() } this.popupHeader.removeEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.removeEventListener("touchend", this.handleTouchEnd, { passive: !0 }) }; detectFocus = e => { if ("Tab" === e.key) { if (!this.focusable.length) return; if (!this.firstFocusable) for (let i = 0; i < this.focusable.length; i++)if (!this.focusable[i].disabled) { this.firstFocusable = this.focusable[i]; break } if (!this.lastFocusable) for (let i = this.focusable.length - 1; i >= 0; i--)if (!this.focusable[i].disabled) { this.lastFocusable = this.focusable[i]; break } e.shiftKey && document.activeElement === this.firstFocusable ? (e.preventDefault(), this.lastFocusable.tagName.includes("SM-") ? this.lastFocusable.focusIn() : this.lastFocusable.focus()) : e.shiftKey || document.activeElement !== this.lastFocusable || (e.preventDefault(), this.firstFocusable.tagName.includes("SM-") ? this.firstFocusable.focusIn() : this.firstFocusable.focus()) } }; updateFocusableList = () => { this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'), this.autoFocus = this.querySelector("[autofocus]"), this.firstFocusable = null, this.lastFocusable = null }; handleSoftDismiss = () => { this.pinned ? this.dialogBox.animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" }], { duration: 300, easing: "ease" }) : this.hide() }; debounce = (callback, wait) => { let timeoutId = null; return (...args) => { window.clearTimeout(timeoutId), timeoutId = window.setTimeout((() => { callback.apply(null, args) }), wait) } }; connectedCallback() { this.popupBodySlot.addEventListener("slotchange", this.debounce((() => { this.forms = this.querySelectorAll("sm-form"), this.updateFocusableList() }), 0)), this.resizeObserver = new ResizeObserver((entries => { entries.forEach((entry => { if (entry.contentBoxSize) { const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; this.threshold = .3 * contentBoxSize.blockSize.height } else this.threshold = .3 * entry.contentRect.height })) })), this.mutationObserver = new MutationObserver((entries => { this.updateFocusableList() })) } disconnectedCallback() { this.resizeObserver.disconnect(), this.mutationObserver.disconnect(), this.removeEventListener("keydown", this.detectFocus), this.popupHeader.removeEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.removeEventListener("mousedown", this.handleSoftDismiss) } attributeChangedCallback(name) { "open" === name && this.hasAttribute("open") && this.show() } });
+const spinner = document.createElement("template"); spinner.innerHTML = ''; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
+const themeToggle = document.createElement("template"); themeToggle.innerHTML = ' '; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { if (!document.startViewTransition) return this.toggleAttribute("checked"), void this.fireEvent(); document.startViewTransition(() => { this.toggleAttribute("checked"), this.fireEvent() }) } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
\ No newline at end of file
diff --git a/scripts/components.min.js b/scripts/components.min.js
new file mode 100644
index 0000000..44ac4a2
--- /dev/null
+++ b/scripts/components.min.js
@@ -0,0 +1 @@
+const smChips=document.createElement("template");smChips.innerHTML='',customElements.define("sm-chips",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChips.content.cloneNode(!0)),this.chipsWrapper=this.shadowRoot.querySelector(".sm-chips"),this.coverLeft=this.shadowRoot.querySelector(".cover--left"),this.coverRight=this.shadowRoot.querySelector(".cover--right"),this.navButtonLeft=this.shadowRoot.querySelector(".nav-button--left"),this.navButtonRight=this.shadowRoot.querySelector(".nav-button--right"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(t){this.setSelectedOption(t)}scrollLeft(){this.chipsWrapper.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.chipsWrapper.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(t){this._value!==t&&(this._value=t,this.assignedElements.forEach((e=>{e.value==t?(e.setAttribute("selected",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):e.removeAttribute("selected")})))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",(e=>{n.disconnect(),i.disconnect(),this.observeSelf.disconnect(),clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout((()=>{this.assignedElements=t.assignedElements(),this.assignedElements.forEach((t=>{t.hasAttribute("selected")&&(this._value=t.value)})),this.observeSelf.observe(this)}),0)}));const e=new ResizeObserver((t=>{t.forEach((t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width}))}));e.observe(this),this.observeSelf=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.isIntersecting&&!this.hasAttribute("multiline")&&this.assignedElements.length>0&&(n.observe(this.assignedElements[0]),i.observe(this.assignedElements[this.assignedElements.length-1]),e.unobserve(this))}))}),{threshold:1}),this.chipsWrapper.addEventListener("option-clicked",(t=>{this._value!==t.target.value&&(this.setSelectedOption(t.target.value),this.fireEvent())}));const n=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting?(this.navButtonLeft.classList.add("hide"),this.coverLeft.classList.add("hide")):(this.navButtonLeft.classList.remove("hide"),this.coverLeft.classList.remove("hide"))}))}),{threshold:1,root:this}),i=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting?(this.navButtonRight.classList.add("hide"),this.coverRight.classList.add("hide")):(this.navButtonRight.classList.remove("hide"),this.coverRight.classList.remove("hide"))}))}),{threshold:1,root:this});this.navButtonLeft.addEventListener("click",this.scrollLeft),this.navButtonRight.addEventListener("click",this.scrollRight)}disconnectedCallback(){this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.navButtonRight.removeEventListener("click",this.scrollRight)}});const smChip=document.createElement("template");smChip.innerHTML=' ',customElements.define("sm-chip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChip.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});const smCopy=document.createElement("template");smCopy.innerHTML='',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then((t=>this.fireEvent())).catch((t=>console.error(t)))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(t,n,o){if("value"===t){const t=this.copyContent.querySelector("slot");if(!t)return;const n=t.assignedNodes();n&&n.length||(t.textContent=o)}}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});const smForm=document.createElement("template");smForm.innerHTML=' ',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.invalidFieldsCount,this.skipSubmit=!1,this.isFormValid=void 0,this.supportedElements="input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio",this.formElements=[],this._requiredElements=[]}static get observedAttributes(){return["skip-submit"]}get validity(){return this.isFormValid}debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};_checkValidity=()=>{this.submitButton&&0!==this._requiredElements.length&&(this.invalidFieldsCount=0,this._requiredElements.forEach((([elem,isWC])=>{(!elem.disabled&&isWC&&!elem.isValid||!isWC&&!elem.checkValidity())&&this.invalidFieldsCount++})),this.isFormValid!==(0===this.invalidFieldsCount)&&(this.isFormValid=0===this.invalidFieldsCount,this.dispatchEvent(new CustomEvent(this.isFormValid?"valid":"invalid",{bubbles:!0,composed:!0})),this.skipSubmit||(this.submitButton.disabled=!this.isFormValid)))};handleKeydown=e=>{if("Enter"===e.key&&e.target.tagName.includes("INPUT"))if(0===this.invalidFieldsCount)this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}));else for(const[elem,isWC]of this._requiredElements)if(isWC?!elem.isValid:!elem.checkValidity()){(elem?.shadowRoot?.lastElementChild||elem).animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}),isWC?(elem.focusIn(),"SM-INPUT"===elem.tagName&&""===elem.value.trim()&&elem.showError()):elem.focus();break}};reset=()=>{this.formElements.forEach((([elem,isWC])=>{if(isWC)elem.reset();else switch(elem.type){case"checkbox":case"radio":elem.checked=!1;break;default:elem.value=""}})),this._checkValidity()};elementsChanged=()=>{this.formElements=[...this.querySelectorAll(this.supportedElements)].map((elem=>[elem,elem.tagName.includes("-")])),this._requiredElements=this.formElements.filter((([elem])=>elem.hasAttribute("required"))),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()};checkIfSupported=elem=>1===elem.nodeType&&(elem.tagName.includes("-")||"input"===elem.tagName||elem.querySelector(this.supportedElements));connectedCallback(){const updateFormDecedents=this.debounce(this.elementsChanged,100);this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100)),this.shadowRoot.querySelector("slot").addEventListener("slotchange",updateFormDecedents),this.mutationObserver=new MutationObserver((mutations=>{mutations.forEach((mutation=>{("childList"===mutation.type&&[...mutation.addedNodes].some((node=>this.checkIfSupported(node)))||[...mutation.removedNodes].some((node=>this.checkIfSupported(node))))&&updateFormDecedents()}))})),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(name,oldValue,newValue){"skip-submit"===name&&(this.skipSubmit=this.hasAttribute("skip-submit"))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),this.mutationObserver.disconnect()}});const smInput=document.createElement("template");smInput.innerHTML=' ',customElements.define("sm-input",class SmInput extends HTMLElement{static hasAppendedStyles=!1;#validationState={validatedFor:void 0,isValid:!1,errorMessage:"Please fill out this field."};constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.placeholderElement=this.shadowRoot.querySelector(".placeholder"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"]}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(val){val!==this.input.value&&(this.input.value=val,this._value=val,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(val){this.setAttribute("placeholder",val)}get type(){return this.getAttribute("type")}set type(val){this.setAttribute("type",val)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(value){value?(this.inputParent.classList.add("disabled"),this.setAttribute("disabled","")):(this.inputParent.classList.remove("disabled"),this.removeAttribute("disabled"))}get readOnly(){return this.hasAttribute("readonly")}set readOnly(value){value?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(val){val&&(this.validationFunction=val)}set errorText(val){this.#validationState.errorText=val}showError=(errorText=this.#validationState.errorText)=>{const appendedNew=this.appendFeedbackElement();this.feedbackPopover.innerHTML=` ${errorText} `,this.feedbackPopover.dataset.state="error",appendedNew&&this.feedbackPopover.animate([{transform:"scale(0.95)",opacity:0},{transform:"scale(1)",opacity:1}],{duration:200,easing:"ease",fill:"forwards"})};set helperText(val){this._helperText=val}get isValid(){if(this.#validationState.validatedFor===this.input.value)return this.#validationState.isValid;const _isValid=this.input.checkValidity();let _validity={isValid:!0,errorText:""};return this.validationFunction&&(_validity=this.validationFunction(this.input.value)),_isValid&&_validity.isValid?(this.setAttribute("valid",""),this.removeAttribute("invalid"),this.hideFeedback()):(this.removeAttribute("valid"),this.setAttribute("invalid",""),""!==this.value.trim()&&(_validity.errorText||this.#validationState.errorText)&&this.showError(_validity.errorText||this.#validationState.errorText)),this.#validationState.validatedFor=this.input.value,this.#validationState.isValid=_isValid&&_validity.isValid,this.#validationState.errorText=_validity.errorText||this.#validationState.errorText,this.#validationState.isValid}reset=()=>{this.value=""};clear=()=>{this.value="",this.input.focus(),this.fireEvent()};focusIn=()=>{this.input.focus()};focusOut=()=>{this.input.blur()};fireEvent=()=>{let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)};searchDatalist=searchKey=>{const filteredData=this.datalist.filter((item=>item.toLowerCase().includes(searchKey.toLowerCase())));if(filteredData.sort(((a,b)=>a.toLowerCase().indexOf(searchKey.toLowerCase())-b.toLowerCase().indexOf(searchKey.toLowerCase()))),filteredData.length){if(this.optionList.children.length>filteredData.length){const optionsToRemove=this.optionList.children.length-filteredData.length;for(let i=0;i{if(this.optionList.children[index])this.optionList.children[index].textContent=item;else{const option=document.createElement("li");option.textContent=item,option.classList.add("datalist-item"),option.setAttribute("tabindex","0"),this.optionList.appendChild(option)}})),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")};checkInput=e=>{this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hidden"):this.clearBtn.classList.add("hidden")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.shouldAnimatePlaceholder&&this.inputParent.classList.add("animate-placeholder"),this.placeholderElement.classList.toggle("hidden",!this.shouldAnimatePlaceholder),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchDatalist(this.input.value.trim())}),100))):(this.shouldAnimatePlaceholder&&this.inputParent.classList.remove("animate-placeholder"),this.placeholderElement.classList.remove("hidden"),this.hideFeedback(),this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))};allowOnlyNum=e=>{e.ctrlKey||1===e.key.length&&(("."!==e.key||!e.target.value.includes(".")&&0!==e.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(e.key)||e.preventDefault())};handleOptionClick=e=>{this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()};handleInputNavigation=e=>{"ArrowDown"===e.key?(e.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===e.key&&(e.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())};handleDatalistNavigation=e=>{"ArrowUp"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())};handleFocus=e=>{this.datalist.length&&this.searchDatalist(this.input.value.trim())};handleBlur=e=>{this.datalist.length&&this.optionList.classList.add("hidden")};applyGlobalCustomValidation=()=>{if(void 0!==window.smCompConfig&&window.smCompConfig["sm-input"]){const config=window.smCompConfig["sm-input"].find((config=>this.matches(config.selector)));this.customValidation=config?.customValidation}};updatePosition=()=>{requestAnimationFrame((()=>{if(this.dimensions=this.getBoundingClientRect(),this.scrollingParentDimensions=this.scrollingParent.getBoundingClientRect(),0===this.dimensions.width||0===this.dimensions.height)return;let topOffset=this.dimensions.top-this.scrollingParentDimensions.top+this.dimensions.height,leftOffset=this.dimensions.left-this.scrollingParentDimensions.left;const maxWidth=this.dimensions.width;this.feedbackPopover.style=`top: ${topOffset}px; left: ${leftOffset}px; max-width: ${maxWidth}px;`}))};appendFeedbackElement=()=>!this.feedbackPopover&&(this.feedbackPopover=document.createElement("div"),this.feedbackPopover.className="feedback-popover",this.feedbackPopover.setAttribute("aria-live","polite"),this.containment=this.closest("[data-sm-containment]"),this.scrollingParent=this.getNearestScrollingParent(this),(this.containment||this.scrollingParent).appendChild(this.feedbackPopover),""===this.scrollingParent.style.position&&(this.scrollingParent.style.position="relative"),this.containment||(this.observerHidFeedback=!1,this.intersectionObserver=new IntersectionObserver((entries=>{if(this.feedbackPopover)if(entries[0].isIntersecting){if(!this.observerHidFeedback)return;this.feedbackPopover.classList.remove("hidden"),this.observerHidFeedback=!1}else this.feedbackPopover.classList.add("hidden"),this.observerHidFeedback=!0})).observe(this)),this.updatePosition(),window.addEventListener("resize",this.updatePosition,{passive:!0}),!0);getNearestScrollingParent=element=>{let parent=element.parentNode;for(;parent;){if(parent.scrollHeight>parent.clientHeight||parent.scrollWidth>parent.clientWidth||parent.tagName.includes("SM-")||parent.hasAttribute("data-scrollable"))return parent;parent=parent.parentNode}return document.body};hideFeedback=()=>{this.feedbackPopover&&(this.feedbackPopover.animate([{transform:"none",opacity:1},{transform:"scale(0.95)",opacity:0}],{duration:100,easing:"ease-in-out",fill:"forwards"}).onfinish=()=>{this.intersectionObserver?.disconnect(),this.feedbackPopover.remove(),this.feedbackPopover=null,window.removeEventListener("resize",this.updatePosition,{passive:!0})})};connectedCallback(){SmInput.hasAppendedStyles||(document.head.insertAdjacentHTML("beforeend",""),SmInput.hasAppendedStyles=!0),this.shouldAnimatePlaceholder=this.hasAttribute("animate"),this.shouldAnimatePlaceholder&&""!==this.placeholderElement&&this.value&&(this.inputParent.classList.add("animate-placeholder"),this.placeholderElement.classList.remove("hidden")),this.setAttribute("role","textbox"),"loading"===document.readyState?window.addEventListener("load",this.applyGlobalCustomValidation,{once:!0}):this.applyGlobalCustomValidation(),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue)switch(this.reflectedAttributes.includes(name)&&(this.hasAttribute(name)?this.input.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.input.removeAttribute(name)),name){case"placeholder":this.placeholderElement.textContent=newValue,this.setAttribute("aria-label",newValue);break;case"value":this.checkInput();break;case"type":this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum);break;case"helper-text":this._helperText=newValue;break;case"error-text":this.#validationState.errorText=newValue;break;case"required":this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false");break;case"readonly":this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly");break;case"disabled":this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled");break;case"list":this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(","))}}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur),window.removeEventListener("resize",this.updatePosition,{passive:!0}),this.feedbackPopover&&this.feedbackPopover.remove(),this.intersectionObserver&&this.intersectionObserver.disconnect()}});const smNotifications=document.createElement("template");smNotifications.innerHTML=" ",customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this),this.remove=this.remove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.notificationTimeout=5e3,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isBigViewport=!1}set timeout(value){isNaN(value)||(this.notificationTimeout=value)}randString(length){let result="";for(let i=0;i${icon}`:""} ${action?``:""} `,action&¬ification.querySelector(".action").addEventListener("click",action.callback),notification.querySelector(".close").addEventListener("click",(()=>{this.removeNotification(notification)})),pinned||setTimeout((()=>{this.removeNotification(notification,this.isBigViewport?"left":"top")}),timeout),notification}push(message,options={}){const notification=this.createNotification(message,options);return this.isBigViewport?this.notificationPanel.append(notification):this.notificationPanel.prepend(notification),notification.scrollIntoView({behavior:"smooth"}),this.notificationPanel.animate([{transform:`translateY(${this.isBigViewport?"":"-"}${notification.clientHeight}px)`},{transform:"none"}],this.animationOptions),notification.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},notification.id}removeNotification(notification,direction="left"){if(!notification)return;const sign="left"===direction||"top"===direction?"-":"+";this.isBigViewport||"top"!==direction?notification.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}:notification.animate([{transform:this.currentX?`translateY(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateY(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=()=>{notification.remove()}}remove(id){const notification=this.notificationPanel.querySelector(`#${id}`);notification&&this.removeNotification(notification)}clearAll(){Array.from(this.notificationPanel.children).forEach((child=>{this.removeNotification(child)}))}handleTouchMove(e){this.currentX=e.touches[0].clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(e){this.isBigViewport=e.matches,e.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("touchstart",(e=>{e.target.closest(".close")?this.removeNotification(e.target.closest(".notification")):e.target.closest(".notification")&&(this.swipeThreshold=e.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=e.target.closest(".notification"),this.startTime=Date.now(),this.startX=e.touches[0].clientX,this.startY=e.touches[0].clientY,this.notificationPanel.addEventListener("touchmove",this.handleTouchMove,{passive:!0}))}),{passive:!0}),this.notificationPanel.addEventListener("touchend",(e=>{this.endX=e.changedTouches[0].clientX,this.endY=e.changedTouches[0].clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=e=>{e.target.commitStyles(),e.target.cancel()},this.notificationPanel.removeEventListener("touchmove",this.handleTouchMove),this.currentX=0}))}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}});class Stack{constructor(){this.items=[]}push(element){this.items.push(element)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.innerHTML='',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.dialogBox=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top")}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo=(element,keyframes,options)=>{const anime=element.animate(keyframes,{...options,fill:"both"});return anime.finished.then((()=>{anime.commitStyles(),anime.cancel()})),anime};resumeScrolling=()=>{const scrollY=document.body.style.top;window.scrollTo(0,-1*parseInt(scrollY||"0")),document.body.style.overflow="",document.body.style.top="initial"};setStateOpen=()=>{if(!this.isOpen||this.offset){const animOptions={duration:300,easing:"ease"},initialAnimation=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.dialogBox,[{opacity:this.offset?1:0,transform:initialAnimation},{opacity:1,transform:"none"}],animOptions)}};show=(options={})=>{const{pinned:pinned=!1,payload:payload}=options;if(this.isOpen)return;const animOptions={duration:300,easing:"ease"};return this.payload=payload,popupStack.push({popup:this,permission:pinned}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],animOptions),this.popupContainer.classList.remove("hide"),this.offset||(this.backdrop.animate([{opacity:0},{opacity:1}],animOptions).onfinish=()=>{this.resolveOpen(this.payload)},this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,composed:!0,detail:{payload:this.payload}})),document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`),this.setStateOpen(),this.pinned=pinned,this.isOpen=!0,setTimeout((()=>{const elementToFocus=this.autoFocus||this.focusable?.[0]||this.dialogBox;elementToFocus&&(elementToFocus.tagName.includes("-")?elementToFocus.focusIn():elementToFocus.focus())}),0),this.hasAttribute("open")||(this.setAttribute("open",""),this.addEventListener("keydown",this.detectFocus),this.resizeObserver.observe(this),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.addEventListener("mousedown",this.handleSoftDismiss)),{opened:new Promise((resolve=>{this.resolveOpen=resolve})),closed:new Promise((resolve=>{this.resolveClose=resolve}))}};hide=(options={})=>{const{payload:payload}=options,animOptions={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],animOptions),this.animateTo(this.dialogBox,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],animOptions).finished.finally((()=>{this.popupContainer.classList.add("hide"),this.dialogBox.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach((form=>form.reset())),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,composed:!0,detail:{payload:payload||this.payload}})),this.resolveClose(payload||this.payload),this.isOpen=!1})),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],animOptions):this.resumeScrolling(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)};handleTouchStart=e=>{this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=e.changedTouches[0].clientY,this.touchStartTime=e.timeStamp};handleTouchMove=e=>{this.touchStartY{this.dialogBox.style.transform=`translateY(${this.offset}px)`})))};handleTouchEnd=e=>{if(this.touchEndTime=e.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=e.changedTouches[0].clientY,this.threshold=.3*this.dialogBox.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})};detectFocus=e=>{if("Tab"===e.key){if(!this.focusable.length)return;if(!this.firstFocusable)for(let i=0;i=0;i--)if(!this.focusable[i].disabled){this.lastFocusable=this.focusable[i];break}e.shiftKey&&document.activeElement===this.firstFocusable?(e.preventDefault(),this.lastFocusable.tagName.includes("SM-")?this.lastFocusable.focusIn():this.lastFocusable.focus()):e.shiftKey||document.activeElement!==this.lastFocusable||(e.preventDefault(),this.firstFocusable.tagName.includes("SM-")?this.firstFocusable.focusIn():this.firstFocusable.focus())}};updateFocusableList=()=>{this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]"),this.firstFocusable=null,this.lastFocusable=null};handleSoftDismiss=()=>{this.pinned?this.dialogBox.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}):this.hide()};debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};connectedCallback(){this.popupBodySlot.addEventListener("slotchange",this.debounce((()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),0)),this.resizeObserver=new ResizeObserver((entries=>{entries.forEach((entry=>{if(entry.contentBoxSize){const contentBoxSize=Array.isArray(entry.contentBoxSize)?entry.contentBoxSize[0]:entry.contentBoxSize;this.threshold=.3*contentBoxSize.blockSize.height}else this.threshold=.3*entry.contentRect.height}))})),this.mutationObserver=new MutationObserver((entries=>{this.updateFocusableList()}))}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}attributeChangedCallback(name){"open"===name&&this.hasAttribute("open")&&this.show()}});const spinner=document.createElement("template");spinner.innerHTML='';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);const themeToggle=document.createElement("template");themeToggle.innerHTML=' ';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){if(!document.startViewTransition)return this.toggleAttribute("checked"),void this.fireEvent();document.startViewTransition((()=>{this.toggleAttribute("checked"),this.fireEvent()}))}handleKeyDown(e){" "===e.key&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem(`${window.location.hostname}-theme`,"dark")):(this.daylight(),localStorage.setItem(`${window.location.hostname}-theme`,"light")))}}window.customElements.define("theme-toggle",ThemeToggle);
\ No newline at end of file
diff --git a/scripts/ethOperator.js b/scripts/ethOperator.js
new file mode 100644
index 0000000..ca556e3
--- /dev/null
+++ b/scripts/ethOperator.js
@@ -0,0 +1,592 @@
+(function (EXPORTS) {
+ /**
+ * ethOperator.js
+ *
+ * Core logic for interacting with the Mantle network.
+ * Handles address validation, balance checks, gas estimation (the hard part),
+ * and transaction management for both MNT and ERC20 tokens.
+ */
+ if (!window.ethers)
+ return console.error('ethers.js not found')
+ const ethOperator = EXPORTS;
+ const isValidAddress = ethOperator.isValidAddress = (address) => {
+ try {
+ // We verify both checksummed and non-checksummed addresses to be user-friendly.
+ // Some scanners/explorers might provide lowercased addresses.
+ const isValidChecksum = ethers.utils.isAddress(address);
+ const isValidNonChecksum = ethers.utils.getAddress(address) === address.toLowerCase();
+ return isValidChecksum || isValidNonChecksum;
+ } catch (error) {
+ return false;
+ }
+ }
+ const ERC20ABI = [
+ {
+ "constant": true,
+ "inputs": [],
+ "name": "name",
+ "outputs": [
+ {
+ "name": "",
+ "type": "string"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "constant": false,
+ "inputs": [
+ {
+ "name": "_spender",
+ "type": "address"
+ },
+ {
+ "name": "_value",
+ "type": "uint256"
+ }
+ ],
+ "name": "approve",
+ "outputs": [
+ {
+ "name": "",
+ "type": "bool"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "constant": true,
+ "inputs": [],
+ "name": "totalSupply",
+ "outputs": [
+ {
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "constant": false,
+ "inputs": [
+ {
+ "name": "_from",
+ "type": "address"
+ },
+ {
+ "name": "_to",
+ "type": "address"
+ },
+ {
+ "name": "_value",
+ "type": "uint256"
+ }
+ ],
+ "name": "transferFrom",
+ "outputs": [
+ {
+ "name": "",
+ "type": "bool"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "constant": true,
+ "inputs": [],
+ "name": "decimals",
+ "outputs": [
+ {
+ "name": "",
+ "type": "uint8"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "constant": true,
+ "inputs": [
+ {
+ "name": "_owner",
+ "type": "address"
+ }
+ ],
+ "name": "balanceOf",
+ "outputs": [
+ {
+ "name": "balance",
+ "type": "uint256"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "constant": true,
+ "inputs": [],
+ "name": "symbol",
+ "outputs": [
+ {
+ "name": "",
+ "type": "string"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "constant": false,
+ "inputs": [
+ {
+ "name": "_to",
+ "type": "address"
+ },
+ {
+ "name": "_value",
+ "type": "uint256"
+ }
+ ],
+ "name": "transfer",
+ "outputs": [
+ {
+ "name": "",
+ "type": "bool"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "constant": true,
+ "inputs": [
+ {
+ "name": "_owner",
+ "type": "address"
+ },
+ {
+ "name": "_spender",
+ "type": "address"
+ }
+ ],
+ "name": "allowance",
+ "outputs": [
+ {
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "payable": false,
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "payable": true,
+ "stateMutability": "payable",
+ "type": "fallback"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "name": "spender",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "name": "value",
+ "type": "uint256"
+ }
+ ],
+ "name": "Approval",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "name": "from",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "name": "to",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "name": "value",
+ "type": "uint256"
+ }
+ ],
+ "name": "Transfer",
+ "type": "event"
+ }
+ ]
+ const CONTRACT_ADDRESSES = {
+ usdc: "0x09Bc4E0D864854c6aFB6eB9A9cdF58aC190D0dF9",
+ usdt: "0x201EBa5CC46D216Ce6DC03F6a759e8E766e956aE",
+ wmnt: "0x78c1b0C915c4FAA5FffA6CAbf0219DA63d7f4cb8"
+ }
+
+ const MANTLE_GAS_ORACLE = "0x420000000000000000000000000000000000000F";
+ const GAS_ORACLE_ABI = [
+ "function getL1Fee(bytes data) view returns (uint256)",
+ "function l1BaseFee() view returns (uint256)"
+ ];
+ /**
+ * Determines which provider to use.
+ * By default, we prefer the Public RPC for balance checks to avoid
+ * unnecessary MetaMask population/permissions.
+ */
+ const getProvider = ethOperator.getProvider = (readOnly = false) => {
+ if (!readOnly && window.ethereum) {
+ return new ethers.providers.Web3Provider(window.ethereum);
+ } else {
+ return new ethers.providers.JsonRpcProvider(`https://rpc.mantle.xyz`)
+ }
+ }
+ // Note: Connection logic is managed in index.html, we just handle the pipe here.
+ const getBalance = ethOperator.getBalance = async (address) => {
+ try {
+ if (!address || !isValidAddress(address))
+ return new Error('Invalid address');
+
+ // Use read-only provider (public RPC) for balance checks
+ const provider = getProvider(true);
+ const balanceWei = await provider.getBalance(address);
+ const balanceEth = parseFloat(ethers.utils.formatEther(balanceWei));
+ return balanceEth;
+ } catch (error) {
+ console.error('Balance error:', error.message);
+ return 0;
+ }
+ }
+ const getTokenBalance = ethOperator.getTokenBalance = async (address, token, { contractAddress } = {}) => {
+ try {
+ if (!token)
+ return new Error("Token not specified");
+ if (!CONTRACT_ADDRESSES[token] && !contractAddress)
+ return new Error('Contract address of token not available')
+
+ // Fetching via Public RPC for speed and to avoid MetaMask prompts.
+ const provider = getProvider(true);
+ const tokenAddress = CONTRACT_ADDRESSES[token] || contractAddress;
+ const tokenContract = new ethers.Contract(tokenAddress, ERC20ABI, provider);
+ let balance = await tokenContract.balanceOf(address);
+
+ // Tokens like USDC/USDT use 6 decimals, while WMNT/MNT use 18.
+ const decimals = token === 'wmnt' ? 18 : 6;
+ balance = parseFloat(ethers.utils.formatUnits(balance, decimals));
+ return balance;
+ } catch (e) {
+ console.error('Token balance error:', e);
+ return 0;
+ }
+ }
+
+ const estimateGas = ethOperator.estimateGas = async ({ privateKey, receiver, amount }) => {
+ try {
+ const provider = getProvider();
+ const signer = new ethers.Wallet(privateKey, provider);
+
+ let gasLimit;
+ try {
+ gasLimit = await provider.estimateGas({
+ from: signer.address,
+ to: receiver,
+ value: ethers.utils.parseUnits(amount, "ether"),
+ });
+ } catch (estimateError) {
+ // If RPC estimation fails (often due to balance or sequencer check),
+ // we use a block-limit fallback that triggers our secondary check below.
+ console.warn('Gas estimation RPC call failed, using fallback:', estimateError.message);
+ gasLimit = ethers.BigNumber.from("89000000");
+ }
+
+ /**
+ * MANTLE SPECIFIC: Sequence Logic
+ * The sequencer often returns the block limit (~89M) if it thinks the tx will fail
+ * or if the gas is below the L1 requirement. To satisfy the "intrinsic gas" check,
+ * we calculate the limit relative to the L1 Base Fee.
+ *
+ * A threshold of 80M is used to identify these "fake" estimates from the sequencer.
+ */
+ try {
+ const gasLimitValue = BigInt(gasLimit.toString());
+ if (gasLimitValue > 1000000n) {
+ const oracle = new ethers.Contract(MANTLE_GAS_ORACLE, GAS_ORACLE_ABI, getProvider(true));
+ const l1BaseFee = await oracle.l1BaseFee();
+
+ if (l1BaseFee.gt(21000)) {
+ // 80M is a safe "super buffer" threshold for the Mantle sequencer.
+ const minLimit = ethers.BigNumber.from("80000000");
+ const fallbackLimit = l1BaseFee.gt(minLimit) ? l1BaseFee.add(1000000) : minLimit;
+ return fallbackLimit;
+ }
+ return ethers.BigNumber.from("21000");
+ }
+ } catch (err) {
+ console.warn('Error in gas limit fallback logic:', err);
+ if (gasLimit.gt(1000000)) return ethers.BigNumber.from("21000");
+ }
+ return gasLimit;
+ } catch (e) {
+ console.warn('Gas estimation failed completely, using default 21000', e);
+ return ethers.BigNumber.from("21000");
+ }
+ }
+
+ /**
+ * Get Mantle L1 fee based on transaction data
+ * @param {string} data - The hex transaction data
+ * @returns {Promise} - The estimated L1 fee in Wei
+ */
+ const getL1Fee = ethOperator.getL1Fee = async (data = "0x") => {
+ try {
+ const provider = getProvider(true);
+ const oracle = new ethers.Contract(MANTLE_GAS_ORACLE, GAS_ORACLE_ABI, provider);
+ return await oracle.getL1Fee(data);
+ } catch (e) {
+ console.error('L1 Fee estimation error:', e);
+ return ethers.BigNumber.from("0");
+ }
+ }
+
+ const sendTransaction = ethOperator.sendTransaction = async ({ privateKey, receiver, amount }) => {
+ try {
+ const provider = getProvider();
+ const signer = new ethers.Wallet(privateKey, provider);
+ const limit = await estimateGas({ privateKey, receiver, amount })
+
+ const gasPrice = await provider.getGasPrice();
+
+ // We force Legacy (Type 0) transactions here.
+ // Mantle's L2 infrastructure is currently more stable with legacy transactions
+ // than with EIP-1559 due to specific L1 fee rollup logic.
+ return signer.sendTransaction({
+ to: receiver,
+ value: ethers.utils.parseUnits(amount, "ether"),
+ gasLimit: limit,
+ nonce: await signer.getTransactionCount(),
+ gasPrice: gasPrice,
+ type: 0
+ })
+ } catch (e) {
+ throw new Error(e)
+ }
+ }
+
+ /**
+ * Send ERC20 tokens (USDC, USDT, or WMNT)
+ * @param {object} params - Transaction parameters
+ * @param {string} params.token - Token symbol ('usdc', 'usdt', or 'wmnt')
+ * @param {string} params.privateKey - Sender's private key
+ * @param {string} params.amount - Amount to send
+ * @param {string} params.receiver - Recipient's Mantle address
+ * @param {string} params.contractAddress - Optional custom contract address
+ * @returns {Promise} Transaction promise
+ */
+ const sendToken = ethOperator.sendToken = async ({ token, privateKey, amount, receiver, contractAddress }) => {
+ const wallet = new ethers.Wallet(privateKey, getProvider());
+ const tokenContract = new ethers.Contract(CONTRACT_ADDRESSES[token] || contractAddress, ERC20ABI, wallet);
+ // Convert amount to smallest unit: WMNT uses 18 decimals, USDC and USDT use 6 decimals
+ const decimals = token === 'wmnt' ? 18 : 6;
+ const amountWei = ethers.utils.parseUnits(amount.toString(), decimals);
+ return tokenContract.transfer(receiver, amountWei)
+ }
+
+
+
+ /**
+ * Get transaction history for a Mantle address using Mobula API
+ * Free API with full transaction history support
+ * @param {string} address - Mantle address
+ * @param {object} options - Optional parameters
+ * @returns {Promise} Array of transactions
+ */
+ const getTransactionHistory = ethOperator.getTransactionHistory = async (address, options = {}) => {
+ try {
+ if (!address || !isValidAddress(address)) {
+ throw new Error('Invalid Mantle address');
+ }
+
+ const { page = 1, offset = 50 } = options;
+
+ // We use Mobula API because it provides the best free-tier support for Mantle history.
+ const MOBULA_API_URL = 'https://api.mobula.io/api/1/wallet/transactions';
+ const url = `${MOBULA_API_URL}?wallet=${address}&blockchain=mantle&limit=${offset}&offset=${(page - 1) * offset}`;
+
+
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ console.warn(`Mobula API returned ${response.status}`);
+ return [];
+ }
+
+ const data = await response.json();
+
+ if (!data.data || !data.data.transactions || data.data.transactions.length === 0) {
+ return [];
+ }
+
+ // Normalizing Mobula data to our unified transaction format.
+ const transactions = data.data.transactions
+ .filter(tx => tx.blockchain && tx.blockchain.toLowerCase() === 'mantle')
+ .map(tx => {
+ const isReceived = tx.to && tx.to.toLowerCase() === address.toLowerCase();
+
+ // tx_cost is returned in MNT by Mobula, representing the total fee paid.
+ const txFee = parseFloat(tx.tx_cost || 0);
+
+ return {
+ hash: tx.hash,
+ from: tx.from,
+ to: tx.to,
+ value: parseFloat(tx.amount || 0),
+ symbol: tx.asset?.symbol || 'MNT',
+ timestamp: Math.floor(tx.timestamp / 1000),
+ blockNumber: tx.block_number,
+ isReceived: isReceived,
+ isSent: !isReceived,
+ gasUsed: txFee > 0 ? 21000 : 0,
+ gasPrice: txFee > 0 ? (txFee / 21000) * 1e18 : 0,
+ transactionFee: txFee,
+ isError: false,
+ contractAddress: tx.contract !== '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee' ? tx.contract : null,
+ tokenName: tx.asset?.name || null,
+ confirmations: 0,
+ nonce: 0,
+ input: '0x',
+ isTokenTransfer: tx.type !== 'native',
+ amountUSD: tx.amount_usd,
+ txType: tx.type,
+ txCost: tx.tx_cost
+ };
+ });
+
+
+ return transactions;
+
+ } catch (error) {
+ console.error('Error fetching transaction history:', error);
+ return [];
+ }
+ };
+
+ /**
+ * Get detailed information about a specific transaction
+ * @param {string} txHash - Transaction hash
+ * @returns {Promise