@volr/react-ui 0.1.115 → 0.1.117

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.
Files changed (7) hide show
  1. package/dist/index.cjs +1835 -1789
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +1835 -1789
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -559,6 +559,7 @@ var en = {
559
559
  noAssets: "No assets configured",
560
560
  menu: {
561
561
  assets: "Assets",
562
+ deposit: "Deposit",
562
563
  withdraw: "Withdraw",
563
564
  payments: "Payment History",
564
565
  account: "Account"
@@ -752,6 +753,7 @@ var ko = {
752
753
  noAssets: "\uC124\uC815\uB41C \uC790\uC0B0\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
753
754
  menu: {
754
755
  assets: "\uC790\uC0B0",
756
+ deposit: "\uC785\uAE08",
755
757
  withdraw: "\uCD9C\uAE08",
756
758
  payments: "\uACB0\uC81C \uAE30\uB85D",
757
759
  account: "\uACC4\uC815 \uC815\uBCF4"
@@ -981,7 +983,7 @@ function useMediaQuery(query) {
981
983
  }
982
984
 
983
985
  // src/generated/volr-sdk-css.ts
984
- 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}}';
986
+ 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-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-3{bottom:calc(var(--volr-spacing)*3)}.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)))}: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\\: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-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-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}}';
985
987
  function useResolvedTheme(theme = "light") {
986
988
  const [resolvedTheme, setResolvedTheme] = useState(() => {
987
989
  if (theme !== "system") return theme;
@@ -2887,1963 +2889,2007 @@ function SigninModal({ isOpen, onClose, onError }) {
2887
2889
  }
2888
2890
  );
2889
2891
  }
2890
- function ChevronRightIcon({ className }) {
2891
- return /* @__PURE__ */ jsx(
2892
- "svg",
2893
- {
2894
- xmlns: "http://www.w3.org/2000/svg",
2895
- viewBox: "0 0 20 20",
2896
- fill: "currentColor",
2897
- className,
2898
- children: /* @__PURE__ */ jsx(
2899
- "path",
2892
+ function AssetSelectView({
2893
+ assets,
2894
+ onSelect
2895
+ }) {
2896
+ const { t } = useI18n();
2897
+ return /* @__PURE__ */ jsxs("div", { children: [
2898
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.selectTitle") }),
2899
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:mb-4 volr-text-secondary", children: "Supported token" }),
2900
+ /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: assets.map((a, idx) => {
2901
+ const isNative = a.token === "native";
2902
+ const tokenSymbol = isNative ? "ETH" : a.token.symbol;
2903
+ const tokenName = isNative ? "Ethereum" : a.token.symbol;
2904
+ return /* @__PURE__ */ jsxs(
2905
+ "button",
2900
2906
  {
2901
- fillRule: "evenodd",
2902
- 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",
2903
- clipRule: "evenodd"
2904
- }
2905
- )
2906
- }
2907
- );
2908
- }
2909
- function WalletIcon2({ className }) {
2910
- return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ 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" }) });
2911
- }
2912
- function ArrowUpIcon({ className }) {
2913
- return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" }) });
2914
- }
2915
- function ClockIcon({ className }) {
2916
- return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
2917
- }
2918
- function UserIcon({ className }) {
2919
- return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ 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" }) });
2907
+ className: cn(
2908
+ "volr:w-full volr:p-4 volr:rounded-xl volr:border-2",
2909
+ "volr:text-left volr:transition-all",
2910
+ "volr:flex volr:items-center volr:gap-4",
2911
+ "volr-border volr-hover"
2912
+ ),
2913
+ onClick: () => onSelect(idx),
2914
+ children: [
2915
+ /* @__PURE__ */ jsx("div", { className: "volr:shrink-0", children: !isNative && a.token.iconUrl ? /* @__PURE__ */ jsx(
2916
+ "img",
2917
+ {
2918
+ alt: a.token.symbol,
2919
+ src: a.token.iconUrl,
2920
+ className: "volr:w-10 volr:h-10 volr:rounded-full volr:border volr-border"
2921
+ }
2922
+ ) : /* @__PURE__ */ 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) }) }),
2923
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
2924
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
2925
+ /* @__PURE__ */ jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
2926
+ /* @__PURE__ */ 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: [
2927
+ "Chain ",
2928
+ a.chainId
2929
+ ] })
2930
+ ] }),
2931
+ /* @__PURE__ */ jsx("div", { className: "volr:text-sm volr-text-secondary", children: tokenName }),
2932
+ !isNative && /* @__PURE__ */ jsx("div", { className: "volr:text-xs volr:font-mono volr:truncate volr:mt-1 volr-text-muted", children: a.token.address })
2933
+ ] }),
2934
+ /* @__PURE__ */ jsx("div", { className: "volr:shrink-0 volr-text-muted", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
2935
+ ]
2936
+ },
2937
+ `${a.chainId}-${idx}`
2938
+ );
2939
+ }) })
2940
+ ] });
2920
2941
  }
2921
- function MenuItem({ icon, label, description, onClick }) {
2942
+ var TextLinkButton = React13.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
2922
2943
  return /* @__PURE__ */ jsxs(
2923
2944
  "button",
2924
2945
  {
2946
+ ref,
2925
2947
  type: "button",
2926
- onClick,
2927
- 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",
2948
+ className: cn(
2949
+ "volr:underline volr:transition-colors volr-text-secondary",
2950
+ className
2951
+ ),
2952
+ ...props,
2928
2953
  children: [
2929
- /* @__PURE__ */ 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 }),
2930
- /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
2931
- /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: label }),
2932
- description && /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400 volr:mt-0.5", children: description })
2933
- ] }),
2934
- /* @__PURE__ */ jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
2954
+ children,
2955
+ showArrow && " \u2192"
2935
2956
  ]
2936
2957
  }
2937
2958
  );
2959
+ });
2960
+ TextLinkButton.displayName = "TextLinkButton";
2961
+ var OtherTokenModal = ({
2962
+ open,
2963
+ onOpenChange
2964
+ }) => {
2965
+ return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, children: [
2966
+ /* @__PURE__ */ jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
2967
+ /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
2968
+ /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-semibold volr:mb-2", children: "Coming Soon" }),
2969
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr-text-secondary", children: "Swap and bridge recommendations will be available here soon." })
2970
+ ] })
2971
+ ] });
2972
+ };
2973
+
2974
+ // ../node_modules/viem/_esm/errors/unit.js
2975
+ init_base();
2976
+ var InvalidDecimalNumberError = class extends BaseError {
2977
+ constructor({ value }) {
2978
+ super(`Number \`${value}\` is not a valid decimal number.`, {
2979
+ name: "InvalidDecimalNumberError"
2980
+ });
2981
+ }
2982
+ };
2983
+
2984
+ // ../node_modules/viem/_esm/utils/unit/parseUnits.js
2985
+ function parseUnits(value, decimals) {
2986
+ if (!/^(-?)([0-9]*)\.?([0-9]*)$/.test(value))
2987
+ throw new InvalidDecimalNumberError({ value });
2988
+ let [integer, fraction = "0"] = value.split(".");
2989
+ const negative = integer.startsWith("-");
2990
+ if (negative)
2991
+ integer = integer.slice(1);
2992
+ fraction = fraction.replace(/(0+)$/, "");
2993
+ if (decimals === 0) {
2994
+ if (Math.round(Number(`.${fraction}`)) === 1)
2995
+ integer = `${BigInt(integer) + 1n}`;
2996
+ fraction = "";
2997
+ } else if (fraction.length > decimals) {
2998
+ const [left, unit, right] = [
2999
+ fraction.slice(0, decimals - 1),
3000
+ fraction.slice(decimals - 1, decimals),
3001
+ fraction.slice(decimals)
3002
+ ];
3003
+ const rounded = Math.round(Number(`${unit}.${right}`));
3004
+ if (rounded > 9)
3005
+ fraction = `${BigInt(left) + BigInt(1)}0`.padStart(left.length + 1, "0");
3006
+ else
3007
+ fraction = `${left}${rounded}`;
3008
+ if (fraction.length > decimals) {
3009
+ fraction = fraction.slice(1);
3010
+ integer = `${BigInt(integer) + 1n}`;
3011
+ }
3012
+ fraction = fraction.slice(0, decimals);
3013
+ } else {
3014
+ fraction = fraction.padEnd(decimals, "0");
3015
+ }
3016
+ return BigInt(`${negative ? "-" : ""}${integer}${fraction}`);
2938
3017
  }
2939
- function AccountMainView({
2940
- totalUsd,
2941
- balances,
2942
- isLoading,
2943
- paymentEnabled,
2944
- onNavigate,
2945
- onLogout,
2946
- isLoggingOut
2947
- }) {
2948
- const { t } = useI18n();
2949
- const formattedUsd = isLoading ? "\u2014" : totalUsd.toLocaleString("en-US", {
2950
- style: "currency",
2951
- currency: "USD",
2952
- minimumFractionDigits: 2,
2953
- maximumFractionDigits: 2
2954
- });
2955
- const tokensWithBalance = balances.filter((b) => b.balanceRaw > 0n).length;
2956
- const assetsDescription = isLoading ? void 0 : tokensWithBalance > 0 ? `${tokensWithBalance} ${tokensWithBalance === 1 ? "token" : "tokens"}` : void 0;
2957
- return /* @__PURE__ */ jsxs("div", { children: [
2958
- /* @__PURE__ */ 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: [
2959
- /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-500 volr:mb-1", children: t("account.totalBalance") }),
2960
- isLoading ? /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "volr:h-9 volr:w-36 volr:bg-slate-200 volr:rounded" }) }) : /* @__PURE__ */ jsx("p", { className: "volr:text-3xl volr:font-semibold volr:text-slate-900", children: formattedUsd })
2961
- ] }),
2962
- /* @__PURE__ */ jsxs("div", { className: "volr:space-y-1", children: [
3018
+
3019
+ // ../node_modules/viem/_esm/index.js
3020
+ init_abis();
3021
+ init_formatUnits();
3022
+ var DefaultWalletIcon2 = () => /* @__PURE__ */ jsxs(
3023
+ "svg",
3024
+ {
3025
+ className: "volr:w-6 volr:h-6",
3026
+ viewBox: "0 0 24 24",
3027
+ fill: "none",
3028
+ xmlns: "http://www.w3.org/2000/svg",
3029
+ children: [
2963
3030
  /* @__PURE__ */ jsx(
2964
- MenuItem,
3031
+ "rect",
2965
3032
  {
2966
- icon: /* @__PURE__ */ jsx(WalletIcon2, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2967
- label: t("account.menu.assets"),
2968
- description: assetsDescription,
2969
- onClick: () => onNavigate("assets")
3033
+ x: "2",
3034
+ y: "6",
3035
+ width: "20",
3036
+ height: "14",
3037
+ rx: "2",
3038
+ stroke: "currentColor",
3039
+ strokeWidth: "1.5"
2970
3040
  }
2971
3041
  ),
2972
3042
  /* @__PURE__ */ jsx(
2973
- MenuItem,
2974
- {
2975
- icon: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2976
- label: t("account.menu.withdraw"),
2977
- onClick: () => onNavigate("withdraw")
2978
- }
2979
- ),
2980
- paymentEnabled && /* @__PURE__ */ jsx(
2981
- MenuItem,
3043
+ "path",
2982
3044
  {
2983
- icon: /* @__PURE__ */ jsx(ClockIcon, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2984
- label: t("account.menu.payments"),
2985
- onClick: () => onNavigate("payments")
3045
+ 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",
3046
+ fill: "currentColor"
2986
3047
  }
2987
3048
  ),
2988
3049
  /* @__PURE__ */ jsx(
2989
- MenuItem,
3050
+ "path",
2990
3051
  {
2991
- icon: /* @__PURE__ */ jsx(UserIcon, { className: "volr:w-5 volr:h-5 volr:text-slate-600" }),
2992
- label: t("account.menu.account"),
2993
- onClick: () => onNavigate("account")
3052
+ d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6",
3053
+ stroke: "currentColor",
3054
+ strokeWidth: "1.5"
2994
3055
  }
2995
3056
  )
2996
- ] }),
2997
- /* @__PURE__ */ jsx("div", { className: "volr:mt-4 volr:pt-4 volr:border-t volr:border-slate-100", children: /* @__PURE__ */ jsx(
2998
- "button",
2999
- {
3000
- type: "button",
3001
- onClick: onLogout,
3002
- disabled: isLoggingOut,
3003
- 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",
3004
- children: isLoggingOut ? t("common.loading") : t("account.logout")
3005
- }
3006
- ) })
3007
- ] });
3008
- }
3009
- function TokenRow({ token }) {
3010
- return /* @__PURE__ */ 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: [
3011
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
3012
- /* @__PURE__ */ 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__ */ jsx(
3013
- "img",
3014
- {
3015
- src: token.iconUrl,
3016
- alt: token.symbol,
3017
- className: "volr:w-full volr:h-full volr:object-cover"
3018
- }
3019
- ) : /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
3020
- /* @__PURE__ */ jsxs("div", { children: [
3021
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol }),
3022
- /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3023
- "Chain ",
3024
- token.chainId
3025
- ] })
3026
- ] })
3027
- ] }),
3028
- /* @__PURE__ */ jsx("div", { className: "volr:text-right", children: token.isLoading ? /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" }) }) : token.error ? /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-red-500", children: "Error" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
3029
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.balance }),
3030
- token.balanceUsd !== void 0 && token.balanceUsd > 0 && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3031
- "$",
3032
- token.balanceUsd.toFixed(2)
3033
- ] })
3034
- ] }) })
3035
- ] });
3036
- }
3037
- function BalanceDetailView({
3038
- balances,
3039
- isLoading
3057
+ ]
3058
+ }
3059
+ );
3060
+ function WalletTransferView({
3061
+ chainId,
3062
+ asset,
3063
+ destinationAddress,
3064
+ onBack,
3065
+ onSuccess
3040
3066
  }) {
3041
3067
  const { t } = useI18n();
3042
- if (isLoading && balances.length === 0) {
3043
- return /* @__PURE__ */ jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
3044
- /* @__PURE__ */ jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-200" }),
3045
- /* @__PURE__ */ jsxs("div", { className: "volr:flex-1", children: [
3046
- /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded volr:mb-1" }),
3047
- /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-12 volr:bg-slate-100 volr:rounded" })
3048
- ] }),
3049
- /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
3050
- ] }, i)) }) });
3051
- }
3052
- if (balances.length === 0) {
3053
- return /* @__PURE__ */ jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.noAssets") }) });
3054
- }
3055
- return /* @__PURE__ */ jsxs("div", { children: [
3056
- /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.assets") }),
3057
- /* @__PURE__ */ jsx("div", { children: balances.map((token) => /* @__PURE__ */ jsx(TokenRow, { token }, token.id)) })
3058
- ] });
3059
- }
3060
- var Input = React13.forwardRef(
3061
- ({ leftIcon, error, className, style, disabled, ...props }, ref) => {
3062
- return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3063
- leftIcon && /* @__PURE__ */ 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 }),
3064
- /* @__PURE__ */ jsx(
3065
- "input",
3066
- {
3067
- ref,
3068
- disabled,
3069
- className: cn(
3070
- "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",
3071
- "volr:border volr:border-slate-300 focus:volr:border-slate-400 focus:volr:ring-1 focus:volr:ring-slate-400",
3072
- leftIcon ? "volr:pl-11 volr:pr-3" : "volr:px-3",
3073
- error && "volr:border-red-500 focus:volr:border-red-500 focus:volr:ring-red-500",
3074
- className
3075
- ),
3076
- style,
3077
- ...props
3078
- }
3079
- )
3080
- ] });
3081
- }
3082
- );
3083
- Input.displayName = "Input";
3084
- function WithdrawView({
3085
- balances,
3086
- connectedWallet,
3087
- onSuccess
3088
- }) {
3089
- const { t } = useI18n();
3090
- const { withdraw, isWithdrawing, result, error, reset } = useWithdraw();
3091
- const [step, setStep] = useState("select");
3092
- const [selectedTokenId, setSelectedTokenId] = useState(null);
3093
- const [toAddress, setToAddress] = useState("");
3068
+ const { config } = useVolrContext();
3069
+ const { client } = useInternalAuth();
3070
+ const { isDetecting, getWalletsForDisplay, hasWallet } = useEIP6963();
3071
+ const [viewState, setViewState] = useState("select-wallet");
3072
+ const [selectedWallet, setSelectedWallet] = useState(null);
3073
+ const [connectedAddress, setConnectedAddress] = useState(null);
3074
+ const [balance, setBalance] = useState(null);
3094
3075
  const [amount, setAmount] = useState("");
3095
- const [useConnectedWallet, setUseConnectedWallet] = useState(false);
3096
- const selectedToken = useMemo(
3097
- () => balances.find((b) => b.id === selectedTokenId),
3098
- [balances, selectedTokenId]
3076
+ const [isConnecting, setIsConnecting] = useState(false);
3077
+ const [isTransferring, setIsTransferring] = useState(false);
3078
+ const [error, setError] = useState(null);
3079
+ const [chainName, setChainName] = useState(null);
3080
+ const [currentChainId, setCurrentChainId] = useState(null);
3081
+ const tokenSymbol = asset === "native" ? "ETH" : asset.symbol;
3082
+ const decimals = asset === "native" ? 18 : asset.decimals;
3083
+ const getNetworkInfo = useCallback(
3084
+ createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
3085
+ [client, config.rpcOverrides]
3099
3086
  );
3100
- const connectedAddress = useMemo(() => {
3101
- if (!connectedWallet) return null;
3102
- const parts = connectedWallet.split(":");
3103
- return parts.length >= 2 ? parts[1] : null;
3104
- }, [connectedWallet]);
3105
- const handleSelectToken = (tokenId) => {
3106
- setSelectedTokenId(tokenId);
3107
- setStep("input");
3108
- };
3109
- const handleUseConnectedWallet = () => {
3110
- if (connectedAddress) {
3111
- setToAddress(connectedAddress);
3112
- setUseConnectedWallet(true);
3087
+ useEffect(() => {
3088
+ let cancelled = false;
3089
+ const loadChainName = async () => {
3090
+ try {
3091
+ const info = await getNetworkInfo(chainId, false);
3092
+ if (!cancelled) setChainName(info.name);
3093
+ } catch {
3094
+ if (!cancelled) setChainName(`Chain ${chainId}`);
3095
+ }
3096
+ };
3097
+ loadChainName();
3098
+ return () => {
3099
+ cancelled = true;
3100
+ };
3101
+ }, [getNetworkInfo, chainId]);
3102
+ const connectWallet = useCallback(async (wallet) => {
3103
+ setIsConnecting(true);
3104
+ setError(null);
3105
+ try {
3106
+ const provider = wallet.provider;
3107
+ const accounts = await provider.request({ method: "eth_requestAccounts" });
3108
+ if (!accounts || accounts.length === 0) {
3109
+ throw new Error("No accounts found");
3110
+ }
3111
+ const address = accounts[0];
3112
+ setConnectedAddress(address);
3113
+ setSelectedWallet(wallet);
3114
+ const chainIdHex = await provider.request({ method: "eth_chainId" });
3115
+ const currentChain = parseInt(chainIdHex, 16);
3116
+ setCurrentChainId(currentChain);
3117
+ await fetchBalance(provider, address, currentChain);
3118
+ setViewState("transfer");
3119
+ } catch (err) {
3120
+ console.error("Failed to connect wallet:", err);
3121
+ setError(err instanceof Error ? err.message : "Connection failed");
3122
+ } finally {
3123
+ setIsConnecting(false);
3113
3124
  }
3114
- };
3115
- const handleConfirm = async () => {
3116
- if (!selectedToken || !toAddress || !amount) return;
3117
- setStep("confirm");
3125
+ }, [chainId, asset]);
3126
+ const fetchBalance = useCallback(async (provider, address, currentChain) => {
3118
3127
  try {
3119
- await withdraw({
3120
- chainId: selectedToken.chainId,
3121
- tokenAddress: selectedToken.address,
3122
- decimals: selectedToken.decimals,
3123
- amount,
3124
- to: toAddress
3128
+ if (currentChain !== chainId) {
3129
+ setBalance(null);
3130
+ return;
3131
+ }
3132
+ if (asset === "native") {
3133
+ const balanceHex = await provider.request({
3134
+ method: "eth_getBalance",
3135
+ params: [address, "latest"]
3136
+ });
3137
+ setBalance(BigInt(balanceHex));
3138
+ } else {
3139
+ const data = `0x70a08231000000000000000000000000${address.slice(2)}`;
3140
+ const result = await provider.request({
3141
+ method: "eth_call",
3142
+ params: [{ to: asset.address, data }, "latest"]
3143
+ });
3144
+ setBalance(BigInt(result));
3145
+ }
3146
+ } catch (err) {
3147
+ console.error("Failed to fetch balance:", err);
3148
+ setBalance(BigInt(0));
3149
+ }
3150
+ }, [chainId, asset]);
3151
+ const switchNetwork = useCallback(async () => {
3152
+ if (!selectedWallet?.provider) return;
3153
+ try {
3154
+ await selectedWallet.provider.request({
3155
+ method: "wallet_switchEthereumChain",
3156
+ params: [{ chainId: `0x${chainId.toString(16)}` }]
3125
3157
  });
3126
- setStep("result");
3127
- } catch {
3128
- setStep("result");
3158
+ const chainIdHex = await selectedWallet.provider.request({ method: "eth_chainId" });
3159
+ const currentChain = parseInt(chainIdHex, 16);
3160
+ setCurrentChainId(currentChain);
3161
+ if (connectedAddress) {
3162
+ await fetchBalance(selectedWallet.provider, connectedAddress, currentChain);
3163
+ }
3164
+ } catch (err) {
3165
+ console.error("Failed to switch network:", err);
3166
+ setError(err instanceof Error ? err.message : "Failed to switch network");
3129
3167
  }
3130
- };
3131
- const handleReset = () => {
3132
- reset();
3133
- setStep("select");
3134
- setSelectedTokenId(null);
3135
- setToAddress("");
3136
- setAmount("");
3137
- setUseConnectedWallet(false);
3138
- };
3139
- const isAmountValid = useMemo(() => {
3140
- if (!amount || !selectedToken) return false;
3141
- const num = parseFloat(amount);
3142
- if (isNaN(num) || num <= 0) return false;
3143
- const balance = parseFloat(selectedToken.balance.replace(/,/g, ""));
3144
- return num <= balance;
3145
- }, [amount, selectedToken]);
3146
- const isAddressValid = /^0x[a-fA-F0-9]{40}$/.test(toAddress);
3147
- if (step === "select") {
3168
+ }, [selectedWallet, chainId, connectedAddress, fetchBalance]);
3169
+ const executeTransfer = useCallback(async () => {
3170
+ if (!selectedWallet?.provider || !connectedAddress || !amount) return;
3171
+ setIsTransferring(true);
3172
+ setError(null);
3173
+ try {
3174
+ const amountWei = parseUnits(amount, decimals);
3175
+ if (balance !== null && amountWei > balance) {
3176
+ setError(t("deposit.walletTransfer.insufficientBalance"));
3177
+ setIsTransferring(false);
3178
+ return;
3179
+ }
3180
+ let txHash;
3181
+ if (asset === "native") {
3182
+ txHash = await selectedWallet.provider.request({
3183
+ method: "eth_sendTransaction",
3184
+ params: [{
3185
+ from: connectedAddress,
3186
+ to: destinationAddress,
3187
+ value: `0x${amountWei.toString(16)}`
3188
+ }]
3189
+ });
3190
+ } else {
3191
+ const paddedTo = destinationAddress.slice(2).padStart(64, "0");
3192
+ const paddedAmount = amountWei.toString(16).padStart(64, "0");
3193
+ const data = `0xa9059cbb${paddedTo}${paddedAmount}`;
3194
+ txHash = await selectedWallet.provider.request({
3195
+ method: "eth_sendTransaction",
3196
+ params: [{
3197
+ from: connectedAddress,
3198
+ to: asset.address,
3199
+ data
3200
+ }]
3201
+ });
3202
+ }
3203
+ console.log("Transfer tx hash:", txHash);
3204
+ onSuccess?.();
3205
+ } catch (err) {
3206
+ console.error("Transfer failed:", err);
3207
+ setError(err instanceof Error ? err.message : "Transfer failed");
3208
+ } finally {
3209
+ setIsTransferring(false);
3210
+ }
3211
+ }, [selectedWallet, connectedAddress, amount, decimals, balance, asset, destinationAddress, onSuccess, t]);
3212
+ const setMaxAmount = useCallback(() => {
3213
+ if (balance !== null) {
3214
+ const formatted = formatUnits(balance, decimals);
3215
+ setAmount(formatted);
3216
+ }
3217
+ }, [balance, decimals]);
3218
+ const wallets = getWalletsForDisplay();
3219
+ const isWrongNetwork = currentChainId !== null && currentChainId !== chainId;
3220
+ const formattedBalance = balance !== null ? formatUnits(balance, decimals) : null;
3221
+ if (viewState === "select-wallet") {
3148
3222
  return /* @__PURE__ */ jsxs("div", { children: [
3149
- /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.selectToken") }),
3150
- /* @__PURE__ */ jsx("div", { className: "volr:space-y-2", children: balances.map((token) => /* @__PURE__ */ jsxs(
3223
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
3224
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
3225
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.selectWallet") })
3226
+ ] }),
3227
+ isDetecting && /* @__PURE__ */ jsxs("div", { className: "volr:text-center volr:py-8", children: [
3228
+ /* @__PURE__ */ 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" }),
3229
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-3", children: t("common.loading") })
3230
+ ] }),
3231
+ !isDetecting && !hasWallet && /* @__PURE__ */ jsx("div", { className: "volr:text-center volr:py-8", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.noWallets") }) }),
3232
+ !isDetecting && wallets.length > 0 && /* @__PURE__ */ jsx("div", { className: "volr:space-y-2", children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
3151
3233
  "button",
3152
3234
  {
3153
3235
  type: "button",
3154
- onClick: () => handleSelectToken(token.id),
3155
- disabled: token.balanceRaw === 0n,
3156
- 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",
3236
+ onClick: () => connectWallet(wallet),
3237
+ disabled: isConnecting,
3238
+ 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",
3157
3239
  children: [
3158
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
3159
- /* @__PURE__ */ 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__ */ jsx(
3160
- "img",
3161
- {
3162
- src: token.iconUrl,
3163
- alt: token.symbol,
3164
- className: "volr:w-full volr:h-full volr:object-cover"
3165
- }
3166
- ) : /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
3167
- /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol })
3168
- ] }),
3169
- /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:text-slate-500", children: token.balance })
3240
+ /* @__PURE__ */ 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__ */ jsx(
3241
+ "img",
3242
+ {
3243
+ src: wallet.icon,
3244
+ alt: wallet.name,
3245
+ className: "volr:w-7 volr:h-7"
3246
+ }
3247
+ ) : /* @__PURE__ */ jsx("div", { className: "volr:text-slate-400", children: /* @__PURE__ */ jsx(DefaultWalletIcon2, {}) }) }),
3248
+ /* @__PURE__ */ jsx("span", { className: "volr:flex-1 volr:text-left volr:font-medium volr:text-slate-900", children: wallet.name }),
3249
+ /* @__PURE__ */ jsx(
3250
+ "svg",
3251
+ {
3252
+ className: "volr:w-5 volr:h-5 volr:text-slate-400",
3253
+ fill: "none",
3254
+ viewBox: "0 0 24 24",
3255
+ stroke: "currentColor",
3256
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
3257
+ }
3258
+ )
3170
3259
  ]
3171
3260
  },
3172
- token.id
3173
- )) })
3261
+ wallet.id
3262
+ )) }),
3263
+ error && /* @__PURE__ */ jsx("div", { className: "volr:mt-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
3264
+ /* @__PURE__ */ jsx("div", { className: "volr:mt-6 volr:pt-4 volr:border-t volr:border-slate-200", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onBack, className: "volr:w-full", children: t("common.back") }) })
3174
3265
  ] });
