@volr/react-ui 0.1.116 → 0.1.118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -564,6 +564,7 @@ var en = {
564
564
  noAssets: "No assets configured",
565
565
  menu: {
566
566
  assets: "Assets",
567
+ deposit: "Deposit",
567
568
  withdraw: "Withdraw",
568
569
  payments: "Payment History",
569
570
  account: "Account"
@@ -651,6 +652,15 @@ var en = {
651
652
  messageLabel: "Message",
652
653
  domainLabel: "Domain"
653
654
  },
655
+ payment: {
656
+ processing: {
657
+ signing: "Confirming payment...",
658
+ broadcasting: "Sending payment...",
659
+ confirming: "Almost done...",
660
+ default: "Processing...",
661
+ doNotClose: "Please don't close this window"
662
+ }
663
+ },
654
664
  errors: {
655
665
  webauthnNotSupported: "WebAuthn API is not supported",
656
666
  passkeyCreationFailed: "Failed to create passkey",
@@ -757,6 +767,7 @@ var ko = {
757
767
  noAssets: "\uC124\uC815\uB41C \uC790\uC0B0\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
758
768
  menu: {
759
769
  assets: "\uC790\uC0B0",
770
+ deposit: "\uC785\uAE08",
760
771
  withdraw: "\uCD9C\uAE08",
761
772
  payments: "\uACB0\uC81C \uAE30\uB85D",
762
773
  account: "\uACC4\uC815 \uC815\uBCF4"
@@ -844,6 +855,15 @@ var ko = {
844
855
  messageLabel: "\uBA54\uC2DC\uC9C0",
845
856
  domainLabel: "\uB3C4\uBA54\uC778"
846
857
  },
858
+ payment: {
859
+ processing: {
860
+ signing: "\uACB0\uC81C \uD655\uC778 \uC911...",
861
+ broadcasting: "\uACB0\uC81C \uC804\uC1A1 \uC911...",
862
+ confirming: "\uAC70\uC758 \uC644\uB8CC...",
863
+ default: "\uCC98\uB9AC \uC911...",
864
+ doNotClose: "\uCC3D\uC744 \uB2EB\uC9C0 \uB9C8\uC138\uC694"
865
+ }
866
+ },
847
867
  errors: {
848
868
  webauthnNotSupported: "WebAuthn API\uAC00 \uC9C0\uC6D0\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
849
869
  passkeyCreationFailed: "\uD328\uC2A4\uD0A4 \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.",
@@ -986,7 +1006,7 @@ function useMediaQuery(query) {
986
1006
  }
987
1007
 
988
1008
  // src/generated/volr-sdk-css.ts
989
- var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-tracking:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-100:oklch(93.6% .032 17.717);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-amber-50:oklch(98.7% .022 95.277);--volr-color-amber-200:oklch(92.4% .12 95.746);--volr-color-amber-700:oklch(55.5% .163 48.998);--volr-color-yellow-100:oklch(97.3% .071 103.193);--volr-color-yellow-700:oklch(55.4% .135 66.442);--volr-color-green-50:oklch(98.2% .018 155.826);--volr-color-green-100:oklch(96.2% .044 156.743);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-green-700:oklch(52.7% .154 150.069);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-emerald-600:oklch(59.6% .145 163.225);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-blue-100:oklch(93.2% .032 255.585);--volr-color-blue-700:oklch(48.8% .243 264.376);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-700:oklch(37.2% .044 257.287);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-3xl:1.875rem;--volr-text-3xl--line-height:calc(2.25/1.875);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-tracking-wide:.025em;--volr-leading-relaxed:1.625;--volr-radius-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:right-3{right:calc(var(--volr-spacing)*3)}.volr\\:bottom-3{bottom:calc(var(--volr-spacing)*3)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:block{display:block}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-9{height:calc(var(--volr-spacing)*9)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.volr\\:h-20{height:calc(var(--volr-spacing)*20)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-48{max-height:calc(var(--volr-spacing)*48)}.volr\\:max-h-60{max-height:calc(var(--volr-spacing)*60)}.volr\\:max-h-64{max-height:calc(var(--volr-spacing)*64)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-3{width:calc(var(--volr-spacing)*3)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.volr\\:w-7{width:calc(var(--volr-spacing)*7)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-14{width:calc(var(--volr-spacing)*14)}.volr\\:w-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0,.volr\\:shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:rotate-90{rotate:90deg}.volr\\:rotate-180{rotate:180deg}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:cursor-not-allowed{cursor:not-allowed}.volr\\:cursor-pointer{cursor:pointer}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-8>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*8)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*8)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-auto{overflow:auto}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-x-auto{overflow-x:auto}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-y{border-block-style:var(--volr-tw-border-style);border-block-width:1px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-b{border-bottom-style:var(--volr-tw-border-style);border-bottom-width:1px}.volr\\:border-amber-200{border-color:var(--volr-color-amber-200)}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-red-500{border-color:var(--volr-color-red-500)}.volr\\:border-slate-100{border-color:var(--volr-color-slate-100)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.volr\\:bg-amber-50{background-color:var(--volr-color-amber-50)}.volr\\:bg-black\\/40{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/40{background-color:color-mix(in oklab,var(--volr-color-black)40%,transparent)}}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-blue-100{background-color:var(--volr-color-blue-100)}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-green-50{background-color:var(--volr-color-green-50)}.volr\\:bg-green-100{background-color:var(--volr-color-green-100)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-red-100{background-color:var(--volr-color-red-100)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-slate-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-yellow-100{background-color:var(--volr-color-yellow-100)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:bg-linear-to-r{--volr-tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-r{--volr-tw-gradient-position:to right in oklab}}.volr\\:bg-linear-to-r{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:bg-gradient-to-br{--volr-tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-slate-50{--volr-tw-gradient-from:var(--volr-color-slate-50);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-slate-100{--volr-tw-gradient-to:var(--volr-color-slate-100);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:object-cover{object-fit:cover}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-6{padding:calc(var(--volr-spacing)*6)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-1\\.5{padding-inline:calc(var(--volr-spacing)*1.5)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1{padding-block:calc(var(--volr-spacing)*1)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pr-16{padding-right:calc(var(--volr-spacing)*16)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-3xl{font-size:var(--volr-text-3xl);line-height:var(--volr-tw-leading,var(--volr-text-3xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:tracking-wide{--volr-tw-tracking:var(--volr-tracking-wide);letter-spacing:var(--volr-tracking-wide)}.volr\\:break-all{word-break:break-all}.volr\\:text-amber-700{color:var(--volr-color-amber-700)}.volr\\:text-blue-700{color:var(--volr-color-blue-700)}.volr\\:text-emerald-600{color:var(--volr-color-emerald-600)}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-green-700{color:var(--volr-color-green-700)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-slate-100{color:var(--volr-color-slate-100)}.volr\\:text-slate-300{color:var(--volr-color-slate-300)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-700{color:var(--volr-color-slate-700)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:text-yellow-700{color:var(--volr-color-yellow-700)}.volr\\:capitalize{text-transform:capitalize}.volr\\:uppercase{text-transform:uppercase}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-50{opacity:.5}.volr\\:opacity-75{opacity:.75}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-md{--volr-tw-shadow:0 4px 6px -1px var(--volr-tw-shadow-color,#0000001a),0 2px 4px -2px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:border-slate-300:hover{border-color:var(--volr-color-slate-300)}.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}.volr\\:hover\\:bg-slate-200:hover{background-color:var(--volr-color-slate-200)}.volr\\:hover\\:text-slate-700:hover{color:var(--volr-color-slate-700)}}.volr\\:focus\\:ring-2:focus{--volr-tw-ring-shadow:var(--volr-tw-ring-inset,)0 0 0 calc(2px + var(--volr-tw-ring-offset-width))var(--volr-tw-ring-color,currentcolor);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:focus\\:ring-slate-300:focus{--volr-tw-ring-color:var(--volr-color-slate-300)}.volr\\:focus\\:outline-none:focus{--volr-tw-outline-style:none;outline-style:none}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:bg-slate-100:disabled{background-color:var(--volr-color-slate-100)}.volr\\:disabled\\:text-slate-400:disabled{color:var(--volr-color-slate-400)}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-tracking{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
1009
+ var VOLR_SDK_CSS = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-tracking:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-100:oklch(93.6% .032 17.717);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-amber-50:oklch(98.7% .022 95.277);--volr-color-amber-200:oklch(92.4% .12 95.746);--volr-color-amber-700:oklch(55.5% .163 48.998);--volr-color-yellow-100:oklch(97.3% .071 103.193);--volr-color-yellow-700:oklch(55.4% .135 66.442);--volr-color-green-50:oklch(98.2% .018 155.826);--volr-color-green-100:oklch(96.2% .044 156.743);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-green-700:oklch(52.7% .154 150.069);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-emerald-600:oklch(59.6% .145 163.225);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-blue-100:oklch(93.2% .032 255.585);--volr-color-blue-700:oklch(48.8% .243 264.376);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-700:oklch(37.2% .044 257.287);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-tracking-wide:.025em;--volr-leading-relaxed:1.625;--volr-radius-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:right-0{right:calc(var(--volr-spacing)*0)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:right-3{right:calc(var(--volr-spacing)*3)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:left-0{left:calc(var(--volr-spacing)*0)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-0\\.5{margin-bottom:calc(var(--volr-spacing)*.5)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:block{display:block}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.volr\\:h-20{height:calc(var(--volr-spacing)*20)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-48{max-height:calc(var(--volr-spacing)*48)}.volr\\:max-h-60{max-height:calc(var(--volr-spacing)*60)}.volr\\:max-h-64{max-height:calc(var(--volr-spacing)*64)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-3{width:calc(var(--volr-spacing)*3)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.volr\\:w-7{width:calc(var(--volr-spacing)*7)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-14{width:calc(var(--volr-spacing)*14)}.volr\\:w-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0,.volr\\:shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:rotate-90{rotate:90deg}.volr\\:rotate-180{rotate:180deg}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:cursor-not-allowed{cursor:not-allowed}.volr\\:cursor-pointer{cursor:pointer}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-auto{overflow:auto}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-x-auto{overflow-x:auto}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:rounded-t-xl{border-top-left-radius:var(--volr-radius-xl);border-top-right-radius:var(--volr-radius-xl)}.volr\\:rounded-b-xl{border-bottom-right-radius:var(--volr-radius-xl);border-bottom-left-radius:var(--volr-radius-xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-x{border-inline-style:var(--volr-tw-border-style);border-inline-width:1px}.volr\\:border-y{border-block-style:var(--volr-tw-border-style);border-block-width:1px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-b{border-bottom-style:var(--volr-tw-border-style);border-bottom-width:1px}.volr\\:border-amber-200{border-color:var(--volr-color-amber-200)}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-red-500{border-color:var(--volr-color-red-500)}.volr\\:border-slate-100{border-color:var(--volr-color-slate-100)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.volr\\:bg-amber-50{background-color:var(--volr-color-amber-50)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-blue-100{background-color:var(--volr-color-blue-100)}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-emerald-500{background-color:var(--volr-color-emerald-500)}.volr\\:bg-green-50{background-color:var(--volr-color-green-50)}.volr\\:bg-green-100{background-color:var(--volr-color-green-100)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-red-100{background-color:var(--volr-color-red-100)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-slate-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-yellow-100{background-color:var(--volr-color-yellow-100)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:bg-linear-to-r{--volr-tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-r{--volr-tw-gradient-position:to right in oklab}}.volr\\:bg-linear-to-r{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:bg-gradient-to-br{--volr-tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-slate-50{--volr-tw-gradient-from:var(--volr-color-slate-50);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-slate-100{--volr-tw-gradient-to:var(--volr-color-slate-100);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:object-cover{object-fit:cover}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-1\\.5{padding-inline:calc(var(--volr-spacing)*1.5)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1{padding-block:calc(var(--volr-spacing)*1)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pr-16{padding-right:calc(var(--volr-spacing)*16)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:tracking-wide{--volr-tw-tracking:var(--volr-tracking-wide);letter-spacing:var(--volr-tracking-wide)}.volr\\:break-all{word-break:break-all}.volr\\:text-amber-700{color:var(--volr-color-amber-700)}.volr\\:text-blue-700{color:var(--volr-color-blue-700)}.volr\\:text-emerald-600{color:var(--volr-color-emerald-600)}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-green-700{color:var(--volr-color-green-700)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-slate-300{color:var(--volr-color-slate-300)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-700{color:var(--volr-color-slate-700)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:text-yellow-700{color:var(--volr-color-yellow-700)}.volr\\:capitalize{text-transform:capitalize}.volr\\:uppercase{text-transform:uppercase}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-50{opacity:.5}.volr\\:opacity-75{opacity:.75}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:border-slate-300:hover{border-color:var(--volr-color-slate-300)}.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}.volr\\:hover\\:bg-slate-200:hover{background-color:var(--volr-color-slate-200)}.volr\\:hover\\:text-slate-700:hover{color:var(--volr-color-slate-700)}}.volr\\:focus\\:ring-2:focus{--volr-tw-ring-shadow:var(--volr-tw-ring-inset,)0 0 0 calc(2px + var(--volr-tw-ring-offset-width))var(--volr-tw-ring-color,currentcolor);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:focus\\:ring-slate-300:focus{--volr-tw-ring-color:var(--volr-color-slate-300)}.volr\\:focus\\:outline-none:focus{--volr-tw-outline-style:none;outline-style:none}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:bg-slate-100:disabled{background-color:var(--volr-color-slate-100)}.volr\\:disabled\\:text-slate-400:disabled{color:var(--volr-color-slate-400)}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-tracking{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
990
1010
  function useResolvedTheme(theme = "light") {
991
1011
  const [resolvedTheme, setResolvedTheme] = React13.useState(() => {
992
1012
  if (theme !== "system") return theme;
@@ -2892,1031 +2912,879 @@ function SigninModal({ isOpen, onClose, onError }) {
2892
2912
  }
2893
2913
  );
2894
2914
  }
2895
- function ChevronRightIcon({ className }) {
2896
- return /* @__PURE__ */ jsxRuntime.jsx(
2897
- "svg",
2898
- {
2899
- xmlns: "http://www.w3.org/2000/svg",
2900
- viewBox: "0 0 20 20",
2901
- fill: "currentColor",
2902
- className,
2903
- children: /* @__PURE__ */ jsxRuntime.jsx(
2904
- "path",
2915
+ function AssetSelectView({
2916
+ assets,
2917
+ onSelect
2918
+ }) {
2919
+ const { t } = useI18n();
2920
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2921
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.selectTitle") }),
2922
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:mb-4 volr-text-secondary", children: "Supported token" }),
2923
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: assets.map((a, idx) => {
2924
+ const isNative = a.token === "native";
2925
+ const tokenSymbol = isNative ? "ETH" : a.token.symbol;
2926
+ const tokenName = isNative ? "Ethereum" : a.token.symbol;
2927
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2928
+ "button",
2905
2929
  {
2906
- fillRule: "evenodd",
2907
- d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
2908
- clipRule: "evenodd"
2909
- }
2910
- )
2911
- }
2912
- );
2913
- }
2914
- function WalletIcon2({ className }) {
2915
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" }) });
2916
- }
2917
- function ArrowUpIcon({ className }) {
2918
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" }) });
2919
- }
2920
- function ClockIcon({ className }) {
2921
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
2922
- }
2923
- function UserIcon({ className }) {
2924
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) });
2930
+ className: cn(
2931
+ "volr:w-full volr:p-4 volr:rounded-xl volr:border-2",
2932
+ "volr:text-left volr:transition-all",
2933
+ "volr:flex volr:items-center volr:gap-4",
2934
+ "volr-border volr-hover"
2935
+ ),
2936
+ onClick: () => onSelect(idx),
2937
+ children: [
2938
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:shrink-0", children: !isNative && a.token.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
2939
+ "img",
2940
+ {
2941
+ alt: a.token.symbol,
2942
+ src: a.token.iconUrl,
2943
+ className: "volr:w-10 volr:h-10 volr:rounded-full volr:border volr-border"
2944
+ }
2945
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-full volr:flex volr:items-center volr:justify-center volr:text-white volr:font-bold volr:text-sm volr-bg-tertiary", children: tokenSymbol.slice(0, 2) }) }),
2946
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
2947
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
2948
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
2949
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr:px-2 volr:py-0.5 volr:rounded-full volr:font-medium volr-bg-secondary volr-text-secondary", children: [
2950
+ "Chain ",
2951
+ a.chainId
2952
+ ] })
2953
+ ] }),
2954
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-sm volr-text-secondary", children: tokenName }),
2955
+ !isNative && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:font-mono volr:truncate volr:mt-1 volr-text-muted", children: a.token.address })
2956
+ ] }),
2957
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:shrink-0 volr-text-muted", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
2958
+ ]
2959
+ },
2960
+ `${a.chainId}-${idx}`
2961
+ );
2962
+ }) })
2963
+ ] });
2925
2964
  }
2926
- function MenuItem({ icon, label, description, onClick }) {
2965
+ var TextLinkButton = React13__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
2927
2966
  return /* @__PURE__ */ jsxRuntime.jsxs(
2928
2967
  "button",
2929
2968
  {
2969
+ ref,
2930
2970
  type: "button",
2931
- onClick,
2932
- className: "volr:w-full volr:flex volr:items-center volr:gap-3 volr:py-3 volr:px-3 volr:rounded-xl hover:volr:bg-slate-50 volr:transition-colors volr:text-left",
2971
+ className: cn(
2972
+ "volr:underline volr:transition-colors volr-text-secondary",
2973
+ className
2974
+ ),
2975
+ ...props,
2933
2976
  children: [
2934
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:shrink-0", children: icon }),
2935
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
2936
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: label }),
2937
- description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400 volr:mt-0.5", children: description })
2938
- ] }),
2939
- /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
2977
+ children,
2978
+ showArrow && " \u2192"
2940
2979
  ]
2941
2980
  }
2942
2981
  );
2982
+ });
2983
+ TextLinkButton.displayName = "TextLinkButton";
2984
+ var OtherTokenModal = ({
2985
+ open,
2986
+ onOpenChange
2987
+ }) => {
2988
+ return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, children: [
2989
+ /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
2990
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center", children: [
2991
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:mb-2", children: "Coming Soon" }),
2992
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr-text-secondary", children: "Swap and bridge recommendations will be available here soon." })
2993
+ ] })
2994
+ ] });
2995
+ };
2996
+
2997
+ // ../node_modules/viem/_esm/errors/unit.js
2998
+ init_base();
2999
+ var InvalidDecimalNumberError = class extends BaseError {
3000
+ constructor({ value }) {
3001
+ super(`Number \`${value}\` is not a valid decimal number.`, {
3002
+ name: "InvalidDecimalNumberError"
3003
+ });
3004
+ }
3005
+ };
3006
+
3007
+ // ../node_modules/viem/_esm/utils/unit/parseUnits.js
3008
+ function parseUnits(value, decimals) {
3009
+ if (!/^(-?)([0-9]*)\.?([0-9]*)$/.test(value))
3010
+ throw new InvalidDecimalNumberError({ value });
3011
+ let [integer, fraction = "0"] = value.split(".");
3012
+ const negative = integer.startsWith("-");
3013
+ if (negative)
3014
+ integer = integer.slice(1);
3015
+ fraction = fraction.replace(/(0+)$/, "");
3016
+ if (decimals === 0) {
3017
+ if (Math.round(Number(`.${fraction}`)) === 1)
3018
+ integer = `${BigInt(integer) + 1n}`;
3019
+ fraction = "";
3020
+ } else if (fraction.length > decimals) {
3021
+ const [left, unit, right] = [
3022
+ fraction.slice(0, decimals - 1),
3023
+ fraction.slice(decimals - 1, decimals),
3024
+ fraction.slice(decimals)
3025
+ ];
3026
+ const rounded = Math.round(Number(`${unit}.${right}`));
3027
+ if (rounded > 9)
3028
+ fraction = `${BigInt(left) + BigInt(1)}0`.padStart(left.length + 1, "0");
3029
+ else
3030
+ fraction = `${left}${rounded}`;
3031
+ if (fraction.length > decimals) {
3032
+ fraction = fraction.slice(1);
3033
+ integer = `${BigInt(integer) + 1n}`;
3034
+ }
3035
+ fraction = fraction.slice(0, decimals);
3036
+ } else {
3037
+ fraction = fraction.padEnd(decimals, "0");
3038
+ }
3039
+ return BigInt(`${negative ? "-" : ""}${integer}${fraction}`);
2943
3040
  }
2944
- function AccountMainView({
2945
- totalUsd,
2946
- balances,
2947
- isLoading,
2948
- paymentEnabled,
2949
- onNavigate,
2950
- onLogout,
2951
- isLoggingOut
2952
- }) {
2953
- const { t } = useI18n();
2954
- const formattedUsd = isLoading ? "\u2014" : totalUsd.toLocaleString("en-US", {
2955
- style: "currency",
2956
- currency: "USD",
2957
- minimumFractionDigits: 2,
2958
- maximumFractionDigits: 2
2959
- });
2960
- const tokensWithBalance = balances.filter((b) => b.balanceRaw > 0n).length;
2961
- const assetsDescription = isLoading ? void 0 : tokensWithBalance > 0 ? `${tokensWithBalance} ${tokensWithBalance === 1 ? "token" : "tokens"}` : void 0;
2962
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2963
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:rounded-2xl volr:bg-gradient-to-br volr:from-slate-50 volr:to-slate-100 volr:p-6 volr:mb-4", children: [
2964
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-500 volr:mb-1", children: t("account.totalBalance") }),
2965
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-9 volr:w-36 volr:bg-slate-200 volr:rounded" }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-3xl volr:font-semibold volr:text-slate-900", children: formattedUsd })
2966
- ] }),
2967
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-1", children: [
3041
+
3042
+ // ../node_modules/viem/_esm/index.js
3043
+ init_abis();
3044
+ init_formatUnits();
3045
+ var DefaultWalletIcon2 = () => /* @__PURE__ */ jsxRuntime.jsxs(
3046
+ "svg",
3047
+ {
3048
+ className: "volr:w-6 volr:h-6",
3049
+ viewBox: "0 0 24 24",
3050
+ fill: "none",
3051
+ xmlns: "http://www.w3.org/2000/svg",
3052
+ children: [
2968
3053
  /* @__PURE__ */ jsxRuntime.jsx(
2969
- MenuItem,
3054
+ "rect",
2970
3055
  {
2971
- icon: /* @__PURE__ */ jsxRuntime.jsx(WalletIcon2, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2972
- label: t("account.menu.assets"),
2973
- description: assetsDescription,
2974
- onClick: () => onNavigate("assets")
3056
+ x: "2",
3057
+ y: "6",
3058
+ width: "20",
3059
+ height: "14",
3060
+ rx: "2",
3061
+ stroke: "currentColor",
3062
+ strokeWidth: "1.5"
2975
3063
  }
2976
3064
  ),
2977
3065
  /* @__PURE__ */ jsxRuntime.jsx(
2978
- MenuItem,
2979
- {
2980
- icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2981
- label: t("account.menu.withdraw"),
2982
- onClick: () => onNavigate("withdraw")
2983
- }
2984
- ),
2985
- paymentEnabled && /* @__PURE__ */ jsxRuntime.jsx(
2986
- MenuItem,
3066
+ "path",
2987
3067
  {
2988
- icon: /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2989
- label: t("account.menu.payments"),
2990
- onClick: () => onNavigate("payments")
3068
+ d: "M17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5Z",
3069
+ fill: "currentColor"
2991
3070
  }
2992
3071
  ),
2993
3072
  /* @__PURE__ */ jsxRuntime.jsx(
2994
- MenuItem,
3073
+ "path",
2995
3074
  {
2996
- icon: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2997
- label: t("account.menu.account"),
2998
- onClick: () => onNavigate("account")
3075
+ d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6",
3076
+ stroke: "currentColor",
3077
+ strokeWidth: "1.5"
2999
3078
  }
3000
3079
  )
3001
- ] }),
3002
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-4 volr:pt-4 volr:border-t volr:border-slate-100", children: /* @__PURE__ */ jsxRuntime.jsx(
3003
- "button",
3004
- {
3005
- type: "button",
3006
- onClick: onLogout,
3007
- disabled: isLoggingOut,
3008
- className: "volr:w-full volr:py-2 volr:text-sm volr:text-slate-400 volr:text-center hover:volr:text-slate-600 volr:transition-colors disabled:volr:opacity-50",
3009
- children: isLoggingOut ? t("common.loading") : t("account.logout")
3010
- }
3011
- ) })
3012
- ] });
3013
- }
3014
- function TokenRow({ token }) {
3015
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
3016
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
3017
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden volr:shrink-0", children: token.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3018
- "img",
3019
- {
3020
- src: token.iconUrl,
3021
- alt: token.symbol,
3022
- className: "volr:w-full volr:h-full volr:object-cover"
3023
- }
3024
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
3025
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3026
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol }),
3027
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3028
- "Chain ",
3029
- token.chainId
3030
- ] })
3031
- ] })
3032
- ] }),
3033
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-right", children: token.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" }) }) : token.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-red-500", children: "Error" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3034
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.balance }),
3035
- token.balanceUsd !== void 0 && token.balanceUsd > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3036
- "$",
3037
- token.balanceUsd.toFixed(2)
3038
- ] })
3039
- ] }) })
3040
- ] });
3041
- }
3042
- function BalanceDetailView({
3043
- balances,
3044
- isLoading
3080
+ ]
3081
+ }
3082
+ );
3083
+ function WalletTransferView({
3084
+ chainId,
3085
+ asset,
3086
+ destinationAddress,
3087
+ onBack,
3088
+ onSuccess
3045
3089
  }) {
3046
3090
  const { t } = useI18n();
3047
- if (isLoading && balances.length === 0) {
3048
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
3049
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-200" }),
3050
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1", children: [
3051
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded volr:mb-1" }),
3052
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-12 volr:bg-slate-100 volr:rounded" })
3053
- ] }),
3054
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
3055
- ] }, i)) }) });
3056
- }
3057
- if (balances.length === 0) {
3058
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.noAssets") }) });
3059
- }
3060
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3061
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.assets") }),
3062
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: balances.map((token) => /* @__PURE__ */ jsxRuntime.jsx(TokenRow, { token }, token.id)) })
3063
- ] });
3064
- }
3065
- var Input = React13__default.default.forwardRef(
3066
- ({ leftIcon, error, className, style, disabled, ...props }, ref) => {
3067
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3068
- leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:left-3 volr:top-1/2 volr:-translate-y-1/2 volr:pointer-events-none volr-text-muted", children: leftIcon }),
3069
- /* @__PURE__ */ jsxRuntime.jsx(
3070
- "input",
3071
- {
3072
- ref,
3073
- disabled,
3074
- className: cn(
3075
- "volr:w-full volr:text-base volr:outline-none volr:transition-all volr:rounded-lg volr:py-3 volr:disabled:cursor-not-allowed volr:bg-white",
3076
- "volr:border volr:border-slate-300 focus:volr:border-slate-400 focus:volr:ring-1 focus:volr:ring-slate-400",
3077
- leftIcon ? "volr:pl-11 volr:pr-3" : "volr:px-3",
3078
- error && "volr:border-red-500 focus:volr:border-red-500 focus:volr:ring-red-500",
3079
- className
3080
- ),
3081
- style,
3082
- ...props
3083
- }
3084
- )
3085
- ] });
3086
- }
3087
- );
3088
- Input.displayName = "Input";
3089
- function WithdrawView({
3090
- balances,
3091
- connectedWallet,
3092
- onSuccess
3093
- }) {
3094
- const { t } = useI18n();
3095
- const { withdraw, isWithdrawing, result, error, reset } = react.useWithdraw();
3096
- const [step, setStep] = React13.useState("select");
3097
- const [selectedTokenId, setSelectedTokenId] = React13.useState(null);
3098
- const [toAddress, setToAddress] = React13.useState("");
3091
+ const { config } = react.useVolrContext();
3092
+ const { client } = react.useInternalAuth();
3093
+ const { isDetecting, getWalletsForDisplay, hasWallet } = react.useEIP6963();
3094
+ const [viewState, setViewState] = React13.useState("select-wallet");
3095
+ const [selectedWallet, setSelectedWallet] = React13.useState(null);
3096
+ const [connectedAddress, setConnectedAddress] = React13.useState(null);
3097
+ const [balance, setBalance] = React13.useState(null);
3099
3098
  const [amount, setAmount] = React13.useState("");
3100
- const [useConnectedWallet, setUseConnectedWallet] = React13.useState(false);
3101
- const selectedToken = React13.useMemo(
3102
- () => balances.find((b) => b.id === selectedTokenId),
3103
- [balances, selectedTokenId]
3099
+ const [isConnecting, setIsConnecting] = React13.useState(false);
3100
+ const [isTransferring, setIsTransferring] = React13.useState(false);
3101
+ const [error, setError] = React13.useState(null);
3102
+ const [chainName, setChainName] = React13.useState(null);
3103
+ const [currentChainId, setCurrentChainId] = React13.useState(null);
3104
+ const tokenSymbol = asset === "native" ? "ETH" : asset.symbol;
3105
+ const decimals = asset === "native" ? 18 : asset.decimals;
3106
+ const getNetworkInfo = React13.useCallback(
3107
+ react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
3108
+ [client, config.rpcOverrides]
3104
3109
  );
3105
- const connectedAddress = React13.useMemo(() => {
3106
- if (!connectedWallet) return null;
3107
- const parts = connectedWallet.split(":");
3108
- return parts.length >= 2 ? parts[1] : null;
3109
- }, [connectedWallet]);
3110
- const handleSelectToken = (tokenId) => {
3111
- setSelectedTokenId(tokenId);
3112
- setStep("input");
3113
- };
3114
- const handleUseConnectedWallet = () => {
3115
- if (connectedAddress) {
3116
- setToAddress(connectedAddress);
3117
- setUseConnectedWallet(true);
3118
- }
3119
- };
3120
- const handleConfirm = async () => {
3121
- if (!selectedToken || !toAddress || !amount) return;
3122
- setStep("confirm");
3110
+ React13.useEffect(() => {
3111
+ let cancelled = false;
3112
+ const loadChainName = async () => {
3113
+ try {
3114
+ const info = await getNetworkInfo(chainId, false);
3115
+ if (!cancelled) setChainName(info.name);
3116
+ } catch {
3117
+ if (!cancelled) setChainName(`Chain ${chainId}`);
3118
+ }
3119
+ };
3120
+ loadChainName();
3121
+ return () => {
3122
+ cancelled = true;
3123
+ };
3124
+ }, [getNetworkInfo, chainId]);
3125
+ const connectWallet = React13.useCallback(async (wallet) => {
3126
+ setIsConnecting(true);
3127
+ setError(null);
3123
3128
  try {
3124
- await withdraw({
3125
- chainId: selectedToken.chainId,
3126
- tokenAddress: selectedToken.address,
3127
- decimals: selectedToken.decimals,
3128
- amount,
3129
- to: toAddress
3130
- });
3131
- setStep("result");
3132
- } catch {
3133
- setStep("result");
3129
+ const provider = wallet.provider;
3130
+ const accounts = await provider.request({ method: "eth_requestAccounts" });
3131
+ if (!accounts || accounts.length === 0) {
3132
+ throw new Error("No accounts found");
3133
+ }
3134
+ const address = accounts[0];
3135
+ setConnectedAddress(address);
3136
+ setSelectedWallet(wallet);
3137
+ const chainIdHex = await provider.request({ method: "eth_chainId" });
3138
+ const currentChain = parseInt(chainIdHex, 16);
3139
+ setCurrentChainId(currentChain);
3140
+ await fetchBalance(provider, address, currentChain);
3141
+ setViewState("transfer");
3142
+ } catch (err) {
3143
+ console.error("Failed to connect wallet:", err);
3144
+ setError(err instanceof Error ? err.message : "Connection failed");
3145
+ } finally {
3146
+ setIsConnecting(false);
3134
3147
  }
3135
- };
3136
- const handleReset = () => {
3137
- reset();
3138
- setStep("select");
3139
- setSelectedTokenId(null);
3140
- setToAddress("");
3141
- setAmount("");
3142
- setUseConnectedWallet(false);
3143
- };
3144
- const isAmountValid = React13.useMemo(() => {
3145
- if (!amount || !selectedToken) return false;
3146
- const num = parseFloat(amount);
3147
- if (isNaN(num) || num <= 0) return false;
3148
- const balance = parseFloat(selectedToken.balance.replace(/,/g, ""));
3149
- return num <= balance;
3150
- }, [amount, selectedToken]);
3151
- const isAddressValid = /^0x[a-fA-F0-9]{40}$/.test(toAddress);
3152
- if (step === "select") {
3153
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3154
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.selectToken") }),
3155
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-2", children: balances.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
3156
- "button",
3157
- {
3158
- type: "button",
3159
- onClick: () => handleSelectToken(token.id),
3160
- disabled: token.balanceRaw === 0n,
3161
- className: "volr:w-full volr:flex volr:items-center volr:justify-between volr:p-3 volr:rounded-lg volr:border volr:border-slate-200 hover:volr:bg-slate-50 volr:transition-colors disabled:volr:opacity-50 disabled:volr:cursor-not-allowed",
3162
- children: [
3163
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
3164
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden", children: token.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3165
- "img",
3166
- {
3167
- src: token.iconUrl,
3168
- alt: token.symbol,
3169
- className: "volr:w-full volr:h-full volr:object-cover"
3170
- }
3171
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
3172
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol })
3173
- ] }),
3174
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-500", children: token.balance })
3175
- ]
3176
- },
3177
- token.id
3178
- )) })
3179
- ] });
3180
- }
3181
- if (step === "input" && selectedToken) {
3182
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3183
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.title") }),
3184
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3 volr:p-3 volr:rounded-lg volr:bg-slate-50 volr:mb-4", children: [
3185
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-200 volr:flex volr:items-center volr:justify-center volr:overflow-hidden", children: selectedToken.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3186
- "img",
3187
- {
3188
- src: selectedToken.iconUrl,
3189
- alt: selectedToken.symbol,
3190
- className: "volr:w-full volr:h-full volr:object-cover"
3191
- }
3192
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: selectedToken.symbol.slice(0, 2) }) }),
3193
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3194
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: selectedToken.symbol }),
3195
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3196
- t("account.withdraw.available"),
3197
- ": ",
3198
- selectedToken.balance
3199
- ] })
3200
- ] })
3201
- ] }),
3202
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
3203
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.toAddress") }),
3204
- /* @__PURE__ */ jsxRuntime.jsx(
3205
- Input,
3206
- {
3207
- type: "text",
3208
- placeholder: "0x...",
3209
- value: toAddress,
3210
- onChange: (e) => {
3211
- setToAddress(e.target.value);
3212
- setUseConnectedWallet(false);
3213
- }
3214
- }
3215
- ),
3216
- connectedAddress && !useConnectedWallet && /* @__PURE__ */ jsxRuntime.jsx(
3217
- "button",
3218
- {
3219
- type: "button",
3220
- onClick: handleUseConnectedWallet,
3221
- className: "volr:mt-2 volr:text-xs volr:text-slate-500 hover:volr:text-slate-700 volr:underline",
3222
- children: t("account.withdraw.useConnectedWallet")
3223
- }
3224
- )
3225
- ] }),
3226
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-6", children: [
3227
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.amount") }),
3228
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3229
- /* @__PURE__ */ jsxRuntime.jsx(
3230
- Input,
3231
- {
3232
- type: "text",
3233
- inputMode: "decimal",
3234
- placeholder: "0.00",
3235
- value: amount,
3236
- onChange: (e) => setAmount(e.target.value)
3237
- }
3238
- ),
3239
- /* @__PURE__ */ jsxRuntime.jsx(
3240
- "button",
3241
- {
3242
- type: "button",
3243
- onClick: () => setAmount(selectedToken.balance.replace(/,/g, "")),
3244
- className: "volr:absolute volr:right-3 volr:top-1/2 volr:-translate-y-1/2 volr:text-xs volr:text-slate-500 hover:volr:text-slate-700 volr:font-medium",
3245
- children: "MAX"
3246
- }
3247
- )
3248
- ] })
3249
- ] }),
3250
- /* @__PURE__ */ jsxRuntime.jsx(
3251
- Button,
3252
- {
3253
- onClick: handleConfirm,
3254
- disabled: !isAddressValid || !isAmountValid,
3255
- fullWidth: true,
3256
- children: t("account.withdraw.confirm")
3257
- }
3258
- )
3259
- ] });
3260
- }
3261
- if (step === "confirm" && selectedToken) {
3262
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-8 volr:text-center", children: [
3263
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-spin volr:w-8 volr:h-8 volr:border-2 volr:border-slate-200 volr:border-t-slate-600 volr:rounded-full volr:mx-auto volr:mb-4" }),
3264
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-600", children: t("account.withdraw.processing") })
3265
- ] });
3266
- }
3267
- if (step === "result") {
3268
- const isSuccess = result && !error;
3269
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-8 volr:text-center", children: [
3270
- isSuccess ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3271
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-12 volr:h-12 volr:rounded-full volr:bg-green-100 volr:flex volr:items-center volr:justify-center volr:mx-auto volr:mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
3272
- "svg",
3273
- {
3274
- className: "volr:w-6 volr:h-6 volr:text-green-600",
3275
- fill: "none",
3276
- viewBox: "0 0 24 24",
3277
- stroke: "currentColor",
3278
- children: /* @__PURE__ */ jsxRuntime.jsx(
3279
- "path",
3280
- {
3281
- strokeLinecap: "round",
3282
- strokeLinejoin: "round",
3283
- strokeWidth: 2,
3284
- d: "M5 13l4 4L19 7"
3285
- }
3286
- )
3287
- }
3288
- ) }),
3289
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.success") }),
3290
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-6", children: [
3291
- amount,
3292
- " ",
3293
- selectedToken?.symbol,
3294
- " ",
3295
- t("account.withdraw.sent")
3296
- ] })
3297
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3298
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-12 volr:h-12 volr:rounded-full volr:bg-red-100 volr:flex volr:items-center volr:justify-center volr:mx-auto volr:mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
3299
- "svg",
3300
- {
3301
- className: "volr:w-6 volr:h-6 volr:text-red-600",
3302
- fill: "none",
3303
- viewBox: "0 0 24 24",
3304
- stroke: "currentColor",
3305
- children: /* @__PURE__ */ jsxRuntime.jsx(
3306
- "path",
3307
- {
3308
- strokeLinecap: "round",
3309
- strokeLinejoin: "round",
3310
- strokeWidth: 2,
3311
- d: "M6 18L18 6M6 6l12 12"
3312
- }
3313
- )
3314
- }
3315
- ) }),
3316
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.failed") }),
3317
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-500 volr:mb-6", children: error?.message || t("account.withdraw.unknownError") })
3318
- ] }),
3319
- /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: isSuccess ? onSuccess : handleReset, fullWidth: true, children: isSuccess ? t("common.done") : t("common.tryAgain") })
3320
- ] });
3321
- }
3322
- return null;
3323
- }
3324
- function PaymentRow({ payment, onClick }) {
3325
- const { t } = useI18n();
3326
- const date = new Date(payment.createdAt);
3327
- const formattedDate = date.toLocaleDateString(void 0, {
3328
- month: "short",
3329
- day: "numeric",
3330
- year: "numeric"
3331
- });
3332
- const statusColors = {
3333
- CONFIRMED: "volr:bg-green-100 volr:text-green-700",
3334
- PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
3335
- PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
3336
- FAILED: "volr:bg-red-100 volr:text-red-700",
3337
- CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
3338
- EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
3339
- };
3340
- return /* @__PURE__ */ jsxRuntime.jsxs(
3341
- "button",
3342
- {
3343
- type: "button",
3344
- onClick,
3345
- className: "volr:w-full volr:flex volr:items-center volr:justify-between volr:py-3 volr:border-b volr:border-slate-100 hover:volr:bg-slate-50 volr:transition-colors volr:text-left",
3346
- children: [
3347
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
3348
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
3349
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900 volr:truncate", children: payment.itemName || t("account.payments.payment") }),
3350
- /* @__PURE__ */ jsxRuntime.jsx(
3351
- "span",
3352
- {
3353
- className: `volr:px-1.5 volr:py-0.5 volr:text-xs volr:font-medium volr:rounded ${statusColors[payment.status] || "volr:bg-slate-100 volr:text-slate-500"}`,
3354
- children: payment.status
3355
- }
3356
- )
3357
- ] }),
3358
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400", children: formattedDate })
3359
- ] }),
3360
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3361
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-right", children: [
3362
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: [
3363
- payment.amount,
3364
- " ",
3365
- payment.token.symbol
3366
- ] }),
3367
- payment.totalUsd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3368
- "$",
3369
- parseFloat(payment.totalUsd).toFixed(2)
3370
- ] })
3371
- ] }),
3372
- /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
3373
- ] })
3374
- ]
3375
- }
3376
- );
3377
- }
3378
- function PaymentHistoryView({ onSelectPayment }) {
3379
- const { t } = useI18n();
3380
- const { getPaymentHistory, isLoading: isApiLoading } = react.useVolrPaymentApi();
3381
- const [payments, setPayments] = React13.useState([]);
3382
- const [isLoading, setIsLoading] = React13.useState(true);
3383
- const [error, setError] = React13.useState(null);
3384
- React13.useEffect(() => {
3385
- setIsLoading(true);
3386
- setError(null);
3387
- getPaymentHistory({ take: 20 }).then((result) => {
3388
- setPayments(result.payments);
3389
- }).catch((err) => {
3390
- console.error("[PaymentHistoryView] Failed to fetch payments:", err);
3391
- setError(t("account.payments.fetchError"));
3392
- }).finally(() => {
3393
- setIsLoading(false);
3394
- });
3395
- }, [getPaymentHistory, t]);
3396
- if (isLoading || isApiLoading) {
3397
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3", children: [
3398
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3399
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-32 volr:bg-slate-200 volr:rounded volr:mb-2" }),
3400
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-20 volr:bg-slate-100 volr:rounded" })
3401
- ] }),
3402
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
3403
- ] }, i)) }) });
3404
- }
3405
- if (error) {
3406
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-500", children: error }) });
3407
- }
3408
- if (payments.length === 0) {
3409
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.payments.noPayments") }) });
3410
- }
3411
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3412
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.payments") }),
3413
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: payments.map((payment) => /* @__PURE__ */ jsxRuntime.jsx(
3414
- PaymentRow,
3415
- {
3416
- payment,
3417
- onClick: () => onSelectPayment(payment)
3418
- },
3419
- payment.id
3420
- )) })
3421
- ] });
3422
- }
3423
- function DetailRow({ label, value, copyable, mono }) {
3424
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-start volr:justify-between volr:py-2 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
3425
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-500", children: label }),
3426
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3427
- /* @__PURE__ */ jsxRuntime.jsx(
3428
- "span",
3429
- {
3430
- className: `volr:text-sm volr:text-slate-900 volr:text-right ${mono ? "volr:font-mono" : ""}`,
3431
- children: value
3432
- }
3433
- ),
3434
- copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: value, className: "volr:shrink-0" })
3435
- ] })
3436
- ] });
3437
- }
3438
- function PaymentDetailView({ payment }) {
3439
- const { t } = useI18n();
3440
- const createdDate = new Date(payment.createdAt);
3441
- const formattedCreatedAt = createdDate.toLocaleString(void 0, {
3442
- year: "numeric",
3443
- month: "short",
3444
- day: "numeric",
3445
- hour: "2-digit",
3446
- minute: "2-digit"
3447
- });
3448
- const confirmedDate = payment.confirmedAt ? new Date(payment.confirmedAt) : null;
3449
- const formattedConfirmedAt = confirmedDate ? confirmedDate.toLocaleString(void 0, {
3450
- year: "numeric",
3451
- month: "short",
3452
- day: "numeric",
3453
- hour: "2-digit",
3454
- minute: "2-digit"
3455
- }) : null;
3456
- const statusColors = {
3457
- CONFIRMED: "volr:bg-green-100 volr:text-green-700",
3458
- PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
3459
- PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
3460
- FAILED: "volr:bg-red-100 volr:text-red-700",
3461
- CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
3462
- EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
3463
- };
3464
- const truncateHash = (hash) => {
3465
- if (hash.length <= 16) return hash;
3466
- return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
3467
- };
3468
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3469
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-6", children: [
3470
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-2", children: [
3471
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: payment.itemName || t("account.payments.payment") }),
3472
- /* @__PURE__ */ jsxRuntime.jsx(
3473
- "span",
3474
- {
3475
- className: `volr:px-2 volr:py-0.5 volr:text-xs volr:font-medium volr:rounded ${statusColors[payment.status] || "volr:bg-slate-100 volr:text-slate-500"}`,
3476
- children: payment.status
3477
- }
3478
- )
3479
- ] }),
3480
- payment.itemDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: payment.itemDescription })
3481
- ] }),
3482
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-4 volr:mb-4 volr:border-y volr:border-slate-100", children: [
3483
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900", children: [
3484
- payment.amount,
3485
- " ",
3486
- payment.token.symbol
3487
- ] }),
3488
- payment.totalUsd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:text-slate-500", children: [
3489
- "\u2248 $",
3490
- parseFloat(payment.totalUsd).toFixed(2),
3491
- " USD"
3492
- ] })
3493
- ] }),
3494
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-1", children: [
3495
- /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: t("account.payments.createdAt"), value: formattedCreatedAt }),
3496
- formattedConfirmedAt && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: t("account.payments.confirmedAt"), value: formattedConfirmedAt }),
3497
- /* @__PURE__ */ jsxRuntime.jsx(
3498
- DetailRow,
3499
- {
3500
- label: t("account.payments.token"),
3501
- value: `${payment.token.symbol} (Chain ${payment.token.chainId})`
3502
- }
3503
- ),
3504
- payment.txHash && /* @__PURE__ */ jsxRuntime.jsx(
3505
- DetailRow,
3506
- {
3507
- label: t("account.payments.txHash"),
3508
- value: truncateHash(payment.txHash),
3509
- copyable: true,
3510
- mono: true
3511
- }
3512
- ),
3513
- payment.referenceId && /* @__PURE__ */ jsxRuntime.jsx(
3514
- DetailRow,
3515
- {
3516
- label: t("account.payments.referenceId"),
3517
- value: payment.referenceId,
3518
- copyable: true
3519
- }
3520
- )
3521
- ] }),
3522
- payment.itemImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
3523
- "img",
3524
- {
3525
- src: payment.itemImage,
3526
- alt: payment.itemName || "Item",
3527
- className: "volr:w-full volr:h-40 volr:object-cover volr:rounded-lg"
3528
- }
3529
- ) })
3530
- ] });
3531
- }
3532
- function InfoRow({ label, value, copyable, mono }) {
3533
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
3534
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400 volr:mb-1", children: label }),
3535
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-2", children: [
3536
- /* @__PURE__ */ jsxRuntime.jsx(
3537
- "p",
3538
- {
3539
- className: `volr:text-sm volr:text-slate-900 volr:break-all ${mono ? "volr:font-mono" : ""}`,
3540
- children: value
3541
- }
3542
- ),
3543
- copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: value, className: "volr:shrink-0" })
3544
- ] })
3545
- ] });
3546
- }
3547
- function AccountInfoView({ user }) {
3548
- const { t } = useI18n();
3549
- const getLoginMethod = () => {
3550
- if (user.authWallet) {
3551
- return t("account.info.loginMethod.wallet");
3552
- }
3553
- if (user.email?.includes("@google.")) {
3554
- return t("account.info.loginMethod.google");
3555
- }
3556
- if (user.email?.includes("@twitter.") || user.email?.includes("@x.")) {
3557
- return t("account.info.loginMethod.twitter");
3558
- }
3559
- if (user.email?.includes("@wallet.")) {
3560
- return t("account.info.loginMethod.wallet");
3561
- }
3562
- return t("account.info.loginMethod.email");
3563
- };
3564
- const formatAddress = (address) => {
3565
- if (address.length <= 16) return address;
3566
- return `${address.slice(0, 6)}...${address.slice(-4)}`;
3567
- };
3568
- const externalWallet = user.authWallet ? user.authWallet.split(":")[1] || user.authWallet : null;
3569
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3570
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.account") }),
3571
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3572
- /* @__PURE__ */ jsxRuntime.jsx(InfoRow, { label: t("account.info.loginMethod.label"), value: getLoginMethod() }),
3573
- user.email && !user.email.includes("@wallet.") && /* @__PURE__ */ jsxRuntime.jsx(InfoRow, { label: t("account.email"), value: user.email }),
3574
- user.evmAddress && /* @__PURE__ */ jsxRuntime.jsx(
3575
- InfoRow,
3576
- {
3577
- label: t("account.walletAddress"),
3578
- value: formatAddress(user.evmAddress),
3579
- copyable: true,
3580
- mono: true
3581
- }
3582
- ),
3583
- externalWallet && /* @__PURE__ */ jsxRuntime.jsx(
3584
- InfoRow,
3585
- {
3586
- label: t("account.info.connectedWallet"),
3587
- value: formatAddress(externalWallet),
3588
- copyable: true,
3589
- mono: true
3590
- }
3591
- ),
3592
- user.signerType && /* @__PURE__ */ jsxRuntime.jsx(
3593
- InfoRow,
3594
- {
3595
- label: t("account.info.signerType"),
3596
- value: user.signerType === "passkey" ? "Passkey" : user.signerType
3597
- }
3598
- )
3599
- ] })
3600
- ] });
3601
- }
3602
- function AccountModal({ isOpen, onClose, onError }) {
3603
- const { user, logout } = react.useVolrContext();
3604
- const { balances, totalUsd, isLoading, paymentEnabled, refresh } = react.useUserBalances();
3605
- const [currentView, setCurrentView] = React13.useState("main");
3606
- const [selectedPayment, setSelectedPayment] = React13.useState(null);
3607
- const [isLoggingOut, setIsLoggingOut] = React13.useState(false);
3608
- const handleOpenChange = React13.useCallback((open) => {
3609
- if (!open) {
3610
- onClose();
3611
- setTimeout(() => {
3612
- setCurrentView("main");
3613
- setSelectedPayment(null);
3614
- }, 200);
3615
- }
3616
- }, [onClose]);
3617
- if (!user) {
3618
- return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
3619
- }
3620
- if (!user.keyStorageType) {
3621
- const handlePasskeyComplete = () => {
3622
- onClose();
3623
- };
3624
- const handlePasskeyError = (error) => {
3625
- if (onError) onError(error);
3626
- };
3627
- const handleLogoutFromPasskey = async () => {
3628
- try {
3629
- await logout();
3630
- onClose();
3631
- } catch (error) {
3632
- if (onError) {
3633
- onError(error instanceof Error ? error : new Error("Logout failed"));
3634
- }
3148
+ }, [chainId, asset]);
3149
+ const fetchBalance = React13.useCallback(async (provider, address, currentChain) => {
3150
+ try {
3151
+ if (currentChain !== chainId) {
3152
+ setBalance(null);
3153
+ return;
3635
3154
  }
3636
- };
3637
- return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(
3638
- PasskeyEnrollView,
3639
- {
3640
- wrapInModal: false,
3641
- onComplete: handlePasskeyComplete,
3642
- onError: handlePasskeyError,
3643
- onLogout: handleLogoutFromPasskey,
3644
- onClose
3155
+ if (asset === "native") {
3156
+ const balanceHex = await provider.request({
3157
+ method: "eth_getBalance",
3158
+ params: [address, "latest"]
3159
+ });
3160
+ setBalance(BigInt(balanceHex));
3161
+ } else {
3162
+ const data = `0x70a08231000000000000000000000000${address.slice(2)}`;
3163
+ const result = await provider.request({
3164
+ method: "eth_call",
3165
+ params: [{ to: asset.address, data }, "latest"]
3166
+ });
3167
+ setBalance(BigInt(result));
3645
3168
  }
3646
- ) });
3647
- }
3648
- const handleLogout = async () => {
3649
- setIsLoggingOut(true);
3169
+ } catch (err) {
3170
+ console.error("Failed to fetch balance:", err);
3171
+ setBalance(BigInt(0));
3172
+ }
3173
+ }, [chainId, asset]);
3174
+ const switchNetwork = React13.useCallback(async () => {
3175
+ if (!selectedWallet?.provider) return;
3650
3176
  try {
3651
- await logout();
3652
- onClose();
3653
- } catch (error) {
3654
- if (onError) {
3655
- onError(error instanceof Error ? error : new Error("Logout failed"));
3177
+ await selectedWallet.provider.request({
3178
+ method: "wallet_switchEthereumChain",
3179
+ params: [{ chainId: `0x${chainId.toString(16)}` }]
3180
+ });
3181
+ const chainIdHex = await selectedWallet.provider.request({ method: "eth_chainId" });
3182
+ const currentChain = parseInt(chainIdHex, 16);
3183
+ setCurrentChainId(currentChain);
3184
+ if (connectedAddress) {
3185
+ await fetchBalance(selectedWallet.provider, connectedAddress, currentChain);
3656
3186
  }
3657
- } finally {
3658
- setIsLoggingOut(false);
3187
+ } catch (err) {
3188
+ console.error("Failed to switch network:", err);
3189
+ setError(err instanceof Error ? err.message : "Failed to switch network");
3659
3190
  }
3660
- };
3661
- const handleNavigate = (view) => {
3662
- setCurrentView(view);
3663
- };
3664
- const handleBack = () => {
3665
- if (selectedPayment) {
3666
- setSelectedPayment(null);
3667
- setCurrentView("payments");
3668
- } else {
3669
- setCurrentView("main");
3191
+ }, [selectedWallet, chainId, connectedAddress, fetchBalance]);
3192
+ const executeTransfer = React13.useCallback(async () => {
3193
+ if (!selectedWallet?.provider || !connectedAddress || !amount) return;
3194
+ setIsTransferring(true);
3195
+ setError(null);
3196
+ try {
3197
+ const amountWei = parseUnits(amount, decimals);
3198
+ if (balance !== null && amountWei > balance) {
3199
+ setError(t("deposit.walletTransfer.insufficientBalance"));
3200
+ setIsTransferring(false);
3201
+ return;
3202
+ }
3203
+ let txHash;
3204
+ if (asset === "native") {
3205
+ txHash = await selectedWallet.provider.request({
3206
+ method: "eth_sendTransaction",
3207
+ params: [{
3208
+ from: connectedAddress,
3209
+ to: destinationAddress,
3210
+ value: `0x${amountWei.toString(16)}`
3211
+ }]
3212
+ });
3213
+ } else {
3214
+ const paddedTo = destinationAddress.slice(2).padStart(64, "0");
3215
+ const paddedAmount = amountWei.toString(16).padStart(64, "0");
3216
+ const data = `0xa9059cbb${paddedTo}${paddedAmount}`;
3217
+ txHash = await selectedWallet.provider.request({
3218
+ method: "eth_sendTransaction",
3219
+ params: [{
3220
+ from: connectedAddress,
3221
+ to: asset.address,
3222
+ data
3223
+ }]
3224
+ });
3225
+ }
3226
+ console.log("Transfer tx hash:", txHash);
3227
+ onSuccess?.();
3228
+ } catch (err) {
3229
+ console.error("Transfer failed:", err);
3230
+ setError(err instanceof Error ? err.message : "Transfer failed");
3231
+ } finally {
3232
+ setIsTransferring(false);
3670
3233
  }
3671
- };
3672
- const handleSelectPayment = (payment) => {
3673
- setSelectedPayment(payment);
3674
- };
3675
- const handleWithdrawSuccess = () => {
3676
- refresh();
3677
- setCurrentView("main");
3678
- };
3679
- const showBack = currentView !== "main" || selectedPayment !== null;
3680
- const renderContent = () => {
3681
- if (selectedPayment) {
3682
- return /* @__PURE__ */ jsxRuntime.jsx(PaymentDetailView, { payment: selectedPayment });
3234
+ }, [selectedWallet, connectedAddress, amount, decimals, balance, asset, destinationAddress, onSuccess, t]);
3235
+ const setMaxAmount = React13.useCallback(() => {
3236
+ if (balance !== null) {
3237
+ const formatted = formatUnits(balance, decimals);
3238
+ setAmount(formatted);
3683
3239
  }
3684
- switch (currentView) {
3685
- case "main":
3686
- return /* @__PURE__ */ jsxRuntime.jsx(
3687
- AccountMainView,
3688
- {
3689
- totalUsd,
3690
- balances,
3691
- isLoading,
3692
- paymentEnabled,
3693
- onNavigate: handleNavigate,
3694
- onLogout: handleLogout,
3695
- isLoggingOut
3696
- }
3697
- );
3698
- case "assets":
3699
- return /* @__PURE__ */ jsxRuntime.jsx(BalanceDetailView, { balances, isLoading });
3700
- case "withdraw":
3701
- return /* @__PURE__ */ jsxRuntime.jsx(
3702
- WithdrawView,
3240
+ }, [balance, decimals]);
3241
+ const wallets = getWalletsForDisplay();
3242
+ const isWrongNetwork = currentChainId !== null && currentChainId !== chainId;
3243
+ const formattedBalance = balance !== null ? formatUnits(balance, decimals) : null;
3244
+ if (viewState === "select-wallet") {
3245
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3246
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
3247
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
3248
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.selectWallet") })
3249
+ ] }),
3250
+ isDetecting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:py-8", children: [
3251
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-spin volr:w-6 volr:h-6 volr:border-2 volr:border-slate-300 volr:border-t-slate-600 volr:rounded-full volr:mx-auto" }),
3252
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-3", children: t("common.loading") })
3253
+ ] }),
3254
+ !isDetecting && !hasWallet && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.noWallets") }) }),
3255
+ !isDetecting && wallets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-2", children: wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
3256
+ "button",
3257
+ {
3258
+ type: "button",
3259
+ onClick: () => connectWallet(wallet),
3260
+ disabled: isConnecting,
3261
+ className: "volr:w-full volr:flex volr:items-center volr:gap-3 volr:p-3 volr:border volr:border-slate-200 volr:rounded-xl volr:hover:bg-slate-50 volr:transition-colors volr:disabled:opacity-50",
3262
+ children: [
3263
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-lg volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden volr:flex-shrink-0", children: wallet.icon ? /* @__PURE__ */ jsxRuntime.jsx(
3264
+ "img",
3265
+ {
3266
+ src: wallet.icon,
3267
+ alt: wallet.name,
3268
+ className: "volr:w-7 volr:h-7"
3269
+ }
3270
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-slate-400", children: /* @__PURE__ */ jsxRuntime.jsx(DefaultWalletIcon2, {}) }) }),
3271
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:flex-1 volr:text-left volr:font-medium volr:text-slate-900", children: wallet.name }),
3272
+ /* @__PURE__ */ jsxRuntime.jsx(
3273
+ "svg",
3274
+ {
3275
+ className: "volr:w-5 volr:h-5 volr:text-slate-400",
3276
+ fill: "none",
3277
+ viewBox: "0 0 24 24",
3278
+ stroke: "currentColor",
3279
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
3280
+ }
3281
+ )
3282
+ ]
3283
+ },
3284
+ wallet.id
3285
+ )) }),
3286
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
3287
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-6 volr:pt-4 volr:border-t volr:border-slate-200", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", onClick: onBack, className: "volr:w-full", children: t("common.back") }) })
3288
+ ] });
3289
+ }
3290
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3291
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
3292
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
3293
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3294
+ selectedWallet?.icon && /* @__PURE__ */ jsxRuntime.jsx("img", { src: selectedWallet.icon, alt: "", className: "volr:w-5 volr:h-5 volr:rounded" }),
3295
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-sm volr:text-slate-500", children: [
3296
+ connectedAddress?.slice(0, 6),
3297
+ "...",
3298
+ connectedAddress?.slice(-4)
3299
+ ] })
3300
+ ] })
3301
+ ] }),
3302
+ isWrongNetwork && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4 volr:p-3 volr:bg-amber-50 volr:border volr:border-amber-200 volr:rounded-lg", children: [
3303
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-amber-700 volr:mb-2", children: t("deposit.walletTransfer.wrongNetwork", { network: chainName || `Chain ${chainId}` }) }),
3304
+ /* @__PURE__ */ jsxRuntime.jsx(
3305
+ Button,
3306
+ {
3307
+ variant: "secondary",
3308
+ size: "sm",
3309
+ onClick: switchNetwork,
3310
+ className: "volr:w-full",
3311
+ children: t("deposit.walletTransfer.switchNetwork")
3312
+ }
3313
+ )
3314
+ ] }),
3315
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-4 volr:p-4 volr:bg-slate-50 volr:rounded-xl volr:border volr:border-slate-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between", children: [
3316
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3317
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
3318
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:px-2 volr:py-0.5 volr:rounded-full volr:bg-slate-200 volr:text-slate-600", children: chainName || `Chain ${chainId}` })
3319
+ ] }),
3320
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-right", children: [
3321
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-500", children: t("deposit.walletTransfer.balance") }),
3322
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-mono volr:font-medium", children: isWrongNetwork ? "-" : formattedBalance ? `${Number(formattedBalance).toFixed(4)}` : "..." })
3323
+ ] })
3324
+ ] }) }),
3325
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
3326
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "volr:block volr:text-sm volr:font-medium volr:text-slate-700 volr:mb-2", children: t("deposit.walletTransfer.amount") }),
3327
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3328
+ /* @__PURE__ */ jsxRuntime.jsx(
3329
+ "input",
3703
3330
  {
3704
- balances,
3705
- connectedWallet: user.authWallet,
3706
- onSuccess: handleWithdrawSuccess
3331
+ type: "text",
3332
+ inputMode: "decimal",
3333
+ value: amount,
3334
+ onChange: (e) => setAmount(e.target.value),
3335
+ placeholder: t("deposit.walletTransfer.amountPlaceholder"),
3336
+ disabled: isWrongNetwork,
3337
+ className: "volr:w-full volr:px-4 volr:py-3 volr:pr-16 volr:border volr:border-slate-300 volr:rounded-xl volr:text-base volr:font-mono volr:focus:outline-none volr:focus:ring-2 volr:focus:ring-slate-300 volr:disabled:bg-slate-100 volr:disabled:text-slate-400"
3707
3338
  }
3708
- );
3709
- case "payments":
3710
- return /* @__PURE__ */ jsxRuntime.jsx(PaymentHistoryView, { onSelectPayment: handleSelectPayment });
3711
- case "account":
3712
- return /* @__PURE__ */ jsxRuntime.jsx(AccountInfoView, { user });
3713
- default:
3714
- return null;
3715
- }
3716
- };
3717
- return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: [
3339
+ ),
3340
+ /* @__PURE__ */ jsxRuntime.jsx(
3341
+ "button",
3342
+ {
3343
+ type: "button",
3344
+ onClick: setMaxAmount,
3345
+ disabled: isWrongNetwork || balance === null,
3346
+ className: "volr:absolute volr:right-3 volr:top-1/2 volr:-translate-y-1/2 volr:px-2 volr:py-1 volr:text-xs volr:font-semibold volr:text-slate-600 volr:bg-slate-100 volr:rounded volr:hover:bg-slate-200 volr:disabled:opacity-50",
3347
+ children: t("deposit.walletTransfer.max")
3348
+ }
3349
+ )
3350
+ ] })
3351
+ ] }),
3352
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
3718
3353
  /* @__PURE__ */ jsxRuntime.jsx(
3719
- ModalHeader,
3354
+ Button,
3720
3355
  {
3721
- back: showBack,
3722
- onBack: showBack ? handleBack : void 0,
3723
- onClose
3356
+ onClick: executeTransfer,
3357
+ disabled: isTransferring || !amount || isWrongNetwork,
3358
+ className: "volr:w-full",
3359
+ children: isTransferring ? t("deposit.walletTransfer.transferring") : t("deposit.walletTransfer.transfer")
3724
3360
  }
3725
3361
  ),
3726
- renderContent()
3362
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
3363
+ Button,
3364
+ {
3365
+ variant: "ghost",
3366
+ onClick: () => setViewState("select-wallet"),
3367
+ className: "volr:w-full",
3368
+ children: t("common.back")
3369
+ }
3370
+ ) })
3727
3371
  ] });
3728
3372
  }
3729
- function AssetSelectView({
3730
- assets,
3731
- onSelect
3732
- }) {
3733
- const { t } = useI18n();
3734
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3735
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.selectTitle") }),
3736
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:mb-4 volr-text-secondary", children: "Supported token" }),
3737
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: assets.map((a, idx) => {
3738
- const isNative = a.token === "native";
3739
- const tokenSymbol = isNative ? "ETH" : a.token.symbol;
3740
- const tokenName = isNative ? "Ethereum" : a.token.symbol;
3741
- return /* @__PURE__ */ jsxRuntime.jsxs(
3742
- "button",
3373
+ var DepositQRStatusOverlay = ({
3374
+ status
3375
+ }) => {
3376
+ if (status !== "detected") return null;
3377
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3378
+ /* @__PURE__ */ jsxRuntime.jsx(
3379
+ "div",
3380
+ {
3381
+ className: "volr:absolute volr:inset-0 volr:rounded-2xl volr:pointer-events-none",
3382
+ style: {
3383
+ boxShadow: "0 0 0 4px rgba(16, 185, 129, 0.3), 0 0 30px rgba(16, 185, 129, 0.4)",
3384
+ animation: "volrPulseGlow 1.5s ease-out infinite"
3385
+ }
3386
+ }
3387
+ ),
3388
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:absolute volr:inset-0 volr:overflow-visible volr:pointer-events-none volr:-z-10", children: [
3389
+ /* @__PURE__ */ jsxRuntime.jsx(
3390
+ "div",
3743
3391
  {
3744
- className: cn(
3745
- "volr:w-full volr:p-4 volr:rounded-xl volr:border-2",
3746
- "volr:text-left volr:transition-all",
3747
- "volr:flex volr:items-center volr:gap-4",
3748
- "volr-border volr-hover"
3749
- ),
3750
- onClick: () => onSelect(idx),
3751
- children: [
3752
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:shrink-0", children: !isNative && a.token.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
3753
- "img",
3754
- {
3755
- alt: a.token.symbol,
3756
- src: a.token.iconUrl,
3757
- className: "volr:w-10 volr:h-10 volr:rounded-full volr:border volr-border"
3758
- }
3759
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-full volr:flex volr:items-center volr:justify-center volr:text-white volr:font-bold volr:text-sm volr-bg-tertiary", children: tokenSymbol.slice(0, 2) }) }),
3760
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
3761
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
3762
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
3763
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr:px-2 volr:py-0.5 volr:rounded-full volr:font-medium volr-bg-secondary volr-text-secondary", children: [
3764
- "Chain ",
3765
- a.chainId
3766
- ] })
3767
- ] }),
3768
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-sm volr-text-secondary", children: tokenName }),
3769
- !isNative && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:font-mono volr:truncate volr:mt-1 volr-text-muted", children: a.token.address })
3770
- ] }),
3771
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:shrink-0 volr-text-muted", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
3772
- ]
3392
+ className: "volr:absolute volr:w-48 volr:h-48 volr:rounded-full volr:opacity-0",
3393
+ style: {
3394
+ background: "radial-gradient(circle, rgba(16,185,129,0.7) 0%, rgba(16,185,129,0) 60%)",
3395
+ filter: "blur(50px)",
3396
+ top: "5%",
3397
+ left: "0%",
3398
+ animation: "volrGlowPulse 1.8s ease-out forwards"
3399
+ }
3400
+ }
3401
+ ),
3402
+ /* @__PURE__ */ jsxRuntime.jsx(
3403
+ "div",
3404
+ {
3405
+ className: "volr:absolute volr:w-44 volr:h-44 volr:rounded-full volr:opacity-0",
3406
+ style: {
3407
+ background: "radial-gradient(circle, rgba(6,182,212,0.65) 0%, rgba(6,182,212,0) 60%)",
3408
+ filter: "blur(45px)",
3409
+ bottom: "10%",
3410
+ right: "-5%",
3411
+ animation: "volrGlowPulse 2s ease-out 0.1s forwards"
3412
+ }
3413
+ }
3414
+ ),
3415
+ /* @__PURE__ */ jsxRuntime.jsx(
3416
+ "div",
3417
+ {
3418
+ className: "volr:absolute volr:w-40 volr:h-40 volr:rounded-full volr:opacity-0",
3419
+ style: {
3420
+ background: "radial-gradient(circle, rgba(20,184,166,0.6) 0%, rgba(20,184,166,0) 60%)",
3421
+ filter: "blur(40px)",
3422
+ top: "50%",
3423
+ left: "50%",
3424
+ transform: "translateX(-50%)",
3425
+ animation: "volrGlowPulse 2.2s ease-out 0.2s forwards"
3426
+ }
3427
+ }
3428
+ )
3429
+ ] }),
3430
+ /* @__PURE__ */ jsxRuntime.jsx(
3431
+ "div",
3432
+ {
3433
+ className: "volr:absolute volr:-top-3 volr:-right-3 volr:rounded-full volr:p-3 volr:bg-linear-to-br volr:from-emerald-400 volr:to-teal-500 volr:shadow-2xl volr:shadow-emerald-500/50 volr:border-4 volr:border-white volr:z-20",
3434
+ style: {
3435
+ animation: "volrBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards"
3773
3436
  },
3774
- `${a.chainId}-${idx}`
3775
- );
3776
- }) })
3777
- ] });
3778
- }
3779
- var TextLinkButton = React13__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
3780
- return /* @__PURE__ */ jsxRuntime.jsxs(
3781
- "button",
3782
- {
3783
- ref,
3784
- type: "button",
3785
- className: cn(
3786
- "volr:underline volr:transition-colors volr-text-secondary",
3787
- className
3437
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3438
+ "svg",
3439
+ {
3440
+ width: "20",
3441
+ height: "20",
3442
+ viewBox: "0 0 24 24",
3443
+ fill: "none",
3444
+ stroke: "white",
3445
+ strokeWidth: "3",
3446
+ strokeLinecap: "round",
3447
+ strokeLinejoin: "round",
3448
+ children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
3449
+ }
3450
+ )
3451
+ }
3452
+ ),
3453
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:absolute volr:inset-0 volr:pointer-events-none volr:overflow-visible", children: [
3454
+ /* @__PURE__ */ jsxRuntime.jsx(
3455
+ "div",
3456
+ {
3457
+ className: "volr:absolute volr:w-2 volr:h-2 volr:bg-emerald-400 volr:rounded-full volr:opacity-0",
3458
+ style: {
3459
+ top: "20%",
3460
+ left: "20%",
3461
+ animation: "volrParticle1 1s ease-out forwards"
3462
+ }
3463
+ }
3788
3464
  ),