3175
3266
  }
3176
- if (step === "input" && selectedToken) {
3177
- return /* @__PURE__ */ jsxs("div", { children: [
3178
- /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.title") }),
3179
- /* @__PURE__ */ 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: [
3180
- /* @__PURE__ */ 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__ */ jsx(
3181
- "img",
3182
- {
3183
- src: selectedToken.iconUrl,
3184
- alt: selectedToken.symbol,
3185
- className: "volr:w-full volr:h-full volr:object-cover"
3186
- }
3187
- ) : /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: selectedToken.symbol.slice(0, 2) }) }),
3188
- /* @__PURE__ */ jsxs("div", { children: [
3189
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: selectedToken.symbol }),
3190
- /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3191
- t("account.withdraw.available"),
3192
- ": ",
3193
- selectedToken.balance
3194
- ] })
3267
+ return /* @__PURE__ */ jsxs("div", { children: [
3268
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
3269
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
3270
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3271
+ selectedWallet?.icon && /* @__PURE__ */ jsx("img", { src: selectedWallet.icon, alt: "", className: "volr:w-5 volr:h-5 volr:rounded" }),
3272
+ /* @__PURE__ */ jsxs("span", { className: "volr:text-sm volr:text-slate-500", children: [
3273
+ connectedAddress?.slice(0, 6),
3274
+ "...",
3275
+ connectedAddress?.slice(-4)
3195
3276
  ] })
3277
+ ] })
3278
+ ] }),
3279
+ isWrongNetwork && /* @__PURE__ */ jsxs("div", { className: "volr:mb-4 volr:p-3 volr:bg-amber-50 volr:border volr:border-amber-200 volr:rounded-lg", children: [
3280
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-amber-700 volr:mb-2", children: t("deposit.walletTransfer.wrongNetwork", { network: chainName || `Chain ${chainId}` }) }),
3281
+ /* @__PURE__ */ jsx(
3282
+ Button,
3283
+ {
3284
+ variant: "secondary",
3285
+ size: "sm",
3286
+ onClick: switchNetwork,
3287
+ className: "volr:w-full",
3288
+ children: t("deposit.walletTransfer.switchNetwork")
3289
+ }
3290
+ )
3291
+ ] }),
3292
+ /* @__PURE__ */ jsx("div", { className: "volr:mb-4 volr:p-4 volr:bg-slate-50 volr:rounded-xl volr:border volr:border-slate-200", children: /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between", children: [
3293
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3294
+ /* @__PURE__ */ jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
3295
+ /* @__PURE__ */ 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}` })
3196
3296
  ] }),
3197
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
3198
- /* @__PURE__ */ jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.toAddress") }),
3297
+ /* @__PURE__ */ jsxs("div", { className: "volr:text-right", children: [
3298
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-500", children: t("deposit.walletTransfer.balance") }),
3299
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-mono volr:font-medium", children: isWrongNetwork ? "-" : formattedBalance ? `${Number(formattedBalance).toFixed(4)}` : "..." })
3300
+ ] })
3301
+ ] }) }),
3302
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
3303
+ /* @__PURE__ */ jsx("label", { className: "volr:block volr:text-sm volr:font-medium volr:text-slate-700 volr:mb-2", children: t("deposit.walletTransfer.amount") }),
3304
+ /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3199
3305
  /* @__PURE__ */ jsx(
3200
- Input,
3306
+ "input",
3201
3307
  {
3202
3308
  type: "text",
3203
- placeholder: "0x...",
3204
- value: toAddress,
3205
- onChange: (e) => {
3206
- setToAddress(e.target.value);
3207
- setUseConnectedWallet(false);
3208
- }
3309
+ inputMode: "decimal",
3310
+ value: amount,
3311
+ onChange: (e) => setAmount(e.target.value),
3312
+ placeholder: t("deposit.walletTransfer.amountPlaceholder"),
3313
+ disabled: isWrongNetwork,
3314
+ 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"
3209
3315
  }
3210
3316
  ),
3211
- connectedAddress && !useConnectedWallet && /* @__PURE__ */ jsx(
3317
+ /* @__PURE__ */ jsx(
3212
3318
  "button",
3213
3319
  {
3214
3320
  type: "button",
3215
- onClick: handleUseConnectedWallet,
3216
- className: "volr:mt-2 volr:text-xs volr:text-slate-500 hover:volr:text-slate-700 volr:underline",
3217
- children: t("account.withdraw.useConnectedWallet")
3321
+ onClick: setMaxAmount,
3322
+ disabled: isWrongNetwork || balance === null,
3323
+ 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",
3324
+ children: t("deposit.walletTransfer.max")
3218
3325
  }
3219
3326
  )
3220
- ] }),
3221
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-6", children: [
3222
- /* @__PURE__ */ jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.amount") }),
3223
- /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3224
- /* @__PURE__ */ jsx(
3225
- Input,
3226
- {
3227
- type: "text",
3228
- inputMode: "decimal",
3229
- placeholder: "0.00",
3230
- value: amount,
3231
- onChange: (e) => setAmount(e.target.value)
3232
- }
3233
- ),
3234
- /* @__PURE__ */ jsx(
3235
- "button",
3236
- {
3237
- type: "button",
3238
- onClick: () => setAmount(selectedToken.balance.replace(/,/g, "")),
3239
- 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",
3240
- children: "MAX"
3241
- }
3242
- )
3243
- ] })
3244
- ] }),
3327
+ ] })
3328
+ ] }),
3329
+ error && /* @__PURE__ */ jsx("div", { className: "volr:mb-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
3330
+ /* @__PURE__ */ jsx(
3331
+ Button,
3332
+ {
3333
+ onClick: executeTransfer,
3334
+ disabled: isTransferring || !amount || isWrongNetwork,
3335
+ className: "volr:w-full",
3336
+ children: isTransferring ? t("deposit.walletTransfer.transferring") : t("deposit.walletTransfer.transfer")
3337
+ }
3338
+ ),
3339
+ /* @__PURE__ */ jsx("div", { className: "volr:mt-3", children: /* @__PURE__ */ jsx(
3340
+ Button,
3341
+ {
3342
+ variant: "ghost",
3343
+ onClick: () => setViewState("select-wallet"),
3344
+ className: "volr:w-full",
3345
+ children: t("common.back")
3346
+ }
3347
+ ) })
3348
+ ] });
3349
+ }
3350
+ var DepositQRStatusOverlay = ({
3351
+ status
3352
+ }) => {
3353
+ if (status !== "detected") return null;
3354
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
3355
+ /* @__PURE__ */ jsx(
3356
+ "div",
3357
+ {
3358
+ className: "volr:absolute volr:inset-0 volr:rounded-2xl volr:pointer-events-none",
3359
+ style: {
3360
+ boxShadow: "0 0 0 4px rgba(16, 185, 129, 0.3), 0 0 30px rgba(16, 185, 129, 0.4)",
3361
+ animation: "volrPulseGlow 1.5s ease-out infinite"
3362
+ }
3363
+ }
3364
+ ),
3365
+ /* @__PURE__ */ jsxs("div", { className: "volr:absolute volr:inset-0 volr:overflow-visible volr:pointer-events-none volr:-z-10", children: [
3245
3366
  /* @__PURE__ */ jsx(
3246
- Button,
3367
+ "div",
3247
3368
  {
3248
- onClick: handleConfirm,
3249
- disabled: !isAddressValid || !isAmountValid,
3250
- fullWidth: true,
3251
- children: t("account.withdraw.confirm")
3369
+ className: "volr:absolute volr:w-48 volr:h-48 volr:rounded-full volr:opacity-0",
3370
+ style: {
3371
+ background: "radial-gradient(circle, rgba(16,185,129,0.7) 0%, rgba(16,185,129,0) 60%)",
3372
+ filter: "blur(50px)",
3373
+ top: "5%",
3374
+ left: "0%",
3375
+ animation: "volrGlowPulse 1.8s ease-out forwards"
3376
+ }
3377
+ }
3378
+ ),
3379
+ /* @__PURE__ */ jsx(
3380
+ "div",
3381
+ {
3382
+ className: "volr:absolute volr:w-44 volr:h-44 volr:rounded-full volr:opacity-0",
3383
+ style: {
3384
+ background: "radial-gradient(circle, rgba(6,182,212,0.65) 0%, rgba(6,182,212,0) 60%)",
3385
+ filter: "blur(45px)",
3386
+ bottom: "10%",
3387
+ right: "-5%",
3388
+ animation: "volrGlowPulse 2s ease-out 0.1s forwards"
3389
+ }
3390
+ }
3391
+ ),
3392
+ /* @__PURE__ */ jsx(
3393
+ "div",
3394
+ {
3395
+ className: "volr:absolute volr:w-40 volr:h-40 volr:rounded-full volr:opacity-0",
3396
+ style: {
3397
+ background: "radial-gradient(circle, rgba(20,184,166,0.6) 0%, rgba(20,184,166,0) 60%)",
3398
+ filter: "blur(40px)",
3399
+ top: "50%",
3400
+ left: "50%",
3401
+ transform: "translateX(-50%)",
3402
+ animation: "volrGlowPulse 2.2s ease-out 0.2s forwards"
3403
+ }
3252
3404
  }
3253
3405
  )
3254
- ] });
3255
- }
3256
- if (step === "confirm" && selectedToken) {
3257
- return /* @__PURE__ */ jsxs("div", { className: "volr:py-8 volr:text-center", children: [
3258
- /* @__PURE__ */ 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" }),
3259
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-600", children: t("account.withdraw.processing") })
3260
- ] });
3261
- }
3262
- if (step === "result") {
3263
- const isSuccess = result && !error;
3264
- return /* @__PURE__ */ jsxs("div", { className: "volr:py-8 volr:text-center", children: [
3265
- isSuccess ? /* @__PURE__ */ jsxs(Fragment, { children: [
3266
- /* @__PURE__ */ 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__ */ jsx(
3406
+ ] }),
3407
+ /* @__PURE__ */ jsx(
3408
+ "div",
3409
+ {
3410
+ 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",
3411
+ style: {
3412
+ animation: "volrBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards"
3413
+ },
3414
+ children: /* @__PURE__ */ jsx(
3267
3415
  "svg",
3268
3416
  {
3269
- className: "volr:w-6 volr:h-6 volr:text-green-600",
3270
- fill: "none",
3417
+ width: "20",
3418
+ height: "20",
3271
3419
  viewBox: "0 0 24 24",
3272
- stroke: "currentColor",
3273
- children: /* @__PURE__ */ jsx(
3274
- "path",
3275
- {
3276
- strokeLinecap: "round",
3277
- strokeLinejoin: "round",
3278
- strokeWidth: 2,
3279
- d: "M5 13l4 4L19 7"
3280
- }
3281
- )
3282
- }
3283
- ) }),
3284
- /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.success") }),
3285
- /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-6", children: [
3286
- amount,
3287
- " ",
3288
- selectedToken?.symbol,
3289
- " ",
3290
- t("account.withdraw.sent")
3291
- ] })
3292
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
3293
- /* @__PURE__ */ 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__ */ jsx(
3294
- "svg",
3295
- {
3296
- className: "volr:w-6 volr:h-6 volr:text-red-600",
3297
3420
  fill: "none",
3298
- viewBox: "0 0 24 24",
3299
- stroke: "currentColor",
3300
- children: /* @__PURE__ */ jsx(
3301
- "path",
3302
- {
3303
- strokeLinecap: "round",
3304
- strokeLinejoin: "round",
3305
- strokeWidth: 2,
3306
- d: "M6 18L18 6M6 6l12 12"
3307
- }
3308
- )
3421
+ stroke: "white",
3422
+ strokeWidth: "3",
3423
+ strokeLinecap: "round",
3424
+ strokeLinejoin: "round",
3425
+ children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
3309
3426
  }
3310
- ) }),
3311
- /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.failed") }),
3312
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-500 volr:mb-6", children: error?.message || t("account.withdraw.unknownError") })
3313
- ] }),
3314
- /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: isSuccess ? onSuccess : handleReset, fullWidth: true, children: isSuccess ? t("common.done") : t("common.tryAgain") })
3315
- ] });
3316
- }
3317
- return null;
3318
- }
3319
- function PaymentRow({ payment, onClick }) {
3320
- const { t } = useI18n();
3321
- const date = new Date(payment.createdAt);
3322
- const formattedDate = date.toLocaleDateString(void 0, {
3323
- month: "short",
3324
- day: "numeric",
3325
- year: "numeric"
3326
- });
3327
- const statusColors = {
3328
- CONFIRMED: "volr:bg-green-100 volr:text-green-700",
3329
- PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
3330
- PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
3331
- FAILED: "volr:bg-red-100 volr:text-red-700",
3332
- CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
3333
- EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
3334
- };
3335
- return /* @__PURE__ */ jsxs(
3336
- "button",
3337
- {
3338
- type: "button",
3339
- onClick,
3340
- 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",
3341
- children: [
3342
- /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
3343
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
3344
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900 volr:truncate", children: payment.itemName || t("account.payments.payment") }),
3345
- /* @__PURE__ */ jsx(
3346
- "span",
3347
- {
3348
- 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"}`,
3349
- children: payment.status
3350
- }
3351
- )
3352
- ] }),
3353
- /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400", children: formattedDate })
3354
- ] }),
3355
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3356
- /* @__PURE__ */ jsxs("div", { className: "volr:text-right", children: [
3357
- /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: [
3358
- payment.amount,
3359
- " ",
3360
- payment.token.symbol
3361
- ] }),
3362
- payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
3363
- "$",
3364
- parseFloat(payment.totalUsd).toFixed(2)
3365
- ] })
3366
- ] }),
3367
- /* @__PURE__ */ jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
3368
- ] })
3369
- ]
3370
- }
3371
- );
3372
- }
3373
- function PaymentHistoryView({ onSelectPayment }) {
3374
- const { t } = useI18n();
3375
- const { getPaymentHistory, isLoading: isApiLoading } = useVolrPaymentApi();
3376
- const [payments, setPayments] = useState([]);
3377
- const [isLoading, setIsLoading] = useState(true);
3378
- const [error, setError] = useState(null);
3379
- useEffect(() => {
3380
- setIsLoading(true);
3381
- setError(null);
3382
- getPaymentHistory({ take: 20 }).then((result) => {
3383
- setPayments(result.payments);
3384
- }).catch((err) => {
3385
- console.error("[PaymentHistoryView] Failed to fetch payments:", err);
3386
- setError(t("account.payments.fetchError"));
3387
- }).finally(() => {
3388
- setIsLoading(false);
3389
- });
3390
- }, [getPaymentHistory, t]);
3391
- if (isLoading || isApiLoading) {
3392
- return /* @__PURE__ */ jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3", children: [
3393
- /* @__PURE__ */ jsxs("div", { children: [
3394
- /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-32 volr:bg-slate-200 volr:rounded volr:mb-2" }),
3395
- /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-20 volr:bg-slate-100 volr:rounded" })
3396
- ] }),
3397
- /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
3398
- ] }, i)) }) });
3399
- }
3400
- if (error) {
3401
- return /* @__PURE__ */ jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-500", children: error }) });
3402
- }
3403
- if (payments.length === 0) {
3404
- return /* @__PURE__ */ jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.payments.noPayments") }) });
3405
- }
3406
- return /* @__PURE__ */ jsxs("div", { children: [
3407
- /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.payments") }),
3408
- /* @__PURE__ */ jsx("div", { children: payments.map((payment) => /* @__PURE__ */ jsx(
3409
- PaymentRow,
3410
- {
3411
- payment,
3412
- onClick: () => onSelectPayment(payment)
3413
- },
3414
- payment.id
3415
- )) })
3416
- ] });
3417
- }
3418
- function DetailRow({ label, value, copyable, mono }) {
3419
- return /* @__PURE__ */ 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: [
3420
- /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:text-slate-500", children: label }),
3421
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3427
+ )
3428
+ }
3429
+ ),
3430
+ /* @__PURE__ */ jsxs("div", { className: "volr:absolute volr:inset-0 volr:pointer-events-none volr:overflow-visible", children: [
3422
3431
  /* @__PURE__ */ jsx(
3423
- "span",
3432
+ "div",
3424
3433
  {
3425
- className: `volr:text-sm volr:text-slate-900 volr:text-right ${mono ? "volr:font-mono" : ""}`,
3426
- children: value
3434
+ className: "volr:absolute volr:w-2 volr:h-2 volr:bg-emerald-400 volr:rounded-full volr:opacity-0",
3435
+ style: {
3436
+ top: "20%",
3437
+ left: "20%",
3438
+ animation: "volrParticle1 1s ease-out forwards"
3439
+ }
3427
3440
  }
3428
3441
  ),
3429
- copyable && /* @__PURE__ */ jsx(CopyButton, { text: value, className: "volr:shrink-0" })
3430
- ] })
3431
- ] });
3432
- }
3433
- function PaymentDetailView({ payment }) {
3434
- const { t } = useI18n();
3435
- const createdDate = new Date(payment.createdAt);
3436
- const formattedCreatedAt = createdDate.toLocaleString(void 0, {
3437
- year: "numeric",
3438
- month: "short",
3439
- day: "numeric",
3440
- hour: "2-digit",
3441
- minute: "2-digit"
3442
- });
3443
- const confirmedDate = payment.confirmedAt ? new Date(payment.confirmedAt) : null;
3444
- const formattedConfirmedAt = confirmedDate ? confirmedDate.toLocaleString(void 0, {
3445
- year: "numeric",
3446
- month: "short",
3447
- day: "numeric",
3448
- hour: "2-digit",
3449
- minute: "2-digit"
3450
- }) : null;
3451
- const statusColors = {
3452
- CONFIRMED: "volr:bg-green-100 volr:text-green-700",
3453
- PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
3454
- PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
3455
- FAILED: "volr:bg-red-100 volr:text-red-700",
3456
- CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
3457
- EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
3458
- };
3459
- const truncateHash = (hash) => {
3460
- if (hash.length <= 16) return hash;
3461
- return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
3462
- };
3463
- return /* @__PURE__ */ jsxs("div", { children: [
3464
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-6", children: [
3465
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-2", children: [
3466
- /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: payment.itemName || t("account.payments.payment") }),
3467
- /* @__PURE__ */ jsx(
3468
- "span",
3469
- {
3470
- 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"}`,
3471
- children: payment.status
3472
- }
3473
- )
3474
- ] }),
3475
- payment.itemDescription && /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: payment.itemDescription })
3476
- ] }),
3477
- /* @__PURE__ */ jsxs("div", { className: "volr:py-4 volr:mb-4 volr:border-y volr:border-slate-100", children: [
3478
- /* @__PURE__ */ jsxs("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900", children: [
3479
- payment.amount,
3480
- " ",
3481
- payment.token.symbol
3482
- ] }),
3483
- payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-500", children: [
3484
- "\u2248 $",
3485
- parseFloat(payment.totalUsd).toFixed(2),
3486
- " USD"
3487
- ] })
3488
- ] }),
3489
- /* @__PURE__ */ jsxs("div", { className: "volr:space-y-1", children: [
3490
- /* @__PURE__ */ jsx(DetailRow, { label: t("account.payments.createdAt"), value: formattedCreatedAt }),
3491
- formattedConfirmedAt && /* @__PURE__ */ jsx(DetailRow, { label: t("account.payments.confirmedAt"), value: formattedConfirmedAt }),
3492
3442
  /* @__PURE__ */ jsx(
3493
- DetailRow,
3443
+ "div",
3494
3444
  {
3495
- label: t("account.payments.token"),
3496
- value: `${payment.token.symbol} (Chain ${payment.token.chainId})`
3445
+ className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-cyan-400 volr:rounded-full volr:opacity-0",
3446
+ style: {
3447
+ top: "30%",
3448
+ right: "25%",
3449
+ animation: "volrParticle2 1.2s ease-out 0.1s forwards"
3450
+ }
3497
3451
  }
3498
3452
  ),
3499
- payment.txHash && /* @__PURE__ */ jsx(
3500
- DetailRow,
3453
+ /* @__PURE__ */ jsx(
3454
+ "div",
3501
3455
  {
3502
- label: t("account.payments.txHash"),
3503
- value: truncateHash(payment.txHash),
3504
- copyable: true,
3505
- mono: true
3456
+ className: "volr:absolute volr:w-2 volr:h-2 volr:bg-teal-400 volr:rounded-full volr:opacity-0",
3457
+ style: {
3458
+ bottom: "25%",
3459
+ left: "30%",
3460
+ animation: "volrParticle3 1.1s ease-out 0.2s forwards"
3461
+ }
3506
3462
  }
3507
3463
  ),
3508
- payment.referenceId && /* @__PURE__ */ jsx(
3509
- DetailRow,
3464
+ /* @__PURE__ */ jsx(
3465
+ "div",
3510
3466
  {
3511
- label: t("account.payments.referenceId"),
3512
- value: payment.referenceId,
3513
- copyable: true
3467
+ className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-emerald-300 volr:rounded-full volr:opacity-0",
3468
+ style: {
3469
+ bottom: "30%",
3470
+ right: "20%",
3471
+ animation: "volrParticle4 1.3s ease-out 0.15s forwards"
3472
+ }
3514
3473
  }
3515
3474
  )
3516
3475
  ] }),
3517
- payment.itemImage && /* @__PURE__ */ jsx("div", { className: "volr:mt-6", children: /* @__PURE__ */ jsx(
3518
- "img",
3519
- {
3520
- src: payment.itemImage,
3521
- alt: payment.itemName || "Item",
3522
- className: "volr:w-full volr:h-40 volr:object-cover volr:rounded-lg"
3523
- }
3524
- ) })
3525
- ] });
3526
- }
3527
- function InfoRow({ label, value, copyable, mono }) {
3528
- return /* @__PURE__ */ jsxs("div", { className: "volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
3529
- /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400 volr:mb-1", children: label }),
3530
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-2", children: [
3531
- /* @__PURE__ */ jsx(
3532
- "p",
3533
- {
3534
- className: `volr:text-sm volr:text-slate-900 volr:break-all ${mono ? "volr:font-mono" : ""}`,
3535
- children: value
3476
+ /* @__PURE__ */ jsx("style", { children: `
3477
+ @keyframes volrGlowPulse {
3478
+ 0% {
3479
+ transform: scale(0.5);
3480
+ opacity: 0;
3481
+ }
3482
+ 40% {
3483
+ opacity: 1;
3484
+ }
3485
+ 100% {
3486
+ transform: scale(1.6);
3487
+ opacity: 0;
3488
+ }
3536
3489
  }
3537
- ),
3538
- copyable && /* @__PURE__ */ jsx(CopyButton, { text: value, className: "volr:shrink-0" })
3539
- ] })
3540
- ] });
3541
- }
3542
- function AccountInfoView({ user }) {
3543
- const { t } = useI18n();
3544
- const getLoginMethod = () => {
3545
- if (user.authWallet) {
3546
- return t("account.info.loginMethod.wallet");
3547
- }
3548
- if (user.email?.includes("@google.")) {
3549
- return t("account.info.loginMethod.google");
3550
- }
3551
- if (user.email?.includes("@twitter.") || user.email?.includes("@x.")) {
3552
- return t("account.info.loginMethod.twitter");
3553
- }
3554
- if (user.email?.includes("@wallet.")) {
3555
- return t("account.info.loginMethod.wallet");
3556
- }
3557
- return t("account.info.loginMethod.email");
3558
- };
3559
- const formatAddress = (address) => {
3560
- if (address.length <= 16) return address;
3561
- return `${address.slice(0, 6)}...${address.slice(-4)}`;
3562
- };
3563
- const externalWallet = user.authWallet ? user.authWallet.split(":")[1] || user.authWallet : null;
3564
- return /* @__PURE__ */ jsxs("div", { children: [
3565
- /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.account") }),
3566
- /* @__PURE__ */ jsxs("div", { children: [
3567
- /* @__PURE__ */ jsx(InfoRow, { label: t("account.info.loginMethod.label"), value: getLoginMethod() }),
3568
- user.email && !user.email.includes("@wallet.") && /* @__PURE__ */ jsx(InfoRow, { label: t("account.email"), value: user.email }),
3569
- user.evmAddress && /* @__PURE__ */ jsx(
3570
- InfoRow,
3571
- {
3572
- label: t("account.walletAddress"),
3573
- value: formatAddress(user.evmAddress),
3574
- copyable: true,
3575
- mono: true
3490
+ @keyframes volrBounceIn {
3491
+ 0% {
3492
+ transform: scale(0);
3493
+ opacity: 0;
3494
+ }
3495
+ 50% {
3496
+ transform: scale(1.2);
3497
+ }
3498
+ 70% {
3499
+ transform: scale(0.9);
3500
+ }
3501
+ 100% {
3502
+ transform: scale(1);
3503
+ opacity: 1;
3504
+ }
3576
3505
  }
3577
- ),
3578
- externalWallet && /* @__PURE__ */ jsx(
3579
- InfoRow,
3580
- {
3581
- label: t("account.info.connectedWallet"),
3582
- value: formatAddress(externalWallet),
3583
- copyable: true,
3584
- mono: true
3506
+ @keyframes volrPulseGlow {
3507
+ 0%, 100% {
3508
+ opacity: 0.6;
3509
+ }
3510
+ 50% {
3511
+ opacity: 1;
3512
+ }
3585
3513
  }
3586
- ),
3587
- user.signerType && /* @__PURE__ */ jsx(
3588
- InfoRow,
3589
- {
3590
- label: t("account.info.signerType"),
3591
- value: user.signerType === "passkey" ? "Passkey" : user.signerType
3514
+ @keyframes volrParticle1 {
3515
+ 0% {
3516
+ transform: translate(0, 0) scale(0);
3517
+ opacity: 0;
3518
+ }
3519
+ 20% {
3520
+ opacity: 1;
3521
+ }
3522
+ 100% {
3523
+ transform: translate(-20px, -30px) scale(1);
3524
+ opacity: 0;
3525
+ }
3592
3526
  }
3593
- )
3594
- ] })
3595
- ] });
3596
- }
3597
- function AccountModal({ isOpen, onClose, onError }) {
3598
- const { user, logout } = useVolrContext();
3599
- const { balances, totalUsd, isLoading, paymentEnabled, refresh } = useUserBalances();
3600
- const [currentView, setCurrentView] = useState("main");
3601
- const [selectedPayment, setSelectedPayment] = useState(null);
3602
- const [isLoggingOut, setIsLoggingOut] = useState(false);
3603
- const handleOpenChange = useCallback((open) => {
3604
- if (!open) {
3605
- onClose();
3606
- setTimeout(() => {
3607
- setCurrentView("main");
3608
- setSelectedPayment(null);
3609
- }, 200);
3610
- }
3611
- }, [onClose]);
3612
- if (!user) {
3613
- return /* @__PURE__ */ jsx(SigninModal, { isOpen, onClose, onError });
3614
- }
3615
- if (!user.keyStorageType) {
3616
- const handlePasskeyComplete = () => {
3617
- onClose();
3618
- };
3619
- const handlePasskeyError = (error) => {
3620
- if (onError) onError(error);
3621
- };
3622
- const handleLogoutFromPasskey = async () => {
3623
- try {
3624
- await logout();
3625
- onClose();
3626
- } catch (error) {
3627
- if (onError) {
3628
- onError(error instanceof Error ? error : new Error("Logout failed"));
3527
+ @keyframes volrParticle2 {
3528
+ 0% {
3529
+ transform: translate(0, 0) scale(0);
3530
+ opacity: 0;
3531
+ }
3532
+ 20% {
3533
+ opacity: 1;
3534
+ }
3535
+ 100% {
3536
+ transform: translate(25px, -35px) scale(1);
3537
+ opacity: 0;
3538
+ }
3629
3539
  }
3630
- }
3631
- };
3632
- return /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
3633
- PasskeyEnrollView,
3634
- {
3635
- wrapInModal: false,
3636
- onComplete: handlePasskeyComplete,
3637
- onError: handlePasskeyError,
3638
- onLogout: handleLogoutFromPasskey,
3639
- onClose
3640
- }
3641
- ) });
3642
- }
3643
- const handleLogout = async () => {
3644
- setIsLoggingOut(true);
3645
- try {
3646
- await logout();
3647
- onClose();
3648
- } catch (error) {
3649
- if (onError) {
3650
- onError(error instanceof Error ? error : new Error("Logout failed"));
3651
- }
3652
- } finally {
3653
- setIsLoggingOut(false);
3654
- }
3655
- };
3656
- const handleNavigate = (view) => {
3657
- setCurrentView(view);
3658
- };
3659
- const handleBack = () => {
3660
- if (selectedPayment) {
3661
- setSelectedPayment(null);
3662
- setCurrentView("payments");
3663
- } else {
3664
- setCurrentView("main");
3665
- }
3666
- };
3667
- const handleSelectPayment = (payment) => {
3668
- setSelectedPayment(payment);
3669
- };
3670
- const handleWithdrawSuccess = () => {
3671
- refresh();
3672
- setCurrentView("main");
3673
- };
3674
- const showBack = currentView !== "main" || selectedPayment !== null;
3675
- const renderContent = () => {
3676
- if (selectedPayment) {
3677
- return /* @__PURE__ */ jsx(PaymentDetailView, { payment: selectedPayment });
3678
- }
3679
- switch (currentView) {
3680
- case "main":
3681
- return /* @__PURE__ */ jsx(
3682
- AccountMainView,
3683
- {
3684
- totalUsd,
3685
- balances,
3686
- isLoading,
3687
- paymentEnabled,
3688
- onNavigate: handleNavigate,
3689
- onLogout: handleLogout,
3690
- isLoggingOut
3540
+ @keyframes volrParticle3 {
3541
+ 0% {
3542
+ transform: translate(0, 0) scale(0);
3543
+ opacity: 0;
3691
3544
  }
3692
- );
3693
- case "assets":
3694
- return /* @__PURE__ */ jsx(BalanceDetailView, { balances, isLoading });
3695
- case "withdraw":
3696
- return /* @__PURE__ */ jsx(
3697
- WithdrawView,
3698
- {
3699
- balances,
3700
- connectedWallet: user.authWallet,
3701
- onSuccess: handleWithdrawSuccess
3545
+ 20% {
3546
+ opacity: 1;
3702
3547
  }
3703
- );
3704
- case "payments":
3705
- return /* @__PURE__ */ jsx(PaymentHistoryView, { onSelectPayment: handleSelectPayment });
3706
- case "account":
3707
- return /* @__PURE__ */ jsx(AccountInfoView, { user });
3708
- default:
3709
- return null;
3710
- }
3548
+ 100% {
3549
+ transform: translate(-30px, 25px) scale(1);
3550
+ opacity: 0;
3551
+ }
3552
+ }
3553
+ @keyframes volrParticle4 {
3554
+ 0% {
3555
+ transform: translate(0, 0) scale(0);
3556
+ opacity: 0;
3557
+ }
3558
+ 20% {
3559
+ opacity: 1;
3560
+ }
3561
+ 100% {
3562
+ transform: translate(30px, 30px) scale(1);
3563
+ opacity: 0;
3564
+ }
3565
+ }
3566
+ ` })
3567
+ ] });
3568
+ };
3569
+ var DepositCompletedToast = ({
3570
+ onClose,
3571
+ previousBalance,
3572
+ newBalance,
3573
+ delta,
3574
+ decimals,
3575
+ symbol
3576
+ }) => {
3577
+ const { t } = useI18n();
3578
+ const [expanded, setExpanded] = useState(false);
3579
+ const formatAmount = (amount) => {
3580
+ const divisor = BigInt(10 ** decimals);
3581
+ const whole = amount / divisor;
3582
+ const fraction = amount % divisor;
3583
+ const fractionStr = fraction.toString().padStart(decimals, "0").slice(0, 4);
3584
+ const trimmedFraction = fractionStr.replace(/0+$/, "");
3585
+ return trimmedFraction ? `${whole}.${trimmedFraction}` : `${whole}`;
3711
3586
  };
3712
- return /* @__PURE__ */ jsxs(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: [
3713
- /* @__PURE__ */ jsx(
3714
- ModalHeader,
3587
+ const formattedDelta = formatAmount(delta);
3588
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
3589
+ /* @__PURE__ */ jsxs(
3590
+ "div",
3715
3591
  {
3716
- back: showBack,
3717
- onBack: showBack ? handleBack : void 0,
3718
- onClose
3592
+ className: cn(
3593
+ // Position: centered at bottom with margin
3594
+ "volr:absolute volr:bottom-3 volr:left-0 volr:right-0 volr:z-50",
3595
+ // Appearance: floating card
3596
+ "volr:bg-white volr:rounded-2xl",
3597
+ // Border: full border for clear card definition
3598
+ "volr:border volr:border-slate-200",
3599
+ // Shadow: strong shadow for floating effect
3600
+ "volr:shadow-2xl",
3601
+ // Animation
3602
+ "volr:transition-all volr:duration-300 volr:ease-out"
3603
+ ),
3604
+ style: {
3605
+ animation: "volrSlideUp 0.3s ease-out"
3606
+ },
3607
+ children: [
3608
+ /* @__PURE__ */ jsx("div", { className: "volr:h-1 volr:bg-linear-to-r volr:from-emerald-400 volr:to-teal-500 volr:rounded-t-2xl" }),
3609
+ /* @__PURE__ */ jsxs("div", { className: "volr:p-4", children: [
3610
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-2 volr:mb-2", children: [
3611
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
3612
+ /* @__PURE__ */ 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__ */ jsx(
3613
+ "svg",
3614
+ {
3615
+ width: "12",
3616
+ height: "12",
3617
+ viewBox: "0 0 24 24",
3618
+ fill: "none",
3619
+ stroke: "white",
3620
+ strokeWidth: "3",
3621
+ strokeLinecap: "round",
3622
+ strokeLinejoin: "round",
3623
+ children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
3624
+ }
3625
+ ) }),
3626
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-semibold volr:text-slate-900", children: t("deposit.completed") })
3627
+ ] }),
3628
+ /* @__PURE__ */ jsx(
3629
+ "button",
3630
+ {
3631
+ onClick: onClose,
3632
+ 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",
3633
+ "aria-label": "Close",
3634
+ children: /* @__PURE__ */ jsxs(
3635
+ "svg",
3636
+ {
3637
+ width: "14",
3638
+ height: "14",
3639
+ viewBox: "0 0 24 24",
3640
+ fill: "none",
3641
+ stroke: "currentColor",
3642
+ strokeWidth: "2.5",
3643
+ children: [
3644
+ /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
3645
+ /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
3646
+ ]
3647
+ }
3648
+ )
3649
+ }
3650
+ )
3651
+ ] }),
3652
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-700 volr:mb-3", children: t("deposit.completedAmount", { amount: formattedDelta, symbol }) }),
3653
+ expanded && /* @__PURE__ */ jsxs(
3654
+ "div",
3655
+ {
3656
+ className: "volr:space-y-2 volr:mb-3 volr:p-3 volr:rounded-lg volr:bg-slate-50 volr:border volr:border-slate-200",
3657
+ style: { animation: "volrFadeIn 0.2s ease-out" },
3658
+ children: [
3659
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
3660
+ /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("deposit.amount") }),
3661
+ /* @__PURE__ */ jsxs("span", { className: "volr:font-mono volr:text-emerald-600 volr:font-semibold", children: [
3662
+ "+",
3663
+ formattedDelta,
3664
+ " ",
3665
+ symbol
3666
+ ] })
3667
+ ] }),
3668
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
3669
+ /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("deposit.previousBalance") }),
3670
+ /* @__PURE__ */ jsxs("span", { className: "volr:font-mono volr:text-slate-500", children: [
3671
+ formatAmount(previousBalance),
3672
+ " ",
3673
+ symbol
3674
+ ] })
3675
+ ] }),
3676
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs volr:pt-2 volr:border-t volr:border-slate-200", children: [
3677
+ /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("deposit.newBalance") }),
3678
+ /* @__PURE__ */ jsxs("span", { className: "volr:font-mono volr:font-semibold volr:text-slate-900", children: [
3679
+ formatAmount(newBalance),
3680
+ " ",
3681
+ symbol
3682
+ ] })
3683
+ ] })
3684
+ ]
3685
+ }
3686
+ ),
3687
+ /* @__PURE__ */ jsx(
3688
+ "button",
3689
+ {
3690
+ onClick: () => setExpanded(!expanded),
3691
+ 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",
3692
+ children: expanded ? t("deposit.seeLess") : t("deposit.seeMore")
3693
+ }
3694
+ )
3695
+ ] })
3696
+ ]
3719
3697
  }
3720
3698
  ),
3721
- renderContent()
3699
+ /* @__PURE__ */ jsx("style", { children: `
3700
+ @keyframes volrSlideUp {
3701
+ from {
3702
+ transform: translateY(20px);
3703
+ opacity: 0;
3704
+ }
3705
+ to {
3706
+ transform: translateY(0);
3707
+ opacity: 1;
3708
+ }
3709
+ }
3710
+ @keyframes volrFadeIn {
3711
+ from {
3712
+ opacity: 0;
3713
+ }
3714
+ to {
3715
+ opacity: 1;
3716
+ }
3717
+ }
3718
+ ` })
3722
3719
  ] });
3723
- }
3724
- function AssetSelectView({
3725
- assets,
3726
- onSelect
3727
- }) {
3728
- const { t } = useI18n();
3729
- return /* @__PURE__ */ jsxs("div", { children: [
3730
- /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.selectTitle") }),
3731
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:mb-4 volr-text-secondary", children: "Supported token" }),
3732
- /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: assets.map((a, idx) => {
3733
- const isNative = a.token === "native";
3734
- const tokenSymbol = isNative ? "ETH" : a.token.symbol;
3735
- const tokenName = isNative ? "Ethereum" : a.token.symbol;
3736
- return /* @__PURE__ */ jsxs(
3737
- "button",
3738
- {
3739
- className: cn(
3740
- "volr:w-full volr:p-4 volr:rounded-xl volr:border-2",
3741
- "volr:text-left volr:transition-all",
3742
- "volr:flex volr:items-center volr:gap-4",
3743
- "volr-border volr-hover"
3744
- ),
3745
- onClick: () => onSelect(idx),
3746
- children: [
3747
- /* @__PURE__ */ jsx("div", { className: "volr:shrink-0", children: !isNative && a.token.iconUrl ? /* @__PURE__ */ jsx(
3748
- "img",
3749
- {
3750
- alt: a.token.symbol,
3751
- src: a.token.iconUrl,
3752
- className: "volr:w-10 volr:h-10 volr:rounded-full volr:border volr-border"
3753
- }
3754
- ) : /* @__PURE__ */ 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) }) }),
3755
- /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
3756
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
3757
- /* @__PURE__ */ jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
3758
- /* @__PURE__ */ 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: [
3759
- "Chain ",
3760
- a.chainId
3761
- ] })
3762
- ] }),
3763
- /* @__PURE__ */ jsx("div", { className: "volr:text-sm volr-text-secondary", children: tokenName }),
3764
- !isNative && /* @__PURE__ */ jsx("div", { className: "volr:text-xs volr:font-mono volr:truncate volr:mt-1 volr-text-muted", children: a.token.address })
3765
- ] }),
3766
- /* @__PURE__ */ jsx("div", { className: "volr:shrink-0 volr-text-muted", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) }) })
3767
- ]
3768
- },
3769
- `${a.chainId}-${idx}`
3770
- );
3771
- }) })
3720
+ };
3721
+ var DepositSkeleton = () => {
3722
+ return /* @__PURE__ */ jsxs("div", { className: "volr:animate-pulse", children: [
3723
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
3724
+ /* @__PURE__ */ jsx("div", { className: "volr:h-7 volr:w-24 volr:rounded volr:mb-2 volr-bg-tertiary" }),
3725
+ /* @__PURE__ */ jsx("div", { className: "volr:h-8 volr:w-36 volr:rounded-lg volr-bg-secondary" })
3726
+ ] }),
3727
+ /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsx("div", { className: "volr:rounded-xl volr:p-3 volr:border volr-bg-secondary volr-border", children: /* @__PURE__ */ jsx("div", { className: "volr:w-[200px] volr:h-[200px] volr:rounded-lg volr-bg-tertiary" }) }) }),
3728
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
3729
+ /* @__PURE__ */ jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr-bg-tertiary" }),
3730
+ /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-32 volr:rounded volr-bg-tertiary" })
3731
+ ] }),
3732
+ /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: /* @__PURE__ */ jsx("div", { className: "volr:border volr:rounded-lg volr:p-3 volr-bg-secondary volr-border", children: /* @__PURE__ */ jsx("div", { className: "volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-48 volr:rounded volr-bg-tertiary" }) }) }) }),
3733
+ /* @__PURE__ */ jsx("div", { className: "volr:text-center volr:pt-3 volr:border-t volr:mt-3 volr-border", children: /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-44 volr:rounded volr:mx-auto volr-bg-secondary" }) })
3772
3734
  ] });