3789
- ...props,
3790
- children: [
3791
- children,
3792
- showArrow && " \u2192"
3793
- ]
3794
- }
3795
- );
3796
- });
3797
- TextLinkButton.displayName = "TextLinkButton";
3798
- var OtherTokenModal = ({
3799
- open,
3800
- onOpenChange
3801
- }) => {
3802
- return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, children: [
3803
- /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
3804
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center", children: [
3805
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:mb-2", children: "Coming Soon" }),
3806
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr-text-secondary", children: "Swap and bridge recommendations will be available here soon." })
3807
- ] })
3808
- ] });
3809
- };
3810
-
3811
- // ../node_modules/viem/_esm/errors/unit.js
3812
- init_base();
3813
- var InvalidDecimalNumberError = class extends BaseError {
3814
- constructor({ value }) {
3815
- super(`Number \`${value}\` is not a valid decimal number.`, {
3816
- name: "InvalidDecimalNumberError"
3817
- });
3818
- }
3819
- };
3820
-
3821
- // ../node_modules/viem/_esm/utils/unit/parseUnits.js
3822
- function parseUnits(value, decimals) {
3823
- if (!/^(-?)([0-9]*)\.?([0-9]*)$/.test(value))
3824
- throw new InvalidDecimalNumberError({ value });
3825
- let [integer, fraction = "0"] = value.split(".");
3826
- const negative = integer.startsWith("-");
3827
- if (negative)
3828
- integer = integer.slice(1);
3829
- fraction = fraction.replace(/(0+)$/, "");
3830
- if (decimals === 0) {
3831
- if (Math.round(Number(`.${fraction}`)) === 1)
3832
- integer = `${BigInt(integer) + 1n}`;
3833
- fraction = "";
3834
- } else if (fraction.length > decimals) {
3835
- const [left, unit, right] = [
3836
- fraction.slice(0, decimals - 1),
3837
- fraction.slice(decimals - 1, decimals),
3838
- fraction.slice(decimals)
3839
- ];
3840
- const rounded = Math.round(Number(`${unit}.${right}`));
3841
- if (rounded > 9)
3842
- fraction = `${BigInt(left) + BigInt(1)}0`.padStart(left.length + 1, "0");
3843
- else
3844
- fraction = `${left}${rounded}`;
3845
- if (fraction.length > decimals) {
3846
- fraction = fraction.slice(1);
3847
- integer = `${BigInt(integer) + 1n}`;
3848
- }
3849
- fraction = fraction.slice(0, decimals);
3850
- } else {
3851
- fraction = fraction.padEnd(decimals, "0");
3852
- }
3853
- return BigInt(`${negative ? "-" : ""}${integer}${fraction}`);
3854
- }
3855
-
3856
- // ../node_modules/viem/_esm/index.js
3857
- init_abis();
3858
- init_formatUnits();
3859
- var DefaultWalletIcon2 = () => /* @__PURE__ */ jsxRuntime.jsxs(
3860
- "svg",
3861
- {
3862
- className: "volr:w-6 volr:h-6",
3863
- viewBox: "0 0 24 24",
3864
- fill: "none",
3865
- xmlns: "http://www.w3.org/2000/svg",
3866
- children: [
3867
3465
  /* @__PURE__ */ jsxRuntime.jsx(
3868
- "rect",
3466
+ "div",
3869
3467
  {
3870
- x: "2",
3871
- y: "6",
3872
- width: "20",
3873
- height: "14",
3874
- rx: "2",
3875
- stroke: "currentColor",
3876
- strokeWidth: "1.5"
3468
+ className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-cyan-400 volr:rounded-full volr:opacity-0",
3469
+ style: {
3470
+ top: "30%",
3471
+ right: "25%",
3472
+ animation: "volrParticle2 1.2s ease-out 0.1s forwards"
3473
+ }
3877
3474
  }
3878
3475
  ),
3879
3476
  /* @__PURE__ */ jsxRuntime.jsx(
3880
- "path",
3477
+ "div",
3881
3478
  {
3882
- d: "M17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5Z",
3883
- fill: "currentColor"
3479
+ className: "volr:absolute volr:w-2 volr:h-2 volr:bg-teal-400 volr:rounded-full volr:opacity-0",
3480
+ style: {
3481
+ bottom: "25%",
3482
+ left: "30%",
3483
+ animation: "volrParticle3 1.1s ease-out 0.2s forwards"
3484
+ }
3884
3485
  }
3885
3486
  ),
3886
3487
  /* @__PURE__ */ jsxRuntime.jsx(
3887
- "path",
3488
+ "div",
3888
3489
  {
3889
- d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6",
3890
- stroke: "currentColor",
3891
- strokeWidth: "1.5"
3490
+ className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-emerald-300 volr:rounded-full volr:opacity-0",
3491
+ style: {
3492
+ bottom: "30%",
3493
+ right: "20%",
3494
+ animation: "volrParticle4 1.3s ease-out 0.15s forwards"
3495
+ }
3892
3496
  }
3893
3497
  )
3894
- ]
3895
- }
3896
- );
3897
- function WalletTransferView({
3898
- chainId,
3899
- asset,
3900
- destinationAddress,
3901
- onBack,
3902
- onSuccess
3903
- }) {
3498
+ ] }),
3499
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
3500
+ @keyframes volrGlowPulse {
3501
+ 0% {
3502
+ transform: scale(0.5);
3503
+ opacity: 0;
3504
+ }
3505
+ 40% {
3506
+ opacity: 1;
3507
+ }
3508
+ 100% {
3509
+ transform: scale(1.6);
3510
+ opacity: 0;
3511
+ }
3512
+ }
3513
+ @keyframes volrBounceIn {
3514
+ 0% {
3515
+ transform: scale(0);
3516
+ opacity: 0;
3517
+ }
3518
+ 50% {
3519
+ transform: scale(1.2);
3520
+ }
3521
+ 70% {
3522
+ transform: scale(0.9);
3523
+ }
3524
+ 100% {
3525
+ transform: scale(1);
3526
+ opacity: 1;
3527
+ }
3528
+ }
3529
+ @keyframes volrPulseGlow {
3530
+ 0%, 100% {
3531
+ opacity: 0.6;
3532
+ }
3533
+ 50% {
3534
+ opacity: 1;
3535
+ }
3536
+ }
3537
+ @keyframes volrParticle1 {
3538
+ 0% {
3539
+ transform: translate(0, 0) scale(0);
3540
+ opacity: 0;
3541
+ }
3542
+ 20% {
3543
+ opacity: 1;
3544
+ }
3545
+ 100% {
3546
+ transform: translate(-20px, -30px) scale(1);
3547
+ opacity: 0;
3548
+ }
3549
+ }
3550
+ @keyframes volrParticle2 {
3551
+ 0% {
3552
+ transform: translate(0, 0) scale(0);
3553
+ opacity: 0;
3554
+ }
3555
+ 20% {
3556
+ opacity: 1;
3557
+ }
3558
+ 100% {
3559
+ transform: translate(25px, -35px) scale(1);
3560
+ opacity: 0;
3561
+ }
3562
+ }
3563
+ @keyframes volrParticle3 {
3564
+ 0% {
3565
+ transform: translate(0, 0) scale(0);
3566
+ opacity: 0;
3567
+ }
3568
+ 20% {
3569
+ opacity: 1;
3570
+ }
3571
+ 100% {
3572
+ transform: translate(-30px, 25px) scale(1);
3573
+ opacity: 0;
3574
+ }
3575
+ }
3576
+ @keyframes volrParticle4 {
3577
+ 0% {
3578
+ transform: translate(0, 0) scale(0);
3579
+ opacity: 0;
3580
+ }
3581
+ 20% {
3582
+ opacity: 1;
3583
+ }
3584
+ 100% {
3585
+ transform: translate(30px, 30px) scale(1);
3586
+ opacity: 0;
3587
+ }
3588
+ }
3589
+ ` })
3590
+ ] });
3591
+ };
3592
+ var DepositCompletedToast = ({
3593
+ onClose,
3594
+ previousBalance,
3595
+ newBalance,
3596
+ delta,
3597
+ decimals,
3598
+ symbol
3599
+ }) => {
3600
+ const { t } = useI18n();
3601
+ const [expanded, setExpanded] = React13.useState(false);
3602
+ const formatAmount = (amount) => {
3603
+ const divisor = BigInt(10 ** decimals);
3604
+ const whole = amount / divisor;
3605
+ const fraction = amount % divisor;
3606
+ const fractionStr = fraction.toString().padStart(decimals, "0").slice(0, 4);
3607
+ const trimmedFraction = fractionStr.replace(/0+$/, "");
3608
+ return trimmedFraction ? `${whole}.${trimmedFraction}` : `${whole}`;
3609
+ };
3610
+ const formattedDelta = formatAmount(delta);
3611
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3612
+ /* @__PURE__ */ jsxRuntime.jsxs(
3613
+ "div",
3614
+ {
3615
+ className: cn(
3616
+ // Position: anchored to bottom, full width
3617
+ "volr:absolute volr:bottom-0 volr:left-0 volr:right-0 volr:z-50",
3618
+ // Appearance: floating card with rounded top
3619
+ "volr:bg-white volr:rounded-t-2xl",
3620
+ // Animation
3621
+ "volr:transition-all volr:duration-300 volr:ease-out"
3622
+ ),
3623
+ style: {
3624
+ animation: "volrSlideUp 0.3s ease-out",
3625
+ // Strong elevation shadow (upward direction)
3626
+ boxShadow: "0 -8px 30px rgba(0, 0, 0, 0.15), 0 -2px 10px rgba(0, 0, 0, 0.08)"
3627
+ },
3628
+ children: [
3629
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-1 volr:bg-linear-to-r volr:from-emerald-400 volr:to-teal-500 volr:rounded-t-2xl" }),
3630
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:p-4", children: [
3631
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-2 volr:mb-2", children: [
3632
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3633
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:shrink-0 volr:w-5 volr:h-5 volr:rounded-full volr:bg-emerald-500 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
3634
+ "svg",
3635
+ {
3636
+ width: "12",
3637
+ height: "12",
3638
+ viewBox: "0 0 24 24",
3639
+ fill: "none",
3640
+ stroke: "white",
3641
+ strokeWidth: "3",
3642
+ strokeLinecap: "round",
3643
+ strokeLinejoin: "round",
3644
+ children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
3645
+ }
3646
+ ) }),
3647
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-semibold volr:text-slate-900", children: t("deposit.completed") })
3648
+ ] }),
3649
+ /* @__PURE__ */ jsxRuntime.jsx(
3650
+ "button",
3651
+ {
3652
+ onClick: onClose,
3653
+ className: "volr:shrink-0 volr:w-6 volr:h-6 volr:flex volr:items-center volr:justify-center volr:rounded-full volr:transition-colors volr:bg-slate-100 volr:text-slate-500 volr:hover:bg-slate-200",
3654
+ "aria-label": "Close",
3655
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
3656
+ "svg",
3657
+ {
3658
+ width: "14",
3659
+ height: "14",
3660
+ viewBox: "0 0 24 24",
3661
+ fill: "none",
3662
+ stroke: "currentColor",
3663
+ strokeWidth: "2.5",
3664
+ children: [
3665
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
3666
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
3667
+ ]
3668
+ }
3669
+ )
3670
+ }
3671
+ )
3672
+ ] }),
3673
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-700 volr:mb-3", children: t("deposit.completedAmount", { amount: formattedDelta, symbol }) }),
3674
+ expanded && /* @__PURE__ */ jsxRuntime.jsxs(
3675
+ "div",
3676
+ {
3677
+ className: "volr:space-y-2 volr:mb-3 volr:p-3 volr:rounded-lg volr:bg-slate-50 volr:border volr:border-slate-200",
3678
+ style: { animation: "volrFadeIn 0.2s ease-out" },
3679
+ children: [
3680
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
3681
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-500", children: t("deposit.amount") }),
3682
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:font-mono volr:text-emerald-600 volr:font-semibold", children: [
3683
+ "+",
3684
+ formattedDelta,
3685
+ " ",
3686
+ symbol
3687
+ ] })
3688
+ ] }),
3689
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
3690
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-500", children: t("deposit.previousBalance") }),
3691
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:font-mono volr:text-slate-500", children: [
3692
+ formatAmount(previousBalance),
3693
+ " ",
3694
+ symbol
3695
+ ] })
3696
+ ] }),
3697
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs volr:pt-2 volr:border-t volr:border-slate-200", children: [
3698
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-500", children: t("deposit.newBalance") }),
3699
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:font-mono volr:font-semibold volr:text-slate-900", children: [
3700
+ formatAmount(newBalance),
3701
+ " ",
3702
+ symbol
3703
+ ] })
3704
+ ] })
3705
+ ]
3706
+ }
3707
+ ),
3708
+ /* @__PURE__ */ jsxRuntime.jsx(
3709
+ "button",
3710
+ {
3711
+ onClick: () => setExpanded(!expanded),
3712
+ className: "volr:w-full volr:py-2.5 volr:text-xs volr:font-medium volr:rounded-lg volr:transition-colors volr:bg-slate-100 volr:text-slate-600 volr:border volr:border-slate-200 volr:hover:bg-slate-200",
3713
+ children: expanded ? t("deposit.seeLess") : t("deposit.seeMore")
3714
+ }
3715
+ )
3716
+ ] })
3717
+ ]
3718
+ }
3719
+ ),
3720
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
3721
+ @keyframes volrSlideUp {
3722
+ from {
3723
+ transform: translateY(20px);
3724
+ opacity: 0;
3725
+ }
3726
+ to {
3727
+ transform: translateY(0);
3728
+ opacity: 1;
3729
+ }
3730
+ }
3731
+ @keyframes volrFadeIn {
3732
+ from {
3733
+ opacity: 0;
3734
+ }
3735
+ to {
3736
+ opacity: 1;
3737
+ }
3738
+ }
3739
+ ` })
3740
+ ] });
3741
+ };
3742
+ var DepositSkeleton = () => {
3743
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:animate-pulse", children: [
3744
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
3745
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-7 volr:w-24 volr:rounded volr:mb-2 volr-bg-tertiary" }),
3746
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-8 volr:w-36 volr:rounded-lg volr-bg-secondary" })
3747
+ ] }),
3748
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:rounded-xl volr:p-3 volr:border volr-bg-secondary volr-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-[200px] volr:h-[200px] volr:rounded-lg volr-bg-tertiary" }) }) }),
3749
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
3750
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr-bg-tertiary" }),
3751
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-32 volr:rounded volr-bg-tertiary" })
3752
+ ] }),
3753
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:border volr:rounded-lg volr:p-3 volr-bg-secondary volr-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-48 volr:rounded volr-bg-tertiary" }) }) }) }),
3754
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:pt-3 volr:border-t volr:mt-3 volr-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-44 volr:rounded volr:mx-auto volr-bg-secondary" }) })
3755
+ ] });
3756
+ };
3757
+ function DepositQRView(props) {
3904
3758
  const { t } = useI18n();
3905
3759
  const { config } = react.useVolrContext();
3906
3760
  const { client } = react.useInternalAuth();
3907
- const { isDetecting, getWalletsForDisplay, hasWallet } = react.useEIP6963();
3908
- const [viewState, setViewState] = React13.useState("select-wallet");
3909
- const [selectedWallet, setSelectedWallet] = React13.useState(null);
3910
- const [connectedAddress, setConnectedAddress] = React13.useState(null);
3911
- const [balance, setBalance] = React13.useState(null);
3912
- const [amount, setAmount] = React13.useState("");
3913
- const [isConnecting, setIsConnecting] = React13.useState(false);
3914
- const [isTransferring, setIsTransferring] = React13.useState(false);
3915
- const [error, setError] = React13.useState(null);
3916
3761
  const [chainName, setChainName] = React13.useState(null);
3917
- const [currentChainId, setCurrentChainId] = React13.useState(null);
3918
- const tokenSymbol = asset === "native" ? "ETH" : asset.symbol;
3919
- const decimals = asset === "native" ? 18 : asset.decimals;
3762
+ const [showOtherTokenModal, setShowOtherTokenModal] = React13.useState(false);
3763
+ const [showToast, setShowToast] = React13.useState(false);
3764
+ const [toastData, setToastData] = React13.useState(null);
3765
+ const [viewMode, setViewMode] = React13.useState("qr");
3766
+ const eip681 = `ethereum:${props.address}`;
3767
+ const status = react.useDepositListener({
3768
+ chainId: props.chainId,
3769
+ asset: props.asset === "native" ? { kind: "native" } : {
3770
+ kind: "erc20",
3771
+ token: {
3772
+ address: props.asset.address,
3773
+ decimals: props.asset.decimals
3774
+ }
3775
+ },
3776
+ address: props.address
3777
+ });
3778
+ React13.useEffect(() => {
3779
+ if (status.state === "detected") {
3780
+ setToastData({
3781
+ previousBalance: status.previousBalance,
3782
+ newBalance: status.newBalance,
3783
+ delta: status.delta
3784
+ });
3785
+ setShowToast(true);
3786
+ }
3787
+ }, [status]);
3920
3788
  const getNetworkInfo = React13.useCallback(
3921
3789
  react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
3922
3790
  [client, config.rpcOverrides]
@@ -3925,930 +3793,1124 @@ function WalletTransferView({
3925
3793
  let cancelled = false;
3926
3794
  const loadChainName = async () => {
3927
3795
  try {
3928
- const info = await getNetworkInfo(chainId, false);
3929
- if (!cancelled) setChainName(info.name);
3930
- } catch {
3931
- if (!cancelled) setChainName(`Chain ${chainId}`);
3796
+ const info = await getNetworkInfo(props.chainId, false);
3797
+ if (!cancelled) {
3798
+ setChainName(info.name);
3799
+ }
3800
+ } catch (error) {
3801
+ if (!cancelled) {
3802
+ setChainName(`Chain ${props.chainId}`);
3803
+ }
3932
3804
  }
3933
3805
  };
3934
3806
  loadChainName();
3935
3807
  return () => {
3936
3808
  cancelled = true;
3937
3809
  };
3938
- }, [getNetworkInfo, chainId]);
3939
- const connectWallet = React13.useCallback(async (wallet) => {
3940
- setIsConnecting(true);
3941
- setError(null);
3942
- try {
3943
- const provider = wallet.provider;
3944
- const accounts = await provider.request({ method: "eth_requestAccounts" });
3945
- if (!accounts || accounts.length === 0) {
3946
- throw new Error("No accounts found");
3947
- }
3948
- const address = accounts[0];
3949
- setConnectedAddress(address);
3950
- setSelectedWallet(wallet);
3951
- const chainIdHex = await provider.request({ method: "eth_chainId" });
3952
- const currentChain = parseInt(chainIdHex, 16);
3953
- setCurrentChainId(currentChain);
3954
- await fetchBalance(provider, address, currentChain);
3955
- setViewState("transfer");
3956
- } catch (err) {
3957
- console.error("Failed to connect wallet:", err);
3958
- setError(err instanceof Error ? err.message : "Connection failed");
3959
- } finally {
3960
- setIsConnecting(false);
3961
- }
3962
- }, [chainId, asset]);
3963
- const fetchBalance = React13.useCallback(async (provider, address, currentChain) => {
3964
- try {
3965
- if (currentChain !== chainId) {
3966
- setBalance(null);
3967
- return;
3968
- }
3969
- if (asset === "native") {
3970
- const balanceHex = await provider.request({
3971
- method: "eth_getBalance",
3972
- params: [address, "latest"]
3973
- });
3974
- setBalance(BigInt(balanceHex));
3975
- } else {
3976
- const data = `0x70a08231000000000000000000000000${address.slice(2)}`;
3977
- const result = await provider.request({
3978
- method: "eth_call",
3979
- params: [{ to: asset.address, data }, "latest"]
3980
- });
3981
- setBalance(BigInt(result));
3982
- }
3983
- } catch (err) {
3984
- console.error("Failed to fetch balance:", err);
3985
- setBalance(BigInt(0));
3986
- }
3987
- }, [chainId, asset]);
3988
- const switchNetwork = React13.useCallback(async () => {
3989
- if (!selectedWallet?.provider) return;
3990
- try {
3991
- await selectedWallet.provider.request({
3992
- method: "wallet_switchEthereumChain",
3993
- params: [{ chainId: `0x${chainId.toString(16)}` }]
3994
- });
3995
- const chainIdHex = await selectedWallet.provider.request({ method: "eth_chainId" });
3996
- const currentChain = parseInt(chainIdHex, 16);
3997
- setCurrentChainId(currentChain);
3998
- if (connectedAddress) {
3999
- await fetchBalance(selectedWallet.provider, connectedAddress, currentChain);
4000
- }
4001
- } catch (err) {
4002
- console.error("Failed to switch network:", err);
4003
- setError(err instanceof Error ? err.message : "Failed to switch network");
4004
- }
4005
- }, [selectedWallet, chainId, connectedAddress, fetchBalance]);
4006
- const executeTransfer = React13.useCallback(async () => {
4007
- if (!selectedWallet?.provider || !connectedAddress || !amount) return;
4008
- setIsTransferring(true);
4009
- setError(null);
4010
- try {
4011
- const amountWei = parseUnits(amount, decimals);
4012
- if (balance !== null && amountWei > balance) {
4013
- setError(t("deposit.walletTransfer.insufficientBalance"));
4014
- setIsTransferring(false);
4015
- return;
4016
- }
4017
- let txHash;
4018
- if (asset === "native") {
4019
- txHash = await selectedWallet.provider.request({
4020
- method: "eth_sendTransaction",
4021
- params: [{
4022
- from: connectedAddress,
4023
- to: destinationAddress,
4024
- value: `0x${amountWei.toString(16)}`
4025
- }]
4026
- });
4027
- } else {
4028
- const paddedTo = destinationAddress.slice(2).padStart(64, "0");
4029
- const paddedAmount = amountWei.toString(16).padStart(64, "0");
4030
- const data = `0xa9059cbb${paddedTo}${paddedAmount}`;
4031
- txHash = await selectedWallet.provider.request({
4032
- method: "eth_sendTransaction",
4033
- params: [{
4034
- from: connectedAddress,
4035
- to: asset.address,
4036
- data
4037
- }]
4038
- });
4039
- }
4040
- console.log("Transfer tx hash:", txHash);
4041
- onSuccess?.();
4042
- } catch (err) {
4043
- console.error("Transfer failed:", err);
4044
- setError(err instanceof Error ? err.message : "Transfer failed");
4045
- } finally {
4046
- setIsTransferring(false);
4047
- }
4048
- }, [selectedWallet, connectedAddress, amount, decimals, balance, asset, destinationAddress, onSuccess, t]);
4049
- const setMaxAmount = React13.useCallback(() => {
4050
- if (balance !== null) {
4051
- const formatted = formatUnits(balance, decimals);
4052
- setAmount(formatted);
4053
- }
4054
- }, [balance, decimals]);
4055
- const wallets = getWalletsForDisplay();
4056
- const isWrongNetwork = currentChainId !== null && currentChainId !== chainId;
4057
- const formattedBalance = balance !== null ? formatUnits(balance, decimals) : null;
4058
- if (viewState === "select-wallet") {
4059
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4060
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
4061
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
4062
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.selectWallet") })
4063
- ] }),
4064
- isDetecting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:py-8", children: [
4065
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-spin volr:w-6 volr:h-6 volr:border-2 volr:border-slate-300 volr:border-t-slate-600 volr:rounded-full volr:mx-auto" }),
4066
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-3", children: t("common.loading") })
4067
- ] }),
4068
- !isDetecting && !hasWallet && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.noWallets") }) }),
4069
- !isDetecting && wallets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-2", children: wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
4070
- "button",
4071
- {
4072
- type: "button",
4073
- onClick: () => connectWallet(wallet),
4074
- disabled: isConnecting,
4075
- className: "volr:w-full volr:flex volr:items-center volr:gap-3 volr:p-3 volr:border volr:border-slate-200 volr:rounded-xl volr:hover:bg-slate-50 volr:transition-colors volr:disabled:opacity-50",
4076
- children: [
4077
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-10 volr:h-10 volr:rounded-lg volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden volr:flex-shrink-0", children: wallet.icon ? /* @__PURE__ */ jsxRuntime.jsx(
4078
- "img",
4079
- {
4080
- src: wallet.icon,
4081
- alt: wallet.name,
4082
- className: "volr:w-7 volr:h-7"
4083
- }
4084
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-slate-400", children: /* @__PURE__ */ jsxRuntime.jsx(DefaultWalletIcon2, {}) }) }),
4085
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:flex-1 volr:text-left volr:font-medium volr:text-slate-900", children: wallet.name }),
4086
- /* @__PURE__ */ jsxRuntime.jsx(
4087
- "svg",
4088
- {
4089
- className: "volr:w-5 volr:h-5 volr:text-slate-400",
4090
- fill: "none",
4091
- viewBox: "0 0 24 24",
4092
- stroke: "currentColor",
4093
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
4094
- }
4095
- )
4096
- ]
4097
- },
4098
- wallet.id
4099
- )) }),
4100
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
4101
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-6 volr:pt-4 volr:border-t volr:border-slate-200", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", onClick: onBack, className: "volr:w-full", children: t("common.back") }) })
4102
- ] });
4103
- }
4104
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4105
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
4106
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
4107
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4108
- selectedWallet?.icon && /* @__PURE__ */ jsxRuntime.jsx("img", { src: selectedWallet.icon, alt: "", className: "volr:w-5 volr:h-5 volr:rounded" }),
4109
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-sm volr:text-slate-500", children: [
4110
- connectedAddress?.slice(0, 6),
4111
- "...",
4112
- connectedAddress?.slice(-4)
4113
- ] })
4114
- ] })
4115
- ] }),
4116
- isWrongNetwork && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4 volr:p-3 volr:bg-amber-50 volr:border volr:border-amber-200 volr:rounded-lg", children: [
4117
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-amber-700 volr:mb-2", children: t("deposit.walletTransfer.wrongNetwork", { network: chainName || `Chain ${chainId}` }) }),
3810
+ }, [getNetworkInfo, props.chainId]);
3811
+ const tokenSymbol = props.asset === "native" ? "ETH" : props.asset.symbol;
3812
+ const displayChainName = chainName || `Chain ${props.chainId}`;
3813
+ const decimals = props.asset === "native" ? 18 : props.asset.decimals;
3814
+ if (viewMode === "wallet-transfer") {
3815
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4118
3816
  /* @__PURE__ */ jsxRuntime.jsx(
4119
- Button,
3817
+ WalletTransferView,
4120
3818
  {
4121
- variant: "secondary",
4122
- size: "sm",
4123
- onClick: switchNetwork,
4124
- className: "volr:w-full",
4125
- children: t("deposit.walletTransfer.switchNetwork")
3819
+ chainId: props.chainId,
3820
+ asset: props.asset,
3821
+ destinationAddress: props.address,
3822
+ onBack: () => setViewMode("qr"),
3823
+ onSuccess: () => {
3824
+ setViewMode("qr");
3825
+ }
3826
+ }
3827
+ ),
3828
+ showToast && toastData && /* @__PURE__ */ jsxRuntime.jsx(
3829
+ DepositCompletedToast,
3830
+ {
3831
+ onClose: () => {
3832
+ setShowToast(false);
3833
+ setToastData(null);
3834
+ },
3835
+ previousBalance: toastData.previousBalance,
3836
+ newBalance: toastData.newBalance,
3837
+ delta: toastData.delta,
3838
+ decimals,
3839
+ symbol: tokenSymbol
4126
3840
  }
4127
3841
  )
4128
- ] }),
4129
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-4 volr:p-4 volr:bg-slate-50 volr:rounded-xl volr:border volr:border-slate-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between", children: [
4130
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4131
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
4132
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:px-2 volr:py-0.5 volr:rounded-full volr:bg-slate-200 volr:text-slate-600", children: chainName || `Chain ${chainId}` })
4133
- ] }),
4134
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-right", children: [
4135
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-500", children: t("deposit.walletTransfer.balance") }),
4136
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-mono volr:font-medium", children: isWrongNetwork ? "-" : formattedBalance ? `${Number(formattedBalance).toFixed(4)}` : "..." })
3842
+ ] });
3843
+ }
3844
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3845
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
3846
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-2", children: t("deposit.qrTitle") }),
3847
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:inline-flex volr:items-center volr:gap-2 volr:px-3 volr:py-1.5 volr:rounded-lg volr-bg-secondary", children: [
3848
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium", children: tokenSymbol }),
3849
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr-text-muted", children: "\u2022" }),
3850
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr-text-secondary", children: displayChainName })
4137
3851
  ] })