3773
- }
3774
- var TextLinkButton = React13.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
3775
- return /* @__PURE__ */ jsxs(
3776
- "button",
3777
- {
3778
- ref,
3779
- type: "button",
3780
- className: cn(
3781
- "volr:underline volr:transition-colors volr-text-secondary",
3782
- className
3783
- ),
3784
- ...props,
3785
- children: [
3786
- children,
3787
- showArrow && " \u2192"
3788
- ]
3735
+ };
3736
+ function DepositQRView(props) {
3737
+ const { t } = useI18n();
3738
+ const { config } = useVolrContext();
3739
+ const { client } = useInternalAuth();
3740
+ const [chainName, setChainName] = useState(null);
3741
+ const [showOtherTokenModal, setShowOtherTokenModal] = useState(false);
3742
+ const [showToast, setShowToast] = useState(false);
3743
+ const [toastData, setToastData] = useState(null);
3744
+ const [viewMode, setViewMode] = useState("qr");
3745
+ const eip681 = `ethereum:${props.address}`;
3746
+ const status = useDepositListener({
3747
+ chainId: props.chainId,
3748
+ asset: props.asset === "native" ? { kind: "native" } : {
3749
+ kind: "erc20",
3750
+ token: {
3751
+ address: props.asset.address,
3752
+ decimals: props.asset.decimals
3753
+ }
3754
+ },
3755
+ address: props.address
3756
+ });
3757
+ useEffect(() => {
3758
+ if (status.state === "detected") {
3759
+ setToastData({
3760
+ previousBalance: status.previousBalance,
3761
+ newBalance: status.newBalance,
3762
+ delta: status.delta
3763
+ });
3764
+ setShowToast(true);
3789
3765
  }
3766
+ }, [status]);
3767
+ const getNetworkInfo = useCallback(
3768
+ createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
3769
+ [client, config.rpcOverrides]
3790
3770
  );
3791
- });
3792
- TextLinkButton.displayName = "TextLinkButton";
3793
- var OtherTokenModal = ({
3794
- open,
3795
- onOpenChange
3796
- }) => {
3797
- return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, children: [
3798
- /* @__PURE__ */ jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
3799
- /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
3800
- /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-semibold volr:mb-2", children: "Coming Soon" }),
3801
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr-text-secondary", children: "Swap and bridge recommendations will be available here soon." })
3802
- ] })
3803
- ] });
3804
- };
3805
-
3806
- // ../node_modules/viem/_esm/errors/unit.js
3807
- init_base();
3808
- var InvalidDecimalNumberError = class extends BaseError {
3809
- constructor({ value }) {
3810
- super(`Number \`${value}\` is not a valid decimal number.`, {
3811
- name: "InvalidDecimalNumberError"
3812
- });
3813
- }
3814
- };
3815
-
3816
- // ../node_modules/viem/_esm/utils/unit/parseUnits.js
3817
- function parseUnits(value, decimals) {
3818
- if (!/^(-?)([0-9]*)\.?([0-9]*)$/.test(value))
3819
- throw new InvalidDecimalNumberError({ value });
3820
- let [integer, fraction = "0"] = value.split(".");
3821
- const negative = integer.startsWith("-");
3822
- if (negative)
3823
- integer = integer.slice(1);
3824
- fraction = fraction.replace(/(0+)$/, "");
3825
- if (decimals === 0) {
3826
- if (Math.round(Number(`.${fraction}`)) === 1)
3827
- integer = `${BigInt(integer) + 1n}`;
3828
- fraction = "";
3829
- } else if (fraction.length > decimals) {
3830
- const [left, unit, right] = [
3831
- fraction.slice(0, decimals - 1),
3832
- fraction.slice(decimals - 1, decimals),
3833
- fraction.slice(decimals)
3834
- ];
3835
- const rounded = Math.round(Number(`${unit}.${right}`));
3836
- if (rounded > 9)
3837
- fraction = `${BigInt(left) + BigInt(1)}0`.padStart(left.length + 1, "0");
3838
- else
3839
- fraction = `${left}${rounded}`;
3840
- if (fraction.length > decimals) {
3841
- fraction = fraction.slice(1);
3842
- integer = `${BigInt(integer) + 1n}`;
3843
- }
3844
- fraction = fraction.slice(0, decimals);
3845
- } else {
3846
- fraction = fraction.padEnd(decimals, "0");
3771
+ useEffect(() => {
3772
+ let cancelled = false;
3773
+ const loadChainName = async () => {
3774
+ try {
3775
+ const info = await getNetworkInfo(props.chainId, false);
3776
+ if (!cancelled) {
3777
+ setChainName(info.name);
3778
+ }
3779
+ } catch (error) {
3780
+ if (!cancelled) {
3781
+ setChainName(`Chain ${props.chainId}`);
3782
+ }
3783
+ }
3784
+ };
3785
+ loadChainName();
3786
+ return () => {
3787
+ cancelled = true;
3788
+ };
3789
+ }, [getNetworkInfo, props.chainId]);
3790
+ const tokenSymbol = props.asset === "native" ? "ETH" : props.asset.symbol;
3791
+ const displayChainName = chainName || `Chain ${props.chainId}`;
3792
+ const decimals = props.asset === "native" ? 18 : props.asset.decimals;
3793
+ if (viewMode === "wallet-transfer") {
3794
+ return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3795
+ /* @__PURE__ */ jsx(
3796
+ WalletTransferView,
3797
+ {
3798
+ chainId: props.chainId,
3799
+ asset: props.asset,
3800
+ destinationAddress: props.address,
3801
+ onBack: () => setViewMode("qr"),
3802
+ onSuccess: () => {
3803
+ setViewMode("qr");
3804
+ }
3805
+ }
3806
+ ),
3807
+ showToast && toastData && /* @__PURE__ */ jsx(
3808
+ DepositCompletedToast,
3809
+ {
3810
+ onClose: () => {
3811
+ setShowToast(false);
3812
+ setToastData(null);
3813
+ },
3814
+ previousBalance: toastData.previousBalance,
3815
+ newBalance: toastData.newBalance,
3816
+ delta: toastData.delta,
3817
+ decimals,
3818
+ symbol: tokenSymbol
3819
+ }
3820
+ )
3821
+ ] });
3847
3822
  }
3848
- return BigInt(`${negative ? "-" : ""}${integer}${fraction}`);
3823
+ return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3824
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
3825
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-2", children: t("deposit.qrTitle") }),
3826
+ /* @__PURE__ */ 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: [
3827
+ /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:font-medium", children: tokenSymbol }),
3828
+ /* @__PURE__ */ jsx("span", { className: "volr-text-muted", children: "\u2022" }),
3829
+ /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr-text-secondary", children: displayChainName })
3830
+ ] })
3831
+ ] }),
3832
+ /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3833
+ /* @__PURE__ */ 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__ */ jsx(
3834
+ "img",
3835
+ {
3836
+ alt: "Deposit QR",
3837
+ width: 200,
3838
+ height: 200,
3839
+ src: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
3840
+ eip681
3841
+ )}`,
3842
+ className: "volr:rounded-md volr:relative volr:z-10"
3843
+ }
3844
+ ) }),
3845
+ /* @__PURE__ */ jsx(DepositQRStatusOverlay, { status: status.state })
3846
+ ] }) }),
3847
+ (status.state === "listening" || status.state === "idle") && /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
3848
+ /* @__PURE__ */ jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr:animate-pulse volr-text-secondary", style: { backgroundColor: "currentColor" } }),
3849
+ /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr-text-secondary", children: t("deposit.listening") })
3850
+ ] }),
3851
+ status.state === "error" && /* @__PURE__ */ jsxs("div", { className: "volr:text-xs volr:text-center volr:mb-3 volr-error", children: [
3852
+ "Error: ",
3853
+ status.message
3854
+ ] }),
3855
+ /* @__PURE__ */ jsxs("div", { className: "volr:space-y-3", children: [
3856
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-3", children: [
3857
+ /* @__PURE__ */ 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)}` }),
3858
+ /* @__PURE__ */ jsx(
3859
+ CopyButton,
3860
+ {
3861
+ text: props.address,
3862
+ className: "volr:shrink-0 volr:absolute volr:right-2"
3863
+ }
3864
+ )
3865
+ ] }) }) }),
3866
+ status.state === "error" && /* @__PURE__ */ jsx("div", { className: "volr:text-xs volr:text-center volr:mb-4 volr-error", children: status.message })
3867
+ ] }),
3868
+ /* @__PURE__ */ jsx("div", { className: "volr:mt-4", children: /* @__PURE__ */ jsxs(
3869
+ "button",
3870
+ {
3871
+ type: "button",
3872
+ onClick: () => setViewMode("wallet-transfer"),
3873
+ 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",
3874
+ children: [
3875
+ /* @__PURE__ */ jsxs(
3876
+ "svg",
3877
+ {
3878
+ className: "volr:w-5 volr:h-5",
3879
+ viewBox: "0 0 24 24",
3880
+ fill: "none",
3881
+ stroke: "currentColor",
3882
+ strokeWidth: "1.5",
3883
+ children: [
3884
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "20", height: "14", rx: "2" }),
3885
+ /* @__PURE__ */ 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" }),
3886
+ /* @__PURE__ */ jsx("path", { d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6" })
3887
+ ]
3888
+ }
3889
+ ),
3890
+ t("deposit.useWallet")
3891
+ ]
3892
+ }
3893
+ ) }),
3894
+ /* @__PURE__ */ jsx("div", { className: "volr:text-center volr:pt-3 volr:mt-3 volr:border-t volr-border", children: /* @__PURE__ */ jsxs("span", { className: "volr:text-xs volr-text-secondary", children: [
3895
+ t("deposit.noToken"),
3896
+ " ",
3897
+ /* @__PURE__ */ jsx(
3898
+ TextLinkButton,
3899
+ {
3900
+ onClick: () => setShowOtherTokenModal(true),
3901
+ showArrow: true,
3902
+ children: t("deposit.getOtherToken")
3903
+ }
3904
+ )
3905
+ ] }) }),
3906
+ /* @__PURE__ */ jsx(
3907
+ OtherTokenModal,
3908
+ {
3909
+ open: showOtherTokenModal,
3910
+ onOpenChange: setShowOtherTokenModal
3911
+ }
3912
+ ),
3913
+ showToast && toastData && /* @__PURE__ */ jsx(
3914
+ DepositCompletedToast,
3915
+ {
3916
+ onClose: () => {
3917
+ setShowToast(false);
3918
+ setToastData(null);
3919
+ },
3920
+ previousBalance: toastData.previousBalance,
3921
+ newBalance: toastData.newBalance,
3922
+ delta: toastData.delta,
3923
+ decimals,
3924
+ symbol: tokenSymbol
3925
+ }
3926
+ )
3927
+ ] });
3849
3928
  }