3852
+ ] }),
3853
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3854
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:rounded-xl volr:p-4 volr:shadow-sm volr:border volr:z-10 volr:bg-white volr-border", children: /* @__PURE__ */ jsxRuntime.jsx(
3855
+ "img",
3856
+ {
3857
+ alt: "Deposit QR",
3858
+ width: 200,
3859
+ height: 200,
3860
+ src: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
3861
+ eip681
3862
+ )}`,
3863
+ className: "volr:rounded-md volr:relative volr:z-10"
3864
+ }
3865
+ ) }),
3866
+ /* @__PURE__ */ jsxRuntime.jsx(DepositQRStatusOverlay, { status: status.state })
4138
3867
  ] }) }),
4139
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
4140
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "volr:block volr:text-sm volr:font-medium volr:text-slate-700 volr:mb-2", children: t("deposit.walletTransfer.amount") }),
4141
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4142
- /* @__PURE__ */ jsxRuntime.jsx(
4143
- "input",
4144
- {
4145
- type: "text",
4146
- inputMode: "decimal",
4147
- value: amount,
4148
- onChange: (e) => setAmount(e.target.value),
4149
- placeholder: t("deposit.walletTransfer.amountPlaceholder"),
4150
- disabled: isWrongNetwork,
4151
- className: "volr:w-full volr:px-4 volr:py-3 volr:pr-16 volr:border volr:border-slate-300 volr:rounded-xl volr:text-base volr:font-mono volr:focus:outline-none volr:focus:ring-2 volr:focus:ring-slate-300 volr:disabled:bg-slate-100 volr:disabled:text-slate-400"
4152
- }
4153
- ),
3868
+ (status.state === "listening" || status.state === "idle") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
3869
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr:animate-pulse volr-text-secondary", style: { backgroundColor: "currentColor" } }),
3870
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr-text-secondary", children: t("deposit.listening") })
3871
+ ] }),
3872
+ status.state === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-xs volr:text-center volr:mb-3 volr-error", children: [
3873
+ "Error: ",
3874
+ status.message
3875
+ ] }),
3876
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-3", children: [
3877
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:border volr:rounded-lg volr:p-3 volr:transition-all volr-bg-secondary volr-border volr-hover", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-3", children: [
3878
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:font-mono volr:text-xs volr:font-medium volr:flex-1 volr:text-center", children: `${props.address.slice(0, 10)}...${props.address.slice(-8)}` }),
4154
3879
  /* @__PURE__ */ jsxRuntime.jsx(
4155
- "button",
3880
+ CopyButton,
4156
3881
  {
4157
- type: "button",
4158
- onClick: setMaxAmount,
4159
- disabled: isWrongNetwork || balance === null,
4160
- className: "volr:absolute volr:right-3 volr:top-1/2 volr:-translate-y-1/2 volr:px-2 volr:py-1 volr:text-xs volr:font-semibold volr:text-slate-600 volr:bg-slate-100 volr:rounded volr:hover:bg-slate-200 volr:disabled:opacity-50",
4161
- children: t("deposit.walletTransfer.max")
3882
+ text: props.address,
3883
+ className: "volr:shrink-0 volr:absolute volr:right-2"
4162
3884
  }
4163
3885
  )
4164
- ] })
3886
+ ] }) }) }),
3887
+ status.state === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-center volr:mb-4 volr-error", children: status.message })
4165
3888
  ] }),
4166
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mb-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
3889
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
3890
+ "button",
3891
+ {
3892
+ type: "button",
3893
+ onClick: () => setViewMode("wallet-transfer"),
3894
+ className: "volr:w-full volr:flex volr:items-center volr:justify-center volr:gap-2 volr:py-3 volr:px-4 volr:border volr:border-slate-200 volr:rounded-xl volr:text-sm volr:font-medium volr:text-slate-700 volr:bg-white volr:hover:bg-slate-50 volr:transition-colors",
3895
+ children: [
3896
+ /* @__PURE__ */ jsxRuntime.jsxs(
3897
+ "svg",
3898
+ {
3899
+ className: "volr:w-5 volr:h-5",
3900
+ viewBox: "0 0 24 24",
3901
+ fill: "none",
3902
+ stroke: "currentColor",
3903
+ strokeWidth: "1.5",
3904
+ children: [
3905
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "6", width: "20", height: "14", rx: "2" }),
3906
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5Z", fill: "currentColor" }),
3907
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6" })
3908
+ ]
3909
+ }
3910
+ ),
3911
+ t("deposit.useWallet")
3912
+ ]
3913
+ }
3914
+ ) }),
3915
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:pt-3 volr:mt-3 volr:border-t volr-border", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr-text-secondary", children: [
3916
+ t("deposit.noToken"),
3917
+ " ",
3918
+ /* @__PURE__ */ jsxRuntime.jsx(
3919
+ TextLinkButton,
3920
+ {
3921
+ onClick: () => setShowOtherTokenModal(true),
3922
+ showArrow: true,
3923
+ children: t("deposit.getOtherToken")
3924
+ }
3925
+ )
3926
+ ] }) }),
4167
3927
  /* @__PURE__ */ jsxRuntime.jsx(
4168
- Button,
3928
+ OtherTokenModal,
3929
+ {
3930
+ open: showOtherTokenModal,
3931
+ onOpenChange: setShowOtherTokenModal
3932
+ }
3933
+ ),
3934
+ showToast && toastData && /* @__PURE__ */ jsxRuntime.jsx(
3935
+ DepositCompletedToast,
3936
+ {
3937
+ onClose: () => {
3938
+ setShowToast(false);
3939
+ setToastData(null);
3940
+ },
3941
+ previousBalance: toastData.previousBalance,
3942
+ newBalance: toastData.newBalance,
3943
+ delta: toastData.delta,
3944
+ decimals,
3945
+ symbol: tokenSymbol
3946
+ }
3947
+ )
3948
+ ] });
3949
+ }
3950
+ function DepositModalBody({
3951
+ isLoading,
3952
+ error,
3953
+ depositAssets,
3954
+ evmAddress,
3955
+ selectedIdx,
3956
+ onSelectIdx
3957
+ }) {
3958
+ if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {});
3959
+ if (error) {
3960
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3961
+ /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
3962
+ /* @__PURE__ */ jsxRuntime.jsx(
3963
+ "div",
3964
+ {
3965
+ className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
3966
+ style: { opacity: 0.9 },
3967
+ children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-error", children: error })
3968
+ }
3969
+ )
3970
+ ] });
3971
+ }
3972
+ if (depositAssets.length === 0) {
3973
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3974
+ /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
3975
+ /* @__PURE__ */ jsxRuntime.jsx(
3976
+ "div",
3977
+ {
3978
+ className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
3979
+ style: { opacity: 0.9 },
3980
+ children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-text-secondary", children: "No payment token configured. Please contact the app developer." })
3981
+ }
3982
+ )
3983
+ ] });
3984
+ }
3985
+ if (!evmAddress) {
3986
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
3987
+ /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
3988
+ /* @__PURE__ */ jsxRuntime.jsx(
3989
+ "div",
3990
+ {
3991
+ className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
3992
+ style: { opacity: 0.9 },
3993
+ children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-text-secondary", children: "Wallet address is not ready. Please finish wallet setup first." })
3994
+ }
3995
+ )
3996
+ ] });
3997
+ }
3998
+ if (depositAssets.length === 1) {
3999
+ return /* @__PURE__ */ jsxRuntime.jsx(
4000
+ DepositQRView,
4001
+ {
4002
+ chainId: depositAssets[0].chainId,
4003
+ asset: depositAssets[0].token,
4004
+ address: evmAddress,
4005
+ onBack: void 0
4006
+ }
4007
+ );
4008
+ }
4009
+ if (selectedIdx === -1) {
4010
+ return /* @__PURE__ */ jsxRuntime.jsx(
4011
+ AssetSelectView,
4012
+ {
4013
+ assets: depositAssets,
4014
+ onSelect: (idx) => onSelectIdx(idx)
4015
+ }
4016
+ );
4017
+ }
4018
+ const selected = depositAssets[selectedIdx];
4019
+ return /* @__PURE__ */ jsxRuntime.jsx(
4020
+ DepositQRView,
4021
+ {
4022
+ chainId: selected.chainId,
4023
+ asset: selected.token,
4024
+ address: evmAddress,
4025
+ onBack: () => onSelectIdx(-1)
4026
+ }
4027
+ );
4028
+ }
4029
+ function ChevronRightIcon({ className }) {
4030
+ return /* @__PURE__ */ jsxRuntime.jsx(
4031
+ "svg",
4032
+ {
4033
+ xmlns: "http://www.w3.org/2000/svg",
4034
+ viewBox: "0 0 20 20",
4035
+ fill: "currentColor",
4036
+ className,
4037
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4038
+ "path",
4039
+ {
4040
+ fillRule: "evenodd",
4041
+ d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
4042
+ clipRule: "evenodd"
4043
+ }
4044
+ )
4045
+ }
4046
+ );
4047
+ }
4048
+ function WalletIcon2({ className }) {
4049
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" }) });
4050
+ }
4051
+ function ArrowDownIcon({ className }) {
4052
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" }) });
4053
+ }
4054
+ function ArrowUpIcon({ className }) {
4055
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" }) });
4056
+ }
4057
+ function ClockIcon({ className }) {
4058
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
4059
+ }
4060
+ function UserIcon({ className }) {
4061
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) });
4062
+ }
4063
+ function MenuItem({ icon, label, description, onClick, isFirst, isLast }) {
4064
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4065
+ "button",
4066
+ {
4067
+ type: "button",
4068
+ onClick,
4069
+ className: `volr:w-full volr:flex volr:items-center volr:gap-3 volr:py-2.5 volr:px-3 volr:bg-white hover:volr:bg-slate-50 volr:transition-colors volr:text-left volr:border-x volr:border-slate-200 ${isFirst ? "volr:border-t volr:rounded-t-xl" : ""} ${isLast ? "volr:border-b volr:rounded-b-xl" : "volr:border-b"}`,
4070
+ children: [
4071
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:shrink-0", children: icon }),
4072
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
4073
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: label }),
4074
+ description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400", children: description })
4075
+ ] }),
4076
+ /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
4077
+ ]
4078
+ }
4079
+ );
4080
+ }
4081
+ function AccountMainView({
4082
+ totalUsd,
4083
+ balances,
4084
+ isLoading,
4085
+ paymentEnabled,
4086
+ onNavigate,
4087
+ onLogout,
4088
+ isLoggingOut
4089
+ }) {
4090
+ const { t } = useI18n();
4091
+ const formattedUsd = isLoading ? "\u2014" : totalUsd.toLocaleString("en-US", {
4092
+ style: "currency",
4093
+ currency: "USD",
4094
+ minimumFractionDigits: 2,
4095
+ maximumFractionDigits: 2
4096
+ });
4097
+ const tokensWithBalance = balances.filter((b) => b.balanceRaw > 0n).length;
4098
+ const assetsDescription = isLoading ? void 0 : tokensWithBalance > 0 ? `${tokensWithBalance} ${tokensWithBalance === 1 ? "token" : "tokens"}` : void 0;
4099
+ const menuItems = [
4100
+ {
4101
+ key: "assets",
4102
+ icon: /* @__PURE__ */ jsxRuntime.jsx(WalletIcon2, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4103
+ label: t("account.menu.assets"),
4104
+ description: assetsDescription,
4105
+ view: "assets"
4106
+ },
4107
+ {
4108
+ key: "deposit",
4109
+ icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowDownIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4110
+ label: t("account.menu.deposit"),
4111
+ view: "deposit"
4112
+ },
4113
+ {
4114
+ key: "withdraw",
4115
+ icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4116
+ label: t("account.menu.withdraw"),
4117
+ view: "withdraw"
4118
+ },
4119
+ ...paymentEnabled ? [
4169
4120
  {
4170
- onClick: executeTransfer,
4171
- disabled: isTransferring || !amount || isWrongNetwork,
4172
- className: "volr:w-full",
4173
- children: isTransferring ? t("deposit.walletTransfer.transferring") : t("deposit.walletTransfer.transfer")
4121
+ key: "payments",
4122
+ icon: /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4123
+ label: t("account.menu.payments"),
4124
+ view: "payments"
4174
4125
  }
4175
- ),
4176
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
4177
- Button,
4126
+ ] : [],
4127
+ {
4128
+ key: "account",
4129
+ icon: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4130
+ label: t("account.menu.account"),
4131
+ view: "account"
4132
+ }
4133
+ ];
4134
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4135
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:rounded-xl volr:bg-gradient-to-br volr:from-slate-50 volr:to-slate-100 volr:p-4 volr:mb-4", children: [
4136
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-500 volr:mb-0.5", children: t("account.totalBalance") }),
4137
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-8 volr:w-32 volr:bg-slate-200 volr:rounded" }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900", children: formattedUsd })
4138
+ ] }),
4139
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: menuItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
4140
+ MenuItem,
4178
4141
  {
4179
- variant: "ghost",
4180
- onClick: () => setViewState("select-wallet"),
4181
- className: "volr:w-full",
4182
- children: t("common.back")
4142
+ icon: item.icon,
4143
+ label: item.label,
4144
+ description: item.description,
4145
+ onClick: () => onNavigate(item.view),
4146
+ isFirst: index === 0,
4147
+ isLast: index === menuItems.length - 1
4148
+ },
4149
+ item.key
4150
+ )) }),
4151
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-4 volr:pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
4152
+ "button",
4153
+ {
4154
+ type: "button",
4155
+ onClick: onLogout,
4156
+ disabled: isLoggingOut,
4157
+ className: "volr:w-full volr:py-2 volr:text-sm volr:text-slate-400 volr:text-center hover:volr:text-slate-600 volr:transition-colors disabled:volr:opacity-50",
4158
+ children: isLoggingOut ? t("common.loading") : t("account.logout")
4183
4159
  }
4184
4160
  ) })
4185
4161
  ] });
4186
4162
  }
4187
- var DepositQRStatusOverlay = ({
4188
- status
4189
- }) => {
4190
- if (status !== "detected") return null;
4191
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4192
- /* @__PURE__ */ jsxRuntime.jsx(
4193
- "div",
4194
- {
4195
- className: "volr:absolute volr:inset-0 volr:rounded-2xl volr:pointer-events-none",
4196
- style: {
4197
- boxShadow: "0 0 0 4px rgba(16, 185, 129, 0.3), 0 0 30px rgba(16, 185, 129, 0.4)",
4198
- animation: "volrPulseGlow 1.5s ease-out infinite"
4199
- }
4200
- }
4201
- ),
4202
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:absolute volr:inset-0 volr:overflow-visible volr:pointer-events-none volr:-z-10", children: [
4203
- /* @__PURE__ */ jsxRuntime.jsx(
4204
- "div",
4205
- {
4206
- className: "volr:absolute volr:w-48 volr:h-48 volr:rounded-full volr:opacity-0",
4207
- style: {
4208
- background: "radial-gradient(circle, rgba(16,185,129,0.7) 0%, rgba(16,185,129,0) 60%)",
4209
- filter: "blur(50px)",
4210
- top: "5%",
4211
- left: "0%",
4212
- animation: "volrGlowPulse 1.8s ease-out forwards"
4213
- }
4214
- }
4215
- ),
4216
- /* @__PURE__ */ jsxRuntime.jsx(
4217
- "div",
4163
+ function TokenRow({ token }) {
4164
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
4165
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
4166
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden volr:shrink-0", children: token.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
4167
+ "img",
4218
4168
  {
4219
- className: "volr:absolute volr:w-44 volr:h-44 volr:rounded-full volr:opacity-0",
4220
- style: {
4221
- background: "radial-gradient(circle, rgba(6,182,212,0.65) 0%, rgba(6,182,212,0) 60%)",
4222
- filter: "blur(45px)",
4223
- bottom: "10%",
4224
- right: "-5%",
4225
- animation: "volrGlowPulse 2s ease-out 0.1s forwards"
4226
- }
4169
+ src: token.iconUrl,
4170
+ alt: token.symbol,
4171
+ className: "volr:w-full volr:h-full volr:object-cover"
4227
4172
  }
4228
- ),
4173
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
4174
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4175
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol }),
4176
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4177
+ "Chain ",
4178
+ token.chainId
4179
+ ] })
4180
+ ] })
4181
+ ] }),
4182
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-right", children: token.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" }) }) : token.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-red-500", children: "Error" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4183
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.balance }),
4184
+ token.balanceUsd !== void 0 && token.balanceUsd > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4185
+ "$",
4186
+ token.balanceUsd.toFixed(2)
4187
+ ] })
4188
+ ] }) })
4189
+ ] });
4190
+ }
4191
+ function BalanceDetailView({
4192
+ balances,
4193
+ isLoading
4194
+ }) {
4195
+ const { t } = useI18n();
4196
+ if (isLoading && balances.length === 0) {
4197
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
4198
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-200" }),
4199
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1", children: [
4200
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded volr:mb-1" }),
4201
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-12 volr:bg-slate-100 volr:rounded" })
4202
+ ] }),
4203
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
4204
+ ] }, i)) }) });
4205
+ }
4206
+ if (balances.length === 0) {
4207
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.noAssets") }) });
4208
+ }
4209
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4210
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.assets") }),
4211
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: balances.map((token) => /* @__PURE__ */ jsxRuntime.jsx(TokenRow, { token }, token.id)) })
4212
+ ] });
4213
+ }
4214
+ var Input = React13__default.default.forwardRef(
4215
+ ({ leftIcon, error, className, style, disabled, ...props }, ref) => {
4216
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4217
+ leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:left-3 volr:top-1/2 volr:-translate-y-1/2 volr:pointer-events-none volr-text-muted", children: leftIcon }),
4229
4218
  /* @__PURE__ */ jsxRuntime.jsx(
4230
- "div",
4219
+ "input",
4231
4220
  {
4232
- className: "volr:absolute volr:w-40 volr:h-40 volr:rounded-full volr:opacity-0",
4233
- style: {
4234
- background: "radial-gradient(circle, rgba(20,184,166,0.6) 0%, rgba(20,184,166,0) 60%)",
4235
- filter: "blur(40px)",
4236
- top: "50%",
4237
- left: "50%",
4238
- transform: "translateX(-50%)",
4239
- animation: "volrGlowPulse 2.2s ease-out 0.2s forwards"
4240
- }
4221
+ ref,
4222
+ disabled,
4223
+ className: cn(
4224
+ "volr:w-full volr:text-base volr:outline-none volr:transition-all volr:rounded-lg volr:py-3 volr:disabled:cursor-not-allowed volr:bg-white",
4225
+ "volr:border volr:border-slate-300 focus:volr:border-slate-400 focus:volr:ring-1 focus:volr:ring-slate-400",
4226
+ leftIcon ? "volr:pl-11 volr:pr-3" : "volr:px-3",
4227
+ error && "volr:border-red-500 focus:volr:border-red-500 focus:volr:ring-red-500",
4228
+ className
4229
+ ),
4230
+ style,
4231
+ ...props
4241
4232
  }
4242
4233
  )
4243
- ] }),
4244
- /* @__PURE__ */ jsxRuntime.jsx(
4245
- "div",
4246
- {
4247
- className: "volr:absolute volr:-top-3 volr:-right-3 volr:rounded-full volr:p-3 volr:bg-linear-to-br volr:from-emerald-400 volr:to-teal-500 volr:shadow-2xl volr:shadow-emerald-500/50 volr:border-4 volr:border-white volr:z-20",
4248
- style: {
4249
- animation: "volrBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards"
4234
+ ] });
4235
+ }
4236
+ );
4237
+ Input.displayName = "Input";
4238
+ function WithdrawView({
4239
+ balances,
4240
+ connectedWallet,
4241
+ onSuccess
4242
+ }) {
4243
+ const { t } = useI18n();
4244
+ const { withdraw, isWithdrawing, result, error, reset } = react.useWithdraw();
4245
+ const [step, setStep] = React13.useState("select");
4246
+ const [selectedTokenId, setSelectedTokenId] = React13.useState(null);
4247
+ const [toAddress, setToAddress] = React13.useState("");
4248
+ const [amount, setAmount] = React13.useState("");
4249
+ const [useConnectedWallet, setUseConnectedWallet] = React13.useState(false);
4250
+ const selectedToken = React13.useMemo(
4251
+ () => balances.find((b) => b.id === selectedTokenId),
4252
+ [balances, selectedTokenId]
4253
+ );
4254
+ const connectedAddress = React13.useMemo(() => {
4255
+ if (!connectedWallet) return null;
4256
+ const parts = connectedWallet.split(":");
4257
+ return parts.length >= 2 ? parts[1] : null;
4258
+ }, [connectedWallet]);
4259
+ const handleSelectToken = (tokenId) => {
4260
+ setSelectedTokenId(tokenId);
4261
+ setStep("input");
4262
+ };
4263
+ const handleUseConnectedWallet = () => {
4264
+ if (connectedAddress) {
4265
+ setToAddress(connectedAddress);
4266
+ setUseConnectedWallet(true);
4267
+ }
4268
+ };
4269
+ const handleConfirm = async () => {
4270
+ if (!selectedToken || !toAddress || !amount) return;
4271
+ setStep("confirm");
4272
+ try {
4273
+ await withdraw({
4274
+ chainId: selectedToken.chainId,
4275
+ tokenAddress: selectedToken.address,
4276
+ decimals: selectedToken.decimals,
4277
+ amount,
4278
+ to: toAddress
4279
+ });
4280
+ setStep("result");
4281
+ } catch {
4282
+ setStep("result");
4283
+ }
4284
+ };
4285
+ const handleReset = () => {
4286
+ reset();
4287
+ setStep("select");
4288
+ setSelectedTokenId(null);
4289
+ setToAddress("");
4290
+ setAmount("");
4291
+ setUseConnectedWallet(false);
4292
+ };
4293
+ const isAmountValid = React13.useMemo(() => {
4294
+ if (!amount || !selectedToken) return false;
4295
+ const num = parseFloat(amount);
4296
+ if (isNaN(num) || num <= 0) return false;
4297
+ const balance = parseFloat(selectedToken.balance.replace(/,/g, ""));
4298
+ return num <= balance;
4299
+ }, [amount, selectedToken]);
4300
+ const isAddressValid = /^0x[a-fA-F0-9]{40}$/.test(toAddress);
4301
+ if (step === "select") {
4302
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4303
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.selectToken") }),
4304
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-2", children: balances.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
4305
+ "button",
4306
+ {
4307
+ type: "button",
4308
+ onClick: () => handleSelectToken(token.id),
4309
+ disabled: token.balanceRaw === 0n,
4310
+ className: "volr:w-full volr:flex volr:items-center volr:justify-between volr:p-3 volr:rounded-lg volr:border volr:border-slate-200 hover:volr:bg-slate-50 volr:transition-colors disabled:volr:opacity-50 disabled:volr:cursor-not-allowed",
4311
+ children: [
4312
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
4313
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden", children: token.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
4314
+ "img",
4315
+ {
4316
+ src: token.iconUrl,
4317
+ alt: token.symbol,
4318
+ className: "volr:w-full volr:h-full volr:object-cover"
4319
+ }
4320
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
4321
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol })
4322
+ ] }),
4323
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-500", children: token.balance })
4324
+ ]
4250
4325
  },
4251
- children: /* @__PURE__ */ jsxRuntime.jsx(
4252
- "svg",
4326
+ token.id
4327
+ )) })
4328
+ ] });
4329
+ }
4330
+ if (step === "input" && selectedToken) {
4331
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4332
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.title") }),
4333
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-3 volr:p-3 volr:rounded-lg volr:bg-slate-50 volr:mb-4", children: [
4334
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-200 volr:flex volr:items-center volr:justify-center volr:overflow-hidden", children: selectedToken.iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
4335
+ "img",
4253
4336
  {
4254
- width: "20",
4255
- height: "20",
4256
- viewBox: "0 0 24 24",
4257
- fill: "none",
4258
- stroke: "white",
4259
- strokeWidth: "3",
4260
- strokeLinecap: "round",
4261
- strokeLinejoin: "round",
4262
- children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
4263
- }
4264
- )
4265
- }
4266
- ),
4267
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:absolute volr:inset-0 volr:pointer-events-none volr:overflow-visible", children: [
4268
- /* @__PURE__ */ jsxRuntime.jsx(
4269
- "div",
4270
- {
4271
- className: "volr:absolute volr:w-2 volr:h-2 volr:bg-emerald-400 volr:rounded-full volr:opacity-0",
4272
- style: {
4273
- top: "20%",
4274
- left: "20%",
4275
- animation: "volrParticle1 1s ease-out forwards"
4337
+ src: selectedToken.iconUrl,
4338
+ alt: selectedToken.symbol,
4339
+ className: "volr:w-full volr:h-full volr:object-cover"
4276
4340
  }
4277
- }
4278
- ),
4279
- /* @__PURE__ */ jsxRuntime.jsx(
4280
- "div",
4281
- {
4282
- className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-cyan-400 volr:rounded-full volr:opacity-0",
4283
- style: {
4284
- top: "30%",
4285
- right: "25%",
4286
- animation: "volrParticle2 1.2s ease-out 0.1s forwards"
4341
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: selectedToken.symbol.slice(0, 2) }) }),
4342
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4343
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: selectedToken.symbol }),
4344
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4345
+ t("account.withdraw.available"),
4346
+ ": ",
4347
+ selectedToken.balance
4348
+ ] })
4349
+ ] })
4350
+ ] }),
4351
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
4352
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.toAddress") }),
4353
+ /* @__PURE__ */ jsxRuntime.jsx(
4354
+ Input,
4355
+ {
4356
+ type: "text",
4357
+ placeholder: "0x...",
4358
+ value: toAddress,
4359
+ onChange: (e) => {
4360
+ setToAddress(e.target.value);
4361
+ setUseConnectedWallet(false);
4362
+ }
4287
4363
  }
4288
- }
4289
- ),
4290
- /* @__PURE__ */ jsxRuntime.jsx(
4291
- "div",
4292
- {
4293
- className: "volr:absolute volr:w-2 volr:h-2 volr:bg-teal-400 volr:rounded-full volr:opacity-0",
4294
- style: {
4295
- bottom: "25%",
4296
- left: "30%",
4297
- animation: "volrParticle3 1.1s ease-out 0.2s forwards"
4364
+ ),
4365
+ connectedAddress && !useConnectedWallet && /* @__PURE__ */ jsxRuntime.jsx(
4366
+ "button",
4367
+ {
4368
+ type: "button",
4369
+ onClick: handleUseConnectedWallet,
4370
+ className: "volr:mt-2 volr:text-xs volr:text-slate-500 hover:volr:text-slate-700 volr:underline",
4371
+ children: t("account.withdraw.useConnectedWallet")
4298
4372
  }
4299
- }
4300
- ),
4373
+ )
4374
+ ] }),
4375
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-6", children: [
4376
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.amount") }),
4377
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4378
+ /* @__PURE__ */ jsxRuntime.jsx(
4379
+ Input,
4380
+ {
4381
+ type: "text",
4382
+ inputMode: "decimal",
4383
+ placeholder: "0.00",
4384
+ value: amount,
4385
+ onChange: (e) => setAmount(e.target.value)
4386
+ }
4387
+ ),
4388
+ /* @__PURE__ */ jsxRuntime.jsx(
4389
+ "button",
4390
+ {
4391
+ type: "button",
4392
+ onClick: () => setAmount(selectedToken.balance.replace(/,/g, "")),
4393
+ className: "volr:absolute volr:right-3 volr:top-1/2 volr:-translate-y-1/2 volr:text-xs volr:text-slate-500 hover:volr:text-slate-700 volr:font-medium",
4394
+ children: "MAX"
4395
+ }
4396
+ )
4397
+ ] })
4398
+ ] }),
4301
4399
  /* @__PURE__ */ jsxRuntime.jsx(
4302
- "div",
4400
+ Button,
4303
4401
  {
4304
- className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-emerald-300 volr:rounded-full volr:opacity-0",
4305
- style: {
4306
- bottom: "30%",
4307
- right: "20%",
4308
- animation: "volrParticle4 1.3s ease-out 0.15s forwards"
4309
- }
4402
+ onClick: handleConfirm,
4403
+ disabled: !isAddressValid || !isAmountValid,
4404
+ fullWidth: true,
4405
+ children: t("account.withdraw.confirm")
4310
4406
  }
4311
4407
  )
4312
- ] }),
4313
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4314
- @keyframes volrGlowPulse {
4315
- 0% {
4316
- transform: scale(0.5);
4317
- opacity: 0;
4318
- }
4319
- 40% {
4320
- opacity: 1;
4321
- }
4322
- 100% {
4323
- transform: scale(1.6);
4324
- opacity: 0;
4325
- }
4326
- }
4327
- @keyframes volrBounceIn {
4328
- 0% {
4329
- transform: scale(0);
4330
- opacity: 0;
4331
- }
4332
- 50% {
4333
- transform: scale(1.2);
4334
- }
4335
- 70% {
4336
- transform: scale(0.9);
4337
- }
4338
- 100% {
4339
- transform: scale(1);
4340
- opacity: 1;
4341
- }
4342
- }
4343
- @keyframes volrPulseGlow {
4344
- 0%, 100% {
4345
- opacity: 0.6;
4346
- }
4347
- 50% {
4348
- opacity: 1;
4349
- }
4350
- }
4351
- @keyframes volrParticle1 {
4352
- 0% {
4353
- transform: translate(0, 0) scale(0);
4354
- opacity: 0;
4355
- }
4356
- 20% {
4357
- opacity: 1;
4358
- }
4359
- 100% {
4360
- transform: translate(-20px, -30px) scale(1);
4361
- opacity: 0;
4362
- }
4363
- }
4364
- @keyframes volrParticle2 {
4365
- 0% {
4366
- transform: translate(0, 0) scale(0);
4367
- opacity: 0;
4368
- }
4369
- 20% {
4370
- opacity: 1;
4371
- }
4372
- 100% {
4373
- transform: translate(25px, -35px) scale(1);
4374
- opacity: 0;
4375
- }
4376
- }
4377
- @keyframes volrParticle3 {
4378
- 0% {
4379
- transform: translate(0, 0) scale(0);
4380
- opacity: 0;
4381
- }
4382
- 20% {
4383
- opacity: 1;
4384
- }
4385
- 100% {
4386
- transform: translate(-30px, 25px) scale(1);
4387
- opacity: 0;
4388
- }
4389
- }
4390
- @keyframes volrParticle4 {
4391
- 0% {
4392
- transform: translate(0, 0) scale(0);
4393
- opacity: 0;
4394
- }
4395
- 20% {
4396
- opacity: 1;
4397
- }
4398
- 100% {
4399
- transform: translate(30px, 30px) scale(1);
4400
- opacity: 0;
4401
- }
4402
- }
4403
- ` })
4404
- ] });
4405
- };
4406
- var DepositCompletedToast = ({
4407
- onClose,
4408
- previousBalance,
4409
- newBalance,
4410
- delta,
4411
- decimals,
4412
- symbol
4413
- }) => {
4414
- const { t } = useI18n();
4415
- const [expanded, setExpanded] = React13.useState(false);
4416
- const formatAmount = (amount) => {
4417
- const divisor = BigInt(10 ** decimals);
4418
- const whole = amount / divisor;
4419
- const fraction = amount % divisor;
4420
- const fractionStr = fraction.toString().padStart(decimals, "0").slice(0, 4);
4421
- const trimmedFraction = fractionStr.replace(/0+$/, "");
4422
- return trimmedFraction ? `${whole}.${trimmedFraction}` : `${whole}`;
4423
- };
4424
- const formattedDelta = formatAmount(delta);
4425
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4426
- /* @__PURE__ */ jsxRuntime.jsx(
4427
- "div",
4428
- {
4429
- className: "volr:absolute volr:inset-0 volr:bg-black/40 volr:z-40",
4430
- onClick: onClose,
4431
- style: { animation: "volrFadeIn 0.2s ease-out" }
4432
- }
4433
- ),
4434
- /* @__PURE__ */ jsxRuntime.jsxs(
4435
- "div",
4436
- {
4437
- className: cn(
4438
- // Position: centered at bottom with margin
4439
- "volr:absolute volr:bottom-3 volr:left-3 volr:right-3 volr:z-50",
4440
- // Appearance: floating card
4441
- "volr:bg-white volr:rounded-2xl",
4442
- // Border: full border for clear card definition
4443
- "volr:border volr:border-slate-200",
4444
- // Shadow: strong shadow for floating effect
4445
- "volr:shadow-2xl",
4446
- // Animation
4447
- "volr:transition-all volr:duration-300 volr:ease-out"
4448
- ),
4449
- style: {
4450
- animation: "volrSlideUp 0.3s ease-out"
4451
- },
4452
- children: [
4453
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-1 volr:bg-linear-to-r volr:from-emerald-400 volr:to-teal-500 volr:rounded-t-2xl" }),
4454
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-start volr:gap-3", children: [
4455
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:shrink-0 volr:w-10 volr:h-10 volr:rounded-full volr:bg-linear-to-br volr:from-emerald-500 volr:to-teal-500 volr:flex volr:items-center volr:justify-center volr:shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx(
4456
- "svg",
4408
+ ] });
4409
+ }
4410
+ if (step === "confirm" && selectedToken) {
4411
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-8 volr:text-center", children: [
4412
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-spin volr:w-8 volr:h-8 volr:border-2 volr:border-slate-200 volr:border-t-slate-600 volr:rounded-full volr:mx-auto volr:mb-4" }),
4413
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-600", children: t("account.withdraw.processing") })
4414
+ ] });
4415
+ }
4416
+ if (step === "result") {
4417
+ const isSuccess = result && !error;
4418
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-8 volr:text-center", children: [
4419
+ isSuccess ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4420
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-12 volr:h-12 volr:rounded-full volr:bg-green-100 volr:flex volr:items-center volr:justify-center volr:mx-auto volr:mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
4421
+ "svg",
4422
+ {
4423
+ className: "volr:w-6 volr:h-6 volr:text-green-600",
4424
+ fill: "none",
4425
+ viewBox: "0 0 24 24",
4426
+ stroke: "currentColor",
4427
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4428
+ "path",
4457
4429
  {
4458
- width: "20",
4459
- height: "20",
4460
- viewBox: "0 0 24 24",
4461
- fill: "none",
4462
- stroke: "white",
4463
- strokeWidth: "2.5",
4464
4430
  strokeLinecap: "round",
4465
4431
  strokeLinejoin: "round",
4466
- children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
4432
+ strokeWidth: 2,
4433
+ d: "M5 13l4 4L19 7"
4467
4434
  }
4468
- ) }),
4469
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
4470
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-start volr:justify-between volr:gap-2 volr:mb-1", children: [
4471
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-semibold volr:text-slate-900", children: t("deposit.completed") }),
4472
- /* @__PURE__ */ jsxRuntime.jsx(
4473
- "button",
4474
- {
4475
- onClick: onClose,
4476
- className: "volr:shrink-0 volr:w-6 volr:h-6 volr:flex volr:items-center volr:justify-center volr:rounded-full volr:transition-colors volr:bg-slate-100 volr:text-slate-500 volr:hover:bg-slate-200",
4477
- "aria-label": "Close",
4478
- children: /* @__PURE__ */ jsxRuntime.jsxs(
4479
- "svg",
4480
- {
4481
- width: "14",
4482
- height: "14",
4483
- viewBox: "0 0 24 24",
4484
- fill: "none",
4485
- stroke: "currentColor",
4486
- strokeWidth: "2.5",
4487
- children: [
4488
- /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
4489
- /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
4490
- ]
4491
- }
4492
- )
4493
- }
4494
- )
4495
- ] }),
4496
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-700 volr:mb-3", children: t("deposit.completedAmount", { amount: formattedDelta, symbol }) }),
4497
- expanded && /* @__PURE__ */ jsxRuntime.jsxs(
4498
- "div",
4499
- {
4500
- className: "volr:space-y-2 volr:mb-3 volr:p-3 volr:rounded-lg volr:bg-slate-50 volr:border volr:border-slate-200",
4501
- style: { animation: "volrFadeIn 0.2s ease-out" },
4502
- children: [
4503
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
4504
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-500", children: t("deposit.amount") }),
4505
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:font-mono volr:text-emerald-600 volr:font-semibold", children: [
4506
- "+",
4507
- formattedDelta,
4508
- " ",
4509
- symbol
4510
- ] })
4511
- ] }),
4512
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
4513
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-500", children: t("deposit.previousBalance") }),
4514
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:font-mono volr:text-slate-500", children: [
4515
- formatAmount(previousBalance),
4516
- " ",
4517
- symbol
4518
- ] })
4519
- ] }),
4520
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs volr:pt-2 volr:border-t volr:border-slate-200", children: [
4521
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-slate-500", children: t("deposit.newBalance") }),
4522
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:font-mono volr:font-semibold volr:text-slate-900", children: [
4523
- formatAmount(newBalance),
4524
- " ",
4525
- symbol
4526
- ] })
4527
- ] })
4528
- ]
4529
- }
4530
- ),
4531
- /* @__PURE__ */ jsxRuntime.jsx(
4532
- "button",
4533
- {
4534
- onClick: () => setExpanded(!expanded),
4535
- className: "volr:w-full volr:py-2.5 volr:text-xs volr:font-medium volr:rounded-lg volr:transition-colors volr:bg-slate-100 volr:text-slate-600 volr:border volr:border-slate-200 volr:hover:bg-slate-200",
4536
- children: expanded ? t("deposit.seeLess") : t("deposit.seeMore")
4537
- }
4538
- )
4539
- ] })
4540
- ] }) })
4541
- ]
4542
- }
4543
- ),
4544
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4545
- @keyframes volrSlideUp {
4546
- from {
4547
- transform: translateY(20px);
4548
- opacity: 0;
4549
- }
4550
- to {
4551
- transform: translateY(0);
4552
- opacity: 1;
4553
- }
4554
- }
4555
- @keyframes volrFadeIn {
4556
- from {
4557
- opacity: 0;
4435
+ )
4558
4436
  }
4559
- to {
4560
- opacity: 1;
4437
+ ) }),
4438
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.success") }),
4439
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-6", children: [
4440
+ amount,
4441
+ " ",
4442
+ selectedToken?.symbol,
4443
+ " ",
4444
+ t("account.withdraw.sent")
4445
+ ] })
4446
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4447
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-12 volr:h-12 volr:rounded-full volr:bg-red-100 volr:flex volr:items-center volr:justify-center volr:mx-auto volr:mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
4448
+ "svg",
4449
+ {
4450
+ className: "volr:w-6 volr:h-6 volr:text-red-600",
4451
+ fill: "none",
4452
+ viewBox: "0 0 24 24",
4453
+ stroke: "currentColor",
4454
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4455
+ "path",
4456
+ {
4457
+ strokeLinecap: "round",
4458
+ strokeLinejoin: "round",
4459
+ strokeWidth: 2,
4460
+ d: "M6 18L18 6M6 6l12 12"
4461
+ }
4462
+ )
4561
4463
  }
4562
- }
4563
- ` })
4564
- ] });
4565
- };
4566
- var DepositSkeleton = () => {
4567
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:animate-pulse", children: [
4568
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
4569
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-7 volr:w-24 volr:rounded volr:mb-2 volr-bg-tertiary" }),
4570
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-8 volr:w-36 volr:rounded-lg volr-bg-secondary" })
4571
- ] }),
4572
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:rounded-xl volr:p-3 volr:border volr-bg-secondary volr-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-[200px] volr:h-[200px] volr:rounded-lg volr-bg-tertiary" }) }) }),
4573
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
4574
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr-bg-tertiary" }),
4575
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-32 volr:rounded volr-bg-tertiary" })
4576
- ] }),
4577
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:border volr:rounded-lg volr:p-3 volr-bg-secondary volr-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-48 volr:rounded volr-bg-tertiary" }) }) }) }),
4578
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:pt-3 volr:border-t volr:mt-3 volr-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-44 volr:rounded volr:mx-auto volr-bg-secondary" }) })
4579
- ] });
4580
- };
4581
- function DepositQRView(props) {
4464
+ ) }),
4465
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.failed") }),
4466
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-500 volr:mb-6", children: error?.message || t("account.withdraw.unknownError") })
4467
+ ] }),
4468
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: isSuccess ? onSuccess : handleReset, fullWidth: true, children: isSuccess ? t("common.done") : t("common.tryAgain") })
4469
+ ] });
4470
+ }
4471
+ return null;
4472
+ }
4473
+ function PaymentRow({ payment, onClick }) {
4582
4474
  const { t } = useI18n();
4583
- const { config } = react.useVolrContext();
4584
- const { client } = react.useInternalAuth();
4585
- const [chainName, setChainName] = React13.useState(null);
4586
- const [showOtherTokenModal, setShowOtherTokenModal] = React13.useState(false);
4587
- const [showToast, setShowToast] = React13.useState(false);
4588
- const [toastData, setToastData] = React13.useState(null);
4589
- const [viewMode, setViewMode] = React13.useState("qr");
4590
- const eip681 = `ethereum:${props.address}`;
4591
- const status = react.useDepositListener({
4592
- chainId: props.chainId,
4593
- asset: props.asset === "native" ? { kind: "native" } : {
4594
- kind: "erc20",
4595
- token: {
4596
- address: props.asset.address,
4597
- decimals: props.asset.decimals
4598
- }
4599
- },
4600
- address: props.address
4475
+ const date = new Date(payment.createdAt);
4476
+ const formattedDate = date.toLocaleDateString(void 0, {
4477
+ month: "short",
4478
+ day: "numeric",
4479
+ year: "numeric"
4601
4480
  });
4602
- React13.useEffect(() => {
4603
- if (status.state === "detected") {
4604
- setToastData({
4605
- previousBalance: status.previousBalance,
4606
- newBalance: status.newBalance,
4607
- delta: status.delta
4608
- });
4609
- setShowToast(true);
4481
+ const statusColors = {
4482
+ CONFIRMED: "volr:bg-green-100 volr:text-green-700",
4483
+ PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
4484
+ PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
4485
+ FAILED: "volr:bg-red-100 volr:text-red-700",
4486
+ CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
4487
+ EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
4488
+ };
4489
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4490
+ "button",
4491
+ {
4492
+ type: "button",
4493
+ onClick,
4494
+ className: "volr:w-full volr:flex volr:items-center volr:justify-between volr:py-3 volr:border-b volr:border-slate-100 hover:volr:bg-slate-50 volr:transition-colors volr:text-left",
4495
+ children: [
4496
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
4497
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
4498
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900 volr:truncate", children: payment.itemName || t("account.payments.payment") }),
4499
+ /* @__PURE__ */ jsxRuntime.jsx(
4500
+ "span",
4501
+ {
4502
+ className: `volr:px-1.5 volr:py-0.5 volr:text-xs volr:font-medium volr:rounded ${statusColors[payment.status] || "volr:bg-slate-100 volr:text-slate-500"}`,
4503
+ children: payment.status
4504
+ }
4505
+ )
4506
+ ] }),
4507
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400", children: formattedDate })
4508
+ ] }),
4509
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4510
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-right", children: [
4511
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: [
4512
+ payment.amount,
4513
+ " ",
4514
+ payment.token.symbol
4515
+ ] }),
4516
+ payment.totalUsd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4517
+ "$",
4518
+ parseFloat(payment.totalUsd).toFixed(2)
4519
+ ] })
4520
+ ] }),
4521
+ /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
4522
+ ] })
4523
+ ]
4610
4524
  }
4611
- }, [status]);
4612
- const getNetworkInfo = React13.useCallback(
4613
- react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
4614
- [client, config.rpcOverrides]
4615
4525
  );
4526
+ }
4527
+ function PaymentHistoryView({ onSelectPayment }) {
4528
+ const { t } = useI18n();
4529
+ const { getPaymentHistory, isLoading: isApiLoading } = react.useVolrPaymentApi();
4530
+ const [payments, setPayments] = React13.useState([]);
4531
+ const [isLoading, setIsLoading] = React13.useState(true);
4532
+ const [error, setError] = React13.useState(null);
4616
4533
  React13.useEffect(() => {
4617
- let cancelled = false;
4618
- const loadChainName = async () => {
4619
- try {
4620
- const info = await getNetworkInfo(props.chainId, false);
4621
- if (!cancelled) {
4622
- setChainName(info.name);
4623
- }
4624
- } catch (error) {
4625
- if (!cancelled) {
4626
- setChainName(`Chain ${props.chainId}`);
4627
- }
4628
- }
4629
- };
4630
- loadChainName();
4631
- return () => {
4632
- cancelled = true;
4633
- };
4634
- }, [getNetworkInfo, props.chainId]);
4635
- const tokenSymbol = props.asset === "native" ? "ETH" : props.asset.symbol;
4636
- const displayChainName = chainName || `Chain ${props.chainId}`;
4637
- const decimals = props.asset === "native" ? 18 : props.asset.decimals;
4638
- if (viewMode === "wallet-transfer") {
4639
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4534
+ setIsLoading(true);
4535
+ setError(null);
4536
+ getPaymentHistory({ take: 20 }).then((result) => {
4537
+ setPayments(result.payments);
4538
+ }).catch((err) => {
4539
+ console.error("[PaymentHistoryView] Failed to fetch payments:", err);
4540
+ setError(t("account.payments.fetchError"));
4541
+ }).finally(() => {
4542
+ setIsLoading(false);
4543
+ });
4544
+ }, [getPaymentHistory, t]);
4545
+ if (isLoading || isApiLoading) {
4546
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3", children: [
4547
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4548
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-32 volr:bg-slate-200 volr:rounded volr:mb-2" }),
4549
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-3 volr:w-20 volr:bg-slate-100 volr:rounded" })
4550
+ ] }),
4551
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
4552
+ ] }, i)) }) });
4553
+ }
4554
+ if (error) {
4555
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-500", children: error }) });
4556
+ }
4557
+ if (payments.length === 0) {
4558
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.payments.noPayments") }) });
4559
+ }
4560
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4561
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.payments") }),
4562
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: payments.map((payment) => /* @__PURE__ */ jsxRuntime.jsx(
4563
+ PaymentRow,
4564
+ {
4565
+ payment,
4566
+ onClick: () => onSelectPayment(payment)
4567
+ },
4568
+ payment.id
4569
+ )) })
4570
+ ] });
4571
+ }
4572
+ function DetailRow({ label, value, copyable, mono }) {
4573
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-start volr:justify-between volr:py-2 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
4574
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:text-slate-500", children: label }),
4575
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4640
4576
  /* @__PURE__ */ jsxRuntime.jsx(
4641
- WalletTransferView,
4577
+ "span",
4642
4578
  {
4643
- chainId: props.chainId,
4644
- asset: props.asset,
4645
- destinationAddress: props.address,
4646
- onBack: () => setViewMode("qr"),
4647
- onSuccess: () => {
4648
- setViewMode("qr");
4649
- }
4579
+ className: `volr:text-sm volr:text-slate-900 volr:text-right ${mono ? "volr:font-mono" : ""}`,
4580
+ children: value
4650
4581
  }
4651
4582
  ),
4652
- showToast && toastData && /* @__PURE__ */ jsxRuntime.jsx(
4653
- DepositCompletedToast,
4654
- {
4655
- onClose: () => {
4656
- setShowToast(false);
4657
- setToastData(null);
4658
- },
4659
- previousBalance: toastData.previousBalance,
4660
- newBalance: toastData.newBalance,
4661
- delta: toastData.delta,
4662
- decimals,
4663
- symbol: tokenSymbol
4664
- }
4665
- )
4666
- ] });
4667
- }
4668
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4669
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-4", children: [
4670
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-2", children: t("deposit.qrTitle") }),
4671
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:inline-flex volr:items-center volr:gap-2 volr:px-3 volr:py-1.5 volr:rounded-lg volr-bg-secondary", children: [
4672
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr:font-medium", children: tokenSymbol }),
4673
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr-text-muted", children: "\u2022" }),
4674
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-sm volr-text-secondary", children: displayChainName })
4675
- ] })
4676
- ] }),
4677
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4678
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:rounded-xl volr:p-4 volr:shadow-sm volr:border volr:z-10 volr:bg-white volr-border", children: /* @__PURE__ */ jsxRuntime.jsx(
4679
- "img",
4680
- {
4681
- alt: "Deposit QR",
4682
- width: 200,
4683
- height: 200,
4684
- src: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
4685
- eip681
4686
- )}`,
4687
- className: "volr:rounded-md volr:relative volr:z-10"
4688
- }
4689
- ) }),
4690
- /* @__PURE__ */ jsxRuntime.jsx(DepositQRStatusOverlay, { status: status.state })
4691
- ] }) }),
4692
- (status.state === "listening" || status.state === "idle") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
4693
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr:animate-pulse volr-text-secondary", style: { backgroundColor: "currentColor" } }),
4694
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-xs volr-text-secondary", children: t("deposit.listening") })
4695
- ] }),
4696
- status.state === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-xs volr:text-center volr:mb-3 volr-error", children: [
4697
- "Error: ",
4698
- status.message
4699
- ] }),
4700
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-3", children: [
4701
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:relative volr:border volr:rounded-lg volr:p-3 volr:transition-all volr-bg-secondary volr-border volr-hover", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-3", children: [
4702
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:font-mono volr:text-xs volr:font-medium volr:flex-1 volr:text-center", children: `${props.address.slice(0, 10)}...${props.address.slice(-8)}` }),
4583
+ copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: value, className: "volr:shrink-0" })
4584
+ ] })
4585
+ ] });
4586
+ }
4587
+ function PaymentDetailView({ payment }) {
4588
+ const { t } = useI18n();
4589
+ const createdDate = new Date(payment.createdAt);
4590
+ const formattedCreatedAt = createdDate.toLocaleString(void 0, {
4591
+ year: "numeric",
4592
+ month: "short",
4593
+ day: "numeric",
4594
+ hour: "2-digit",
4595
+ minute: "2-digit"
4596
+ });
4597
+ const confirmedDate = payment.confirmedAt ? new Date(payment.confirmedAt) : null;
4598
+ const formattedConfirmedAt = confirmedDate ? confirmedDate.toLocaleString(void 0, {
4599
+ year: "numeric",
4600
+ month: "short",
4601
+ day: "numeric",
4602
+ hour: "2-digit",
4603
+ minute: "2-digit"
4604
+ }) : null;
4605
+ const statusColors = {
4606
+ CONFIRMED: "volr:bg-green-100 volr:text-green-700",
4607
+ PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
4608
+ PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
4609
+ FAILED: "volr:bg-red-100 volr:text-red-700",
4610
+ CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
4611
+ EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
4612
+ };
4613
+ const truncateHash = (hash) => {
4614
+ if (hash.length <= 16) return hash;
4615
+ return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
4616
+ };
4617
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4618
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:mb-6", children: [
4619
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-2", children: [
4620
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: payment.itemName || t("account.payments.payment") }),
4703
4621
  /* @__PURE__ */ jsxRuntime.jsx(
4704
- CopyButton,
4622
+ "span",
4705
4623
  {
4706
- text: props.address,
4707
- className: "volr:shrink-0 volr:absolute volr:right-2"
4624
+ className: `volr:px-2 volr:py-0.5 volr:text-xs volr:font-medium volr:rounded ${statusColors[payment.status] || "volr:bg-slate-100 volr:text-slate-500"}`,
4625
+ children: payment.status
4708
4626
  }
4709
4627
  )