3850
-
3851
- // ../node_modules/viem/_esm/index.js
3852
- init_abis();
3853
- init_formatUnits();
3854
- var DefaultWalletIcon2 = () => /* @__PURE__ */ jsxs(
3855
- "svg",
3856
- {
3857
- className: "volr:w-6 volr:h-6",
3858
- viewBox: "0 0 24 24",
3859
- fill: "none",
3860
- xmlns: "http://www.w3.org/2000/svg",
3861
- children: [
3929
+ function DepositModalBody({
3930
+ isLoading,
3931
+ error,
3932
+ depositAssets,
3933
+ evmAddress,
3934
+ selectedIdx,
3935
+ onSelectIdx
3936
+ }) {
3937
+ if (isLoading) return /* @__PURE__ */ jsx(DepositSkeleton, {});
3938
+ if (error) {
3939
+ return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3940
+ /* @__PURE__ */ jsx(DepositSkeleton, {}),
3862
3941
  /* @__PURE__ */ jsx(
3863
- "rect",
3942
+ "div",
3864
3943
  {
3865
- x: "2",
3866
- y: "6",
3867
- width: "20",
3868
- height: "14",
3869
- rx: "2",
3870
- stroke: "currentColor",
3871
- strokeWidth: "1.5"
3944
+ className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
3945
+ style: { opacity: 0.9 },
3946
+ children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-error", children: error })
3872
3947
  }
3873
- ),
3948
+ )
3949
+ ] });
3950
+ }
3951
+ if (depositAssets.length === 0) {
3952
+ return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3953
+ /* @__PURE__ */ jsx(DepositSkeleton, {}),
3874
3954
  /* @__PURE__ */ jsx(
3875
- "path",
3955
+ "div",
3876
3956
  {
3877
- 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",
3878
- fill: "currentColor"
3957
+ className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
3958
+ style: { opacity: 0.9 },
3959
+ children: /* @__PURE__ */ 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." })
3879
3960
  }
3880
- ),
3961
+ )
3962
+ ] });
3963
+ }
3964
+ if (!evmAddress) {
3965
+ return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
3966
+ /* @__PURE__ */ jsx(DepositSkeleton, {}),
3881
3967
  /* @__PURE__ */ jsx(
3882
- "path",
3968
+ "div",
3883
3969
  {
3884
- d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6",
3885
- stroke: "currentColor",
3886
- strokeWidth: "1.5"
3970
+ className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
3971
+ style: { opacity: 0.9 },
3972
+ children: /* @__PURE__ */ 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." })
3887
3973
  }
3888
3974
  )
3889
- ]
3975
+ ] });
3890
3976
  }
3891
- );
3892
- function WalletTransferView({
3893
- chainId,
3894
- asset,
3895
- destinationAddress,
3896
- onBack,
3897
- onSuccess
3898
- }) {
3899
- const { t } = useI18n();
3900
- const { config } = useVolrContext();
3901
- const { client } = useInternalAuth();
3902
- const { isDetecting, getWalletsForDisplay, hasWallet } = useEIP6963();
3903
- const [viewState, setViewState] = useState("select-wallet");
3904
- const [selectedWallet, setSelectedWallet] = useState(null);
3905
- const [connectedAddress, setConnectedAddress] = useState(null);
3906
- const [balance, setBalance] = useState(null);
3907
- const [amount, setAmount] = useState("");
3908
- const [isConnecting, setIsConnecting] = useState(false);
3909
- const [isTransferring, setIsTransferring] = useState(false);
3910
- const [error, setError] = useState(null);
3911
- const [chainName, setChainName] = useState(null);
3912
- const [currentChainId, setCurrentChainId] = useState(null);
3913
- const tokenSymbol = asset === "native" ? "ETH" : asset.symbol;
3914
- const decimals = asset === "native" ? 18 : asset.decimals;
3915
- const getNetworkInfo = useCallback(
3916
- createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
3917
- [client, config.rpcOverrides]
3918
- );
3919
- useEffect(() => {
3920
- let cancelled = false;
3921
- const loadChainName = async () => {
3922
- try {
3923
- const info = await getNetworkInfo(chainId, false);
3924
- if (!cancelled) setChainName(info.name);
3925
- } catch {
3926
- if (!cancelled) setChainName(`Chain ${chainId}`);
3977
+ if (depositAssets.length === 1) {
3978
+ return /* @__PURE__ */ jsx(
3979
+ DepositQRView,
3980
+ {
3981
+ chainId: depositAssets[0].chainId,
3982
+ asset: depositAssets[0].token,
3983
+ address: evmAddress,
3984
+ onBack: void 0
3927
3985
  }
3928
- };
3929
- loadChainName();
3930
- return () => {
3931
- cancelled = true;
3932
- };
3933
- }, [getNetworkInfo, chainId]);
3934
- const connectWallet = useCallback(async (wallet) => {
3935
- setIsConnecting(true);
3936
- setError(null);
3937
- try {
3938
- const provider = wallet.provider;
3939
- const accounts = await provider.request({ method: "eth_requestAccounts" });
3940
- if (!accounts || accounts.length === 0) {
3941
- throw new Error("No accounts found");
3986
+ );
3987
+ }
3988
+ if (selectedIdx === -1) {
3989
+ return /* @__PURE__ */ jsx(
3990
+ AssetSelectView,
3991
+ {
3992
+ assets: depositAssets,
3993
+ onSelect: (idx) => onSelectIdx(idx)
3942
3994
  }
3943
- const address = accounts[0];
3944
- setConnectedAddress(address);
3945
- setSelectedWallet(wallet);
3946
- const chainIdHex = await provider.request({ method: "eth_chainId" });
3947
- const currentChain = parseInt(chainIdHex, 16);
3948
- setCurrentChainId(currentChain);
3949
- await fetchBalance(provider, address, currentChain);
3950
- setViewState("transfer");
3951
- } catch (err) {
3952
- console.error("Failed to connect wallet:", err);
3953
- setError(err instanceof Error ? err.message : "Connection failed");
3954
- } finally {
3955
- setIsConnecting(false);
3995
+ );
3996
+ }
3997
+ const selected = depositAssets[selectedIdx];
3998
+ return /* @__PURE__ */ jsx(
3999
+ DepositQRView,
4000
+ {
4001
+ chainId: selected.chainId,
4002
+ asset: selected.token,
4003
+ address: evmAddress,
4004
+ onBack: () => onSelectIdx(-1)
3956
4005
  }
3957
- }, [chainId, asset]);
3958
- const fetchBalance = useCallback(async (provider, address, currentChain) => {
3959
- try {
3960
- if (currentChain !== chainId) {
3961
- setBalance(null);
3962
- return;
3963
- }
3964
- if (asset === "native") {
3965
- const balanceHex = await provider.request({
3966
- method: "eth_getBalance",
3967
- params: [address, "latest"]
3968
- });
3969
- setBalance(BigInt(balanceHex));
3970
- } else {
3971
- const data = `0x70a08231000000000000000000000000${address.slice(2)}`;
3972
- const result = await provider.request({
3973
- method: "eth_call",
3974
- params: [{ to: asset.address, data }, "latest"]
3975
- });
3976
- setBalance(BigInt(result));
3977
- }
3978
- } catch (err) {
3979
- console.error("Failed to fetch balance:", err);
3980
- setBalance(BigInt(0));
4006
+ );
4007
+ }
4008
+ function ChevronRightIcon({ className }) {
4009
+ return /* @__PURE__ */ jsx(
4010
+ "svg",
4011
+ {
4012
+ xmlns: "http://www.w3.org/2000/svg",
4013
+ viewBox: "0 0 20 20",
4014
+ fill: "currentColor",
4015
+ className,
4016
+ children: /* @__PURE__ */ jsx(
4017
+ "path",
4018
+ {
4019
+ fillRule: "evenodd",
4020
+ 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",
4021
+ clipRule: "evenodd"
4022
+ }
4023
+ )
3981
4024
  }
3982
- }, [chainId, asset]);
3983
- const switchNetwork = useCallback(async () => {
3984
- if (!selectedWallet?.provider) return;
3985
- try {
3986
- await selectedWallet.provider.request({
3987
- method: "wallet_switchEthereumChain",
3988
- params: [{ chainId: `0x${chainId.toString(16)}` }]
3989
- });
3990
- const chainIdHex = await selectedWallet.provider.request({ method: "eth_chainId" });
3991
- const currentChain = parseInt(chainIdHex, 16);
3992
- setCurrentChainId(currentChain);
3993
- if (connectedAddress) {
3994
- await fetchBalance(selectedWallet.provider, connectedAddress, currentChain);
3995
- }
3996
- } catch (err) {
3997
- console.error("Failed to switch network:", err);
3998
- setError(err instanceof Error ? err.message : "Failed to switch network");
4025
+ );
4026
+ }
4027
+ function WalletIcon2({ className }) {
4028
+ return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ 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" }) });
4029
+ }
4030
+ function ArrowDownIcon({ className }) {
4031
+ return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" }) });
4032
+ }
4033
+ function ArrowUpIcon({ className }) {
4034
+ return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" }) });
4035
+ }
4036
+ function ClockIcon({ className }) {
4037
+ return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }) });
4038
+ }
4039
+ function UserIcon({ className }) {
4040
+ return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ 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" }) });
4041
+ }
4042
+ function MenuItem({ icon, label, description, onClick, isFirst, isLast }) {
4043
+ return /* @__PURE__ */ jsxs(
4044
+ "button",
4045
+ {
4046
+ type: "button",
4047
+ onClick,
4048
+ 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"}`,
4049
+ children: [
4050
+ /* @__PURE__ */ 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 }),
4051
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
4052
+ /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: label }),
4053
+ description && /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400", children: description })
4054
+ ] }),
4055
+ /* @__PURE__ */ jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
4056
+ ]
3999
4057
  }