4710
- ] }) }) }),
4711
- status.state === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-xs volr:text-center volr:mb-4 volr-error", children: status.message })
4628
+ ] }),
4629
+ payment.itemDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: payment.itemDescription })
4712
4630
  ] }),
4713
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
4714
- "button",
4715
- {
4716
- type: "button",
4717
- onClick: () => setViewMode("wallet-transfer"),
4718
- className: "volr:w-full volr:flex volr:items-center volr:justify-center volr:gap-2 volr:py-3 volr:px-4 volr:border volr:border-slate-200 volr:rounded-xl volr:text-sm volr:font-medium volr:text-slate-700 volr:bg-white volr:hover:bg-slate-50 volr:transition-colors",
4719
- children: [
4720
- /* @__PURE__ */ jsxRuntime.jsxs(
4721
- "svg",
4722
- {
4723
- className: "volr:w-5 volr:h-5",
4724
- viewBox: "0 0 24 24",
4725
- fill: "none",
4726
- stroke: "currentColor",
4727
- strokeWidth: "1.5",
4728
- children: [
4729
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "6", width: "20", height: "14", rx: "2" }),
4730
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5Z", fill: "currentColor" }),
4731
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6" })
4732
- ]
4733
- }
4734
- ),
4735
- t("deposit.useWallet")
4736
- ]
4737
- }
4738
- ) }),
4739
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:text-center volr:pt-3 volr:mt-3 volr:border-t volr-border", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "volr:text-xs volr-text-secondary", children: [
4740
- t("deposit.noToken"),
4741
- " ",
4631
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-4 volr:mb-4 volr:border-y volr:border-slate-100", children: [
4632
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900", children: [
4633
+ payment.amount,
4634
+ " ",
4635
+ payment.token.symbol
4636
+ ] }),
4637
+ payment.totalUsd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:text-slate-500", children: [
4638
+ "\u2248 $",
4639
+ parseFloat(payment.totalUsd).toFixed(2),
4640
+ " USD"
4641
+ ] })
4642
+ ] }),
4643
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-1", children: [
4644
+ /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: t("account.payments.createdAt"), value: formattedCreatedAt }),
4645
+ formattedConfirmedAt && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: t("account.payments.confirmedAt"), value: formattedConfirmedAt }),
4742
4646
  /* @__PURE__ */ jsxRuntime.jsx(
4743
- TextLinkButton,
4647
+ DetailRow,
4744
4648
  {
4745
- onClick: () => setShowOtherTokenModal(true),
4746
- showArrow: true,
4747
- children: t("deposit.getOtherToken")
4649
+ label: t("account.payments.token"),
4650
+ value: `${payment.token.symbol} (Chain ${payment.token.chainId})`
4651
+ }
4652
+ ),
4653
+ payment.txHash && /* @__PURE__ */ jsxRuntime.jsx(
4654
+ DetailRow,
4655
+ {
4656
+ label: t("account.payments.txHash"),
4657
+ value: truncateHash(payment.txHash),
4658
+ copyable: true,
4659
+ mono: true
4660
+ }
4661
+ ),
4662
+ payment.referenceId && /* @__PURE__ */ jsxRuntime.jsx(
4663
+ DetailRow,
4664
+ {
4665
+ label: t("account.payments.referenceId"),
4666
+ value: payment.referenceId,
4667
+ copyable: true
4748
4668
  }
4749
4669
  )