4000
- }, [selectedWallet, chainId, connectedAddress, fetchBalance]);
4001
- const executeTransfer = useCallback(async () => {
4002
- if (!selectedWallet?.provider || !connectedAddress || !amount) return;
4003
- setIsTransferring(true);
4004
- setError(null);
4005
- try {
4006
- const amountWei = parseUnits(amount, decimals);
4007
- if (balance !== null && amountWei > balance) {
4008
- setError(t("deposit.walletTransfer.insufficientBalance"));
4009
- setIsTransferring(false);
4010
- return;
4011
- }
4012
- let txHash;
4013
- if (asset === "native") {
4014
- txHash = await selectedWallet.provider.request({
4015
- method: "eth_sendTransaction",
4016
- params: [{
4017
- from: connectedAddress,
4018
- to: destinationAddress,
4019
- value: `0x${amountWei.toString(16)}`
4020
- }]
4021
- });
4022
- } else {
4023
- const paddedTo = destinationAddress.slice(2).padStart(64, "0");
4024
- const paddedAmount = amountWei.toString(16).padStart(64, "0");
4025
- const data = `0xa9059cbb${paddedTo}${paddedAmount}`;
4026
- txHash = await selectedWallet.provider.request({
4027
- method: "eth_sendTransaction",
4028
- params: [{
4029
- from: connectedAddress,
4030
- to: asset.address,
4031
- data
4032
- }]
4033
- });
4058
+ );
4059
+ }
4060
+ function AccountMainView({
4061
+ totalUsd,
4062
+ balances,
4063
+ isLoading,
4064
+ paymentEnabled,
4065
+ onNavigate,
4066
+ onLogout,
4067
+ isLoggingOut
4068
+ }) {
4069
+ const { t } = useI18n();
4070
+ const formattedUsd = isLoading ? "\u2014" : totalUsd.toLocaleString("en-US", {
4071
+ style: "currency",
4072
+ currency: "USD",
4073
+ minimumFractionDigits: 2,
4074
+ maximumFractionDigits: 2
4075
+ });
4076
+ const tokensWithBalance = balances.filter((b) => b.balanceRaw > 0n).length;
4077
+ const assetsDescription = isLoading ? void 0 : tokensWithBalance > 0 ? `${tokensWithBalance} ${tokensWithBalance === 1 ? "token" : "tokens"}` : void 0;
4078
+ const menuItems = [
4079
+ {
4080
+ key: "assets",
4081
+ icon: /* @__PURE__ */ jsx(WalletIcon2, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4082
+ label: t("account.menu.assets"),
4083
+ description: assetsDescription,
4084
+ view: "assets"
4085
+ },
4086
+ {
4087
+ key: "deposit",
4088
+ icon: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4089
+ label: t("account.menu.deposit"),
4090
+ view: "deposit"
4091
+ },
4092
+ {
4093
+ key: "withdraw",
4094
+ icon: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4095
+ label: t("account.menu.withdraw"),
4096
+ view: "withdraw"
4097
+ },
4098
+ ...paymentEnabled ? [
4099
+ {
4100
+ key: "payments",
4101
+ icon: /* @__PURE__ */ jsx(ClockIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4102
+ label: t("account.menu.payments"),
4103
+ view: "payments"
4034
4104
  }
4035
- console.log("Transfer tx hash:", txHash);
4036
- onSuccess?.();
4037
- } catch (err) {
4038
- console.error("Transfer failed:", err);
4039
- setError(err instanceof Error ? err.message : "Transfer failed");
4040
- } finally {
4041
- setIsTransferring(false);
4042
- }
4043
- }, [selectedWallet, connectedAddress, amount, decimals, balance, asset, destinationAddress, onSuccess, t]);
4044
- const setMaxAmount = useCallback(() => {
4045
- if (balance !== null) {
4046
- const formatted = formatUnits(balance, decimals);
4047
- setAmount(formatted);
4105
+ ] : [],
4106
+ {
4107
+ key: "account",
4108
+ icon: /* @__PURE__ */ jsx(UserIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-600" }),
4109
+ label: t("account.menu.account"),
4110
+ view: "account"
4048
4111
  }
4049
- }, [balance, decimals]);
4050
- const wallets = getWalletsForDisplay();
4051
- const isWrongNetwork = currentChainId !== null && currentChainId !== chainId;
4052
- const formattedBalance = balance !== null ? formatUnits(balance, decimals) : null;
4053
- if (viewState === "select-wallet") {
4054
- return /* @__PURE__ */ jsxs("div", { children: [
4055
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
4056
- /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
4057
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.selectWallet") })
4058
- ] }),
4059
- isDetecting && /* @__PURE__ */ jsxs("div", { className: "volr:text-center volr:py-8", children: [
4060
- /* @__PURE__ */ 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" }),
4061
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-3", children: t("common.loading") })
4062
- ] }),
4063
- !isDetecting && !hasWallet && /* @__PURE__ */ jsx("div", { className: "volr:text-center volr:py-8", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: t("deposit.walletTransfer.noWallets") }) }),
4064
- !isDetecting && wallets.length > 0 && /* @__PURE__ */ jsx("div", { className: "volr:space-y-2", children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
4065
- "button",
4066
- {
4067
- type: "button",
4068
- onClick: () => connectWallet(wallet),
4069
- disabled: isConnecting,
4070
- 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",
4071
- children: [
4072
- /* @__PURE__ */ 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__ */ jsx(
4073
- "img",
4074
- {
4075
- src: wallet.icon,
4076
- alt: wallet.name,
4077
- className: "volr:w-7 volr:h-7"
4078
- }
4079
- ) : /* @__PURE__ */ jsx("div", { className: "volr:text-slate-400", children: /* @__PURE__ */ jsx(DefaultWalletIcon2, {}) }) }),
4080
- /* @__PURE__ */ jsx("span", { className: "volr:flex-1 volr:text-left volr:font-medium volr:text-slate-900", children: wallet.name }),
4081
- /* @__PURE__ */ jsx(
4082
- "svg",
4083
- {
4084
- className: "volr:w-5 volr:h-5 volr:text-slate-400",
4085
- fill: "none",
4086
- viewBox: "0 0 24 24",
4087
- stroke: "currentColor",
4088
- children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
4089
- }
4090
- )
4091
- ]
4092
- },
4093
- wallet.id
4094
- )) }),
4095
- error && /* @__PURE__ */ jsx("div", { className: "volr:mt-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
4096
- /* @__PURE__ */ jsx("div", { className: "volr:mt-6 volr:pt-4 volr:border-t volr:border-slate-200", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onBack, className: "volr:w-full", children: t("common.back") }) })
4097
- ] });
4098
- }
4112
+ ];
4099
4113
  return /* @__PURE__ */ jsxs("div", { children: [
4100
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
4101
- /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-1", children: t("deposit.walletTransfer.title") }),
4102
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4103
- selectedWallet?.icon && /* @__PURE__ */ jsx("img", { src: selectedWallet.icon, alt: "", className: "volr:w-5 volr:h-5 volr:rounded" }),
4104
- /* @__PURE__ */ jsxs("span", { className: "volr:text-sm volr:text-slate-500", children: [
4105
- connectedAddress?.slice(0, 6),
4106
- "...",
4107
- connectedAddress?.slice(-4)
4108
- ] })
4109
- ] })
4110
- ] }),
4111
- isWrongNetwork && /* @__PURE__ */ jsxs("div", { className: "volr:mb-4 volr:p-3 volr:bg-amber-50 volr:border volr:border-amber-200 volr:rounded-lg", children: [
4112
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-amber-700 volr:mb-2", children: t("deposit.walletTransfer.wrongNetwork", { network: chainName || `Chain ${chainId}` }) }),
4113
- /* @__PURE__ */ jsx(
4114
- Button,
4115
- {
4116
- variant: "secondary",
4117
- size: "sm",
4118
- onClick: switchNetwork,
4119
- className: "volr:w-full",
4120
- children: t("deposit.walletTransfer.switchNetwork")
4121
- }
4122
- )
4123
- ] }),
4124
- /* @__PURE__ */ jsx("div", { className: "volr:mb-4 volr:p-4 volr:bg-slate-50 volr:rounded-xl volr:border volr:border-slate-200", children: /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between", children: [
4125
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4126
- /* @__PURE__ */ jsx("span", { className: "volr:text-base volr:font-semibold", children: tokenSymbol }),
4127
- /* @__PURE__ */ 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}` })
4128
- ] }),
4129
- /* @__PURE__ */ jsxs("div", { className: "volr:text-right", children: [
4130
- /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-500", children: t("deposit.walletTransfer.balance") }),
4131
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-mono volr:font-medium", children: isWrongNetwork ? "-" : formattedBalance ? `${Number(formattedBalance).toFixed(4)}` : "..." })
4132
- ] })
4133
- ] }) }),
4134
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
4135
- /* @__PURE__ */ jsx("label", { className: "volr:block volr:text-sm volr:font-medium volr:text-slate-700 volr:mb-2", children: t("deposit.walletTransfer.amount") }),
4136
- /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4137
- /* @__PURE__ */ jsx(
4138
- "input",
4139
- {
4140
- type: "text",
4141
- inputMode: "decimal",
4142
- value: amount,
4143
- onChange: (e) => setAmount(e.target.value),
4144
- placeholder: t("deposit.walletTransfer.amountPlaceholder"),
4145
- disabled: isWrongNetwork,
4146
- 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"
4147
- }
4148
- ),
4149
- /* @__PURE__ */ jsx(
4150
- "button",
4151
- {
4152
- type: "button",
4153
- onClick: setMaxAmount,
4154
- disabled: isWrongNetwork || balance === null,
4155
- 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",
4156
- children: t("deposit.walletTransfer.max")
4157
- }
4158
- )
4159
- ] })
4114
+ /* @__PURE__ */ 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: [
4115
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-500 volr:mb-0.5", children: t("account.totalBalance") }),
4116
+ isLoading ? /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "volr:h-8 volr:w-32 volr:bg-slate-200 volr:rounded" }) }) : /* @__PURE__ */ jsx("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900", children: formattedUsd })
4160
4117
  ] }),
4161
- error && /* @__PURE__ */ jsx("div", { className: "volr:mb-4 volr:p-3 volr:bg-red-50 volr:border volr:border-red-200 volr:rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-600", children: error }) }),
4162
- /* @__PURE__ */ jsx(
4163
- Button,
4118
+ /* @__PURE__ */ jsx("div", { children: menuItems.map((item, index) => /* @__PURE__ */ jsx(
4119
+ MenuItem,
4164
4120
  {
4165
- onClick: executeTransfer,
4166
- disabled: isTransferring || !amount || isWrongNetwork,
4167
- className: "volr:w-full",
4168
- children: isTransferring ? t("deposit.walletTransfer.transferring") : t("deposit.walletTransfer.transfer")
4169
- }
4170
- ),
4171
- /* @__PURE__ */ jsx("div", { className: "volr:mt-3", children: /* @__PURE__ */ jsx(
4172
- Button,
4121
+ icon: item.icon,
4122
+ label: item.label,
4123
+ description: item.description,
4124
+ onClick: () => onNavigate(item.view),
4125
+ isFirst: index === 0,
4126
+ isLast: index === menuItems.length - 1
4127
+ },
4128
+ item.key
4129
+ )) }),
4130
+ /* @__PURE__ */ jsx("div", { className: "volr:mt-4 volr:pt-3", children: /* @__PURE__ */ jsx(
4131
+ "button",
4173
4132
  {
4174
- variant: "ghost",
4175
- onClick: () => setViewState("select-wallet"),
4176
- className: "volr:w-full",
4177
- children: t("common.back")
4133
+ type: "button",
4134
+ onClick: onLogout,
4135
+ disabled: isLoggingOut,
4136
+ 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",
4137
+ children: isLoggingOut ? t("common.loading") : t("account.logout")
4178
4138
  }
4179
4139
  ) })
4180
4140
  ] });
4181
4141
  }
4182
- var DepositQRStatusOverlay = ({
4183
- status
4184
- }) => {
4185
- if (status !== "detected") return null;
4186
- return /* @__PURE__ */ jsxs(Fragment, { children: [
4187
- /* @__PURE__ */ jsx(
4188
- "div",
4189
- {
4190
- className: "volr:absolute volr:inset-0 volr:rounded-2xl volr:pointer-events-none",
4191
- style: {
4192
- boxShadow: "0 0 0 4px rgba(16, 185, 129, 0.3), 0 0 30px rgba(16, 185, 129, 0.4)",
4193
- animation: "volrPulseGlow 1.5s ease-out infinite"
4194
- }
4195
- }
4196
- ),
4197
- /* @__PURE__ */ jsxs("div", { className: "volr:absolute volr:inset-0 volr:overflow-visible volr:pointer-events-none volr:-z-10", children: [
4198
- /* @__PURE__ */ jsx(
4199
- "div",
4200
- {
4201
- className: "volr:absolute volr:w-48 volr:h-48 volr:rounded-full volr:opacity-0",
4202
- style: {
4203
- background: "radial-gradient(circle, rgba(16,185,129,0.7) 0%, rgba(16,185,129,0) 60%)",
4204
- filter: "blur(50px)",
4205
- top: "5%",
4206
- left: "0%",
4207
- animation: "volrGlowPulse 1.8s ease-out forwards"
4208
- }
4209
- }
4210
- ),
4211
- /* @__PURE__ */ jsx(
4212
- "div",
4142
+ function TokenRow({ token }) {
4143
+ return /* @__PURE__ */ 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: [
4144
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
4145
+ /* @__PURE__ */ 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__ */ jsx(
4146
+ "img",
4213
4147
  {
4214
- className: "volr:absolute volr:w-44 volr:h-44 volr:rounded-full volr:opacity-0",
4215
- style: {
4216
- background: "radial-gradient(circle, rgba(6,182,212,0.65) 0%, rgba(6,182,212,0) 60%)",
4217
- filter: "blur(45px)",
4218
- bottom: "10%",
4219
- right: "-5%",
4220
- animation: "volrGlowPulse 2s ease-out 0.1s forwards"
4221
- }
4148
+ src: token.iconUrl,
4149
+ alt: token.symbol,
4150
+ className: "volr:w-full volr:h-full volr:object-cover"
4222
4151
  }
4223
- ),
4152
+ ) : /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
4153
+ /* @__PURE__ */ jsxs("div", { children: [
4154
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol }),
4155
+ /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4156
+ "Chain ",
4157
+ token.chainId
4158
+ ] })
4159
+ ] })
4160
+ ] }),
4161
+ /* @__PURE__ */ jsx("div", { className: "volr:text-right", children: token.isLoading ? /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" }) }) : token.error ? /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-red-500", children: "Error" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4162
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.balance }),
4163
+ token.balanceUsd !== void 0 && token.balanceUsd > 0 && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4164
+ "$",
4165
+ token.balanceUsd.toFixed(2)
4166
+ ] })
4167
+ ] }) })
4168
+ ] });
4169
+ }
4170
+ function BalanceDetailView({
4171
+ balances,
4172
+ isLoading
4173
+ }) {
4174
+ const { t } = useI18n();
4175
+ if (isLoading && balances.length === 0) {
4176
+ return /* @__PURE__ */ jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
4177
+ /* @__PURE__ */ jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-200" }),
4178
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex-1", children: [
4179
+ /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded volr:mb-1" }),
4180
+ /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-12 volr:bg-slate-100 volr:rounded" })
4181
+ ] }),
4182
+ /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
4183
+ ] }, i)) }) });
4184
+ }
4185
+ if (balances.length === 0) {
4186
+ return /* @__PURE__ */ jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.noAssets") }) });
4187
+ }
4188
+ return /* @__PURE__ */ jsxs("div", { children: [
4189
+ /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.assets") }),
4190
+ /* @__PURE__ */ jsx("div", { children: balances.map((token) => /* @__PURE__ */ jsx(TokenRow, { token }, token.id)) })
4191
+ ] });
4192
+ }
4193
+ var Input = React13.forwardRef(
4194
+ ({ leftIcon, error, className, style, disabled, ...props }, ref) => {
4195
+ return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4196
+ leftIcon && /* @__PURE__ */ 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 }),
4224
4197
  /* @__PURE__ */ jsx(
4225
- "div",
4198
+ "input",
4226
4199
  {
4227
- className: "volr:absolute volr:w-40 volr:h-40 volr:rounded-full volr:opacity-0",
4228
- style: {
4229
- background: "radial-gradient(circle, rgba(20,184,166,0.6) 0%, rgba(20,184,166,0) 60%)",
4230
- filter: "blur(40px)",
4231
- top: "50%",
4232
- left: "50%",
4233
- transform: "translateX(-50%)",
4234
- animation: "volrGlowPulse 2.2s ease-out 0.2s forwards"
4235
- }
4200
+ ref,
4201
+ disabled,
4202
+ className: cn(
4203
+ "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",
4204
+ "volr:border volr:border-slate-300 focus:volr:border-slate-400 focus:volr:ring-1 focus:volr:ring-slate-400",
4205
+ leftIcon ? "volr:pl-11 volr:pr-3" : "volr:px-3",
4206
+ error && "volr:border-red-500 focus:volr:border-red-500 focus:volr:ring-red-500",
4207
+ className
4208
+ ),
4209
+ style,
4210
+ ...props
4236
4211
  }
4237
4212
  )
4238
- ] }),
4239
- /* @__PURE__ */ jsx(
4240
- "div",
4241
- {
4242
- 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",
4243
- style: {
4244
- animation: "volrBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards"
4245
- },
4246
- children: /* @__PURE__ */ jsx(
4247
- "svg",
4248
- {
4249
- width: "20",
4250
- height: "20",
4251
- viewBox: "0 0 24 24",
4252
- fill: "none",
4253
- stroke: "white",
4254
- strokeWidth: "3",
4255
- strokeLinecap: "round",
4256
- strokeLinejoin: "round",
4257
- children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
4258
- }
4259
- )
4260
- }
4261
- ),
4262
- /* @__PURE__ */ jsxs("div", { className: "volr:absolute volr:inset-0 volr:pointer-events-none volr:overflow-visible", children: [
4263
- /* @__PURE__ */ jsx(
4264
- "div",
4265
- {
4266
- className: "volr:absolute volr:w-2 volr:h-2 volr:bg-emerald-400 volr:rounded-full volr:opacity-0",
4267
- style: {
4268
- top: "20%",
4269
- left: "20%",
4270
- animation: "volrParticle1 1s ease-out forwards"
4271
- }
4272
- }
4273
- ),
4274
- /* @__PURE__ */ jsx(
4275
- "div",
4276
- {
4277
- className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-cyan-400 volr:rounded-full volr:opacity-0",
4278
- style: {
4279
- top: "30%",
4280
- right: "25%",
4281
- animation: "volrParticle2 1.2s ease-out 0.1s forwards"
4282
- }
4283
- }
4284
- ),
4285
- /* @__PURE__ */ jsx(
4286
- "div",
4287
- {
4288
- className: "volr:absolute volr:w-2 volr:h-2 volr:bg-teal-400 volr:rounded-full volr:opacity-0",
4289
- style: {
4290
- bottom: "25%",
4291
- left: "30%",
4292
- animation: "volrParticle3 1.1s ease-out 0.2s forwards"
4293
- }
4294
- }
4295
- ),
4296
- /* @__PURE__ */ jsx(
4297
- "div",
4213
+ ] });
4214
+ }
4215
+ );
4216
+ Input.displayName = "Input";
4217
+ function WithdrawView({
4218
+ balances,
4219
+ connectedWallet,
4220
+ onSuccess
4221
+ }) {
4222
+ const { t } = useI18n();
4223
+ const { withdraw, isWithdrawing, result, error, reset } = useWithdraw();
4224
+ const [step, setStep] = useState("select");
4225
+ const [selectedTokenId, setSelectedTokenId] = useState(null);
4226
+ const [toAddress, setToAddress] = useState("");
4227
+ const [amount, setAmount] = useState("");
4228
+ const [useConnectedWallet, setUseConnectedWallet] = useState(false);
4229
+ const selectedToken = useMemo(
4230
+ () => balances.find((b) => b.id === selectedTokenId),
4231
+ [balances, selectedTokenId]
4232
+ );
4233
+ const connectedAddress = useMemo(() => {
4234
+ if (!connectedWallet) return null;
4235
+ const parts = connectedWallet.split(":");
4236
+ return parts.length >= 2 ? parts[1] : null;
4237
+ }, [connectedWallet]);
4238
+ const handleSelectToken = (tokenId) => {
4239
+ setSelectedTokenId(tokenId);
4240
+ setStep("input");
4241
+ };
4242
+ const handleUseConnectedWallet = () => {
4243
+ if (connectedAddress) {
4244
+ setToAddress(connectedAddress);
4245
+ setUseConnectedWallet(true);
4246
+ }
4247
+ };
4248
+ const handleConfirm = async () => {
4249
+ if (!selectedToken || !toAddress || !amount) return;
4250
+ setStep("confirm");
4251
+ try {
4252
+ await withdraw({
4253
+ chainId: selectedToken.chainId,
4254
+ tokenAddress: selectedToken.address,
4255
+ decimals: selectedToken.decimals,
4256
+ amount,
4257
+ to: toAddress
4258
+ });
4259
+ setStep("result");
4260
+ } catch {
4261
+ setStep("result");
4262
+ }
4263
+ };
4264
+ const handleReset = () => {
4265
+ reset();
4266
+ setStep("select");
4267
+ setSelectedTokenId(null);
4268
+ setToAddress("");
4269
+ setAmount("");
4270
+ setUseConnectedWallet(false);
4271
+ };
4272
+ const isAmountValid = useMemo(() => {
4273
+ if (!amount || !selectedToken) return false;
4274
+ const num = parseFloat(amount);
4275
+ if (isNaN(num) || num <= 0) return false;
4276
+ const balance = parseFloat(selectedToken.balance.replace(/,/g, ""));
4277
+ return num <= balance;
4278
+ }, [amount, selectedToken]);
4279
+ const isAddressValid = /^0x[a-fA-F0-9]{40}$/.test(toAddress);
4280
+ if (step === "select") {
4281
+ return /* @__PURE__ */ jsxs("div", { children: [
4282
+ /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.selectToken") }),
4283
+ /* @__PURE__ */ jsx("div", { className: "volr:space-y-2", children: balances.map((token) => /* @__PURE__ */ jsxs(
4284
+ "button",
4298
4285
  {
4299
- className: "volr:absolute volr:w-1.5 volr:h-1.5 volr:bg-emerald-300 volr:rounded-full volr:opacity-0",
4300
- style: {
4301
- bottom: "30%",
4302
- right: "20%",
4303
- animation: "volrParticle4 1.3s ease-out 0.15s forwards"
4304
- }
4305
- }
4306
- )
4307
- ] }),
4308
- /* @__PURE__ */ jsx("style", { children: `
4309
- @keyframes volrGlowPulse {
4310
- 0% {
4311
- transform: scale(0.5);
4312
- opacity: 0;
4313
- }
4314
- 40% {
4315
- opacity: 1;
4316
- }
4317
- 100% {
4318
- transform: scale(1.6);
4319
- opacity: 0;
4320
- }
4321
- }
4322
- @keyframes volrBounceIn {
4323
- 0% {
4324
- transform: scale(0);
4325
- opacity: 0;
4326
- }
4327
- 50% {
4328
- transform: scale(1.2);
4329
- }
4330
- 70% {
4331
- transform: scale(0.9);
4332
- }
4333
- 100% {
4334
- transform: scale(1);
4335
- opacity: 1;
4336
- }
4337
- }
4338
- @keyframes volrPulseGlow {
4339
- 0%, 100% {
4340
- opacity: 0.6;
4341
- }
4342
- 50% {
4343
- opacity: 1;
4344
- }
4345
- }
4346
- @keyframes volrParticle1 {
4347
- 0% {
4348
- transform: translate(0, 0) scale(0);
4349
- opacity: 0;
4350
- }
4351
- 20% {
4352
- opacity: 1;
4353
- }
4354
- 100% {
4355
- transform: translate(-20px, -30px) scale(1);
4356
- opacity: 0;
4357
- }
4358
- }
4359
- @keyframes volrParticle2 {
4360
- 0% {
4361
- transform: translate(0, 0) scale(0);
4362
- opacity: 0;
4363
- }
4364
- 20% {
4365
- opacity: 1;
4366
- }
4367
- 100% {
4368
- transform: translate(25px, -35px) scale(1);
4369
- opacity: 0;
4370
- }
4371
- }
4372
- @keyframes volrParticle3 {
4373
- 0% {
4374
- transform: translate(0, 0) scale(0);
4375
- opacity: 0;
4376
- }
4377
- 20% {
4378
- opacity: 1;
4379
- }
4380
- 100% {
4381
- transform: translate(-30px, 25px) scale(1);
4382
- opacity: 0;
4383
- }
4384
- }
4385
- @keyframes volrParticle4 {
4386
- 0% {
4387
- transform: translate(0, 0) scale(0);
4388
- opacity: 0;
4389
- }
4390
- 20% {
4391
- opacity: 1;
4286
+ type: "button",
4287
+ onClick: () => handleSelectToken(token.id),
4288
+ disabled: token.balanceRaw === 0n,
4289
+ 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",
4290
+ children: [
4291
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
4292
+ /* @__PURE__ */ 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__ */ jsx(
4293
+ "img",
4294
+ {
4295
+ src: token.iconUrl,
4296
+ alt: token.symbol,
4297
+ className: "volr:w-full volr:h-full volr:object-cover"
4298
+ }
4299
+ ) : /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: token.symbol.slice(0, 2) }) }),
4300
+ /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.symbol })
4301
+ ] }),
4302
+ /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:text-slate-500", children: token.balance })
4303
+ ]
4304
+ },
4305
+ token.id
4306
+ )) })
4307
+ ] });
4308
+ }
4309
+ if (step === "input" && selectedToken) {
4310
+ return /* @__PURE__ */ jsxs("div", { children: [
4311
+ /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.withdraw.title") }),
4312
+ /* @__PURE__ */ 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: [
4313
+ /* @__PURE__ */ 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__ */ jsx(
4314
+ "img",
4315
+ {
4316
+ src: selectedToken.iconUrl,
4317
+ alt: selectedToken.symbol,
4318
+ className: "volr:w-full volr:h-full volr:object-cover"
4392
4319
  }
4393
- 100% {
4394
- transform: translate(30px, 30px) scale(1);
4395
- opacity: 0;
4320
+ ) : /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr:font-medium volr:text-slate-500", children: selectedToken.symbol.slice(0, 2) }) }),
4321
+ /* @__PURE__ */ jsxs("div", { children: [
4322
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: selectedToken.symbol }),
4323
+ /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4324
+ t("account.withdraw.available"),
4325
+ ": ",
4326
+ selectedToken.balance
4327
+ ] })
4328
+ ] })
4329
+ ] }),
4330
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
4331
+ /* @__PURE__ */ jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.toAddress") }),
4332
+ /* @__PURE__ */ jsx(
4333
+ Input,
4334
+ {
4335
+ type: "text",
4336
+ placeholder: "0x...",
4337
+ value: toAddress,
4338
+ onChange: (e) => {
4339
+ setToAddress(e.target.value);
4340
+ setUseConnectedWallet(false);
4341
+ }
4396
4342
  }
4397
- }
4398
- ` })
4399
- ] });
4400
- };
4401
- var DepositCompletedToast = ({
4402
- onClose,
4403
- previousBalance,
4404
- newBalance,
4405
- delta,
4406
- decimals,
4407
- symbol
4408
- }) => {
4409
- const { t } = useI18n();
4410
- const [expanded, setExpanded] = useState(false);
4411
- const formatAmount = (amount) => {
4412
- const divisor = BigInt(10 ** decimals);
4413
- const whole = amount / divisor;
4414
- const fraction = amount % divisor;
4415
- const fractionStr = fraction.toString().padStart(decimals, "0").slice(0, 4);
4416
- const trimmedFraction = fractionStr.replace(/0+$/, "");
4417
- return trimmedFraction ? `${whole}.${trimmedFraction}` : `${whole}`;
4418
- };
4419
- const formattedDelta = formatAmount(delta);
4420
- return /* @__PURE__ */ jsxs(Fragment, { children: [
4421
- /* @__PURE__ */ jsx(
4422
- "div",
4423
- {
4424
- className: "volr:absolute volr:inset-0 volr:bg-black/40 volr:z-40",
4425
- onClick: onClose,
4426
- style: { animation: "volrFadeIn 0.2s ease-out" }
4427
- }
4428
- ),
4429
- /* @__PURE__ */ jsxs(
4430
- "div",
4431
- {
4432
- className: cn(
4433
- // Position: centered at bottom with margin
4434
- "volr:absolute volr:bottom-3 volr:left-3 volr:right-3 volr:z-50",
4435
- // Appearance: floating card
4436
- "volr:bg-white volr:rounded-2xl",
4437
- // Border: full border for clear card definition
4438
- "volr:border volr:border-slate-200",
4439
- // Shadow: strong shadow for floating effect
4440
- "volr:shadow-2xl",
4441
- // Animation
4442
- "volr:transition-all volr:duration-300 volr:ease-out"
4443
4343
  ),
4444
- style: {
4445
- animation: "volrSlideUp 0.3s ease-out"
4446
- },
4447
- children: [
4448
- /* @__PURE__ */ jsx("div", { className: "volr:h-1 volr:bg-linear-to-r volr:from-emerald-400 volr:to-teal-500 volr:rounded-t-2xl" }),
4449
- /* @__PURE__ */ jsx("div", { className: "volr:p-4", children: /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-start volr:gap-3", children: [
4450
- /* @__PURE__ */ 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__ */ jsx(
4451
- "svg",
4344
+ connectedAddress && !useConnectedWallet && /* @__PURE__ */ jsx(
4345
+ "button",
4346
+ {
4347
+ type: "button",
4348
+ onClick: handleUseConnectedWallet,
4349
+ className: "volr:mt-2 volr:text-xs volr:text-slate-500 hover:volr:text-slate-700 volr:underline",
4350
+ children: t("account.withdraw.useConnectedWallet")
4351
+ }
4352
+ )
4353
+ ] }),
4354
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-6", children: [
4355
+ /* @__PURE__ */ jsx("label", { className: "volr:block volr:text-sm volr:text-slate-600 volr:mb-2", children: t("account.withdraw.amount") }),
4356
+ /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4357
+ /* @__PURE__ */ jsx(
4358
+ Input,
4359
+ {
4360
+ type: "text",
4361
+ inputMode: "decimal",
4362
+ placeholder: "0.00",
4363
+ value: amount,
4364
+ onChange: (e) => setAmount(e.target.value)
4365
+ }
4366
+ ),
4367
+ /* @__PURE__ */ jsx(
4368
+ "button",
4369
+ {
4370
+ type: "button",
4371
+ onClick: () => setAmount(selectedToken.balance.replace(/,/g, "")),
4372
+ 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",
4373
+ children: "MAX"
4374
+ }
4375
+ )
4376
+ ] })
4377
+ ] }),
4378
+ /* @__PURE__ */ jsx(
4379
+ Button,
4380
+ {
4381
+ onClick: handleConfirm,
4382
+ disabled: !isAddressValid || !isAmountValid,
4383
+ fullWidth: true,
4384
+ children: t("account.withdraw.confirm")
4385
+ }
4386
+ )
4387
+ ] });
4388
+ }
4389
+ if (step === "confirm" && selectedToken) {
4390
+ return /* @__PURE__ */ jsxs("div", { className: "volr:py-8 volr:text-center", children: [
4391
+ /* @__PURE__ */ 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" }),
4392
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-600", children: t("account.withdraw.processing") })
4393
+ ] });
4394
+ }
4395
+ if (step === "result") {
4396
+ const isSuccess = result && !error;
4397
+ return /* @__PURE__ */ jsxs("div", { className: "volr:py-8 volr:text-center", children: [
4398
+ isSuccess ? /* @__PURE__ */ jsxs(Fragment, { children: [
4399
+ /* @__PURE__ */ 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__ */ jsx(
4400
+ "svg",
4401
+ {
4402
+ className: "volr:w-6 volr:h-6 volr:text-green-600",
4403
+ fill: "none",
4404
+ viewBox: "0 0 24 24",
4405
+ stroke: "currentColor",
4406
+ children: /* @__PURE__ */ jsx(
4407
+ "path",
4452
4408
  {
4453
- width: "20",
4454
- height: "20",
4455
- viewBox: "0 0 24 24",
4456
- fill: "none",
4457
- stroke: "white",
4458
- strokeWidth: "2.5",
4459
4409
  strokeLinecap: "round",
4460
4410
  strokeLinejoin: "round",
4461
- children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
4411
+ strokeWidth: 2,
4412
+ d: "M5 13l4 4L19 7"
4462
4413
  }
4463
- ) }),
4464
- /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
4465
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-start volr:justify-between volr:gap-2 volr:mb-1", children: [
4466
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-semibold volr:text-slate-900", children: t("deposit.completed") }),
4467
- /* @__PURE__ */ jsx(
4468
- "button",
4469
- {
4470
- onClick: onClose,
4471
- 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",
4472
- "aria-label": "Close",
4473
- children: /* @__PURE__ */ jsxs(
4474
- "svg",
4475
- {
4476
- width: "14",
4477
- height: "14",
4478
- viewBox: "0 0 24 24",
4479
- fill: "none",
4480
- stroke: "currentColor",
4481
- strokeWidth: "2.5",
4482
- children: [
4483
- /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
4484
- /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
4485
- ]
4486
- }
4487
- )
4488
- }
4489
- )
4490
- ] }),
4491
- /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-700 volr:mb-3", children: t("deposit.completedAmount", { amount: formattedDelta, symbol }) }),
4492
- expanded && /* @__PURE__ */ jsxs(
4493
- "div",
4494
- {
4495
- className: "volr:space-y-2 volr:mb-3 volr:p-3 volr:rounded-lg volr:bg-slate-50 volr:border volr:border-slate-200",
4496
- style: { animation: "volrFadeIn 0.2s ease-out" },
4497
- children: [
4498
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
4499
- /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("deposit.amount") }),
4500
- /* @__PURE__ */ jsxs("span", { className: "volr:font-mono volr:text-emerald-600 volr:font-semibold", children: [
4501
- "+",
4502
- formattedDelta,
4503
- " ",
4504
- symbol
4505
- ] })
4506
- ] }),
4507
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs", children: [
4508
- /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("deposit.previousBalance") }),
4509
- /* @__PURE__ */ jsxs("span", { className: "volr:font-mono volr:text-slate-500", children: [
4510
- formatAmount(previousBalance),
4511
- " ",
4512
- symbol
4513
- ] })
4514
- ] }),
4515
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-xs volr:pt-2 volr:border-t volr:border-slate-200", children: [
4516
- /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("deposit.newBalance") }),
4517
- /* @__PURE__ */ jsxs("span", { className: "volr:font-mono volr:font-semibold volr:text-slate-900", children: [
4518
- formatAmount(newBalance),
4519
- " ",
4520
- symbol
4521
- ] })
4522
- ] })
4523
- ]
4524
- }
4525
- ),
4526
- /* @__PURE__ */ jsx(
4527
- "button",
4528
- {
4529
- onClick: () => setExpanded(!expanded),
4530
- 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",
4531
- children: expanded ? t("deposit.seeLess") : t("deposit.seeMore")
4532
- }
4533
- )
4534
- ] })
4535
- ] }) })
4536
- ]
4537
- }
4538
- ),
4539
- /* @__PURE__ */ jsx("style", { children: `
4540
- @keyframes volrSlideUp {
4541
- from {
4542
- transform: translateY(20px);
4543
- opacity: 0;
4544
- }
4545
- to {
4546
- transform: translateY(0);
4547
- opacity: 1;
4548
- }
4549
- }
4550
- @keyframes volrFadeIn {
4551
- from {
4552
- opacity: 0;
4414
+ )
4553
4415
  }
4554
- to {
4555
- opacity: 1;
4416
+ ) }),
4417
+ /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.success") }),
4418
+ /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-500 volr:mb-6", children: [
4419
+ amount,
4420
+ " ",
4421
+ selectedToken?.symbol,
4422
+ " ",
4423
+ t("account.withdraw.sent")
4424
+ ] })
4425
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4426
+ /* @__PURE__ */ 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__ */ jsx(
4427
+ "svg",
4428
+ {
4429
+ className: "volr:w-6 volr:h-6 volr:text-red-600",
4430
+ fill: "none",
4431
+ viewBox: "0 0 24 24",
4432
+ stroke: "currentColor",
4433
+ children: /* @__PURE__ */ jsx(
4434
+ "path",
4435
+ {
4436
+ strokeLinecap: "round",
4437
+ strokeLinejoin: "round",
4438
+ strokeWidth: 2,
4439
+ d: "M6 18L18 6M6 6l12 12"
4440
+ }
4441
+ )
4556
4442
  }
4557
- }
4558
- ` })
4559
- ] });
4560
- };
4561
- var DepositSkeleton = () => {
4562
- return /* @__PURE__ */ jsxs("div", { className: "volr:animate-pulse", children: [
4563
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
4564
- /* @__PURE__ */ jsx("div", { className: "volr:h-7 volr:w-24 volr:rounded volr:mb-2 volr-bg-tertiary" }),
4565
- /* @__PURE__ */ jsx("div", { className: "volr:h-8 volr:w-36 volr:rounded-lg volr-bg-secondary" })
4566
- ] }),
4567
- /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsx("div", { className: "volr:rounded-xl volr:p-3 volr:border volr-bg-secondary volr-border", children: /* @__PURE__ */ jsx("div", { className: "volr:w-[200px] volr:h-[200px] volr:rounded-lg volr-bg-tertiary" }) }) }),
4568
- /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
4569
- /* @__PURE__ */ jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr-bg-tertiary" }),
4570
- /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-32 volr:rounded volr-bg-tertiary" })
4571
- ] }),
4572
- /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: /* @__PURE__ */ jsx("div", { className: "volr:border volr:rounded-lg volr:p-3 volr-bg-secondary volr-border", children: /* @__PURE__ */ jsx("div", { className: "volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-48 volr:rounded volr-bg-tertiary" }) }) }) }),
4573
- /* @__PURE__ */ jsx("div", { className: "volr:text-center volr:pt-3 volr:border-t volr:mt-3 volr-border", children: /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-44 volr:rounded volr:mx-auto volr-bg-secondary" }) })
4574
- ] });
4575
- };
4576
- function DepositQRView(props) {
4443
+ ) }),
4444
+ /* @__PURE__ */ jsx("p", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-2", children: t("account.withdraw.failed") }),
4445
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-500 volr:mb-6", children: error?.message || t("account.withdraw.unknownError") })
4446
+ ] }),
4447
+ /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: isSuccess ? onSuccess : handleReset, fullWidth: true, children: isSuccess ? t("common.done") : t("common.tryAgain") })
4448
+ ] });
4449
+ }
4450
+ return null;
4451
+ }
4452
+ function PaymentRow({ payment, onClick }) {
4577
4453
  const { t } = useI18n();
4578
- const { config } = useVolrContext();
4579
- const { client } = useInternalAuth();
4580
- const [chainName, setChainName] = useState(null);
4581
- const [showOtherTokenModal, setShowOtherTokenModal] = useState(false);
4582
- const [showToast, setShowToast] = useState(false);
4583
- const [toastData, setToastData] = useState(null);
4584
- const [viewMode, setViewMode] = useState("qr");
4585
- const eip681 = `ethereum:${props.address}`;
4586
- const status = useDepositListener({
4587
- chainId: props.chainId,
4588
- asset: props.asset === "native" ? { kind: "native" } : {
4589
- kind: "erc20",
4590
- token: {
4591
- address: props.asset.address,
4592
- decimals: props.asset.decimals
4593
- }
4594
- },
4595
- address: props.address
4454
+ const date = new Date(payment.createdAt);
4455
+ const formattedDate = date.toLocaleDateString(void 0, {
4456
+ month: "short",
4457
+ day: "numeric",
4458
+ year: "numeric"
4596
4459
  });
4597
- useEffect(() => {
4598
- if (status.state === "detected") {
4599
- setToastData({
4600
- previousBalance: status.previousBalance,
4601
- newBalance: status.newBalance,
4602
- delta: status.delta
4603
- });
4604
- setShowToast(true);
4460
+ const statusColors = {
4461
+ CONFIRMED: "volr:bg-green-100 volr:text-green-700",
4462
+ PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
4463
+ PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
4464
+ FAILED: "volr:bg-red-100 volr:text-red-700",
4465
+ CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
4466
+ EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
4467
+ };
4468
+ return /* @__PURE__ */ jsxs(
4469
+ "button",
4470
+ {
4471
+ type: "button",
4472
+ onClick,
4473
+ 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",
4474
+ children: [
4475
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex-1 volr:min-w-0", children: [
4476
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-1", children: [
4477
+ /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900 volr:truncate", children: payment.itemName || t("account.payments.payment") }),
4478
+ /* @__PURE__ */ jsx(
4479
+ "span",
4480
+ {
4481
+ 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"}`,
4482
+ children: payment.status
4483
+ }
4484
+ )
4485
+ ] }),
4486
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400", children: formattedDate })
4487
+ ] }),
4488
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4489
+ /* @__PURE__ */ jsxs("div", { className: "volr:text-right", children: [
4490
+ /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: [
4491
+ payment.amount,
4492
+ " ",
4493
+ payment.token.symbol
4494
+ ] }),
4495
+ payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
4496
+ "$",
4497
+ parseFloat(payment.totalUsd).toFixed(2)
4498
+ ] })
4499
+ ] }),
4500
+ /* @__PURE__ */ jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
4501
+ ] })
4502
+ ]
4605
4503
  }
4606
- }, [status]);
4607
- const getNetworkInfo = useCallback(
4608
- createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
4609
- [client, config.rpcOverrides]
4610
4504
  );
4611
- useEffect(() => {
4612
- let cancelled = false;
4613
- const loadChainName = async () => {
4614
- try {
4615
- const info = await getNetworkInfo(props.chainId, false);
4616
- if (!cancelled) {
4617
- setChainName(info.name);
4618
- }
4619
- } catch (error) {
4620
- if (!cancelled) {
4621
- setChainName(`Chain ${props.chainId}`);
4622
- }
4623
- }
4624
- };
4625
- loadChainName();
4626
- return () => {
4627
- cancelled = true;
4628
- };
4629
- }, [getNetworkInfo, props.chainId]);
4630
- const tokenSymbol = props.asset === "native" ? "ETH" : props.asset.symbol;
4631
- const displayChainName = chainName || `Chain ${props.chainId}`;
4632
- const decimals = props.asset === "native" ? 18 : props.asset.decimals;
4633
- if (viewMode === "wallet-transfer") {
4634
- return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4505
+ }
4506
+ function PaymentHistoryView({ onSelectPayment }) {
4507
+ const { t } = useI18n();
4508
+ const { getPaymentHistory, isLoading: isApiLoading } = useVolrPaymentApi();
4509
+ const [payments, setPayments] = useState([]);
4510
+ const [isLoading, setIsLoading] = useState(true);
4511
+ const [error, setError] = useState(null);
4512
+ useEffect(() => {
4513
+ setIsLoading(true);
4514
+ setError(null);
4515
+ getPaymentHistory({ take: 20 }).then((result) => {
4516
+ setPayments(result.payments);
4517
+ }).catch((err) => {
4518
+ console.error("[PaymentHistoryView] Failed to fetch payments:", err);
4519
+ setError(t("account.payments.fetchError"));
4520
+ }).finally(() => {
4521
+ setIsLoading(false);
4522
+ });
4523
+ }, [getPaymentHistory, t]);
4524
+ if (isLoading || isApiLoading) {
4525
+ return /* @__PURE__ */ jsx("div", { className: "volr:py-8", children: /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse volr:space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3", children: [
4526
+ /* @__PURE__ */ jsxs("div", { children: [
4527
+ /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-32 volr:bg-slate-200 volr:rounded volr:mb-2" }),
4528
+ /* @__PURE__ */ jsx("div", { className: "volr:h-3 volr:w-20 volr:bg-slate-100 volr:rounded" })
4529
+ ] }),
4530
+ /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" })
4531
+ ] }, i)) }) });
4532
+ }
4533
+ if (error) {
4534
+ return /* @__PURE__ */ jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-500", children: error }) });
4535
+ }
4536
+ if (payments.length === 0) {
4537
+ return /* @__PURE__ */ jsx("div", { className: "volr:py-12 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-400", children: t("account.payments.noPayments") }) });
4538
+ }
4539
+ return /* @__PURE__ */ jsxs("div", { children: [
4540
+ /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.payments") }),
4541
+ /* @__PURE__ */ jsx("div", { children: payments.map((payment) => /* @__PURE__ */ jsx(
4542
+ PaymentRow,
4543
+ {
4544
+ payment,
4545
+ onClick: () => onSelectPayment(payment)
4546
+ },
4547
+ payment.id
4548
+ )) })
4549
+ ] });
4550
+ }
4551
+ function DetailRow({ label, value, copyable, mono }) {
4552
+ return /* @__PURE__ */ 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: [
4553
+ /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:text-slate-500", children: label }),
4554
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2", children: [
4635
4555
  /* @__PURE__ */ jsx(
4636
- WalletTransferView,
4556
+ "span",
4637
4557
  {
4638
- chainId: props.chainId,
4639
- asset: props.asset,
4640
- destinationAddress: props.address,
4641
- onBack: () => setViewMode("qr"),
4642
- onSuccess: () => {
4643
- setViewMode("qr");
4644
- }
4558
+ className: `volr:text-sm volr:text-slate-900 volr:text-right ${mono ? "volr:font-mono" : ""}`,
4559
+ children: value
4645
4560
  }
4646
4561
  ),
4647
- showToast && toastData && /* @__PURE__ */ jsx(
4648
- DepositCompletedToast,
4649
- {
4650
- onClose: () => {
4651
- setShowToast(false);
4652
- setToastData(null);
4653
- },
4654
- previousBalance: toastData.previousBalance,
4655
- newBalance: toastData.newBalance,
4656
- delta: toastData.delta,
4657
- decimals,
4658
- symbol: tokenSymbol
4659
- }
4660
- )
4661
- ] });
4662
- }
4663
- return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4664
- /* @__PURE__ */ jsxs("div", { className: "volr:mb-4", children: [
4665
- /* @__PURE__ */ jsx("p", { className: "volr:text-xl volr:font-semibold volr:mb-2", children: t("deposit.qrTitle") }),
4666
- /* @__PURE__ */ 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: [
4667
- /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr:font-medium", children: tokenSymbol }),
4668
- /* @__PURE__ */ jsx("span", { className: "volr-text-muted", children: "\u2022" }),
4669
- /* @__PURE__ */ jsx("span", { className: "volr:text-sm volr-text-secondary", children: displayChainName })
4670
- ] })
4671
- ] }),
4672
- /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:mb-3", children: /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4673
- /* @__PURE__ */ 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__ */ jsx(
4674
- "img",
4675
- {
4676
- alt: "Deposit QR",
4677
- width: 200,
4678
- height: 200,
4679
- src: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
4680
- eip681
4681
- )}`,
4682
- className: "volr:rounded-md volr:relative volr:z-10"
4683
- }
4684
- ) }),
4685
- /* @__PURE__ */ jsx(DepositQRStatusOverlay, { status: status.state })
4686
- ] }) }),
4687
- (status.state === "listening" || status.state === "idle") && /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-center volr:gap-2 volr:mb-3", children: [
4688
- /* @__PURE__ */ jsx("div", { className: "volr:w-1.5 volr:h-1.5 volr:rounded-full volr:animate-pulse volr-text-secondary", style: { backgroundColor: "currentColor" } }),
4689
- /* @__PURE__ */ jsx("span", { className: "volr:text-xs volr-text-secondary", children: t("deposit.listening") })
4690
- ] }),
4691
- status.state === "error" && /* @__PURE__ */ jsxs("div", { className: "volr:text-xs volr:text-center volr:mb-3 volr-error", children: [
4692
- "Error: ",
4693
- status.message
4694
- ] }),
4695
- /* @__PURE__ */ jsxs("div", { className: "volr:space-y-3", children: [
4696
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-3", children: [
4697
- /* @__PURE__ */ 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)}` }),
4562
+ copyable && /* @__PURE__ */ jsx(CopyButton, { text: value, className: "volr:shrink-0" })
4563
+ ] })
4564
+ ] });
4565
+ }
4566
+ function PaymentDetailView({ payment }) {
4567
+ const { t } = useI18n();
4568
+ const createdDate = new Date(payment.createdAt);
4569
+ const formattedCreatedAt = createdDate.toLocaleString(void 0, {
4570
+ year: "numeric",
4571
+ month: "short",
4572
+ day: "numeric",
4573
+ hour: "2-digit",
4574
+ minute: "2-digit"
4575
+ });
4576
+ const confirmedDate = payment.confirmedAt ? new Date(payment.confirmedAt) : null;
4577
+ const formattedConfirmedAt = confirmedDate ? confirmedDate.toLocaleString(void 0, {
4578
+ year: "numeric",
4579
+ month: "short",
4580
+ day: "numeric",
4581
+ hour: "2-digit",
4582
+ minute: "2-digit"
4583
+ }) : null;
4584
+ const statusColors = {
4585
+ CONFIRMED: "volr:bg-green-100 volr:text-green-700",
4586
+ PENDING: "volr:bg-yellow-100 volr:text-yellow-700",
4587
+ PROCESSING: "volr:bg-blue-100 volr:text-blue-700",
4588
+ FAILED: "volr:bg-red-100 volr:text-red-700",
4589
+ CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
4590
+ EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
4591
+ };
4592
+ const truncateHash = (hash) => {
4593
+ if (hash.length <= 16) return hash;
4594
+ return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
4595
+ };
4596
+ return /* @__PURE__ */ jsxs("div", { children: [
4597
+ /* @__PURE__ */ jsxs("div", { className: "volr:mb-6", children: [
4598
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-2 volr:mb-2", children: [
4599
+ /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: payment.itemName || t("account.payments.payment") }),
4698
4600
  /* @__PURE__ */ jsx(
4699
- CopyButton,
4601
+ "span",
4700
4602
  {
4701
- text: props.address,
4702
- className: "volr:shrink-0 volr:absolute volr:right-2"
4603
+ 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"}`,
4604
+ children: payment.status
4703
4605
  }
4704
4606
  )
4705
- ] }) }) }),
4706
- status.state === "error" && /* @__PURE__ */ jsx("div", { className: "volr:text-xs volr:text-center volr:mb-4 volr-error", children: status.message })
4607
+ ] }),
4608
+ payment.itemDescription && /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500", children: payment.itemDescription })
4707
4609
  ] }),