4750
- ] }) }),
4751
- /* @__PURE__ */ jsxRuntime.jsx(
4752
- OtherTokenModal,
4753
- {
4754
- open: showOtherTokenModal,
4755
- onOpenChange: setShowOtherTokenModal
4756
- }
4757
- ),
4758
- showToast && toastData && /* @__PURE__ */ jsxRuntime.jsx(
4759
- DepositCompletedToast,
4670
+ ] }),
4671
+ payment.itemImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
4672
+ "img",
4760
4673
  {
4761
- onClose: () => {
4762
- setShowToast(false);
4763
- setToastData(null);
4764
- },
4765
- previousBalance: toastData.previousBalance,
4766
- newBalance: toastData.newBalance,
4767
- delta: toastData.delta,
4768
- decimals,
4769
- symbol: tokenSymbol
4674
+ src: payment.itemImage,
4675
+ alt: payment.itemName || "Item",
4676
+ className: "volr:w-full volr:h-40 volr:object-cover volr:rounded-lg"
4770
4677
  }
4771
- )
4678
+ ) })
4772
4679
  ] });
4773
4680
  }
4774
- function DepositModalBody({
4775
- isLoading,
4776
- error,
4777
- depositAssets,
4778
- evmAddress,
4779
- selectedIdx,
4780
- onSelectIdx
4781
- }) {
4782
- if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {});
4783
- if (error) {
4784
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4785
- /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
4681
+ function InfoRow({ label, value, copyable, mono }) {
4682
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
4683
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-xs volr:text-slate-400 volr:mb-1", children: label }),
4684
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-2", children: [
4786
4685
  /* @__PURE__ */ jsxRuntime.jsx(
4787
- "div",
4686
+ "p",
4687
+ {
4688
+ className: `volr:text-sm volr:text-slate-900 volr:break-all ${mono ? "volr:font-mono" : ""}`,
4689
+ children: value
4690
+ }
4691
+ ),
4692
+ copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: value, className: "volr:shrink-0" })
4693
+ ] })
4694
+ ] });
4695
+ }
4696
+ function AccountInfoView({ user }) {
4697
+ const { t } = useI18n();
4698
+ const getLoginMethod = () => {
4699
+ if (user.authWallet) {
4700
+ return t("account.info.loginMethod.wallet");
4701
+ }
4702
+ if (user.email?.includes("@google.")) {
4703
+ return t("account.info.loginMethod.google");
4704
+ }
4705
+ if (user.email?.includes("@twitter.") || user.email?.includes("@x.")) {
4706
+ return t("account.info.loginMethod.twitter");
4707
+ }
4708
+ if (user.email?.includes("@wallet.")) {
4709
+ return t("account.info.loginMethod.wallet");
4710
+ }
4711
+ return t("account.info.loginMethod.email");
4712
+ };
4713
+ const formatAddress = (address) => {
4714
+ if (address.length <= 16) return address;
4715
+ return `${address.slice(0, 6)}...${address.slice(-4)}`;
4716
+ };
4717
+ const externalWallet = user.authWallet ? user.authWallet.split(":")[1] || user.authWallet : null;
4718
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4719
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.account") }),
4720
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4721
+ /* @__PURE__ */ jsxRuntime.jsx(InfoRow, { label: t("account.info.loginMethod.label"), value: getLoginMethod() }),
4722
+ user.email && !user.email.includes("@wallet.") && /* @__PURE__ */ jsxRuntime.jsx(InfoRow, { label: t("account.email"), value: user.email }),
4723
+ user.evmAddress && /* @__PURE__ */ jsxRuntime.jsx(
4724
+ InfoRow,
4788
4725
  {
4789
- className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
4790
- style: { opacity: 0.9 },
4791
- children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-error", children: error })
4726
+ label: t("account.walletAddress"),
4727
+ value: formatAddress(user.evmAddress),
4728
+ copyable: true,
4729
+ mono: true
4792
4730
  }
4793
- )
4794
- ] });
4795
- }
4796
- if (depositAssets.length === 0) {
4797
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4798
- /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
4799
- /* @__PURE__ */ jsxRuntime.jsx(
4800
- "div",
4731
+ ),
4732
+ externalWallet && /* @__PURE__ */ jsxRuntime.jsx(
4733
+ InfoRow,
4801
4734
  {
4802
- className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
4803
- style: { opacity: 0.9 },
4804
- children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-text-secondary", children: "No payment token configured. Please contact the app developer." })
4735
+ label: t("account.info.connectedWallet"),
4736
+ value: formatAddress(externalWallet),
4737
+ copyable: true,
4738
+ mono: true
4805
4739
  }
4806
- )
4807
- ] });
4808
- }
4809
- if (!evmAddress) {
4810
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
4811
- /* @__PURE__ */ jsxRuntime.jsx(DepositSkeleton, {}),
4812
- /* @__PURE__ */ jsxRuntime.jsx(
4813
- "div",
4740
+ ),
4741
+ user.signerType && /* @__PURE__ */ jsxRuntime.jsx(
4742
+ InfoRow,
4814
4743
  {
4815
- className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
4816
- style: { opacity: 0.9 },
4817
- children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-text-secondary", children: "Wallet address is not ready. Please finish wallet setup first." })
4744
+ label: t("account.info.signerType"),
4745
+ value: user.signerType === "passkey" ? "Passkey" : user.signerType
4818
4746
  }
4819
4747
  )
4820
- ] });
4821
- }
4822
- if (depositAssets.length === 1) {
4823
- return /* @__PURE__ */ jsxRuntime.jsx(
4824
- DepositQRView,
4825
- {
4826
- chainId: depositAssets[0].chainId,
4827
- asset: depositAssets[0].token,
4828
- address: evmAddress,
4829
- onBack: void 0
4748
+ ] })
4749
+ ] });
4750
+ }
4751
+ function AccountModal({ isOpen, onClose, onError }) {
4752
+ const { user, logout } = react.useVolrContext();
4753
+ const { balances, totalUsd, isLoading, paymentEnabled, refresh } = react.useUserBalances();
4754
+ const { client } = react.useInternalAuth();
4755
+ const [currentView, setCurrentView] = React13.useState("main");
4756
+ const [selectedPayment, setSelectedPayment] = React13.useState(null);
4757
+ const [isLoggingOut, setIsLoggingOut] = React13.useState(false);
4758
+ const [depositAssets, setDepositAssets] = React13.useState([]);
4759
+ const [depositLoading, setDepositLoading] = React13.useState(false);
4760
+ const [depositError, setDepositError] = React13.useState(null);
4761
+ const [depositSelectedIdx, setDepositSelectedIdx] = React13.useState(-1);
4762
+ React13.useEffect(() => {
4763
+ if (currentView !== "deposit" || !isOpen) return;
4764
+ setDepositLoading(true);
4765
+ setDepositError(null);
4766
+ client.get("/auth/branding").then((response) => {
4767
+ const assets = response.depositAssets ?? [];
4768
+ setDepositAssets(assets);
4769
+ if (assets.length === 1) {
4770
+ setDepositSelectedIdx(0);
4830
4771
  }
4831
- );
4772
+ }).catch((err) => {
4773
+ console.error("Failed to fetch deposit assets:", err);
4774
+ setDepositError("Failed to load deposit options");
4775
+ }).finally(() => {
4776
+ setDepositLoading(false);
4777
+ });
4778
+ }, [currentView, isOpen, client]);
4779
+ const handleOpenChange = React13.useCallback((open) => {
4780
+ if (!open) {
4781
+ onClose();
4782
+ setTimeout(() => {
4783
+ setCurrentView("main");
4784
+ setSelectedPayment(null);
4785
+ }, 200);
4786
+ }
4787
+ }, [onClose]);
4788
+ if (!user) {
4789
+ return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
4832
4790
  }
4833
- if (selectedIdx === -1) {
4834
- return /* @__PURE__ */ jsxRuntime.jsx(
4835
- AssetSelectView,
4791
+ if (!user.keyStorageType) {
4792
+ const handlePasskeyComplete = () => {
4793
+ onClose();
4794
+ };
4795
+ const handlePasskeyError = (error) => {
4796
+ if (onError) onError(error);
4797
+ };
4798
+ const handleLogoutFromPasskey = async () => {
4799
+ try {
4800
+ await logout();
4801
+ onClose();
4802
+ } catch (error) {
4803
+ if (onError) {
4804
+ onError(error instanceof Error ? error : new Error("Logout failed"));
4805
+ }
4806
+ }
4807
+ };
4808
+ return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(
4809
+ PasskeyEnrollView,
4836
4810
  {
4837
- assets: depositAssets,
4838
- onSelect: (idx) => onSelectIdx(idx)
4811
+ wrapInModal: false,
4812
+ onComplete: handlePasskeyComplete,
4813
+ onError: handlePasskeyError,
4814
+ onLogout: handleLogoutFromPasskey,
4815
+ onClose
4839
4816
  }
4840
- );
4817
+ ) });
4841
4818
  }
4842
- const selected = depositAssets[selectedIdx];
4843
- return /* @__PURE__ */ jsxRuntime.jsx(
4844
- DepositQRView,
4845
- {
4846
- chainId: selected.chainId,
4847
- asset: selected.token,
4848
- address: evmAddress,
4849
- onBack: () => onSelectIdx(-1)
4819
+ const handleLogout = async () => {
4820
+ setIsLoggingOut(true);
4821
+ try {
4822
+ await logout();
4823
+ onClose();
4824
+ } catch (error) {
4825
+ if (onError) {
4826
+ onError(error instanceof Error ? error : new Error("Logout failed"));
4827
+ }
4828
+ } finally {
4829
+ setIsLoggingOut(false);
4850
4830
  }
4851
- );
4831
+ };
4832
+ const handleNavigate = (view) => {
4833
+ setCurrentView(view);
4834
+ };
4835
+ const handleBack = () => {
4836
+ if (selectedPayment) {
4837
+ setSelectedPayment(null);
4838
+ setCurrentView("payments");
4839
+ } else if (currentView === "deposit" && depositSelectedIdx >= 0 && depositAssets.length > 1) {
4840
+ setDepositSelectedIdx(-1);
4841
+ } else {
4842
+ setCurrentView("main");
4843
+ setDepositSelectedIdx(-1);
4844
+ }
4845
+ };
4846
+ const handleSelectPayment = (payment) => {
4847
+ setSelectedPayment(payment);
4848
+ };
4849
+ const handleWithdrawSuccess = () => {
4850
+ refresh();
4851
+ setCurrentView("main");
4852
+ };
4853
+ const showBack = currentView !== "main" || selectedPayment !== null || currentView === "deposit" && depositSelectedIdx >= 0 && depositAssets.length > 1;
4854
+ const renderContent = () => {
4855
+ if (selectedPayment) {
4856
+ return /* @__PURE__ */ jsxRuntime.jsx(PaymentDetailView, { payment: selectedPayment });
4857
+ }
4858
+ switch (currentView) {
4859
+ case "main":
4860
+ return /* @__PURE__ */ jsxRuntime.jsx(
4861
+ AccountMainView,
4862
+ {
4863
+ totalUsd,
4864
+ balances,
4865
+ isLoading,
4866
+ paymentEnabled,
4867
+ onNavigate: handleNavigate,
4868
+ onLogout: handleLogout,
4869
+ isLoggingOut
4870
+ }
4871
+ );
4872
+ case "assets":
4873
+ return /* @__PURE__ */ jsxRuntime.jsx(BalanceDetailView, { balances, isLoading });
4874
+ case "deposit":
4875
+ return /* @__PURE__ */ jsxRuntime.jsx(
4876
+ DepositModalBody,
4877
+ {
4878
+ isLoading: depositLoading,
4879
+ error: depositError,
4880
+ depositAssets,
4881
+ evmAddress: user.evmAddress,
4882
+ selectedIdx: depositSelectedIdx,
4883
+ onSelectIdx: setDepositSelectedIdx
4884
+ }
4885
+ );
4886
+ case "withdraw":
4887
+ return /* @__PURE__ */ jsxRuntime.jsx(
4888
+ WithdrawView,
4889
+ {
4890
+ balances,
4891
+ connectedWallet: user.authWallet,
4892
+ onSuccess: handleWithdrawSuccess
4893
+ }
4894
+ );
4895
+ case "payments":
4896
+ return /* @__PURE__ */ jsxRuntime.jsx(PaymentHistoryView, { onSelectPayment: handleSelectPayment });
4897
+ case "account":
4898
+ return /* @__PURE__ */ jsxRuntime.jsx(AccountInfoView, { user });
4899
+ default:
4900
+ return null;
4901
+ }
4902
+ };
4903
+ return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: [
4904
+ /* @__PURE__ */ jsxRuntime.jsx(
4905
+ ModalHeader,
4906
+ {
4907
+ back: showBack,
4908
+ onBack: showBack ? handleBack : void 0,
4909
+ onClose
4910
+ }
4911
+ ),
4912
+ renderContent()
4913
+ ] });
4852
4914
  }
4853
4915
  var DepositModal = ({
4854
4916
  open,
@@ -5694,71 +5756,92 @@ var PaymentInfoView = ({
5694
5756
  var PaymentProcessingView = ({
5695
5757
  step
5696
5758
  }) => {
5759
+ const { t } = useI18n();
5697
5760
  const getStatusMessage = () => {
5698
5761
  switch (step) {
5699
5762
  case "signing":
5700
- return "Waiting for confirmation...";
5763
+ return t("payment.processing.signing");
5701
5764
  case "broadcasting":
5702
- return "Sending payment...";
5765
+ return t("payment.processing.broadcasting");
5703
5766
  case "confirming":
5704
- return "Almost done...";
5767
+ return t("payment.processing.confirming");
5705
5768
  default:
5706
- return "Processing...";
5769
+ return t("payment.processing.default");
5707
5770
  }
5708
5771
  };
5709
- const getProgress = () => {
5772
+ const getStepIndex = () => {
5710
5773
  switch (step) {
5711
5774
  case "signing":
5712
- return 20;
5775
+ return 0;
5713
5776
  case "broadcasting":
5714
- return 60;
5777
+ return 1;
5715
5778
  case "confirming":
5716
- return 90;
5779
+ return 2;
5717
5780
  default:
5718
5781
  return 0;
5719
5782
  }
5720
5783
  };
5721
- const progress = getProgress();
5722
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-8 volr:py-4", children: [
5723
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative volr:w-20 volr:h-20", children: [
5724
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "volr:w-20 volr:h-20", viewBox: "0 0 36 36", children: [
5725
- /* @__PURE__ */ jsxRuntime.jsx(
5726
- "circle",
5727
- {
5728
- cx: "18",
5729
- cy: "18",
5730
- r: "16",
5731
- fill: "none",
5732
- stroke: "currentColor",
5733
- strokeWidth: "2",
5734
- className: "volr:text-slate-100"
5784
+ const currentStep = getStepIndex();
5785
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:py-8 volr:px-4", children: [
5786
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:mb-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:relative", children: [
5787
+ /* @__PURE__ */ jsxRuntime.jsx(
5788
+ "div",
5789
+ {
5790
+ className: "volr:w-20 volr:h-20 volr:rounded-full volr:border-2 volr:border-slate-200",
5791
+ style: {
5792
+ borderTopColor: "#1e293b",
5793
+ animation: "volrSpin 1.2s linear infinite"
5735
5794
  }
5736
- ),
5737
- /* @__PURE__ */ jsxRuntime.jsx(
5738
- "circle",
5739
- {
5740
- cx: "18",
5741
- cy: "18",
5742
- r: "16",
5743
- fill: "none",
5744
- stroke: "currentColor",
5745
- strokeWidth: "2",
5746
- strokeLinecap: "round",
5747
- className: "volr:text-slate-900 volr:transition-all volr:duration-500",
5748
- strokeDasharray: `${progress}, 100`,
5749
- style: {
5750
- transform: "rotate(-90deg)",
5751
- transformOrigin: "center"
5795
+ }
5796
+ ),
5797
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
5798
+ "div",
5799
+ {
5800
+ className: "volr:w-10 volr:h-10 volr:rounded-full volr:bg-slate-900 volr:flex volr:items-center volr:justify-center",
5801
+ style: { animation: "volrPulse 2s ease-in-out infinite" },
5802
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5803
+ "svg",
5804
+ {
5805
+ width: "20",
5806
+ height: "20",
5807
+ viewBox: "0 0 24 24",
5808
+ fill: "none",
5809
+ stroke: "white",
5810
+ strokeWidth: "2",
5811
+ strokeLinecap: "round",
5812
+ strokeLinejoin: "round",
5813
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })
5752
5814
  }
5753
- }
5754
- )
5755
- ] }),
5756
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:w-2 volr:h-2 volr:bg-slate-900 volr:rounded-full volr:animate-pulse" }) })
5815
+ )
5816
+ }
5817
+ ) })
5757
5818
  ] }) }),
5758
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:space-y-2", children: [
5759
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-medium volr:text-slate-900", children: getStatusMessage() }),
5760
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-400", children: "Please don't close this window" })
5761
- ] })
5819
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center volr:mb-6", children: [
5820
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-1", children: getStatusMessage() }),
5821
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("payment.processing.doNotClose") })
5822
+ ] }),
5823
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2", children: [0, 1, 2].map((stepIdx) => /* @__PURE__ */ jsxRuntime.jsx(
5824
+ "div",
5825
+ {
5826
+ className: `volr:h-1.5 volr:rounded-full volr:transition-all volr:duration-300 ${stepIdx <= currentStep ? "volr:bg-slate-900 volr:w-8" : "volr:bg-slate-200 volr:w-6"}`,
5827
+ style: stepIdx === currentStep ? { animation: "volrProgressPulse 1.5s ease-in-out infinite" } : void 0
5828
+ },
5829
+ stepIdx
5830
+ )) }),
5831
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
5832
+ @keyframes volrSpin {
5833
+ from { transform: rotate(0deg); }
5834
+ to { transform: rotate(360deg); }
5835
+ }
5836
+ @keyframes volrPulse {
5837
+ 0%, 100% { transform: scale(1); opacity: 1; }
5838
+ 50% { transform: scale(0.95); opacity: 0.85; }
5839
+ }
5840
+ @keyframes volrProgressPulse {
5841
+ 0%, 100% { opacity: 1; }
5842
+ 50% { opacity: 0.6; }
5843
+ }
5844
+ ` })
5762
5845
  ] });
5763
5846
  };
5764
5847
  var PaymentResultView = ({