4708
- /* @__PURE__ */ jsx("div", { className: "volr:mt-4", children: /* @__PURE__ */ jsxs(
4709
- "button",
4710
- {
4711
- type: "button",
4712
- onClick: () => setViewMode("wallet-transfer"),
4713
- 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",
4714
- children: [
4715
- /* @__PURE__ */ jsxs(
4716
- "svg",
4717
- {
4718
- className: "volr:w-5 volr:h-5",
4719
- viewBox: "0 0 24 24",
4720
- fill: "none",
4721
- stroke: "currentColor",
4722
- strokeWidth: "1.5",
4723
- children: [
4724
- /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "20", height: "14", rx: "2" }),
4725
- /* @__PURE__ */ 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" }),
4726
- /* @__PURE__ */ jsx("path", { d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6" })
4727
- ]
4728
- }
4729
- ),
4730
- t("deposit.useWallet")
4731
- ]
4732
- }
4733
- ) }),
4734
- /* @__PURE__ */ jsx("div", { className: "volr:text-center volr:pt-3 volr:mt-3 volr:border-t volr-border", children: /* @__PURE__ */ jsxs("span", { className: "volr:text-xs volr-text-secondary", children: [
4735
- t("deposit.noToken"),
4736
- " ",
4610
+ /* @__PURE__ */ jsxs("div", { className: "volr:py-4 volr:mb-4 volr:border-y volr:border-slate-100", children: [
4611
+ /* @__PURE__ */ jsxs("p", { className: "volr:text-2xl volr:font-semibold volr:text-slate-900", children: [
4612
+ payment.amount,
4613
+ " ",
4614
+ payment.token.symbol
4615
+ ] }),
4616
+ payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-500", children: [
4617
+ "\u2248 $",
4618
+ parseFloat(payment.totalUsd).toFixed(2),
4619
+ " USD"
4620
+ ] })
4621
+ ] }),
4622
+ /* @__PURE__ */ jsxs("div", { className: "volr:space-y-1", children: [
4623
+ /* @__PURE__ */ jsx(DetailRow, { label: t("account.payments.createdAt"), value: formattedCreatedAt }),
4624
+ formattedConfirmedAt && /* @__PURE__ */ jsx(DetailRow, { label: t("account.payments.confirmedAt"), value: formattedConfirmedAt }),
4737
4625
  /* @__PURE__ */ jsx(
4738
- TextLinkButton,
4626
+ DetailRow,
4739
4627
  {
4740
- onClick: () => setShowOtherTokenModal(true),
4741
- showArrow: true,
4742
- children: t("deposit.getOtherToken")
4628
+ label: t("account.payments.token"),
4629
+ value: `${payment.token.symbol} (Chain ${payment.token.chainId})`
4630
+ }
4631
+ ),
4632
+ payment.txHash && /* @__PURE__ */ jsx(
4633
+ DetailRow,
4634
+ {
4635
+ label: t("account.payments.txHash"),
4636
+ value: truncateHash(payment.txHash),
4637
+ copyable: true,
4638
+ mono: true
4639
+ }
4640
+ ),
4641
+ payment.referenceId && /* @__PURE__ */ jsx(
4642
+ DetailRow,
4643
+ {
4644
+ label: t("account.payments.referenceId"),
4645
+ value: payment.referenceId,
4646
+ copyable: true
4743
4647
  }
4744
4648
  )
4745
- ] }) }),
4746
- /* @__PURE__ */ jsx(
4747
- OtherTokenModal,
4748
- {
4749
- open: showOtherTokenModal,
4750
- onOpenChange: setShowOtherTokenModal
4751
- }
4752
- ),
4753
- showToast && toastData && /* @__PURE__ */ jsx(
4754
- DepositCompletedToast,
4649
+ ] }),
4650
+ payment.itemImage && /* @__PURE__ */ jsx("div", { className: "volr:mt-6", children: /* @__PURE__ */ jsx(
4651
+ "img",
4755
4652
  {
4756
- onClose: () => {
4757
- setShowToast(false);
4758
- setToastData(null);
4759
- },
4760
- previousBalance: toastData.previousBalance,
4761
- newBalance: toastData.newBalance,
4762
- delta: toastData.delta,
4763
- decimals,
4764
- symbol: tokenSymbol
4653
+ src: payment.itemImage,
4654
+ alt: payment.itemName || "Item",
4655
+ className: "volr:w-full volr:h-40 volr:object-cover volr:rounded-lg"
4765
4656
  }
4766
- )
4657
+ ) })
4658
+ ] });
4659
+ }
4660
+ function InfoRow({ label, value, copyable, mono }) {
4661
+ return /* @__PURE__ */ jsxs("div", { className: "volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
4662
+ /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400 volr:mb-1", children: label }),
4663
+ /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:gap-2", children: [
4664
+ /* @__PURE__ */ jsx(
4665
+ "p",
4666
+ {
4667
+ className: `volr:text-sm volr:text-slate-900 volr:break-all ${mono ? "volr:font-mono" : ""}`,
4668
+ children: value
4669
+ }
4670
+ ),
4671
+ copyable && /* @__PURE__ */ jsx(CopyButton, { text: value, className: "volr:shrink-0" })
4672
+ ] })
4767
4673
  ] });
4768
4674
  }
4769
- function DepositModalBody({
4770
- isLoading,
4771
- error,
4772
- depositAssets,
4773
- evmAddress,
4774
- selectedIdx,
4775
- onSelectIdx
4776
- }) {
4777
- if (isLoading) return /* @__PURE__ */ jsx(DepositSkeleton, {});
4778
- if (error) {
4779
- return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4780
- /* @__PURE__ */ jsx(DepositSkeleton, {}),
4781
- /* @__PURE__ */ jsx(
4782
- "div",
4675
+ function AccountInfoView({ user }) {
4676
+ const { t } = useI18n();
4677
+ const getLoginMethod = () => {
4678
+ if (user.authWallet) {
4679
+ return t("account.info.loginMethod.wallet");
4680
+ }
4681
+ if (user.email?.includes("@google.")) {
4682
+ return t("account.info.loginMethod.google");
4683
+ }
4684
+ if (user.email?.includes("@twitter.") || user.email?.includes("@x.")) {
4685
+ return t("account.info.loginMethod.twitter");
4686
+ }
4687
+ if (user.email?.includes("@wallet.")) {
4688
+ return t("account.info.loginMethod.wallet");
4689
+ }
4690
+ return t("account.info.loginMethod.email");
4691
+ };
4692
+ const formatAddress = (address) => {
4693
+ if (address.length <= 16) return address;
4694
+ return `${address.slice(0, 6)}...${address.slice(-4)}`;
4695
+ };
4696
+ const externalWallet = user.authWallet ? user.authWallet.split(":")[1] || user.authWallet : null;
4697
+ return /* @__PURE__ */ jsxs("div", { children: [
4698
+ /* @__PURE__ */ jsx("h2", { className: "volr:text-lg volr:font-semibold volr:text-slate-900 volr:mb-4", children: t("account.menu.account") }),
4699
+ /* @__PURE__ */ jsxs("div", { children: [
4700
+ /* @__PURE__ */ jsx(InfoRow, { label: t("account.info.loginMethod.label"), value: getLoginMethod() }),
4701
+ user.email && !user.email.includes("@wallet.") && /* @__PURE__ */ jsx(InfoRow, { label: t("account.email"), value: user.email }),
4702
+ user.evmAddress && /* @__PURE__ */ jsx(
4703
+ InfoRow,
4783
4704
  {
4784
- className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
4785
- style: { opacity: 0.9 },
4786
- children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-center volr:px-4 volr-error", children: error })
4705
+ label: t("account.walletAddress"),
4706
+ value: formatAddress(user.evmAddress),
4707
+ copyable: true,
4708
+ mono: true
4787
4709
  }
4788
- )
4789
- ] });
4790
- }
4791
- if (depositAssets.length === 0) {
4792
- return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4793
- /* @__PURE__ */ jsx(DepositSkeleton, {}),
4794
- /* @__PURE__ */ jsx(
4795
- "div",
4710
+ ),
4711
+ externalWallet && /* @__PURE__ */ jsx(
4712
+ InfoRow,
4796
4713
  {
4797
- className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
4798
- style: { opacity: 0.9 },
4799
- children: /* @__PURE__ */ 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." })
4714
+ label: t("account.info.connectedWallet"),
4715
+ value: formatAddress(externalWallet),
4716
+ copyable: true,
4717
+ mono: true
4800
4718
  }
4801
- )
4802
- ] });
4803
- }
4804
- if (!evmAddress) {
4805
- return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
4806
- /* @__PURE__ */ jsx(DepositSkeleton, {}),
4807
- /* @__PURE__ */ jsx(
4808
- "div",
4719
+ ),
4720
+ user.signerType && /* @__PURE__ */ jsx(
4721
+ InfoRow,
4809
4722
  {
4810
- className: "volr:absolute volr:inset-0 volr:flex volr:items-center volr:justify-center volr-surface",
4811
- style: { opacity: 0.9 },
4812
- children: /* @__PURE__ */ 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." })
4723
+ label: t("account.info.signerType"),
4724
+ value: user.signerType === "passkey" ? "Passkey" : user.signerType
4813
4725
  }
4814
4726
  )
4815
- ] });
4816
- }
4817
- if (depositAssets.length === 1) {
4818
- return /* @__PURE__ */ jsx(
4819
- DepositQRView,
4820
- {
4821
- chainId: depositAssets[0].chainId,
4822
- asset: depositAssets[0].token,
4823
- address: evmAddress,
4824
- onBack: void 0
4727
+ ] })
4728
+ ] });
4729
+ }
4730
+ function AccountModal({ isOpen, onClose, onError }) {
4731
+ const { user, logout } = useVolrContext();
4732
+ const { balances, totalUsd, isLoading, paymentEnabled, refresh } = useUserBalances();
4733
+ const { client } = useInternalAuth();
4734
+ const [currentView, setCurrentView] = useState("main");
4735
+ const [selectedPayment, setSelectedPayment] = useState(null);
4736
+ const [isLoggingOut, setIsLoggingOut] = useState(false);
4737
+ const [depositAssets, setDepositAssets] = useState([]);
4738
+ const [depositLoading, setDepositLoading] = useState(false);
4739
+ const [depositError, setDepositError] = useState(null);
4740
+ const [depositSelectedIdx, setDepositSelectedIdx] = useState(-1);
4741
+ useEffect(() => {
4742
+ if (currentView !== "deposit" || !isOpen) return;
4743
+ setDepositLoading(true);
4744
+ setDepositError(null);
4745
+ client.get("/auth/branding").then((response) => {
4746
+ const assets = response.depositAssets ?? [];
4747
+ setDepositAssets(assets);
4748
+ if (assets.length === 1) {
4749
+ setDepositSelectedIdx(0);
4825
4750
  }
4826
- );
4751
+ }).catch((err) => {
4752
+ console.error("Failed to fetch deposit assets:", err);
4753
+ setDepositError("Failed to load deposit options");
4754
+ }).finally(() => {
4755
+ setDepositLoading(false);
4756
+ });
4757
+ }, [currentView, isOpen, client]);
4758
+ const handleOpenChange = useCallback((open) => {
4759
+ if (!open) {
4760
+ onClose();
4761
+ setTimeout(() => {
4762
+ setCurrentView("main");
4763
+ setSelectedPayment(null);
4764
+ }, 200);
4765
+ }
4766
+ }, [onClose]);
4767
+ if (!user) {
4768
+ return /* @__PURE__ */ jsx(SigninModal, { isOpen, onClose, onError });
4827
4769
  }
4828
- if (selectedIdx === -1) {
4829
- return /* @__PURE__ */ jsx(
4830
- AssetSelectView,
4770
+ if (!user.keyStorageType) {
4771
+ const handlePasskeyComplete = () => {
4772
+ onClose();
4773
+ };
4774
+ const handlePasskeyError = (error) => {
4775
+ if (onError) onError(error);
4776
+ };
4777
+ const handleLogoutFromPasskey = async () => {
4778
+ try {
4779
+ await logout();
4780
+ onClose();
4781
+ } catch (error) {
4782
+ if (onError) {
4783
+ onError(error instanceof Error ? error : new Error("Logout failed"));
4784
+ }
4785
+ }
4786
+ };
4787
+ return /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
4788
+ PasskeyEnrollView,
4831
4789
  {
4832
- assets: depositAssets,
4833
- onSelect: (idx) => onSelectIdx(idx)
4790
+ wrapInModal: false,
4791
+ onComplete: handlePasskeyComplete,
4792
+ onError: handlePasskeyError,
4793
+ onLogout: handleLogoutFromPasskey,
4794
+ onClose
4834
4795
  }
4835
- );
4796
+ ) });
4836
4797
  }
4837
- const selected = depositAssets[selectedIdx];
4838
- return /* @__PURE__ */ jsx(
4839
- DepositQRView,
4840
- {
4841
- chainId: selected.chainId,
4842
- asset: selected.token,
4843
- address: evmAddress,
4844
- onBack: () => onSelectIdx(-1)
4798
+ const handleLogout = async () => {
4799
+ setIsLoggingOut(true);
4800
+ try {
4801
+ await logout();
4802
+ onClose();
4803
+ } catch (error) {
4804
+ if (onError) {
4805
+ onError(error instanceof Error ? error : new Error("Logout failed"));
4806
+ }
4807
+ } finally {
4808
+ setIsLoggingOut(false);
4845
4809
  }
4846
- );
4810
+ };
4811
+ const handleNavigate = (view) => {
4812
+ setCurrentView(view);
4813
+ };
4814
+ const handleBack = () => {
4815
+ if (selectedPayment) {
4816
+ setSelectedPayment(null);
4817
+ setCurrentView("payments");
4818
+ } else if (currentView === "deposit" && depositSelectedIdx >= 0 && depositAssets.length > 1) {
4819
+ setDepositSelectedIdx(-1);
4820
+ } else {
4821
+ setCurrentView("main");
4822
+ setDepositSelectedIdx(-1);
4823
+ }
4824
+ };
4825
+ const handleSelectPayment = (payment) => {
4826
+ setSelectedPayment(payment);
4827
+ };
4828
+ const handleWithdrawSuccess = () => {
4829
+ refresh();
4830
+ setCurrentView("main");
4831
+ };
4832
+ const showBack = currentView !== "main" || selectedPayment !== null || currentView === "deposit" && depositSelectedIdx >= 0 && depositAssets.length > 1;
4833
+ const renderContent = () => {
4834
+ if (selectedPayment) {
4835
+ return /* @__PURE__ */ jsx(PaymentDetailView, { payment: selectedPayment });
4836
+ }
4837
+ switch (currentView) {
4838
+ case "main":
4839
+ return /* @__PURE__ */ jsx(
4840
+ AccountMainView,
4841
+ {
4842
+ totalUsd,
4843
+ balances,
4844
+ isLoading,
4845
+ paymentEnabled,
4846
+ onNavigate: handleNavigate,
4847
+ onLogout: handleLogout,
4848
+ isLoggingOut
4849
+ }
4850
+ );
4851
+ case "assets":
4852
+ return /* @__PURE__ */ jsx(BalanceDetailView, { balances, isLoading });
4853
+ case "deposit":
4854
+ return /* @__PURE__ */ jsx(
4855
+ DepositModalBody,
4856
+ {
4857
+ isLoading: depositLoading,
4858
+ error: depositError,
4859
+ depositAssets,
4860
+ evmAddress: user.evmAddress,
4861
+ selectedIdx: depositSelectedIdx,
4862
+ onSelectIdx: setDepositSelectedIdx
4863
+ }
4864
+ );
4865
+ case "withdraw":
4866
+ return /* @__PURE__ */ jsx(
4867
+ WithdrawView,
4868
+ {
4869
+ balances,
4870
+ connectedWallet: user.authWallet,
4871
+ onSuccess: handleWithdrawSuccess
4872
+ }
4873
+ );
4874
+ case "payments":
4875
+ return /* @__PURE__ */ jsx(PaymentHistoryView, { onSelectPayment: handleSelectPayment });
4876
+ case "account":
4877
+ return /* @__PURE__ */ jsx(AccountInfoView, { user });
4878
+ default:
4879
+ return null;
4880
+ }
4881
+ };
4882
+ return /* @__PURE__ */ jsxs(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: [
4883
+ /* @__PURE__ */ jsx(
4884
+ ModalHeader,
4885
+ {
4886
+ back: showBack,
4887
+ onBack: showBack ? handleBack : void 0,
4888
+ onClose
4889
+ }
4890
+ ),
4891
+ renderContent()
4892
+ ] });
4847
4893
  }
4848
4894
  var DepositModal = ({
4849
4895
  open,