@safe-stars/components
Version:
React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.
827 lines (747 loc) • 244 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CtZaCMo8.cjs"),a=require("./if-defined-MmHKu2JE.cjs");require("./index-BXulAD-4.cjs");require("./index--KmZMQQE.cjs");require("./index-B5kxjjR3.cjs");require("./index-CKpCHYPu.cjs");const ii=require("./index-DJi4CzE9.cjs");require("./index-BB9Vnkx8.cjs");require("./index-BE8Edgdz.cjs");require("./index-2v8aP99g.cjs");require("./index-Cv2JIh3Y.cjs");const ni=require("./index-1CrdV1LX.cjs");require("./index-27hLDrwu.cjs");require("./index-tmdyqLVs.cjs");const Et=require("./index-C5EcBrNZ.cjs");require("./index-CfJmZxsA.cjs");const Z=require("./ref-D1Ke0Dq9.cjs");require("./index-BQl9E2h4.cjs");require("./index-25Apucqb.cjs");require("./index-4AKqpZUN.cjs");require("./index-U45FbwY2.cjs");const Re=require("./index-Dykd8oDe.cjs"),oi=require("./index-DDoNK4iu.cjs"),ri=require("./index-7jbryE6-.cjs");require("./index-qAKUCMGe.cjs");require("./index-BvzdO7xj.cjs");require("./index-Ch6hp36E.cjs");require("./index-VqvoxVHf.cjs");const si=t.i`
:host {
display: block;
}
button {
border-radius: var(--wui-border-radius-3xl);
background: var(--wui-color-gray-glass-002);
display: flex;
gap: var(--wui-spacing-xs);
padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) var(--wui-spacing-3xs)
var(--wui-spacing-xs);
border: 1px solid var(--wui-color-gray-glass-005);
}
button:disabled {
background: var(--wui-color-gray-glass-015);
}
button:disabled > wui-text {
color: var(--wui-color-gray-glass-015);
}
button:disabled > wui-flex > wui-text {
color: var(--wui-color-gray-glass-015);
}
button:disabled > wui-image,
button:disabled > wui-flex > wui-avatar {
filter: grayscale(1);
}
button:has(wui-image) {
padding: var(--wui-spacing-3xs) var(--wui-spacing-3xs) var(--wui-spacing-3xs)
var(--wui-spacing-xs);
}
wui-text {
color: var(--wui-color-fg-100);
}
wui-flex > wui-text {
color: var(--wui-color-fg-200);
}
wui-image,
wui-icon-box {
border-radius: var(--wui-border-radius-3xl);
width: 24px;
height: 24px;
box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
}
wui-flex {
border-radius: var(--wui-border-radius-3xl);
border: 1px solid var(--wui-color-gray-glass-005);
background: var(--wui-color-gray-glass-005);
padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
}
button.local-no-balance {
border-radius: 0px;
border: none;
background: transparent;
}
wui-avatar {
width: 20px;
height: 20px;
box-shadow: 0 0 0 2px var(--wui-color-accent-glass-010);
}
@media (max-width: 500px) {
button {
gap: 0px;
padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) !important;
height: 32px;
}
wui-image,
wui-icon-box,
button > wui-text {
visibility: hidden;
width: 0px;
height: 0px;
}
button {
border-radius: 0px;
border: none;
background: transparent;
padding: 0px;
}
}
@media (hover: hover) and (pointer: fine) {
button:hover:enabled > wui-flex > wui-text {
color: var(--wui-color-fg-175);
}
button:active:enabled > wui-flex > wui-text {
color: var(--wui-color-fg-175);
}
}
`;var W=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let v=class extends t.i$1{constructor(){super(...arguments),this.networkSrc=void 0,this.avatarSrc=void 0,this.balance=void 0,this.isUnsupportedChain=void 0,this.disabled=!1,this.loading=!1,this.address="",this.profileName="",this.charsStart=4,this.charsEnd=6}render(){return t.x`
<button
?disabled=${this.disabled}
class=${a.o(this.balance?void 0:"local-no-balance")}
>
${this.balanceTemplate()}
<wui-flex gap="xxs" alignItems="center">
<wui-avatar
.imageSrc=${this.avatarSrc}
alt=${this.address}
address=${this.address}
></wui-avatar>
<wui-text variant="paragraph-600" color="inherit">
${this.address?a.UiHelperUtil.getTruncateString({string:this.profileName||this.address,charsStart:this.profileName?18:this.charsStart,charsEnd:this.profileName?0:this.charsEnd,truncate:this.profileName?"end":"middle"}):null}
</wui-text>
</wui-flex>
</button>
`}balanceTemplate(){if(this.isUnsupportedChain)return t.x` <wui-icon-box
size="sm"
iconColor="error-100"
backgroundColor="error-100"
icon="warningCircle"
></wui-icon-box>
<wui-text variant="paragraph-600" color="inherit"> Switch Network</wui-text>`;if(this.balance){const e=this.networkSrc?t.x`<wui-image src=${this.networkSrc}></wui-image>`:t.x`
<wui-icon-box
size="sm"
iconColor="fg-200"
backgroundColor="fg-300"
icon="networkPlaceholder"
></wui-icon-box>
`,i=this.loading?t.x`<wui-loading-spinner size="md" color="fg-200"></wui-loading-spinner>`:t.x`<wui-text variant="paragraph-600" color="inherit"> ${this.balance}</wui-text>`;return t.x`${e} ${i}`}return null}};v.styles=[t.resetStyles,t.elementStyles,si];W([a.n()],v.prototype,"networkSrc",void 0);W([a.n()],v.prototype,"avatarSrc",void 0);W([a.n()],v.prototype,"balance",void 0);W([a.n({type:Boolean})],v.prototype,"isUnsupportedChain",void 0);W([a.n({type:Boolean})],v.prototype,"disabled",void 0);W([a.n({type:Boolean})],v.prototype,"loading",void 0);W([a.n()],v.prototype,"address",void 0);W([a.n()],v.prototype,"profileName",void 0);W([a.n()],v.prototype,"charsStart",void 0);W([a.n()],v.prototype,"charsEnd",void 0);v=W([a.customElement("wui-account-button")],v);var m=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class g extends t.i$1{constructor(){var e,i,o,r,n,s;super(...arguments),this.unsubscribe=[],this.disabled=!1,this.balance="show",this.charsStart=4,this.charsEnd=6,this.namespace=void 0,this.caipAddress=(e=t.ChainController.getAccountData(this.namespace))==null?void 0:e.caipAddress,this.balanceVal=(i=t.ChainController.getAccountData(this.namespace))==null?void 0:i.balance,this.balanceSymbol=(o=t.ChainController.getAccountData(this.namespace))==null?void 0:o.balanceSymbol,this.profileName=(r=t.ChainController.getAccountData(this.namespace))==null?void 0:r.profileName,this.profileImage=(n=t.ChainController.getAccountData(this.namespace))==null?void 0:n.profileImage,this.network=(s=t.ChainController.getNetworkData(this.namespace))==null?void 0:s.caipNetwork,this.networkImage=t.AssetUtil.getNetworkImage(this.network),this.isSupported=t.OptionsController.state.allowUnsupportedChain?!0:t.ChainController.state.activeChain?t.ChainController.checkIfSupportedNetwork(t.ChainController.state.activeChain):!0}firstUpdated(){const e=this.namespace;e?this.unsubscribe.push(t.ChainController.subscribeChainProp("accountState",i=>{this.caipAddress=i==null?void 0:i.caipAddress,this.balanceVal=i==null?void 0:i.balance,this.balanceSymbol=i==null?void 0:i.balanceSymbol,this.profileName=i==null?void 0:i.profileName,this.profileImage=i==null?void 0:i.profileImage},e),t.ChainController.subscribeChainProp("networkState",i=>{this.network=i==null?void 0:i.caipNetwork,this.isSupported=t.ChainController.checkIfSupportedNetwork(e,i==null?void 0:i.caipNetwork),this.networkImage=t.AssetUtil.getNetworkImage(i==null?void 0:i.caipNetwork)},e)):this.unsubscribe.push(t.AssetController.subscribeNetworkImages(()=>{this.networkImage=t.AssetUtil.getNetworkImage(this.network)}),t.ChainController.subscribeKey("activeCaipAddress",i=>{this.caipAddress=i}),t.AccountController.subscribeKey("balance",i=>this.balanceVal=i),t.AccountController.subscribeKey("balanceSymbol",i=>this.balanceSymbol=i),t.AccountController.subscribeKey("profileName",i=>this.profileName=i),t.AccountController.subscribeKey("profileImage",i=>this.profileImage=i),t.ChainController.subscribeKey("activeCaipNetwork",i=>{this.network=i,this.networkImage=t.AssetUtil.getNetworkImage(i),this.isSupported=i!=null&&i.chainNamespace?t.ChainController.checkIfSupportedNetwork(i==null?void 0:i.chainNamespace):!0,this.fetchNetworkImage(i)}))}updated(){this.fetchNetworkImage(this.network)}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){if(!t.ChainController.state.activeChain)return null;const e=this.balance==="show",i=typeof this.balanceVal!="string";return t.x`
<wui-account-button
.disabled=${!!this.disabled}
.isUnsupportedChain=${t.OptionsController.state.allowUnsupportedChain?!1:!this.isSupported}
address=${a.o(t.CoreHelperUtil.getPlainAddress(this.caipAddress))}
profileName=${a.o(this.profileName)}
networkSrc=${a.o(this.networkImage)}
avatarSrc=${a.o(this.profileImage)}
balance=${e?t.CoreHelperUtil.formatBalance(this.balanceVal,this.balanceSymbol):""}
@click=${this.onClick.bind(this)}
data-testid=${`account-button${this.namespace?`-${this.namespace}`:""}`}
.charsStart=${this.charsStart}
.charsEnd=${this.charsEnd}
?loading=${i}
>
</wui-account-button>
`}async onClick(){await t.ChainController.switchActiveNamespace(this.namespace),this.isSupported||t.OptionsController.state.allowUnsupportedChain?t.ModalController.open():t.ModalController.open({view:"UnsupportedChain"})}async fetchNetworkImage(e){var i,o;(i=e==null?void 0:e.assets)!=null&&i.imageId&&(this.networkImage=await t.AssetUtil.fetchNetworkImage((o=e==null?void 0:e.assets)==null?void 0:o.imageId))}}m([a.n({type:Boolean})],g.prototype,"disabled",void 0);m([a.n()],g.prototype,"balance",void 0);m([a.n()],g.prototype,"charsStart",void 0);m([a.n()],g.prototype,"charsEnd",void 0);m([a.n()],g.prototype,"namespace",void 0);m([a.r()],g.prototype,"caipAddress",void 0);m([a.r()],g.prototype,"balanceVal",void 0);m([a.r()],g.prototype,"balanceSymbol",void 0);m([a.r()],g.prototype,"profileName",void 0);m([a.r()],g.prototype,"profileImage",void 0);m([a.r()],g.prototype,"network",void 0);m([a.r()],g.prototype,"networkImage",void 0);m([a.r()],g.prototype,"isSupported",void 0);exports.W3mAccountButton=class extends g{};exports.W3mAccountButton=m([a.customElement("w3m-account-button")],exports.W3mAccountButton);exports.AppKitAccountButton=class extends g{};exports.AppKitAccountButton=m([a.customElement("appkit-account-button")],exports.AppKitAccountButton);const ai=t.i`
:host {
display: block;
width: max-content;
}
`;var k=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class $ extends t.i$1{constructor(){super(...arguments),this.unsubscribe=[],this.disabled=!1,this.balance=void 0,this.size=void 0,this.label=void 0,this.loadingLabel=void 0,this.charsStart=4,this.charsEnd=6,this.namespace=void 0,this.caipAddress=t.ChainController.state.activeCaipAddress}firstUpdated(){this.namespace?this.unsubscribe.push(t.ChainController.subscribeChainProp("accountState",e=>{this.caipAddress=e==null?void 0:e.caipAddress},this.namespace)):this.unsubscribe.push(t.ChainController.subscribeKey("activeCaipAddress",e=>this.caipAddress=e))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){return this.caipAddress?t.x`
<appkit-account-button
.disabled=${!!this.disabled}
balance=${a.o(this.balance)}
.charsStart=${a.o(this.charsStart)}
.charsEnd=${a.o(this.charsEnd)}
namespace=${a.o(this.namespace)}
>
</appkit-account-button>
`:t.x`
<appkit-connect-button
size=${a.o(this.size)}
label=${a.o(this.label)}
loadingLabel=${a.o(this.loadingLabel)}
namespace=${a.o(this.namespace)}
></appkit-connect-button>
`}}$.styles=ai;k([a.n({type:Boolean})],$.prototype,"disabled",void 0);k([a.n()],$.prototype,"balance",void 0);k([a.n()],$.prototype,"size",void 0);k([a.n()],$.prototype,"label",void 0);k([a.n()],$.prototype,"loadingLabel",void 0);k([a.n()],$.prototype,"charsStart",void 0);k([a.n()],$.prototype,"charsEnd",void 0);k([a.n()],$.prototype,"namespace",void 0);k([a.r()],$.prototype,"caipAddress",void 0);exports.W3mButton=class extends ${};exports.W3mButton=k([a.customElement("w3m-button")],exports.W3mButton);exports.AppKitButton=class extends ${};exports.AppKitButton=k([a.customElement("appkit-button")],exports.AppKitButton);const li=t.i`
:host {
position: relative;
display: block;
}
button {
background: var(--wui-color-accent-100);
border: 1px solid var(--wui-color-gray-glass-010);
border-radius: var(--wui-border-radius-m);
gap: var(--wui-spacing-xs);
}
button.loading {
background: var(--wui-color-gray-glass-010);
border: 1px solid var(--wui-color-gray-glass-010);
pointer-events: none;
}
button:disabled {
background-color: var(--wui-color-gray-glass-015);
border: 1px solid var(--wui-color-gray-glass-010);
}
button:disabled > wui-text {
color: var(--wui-color-gray-glass-015);
}
@media (hover: hover) and (pointer: fine) {
button:hover:enabled {
background-color: var(--wui-color-accent-090);
}
button:active:enabled {
background-color: var(--wui-color-accent-080);
}
}
button:focus-visible {
border: 1px solid var(--wui-color-gray-glass-010);
background-color: var(--wui-color-accent-090);
-webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
-moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
}
button[data-size='sm'] {
padding: 6.75px 10px 7.25px;
}
::slotted(*) {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
button > wui-text {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
color: var(--wui-color-inverse-100);
}
button[data-size='md'] {
padding: 9px var(--wui-spacing-l) 9px var(--wui-spacing-l);
}
button[data-size='md'] + wui-text {
padding-left: var(--wui-spacing-3xs);
}
@media (max-width: 500px) {
button[data-size='md'] {
height: 32px;
padding: 5px 12px;
}
button[data-size='md'] > wui-text > slot {
font-size: 14px !important;
}
}
wui-loading-spinner {
width: 14px;
height: 14px;
}
wui-loading-spinner::slotted(svg) {
width: 10px !important;
height: 10px !important;
}
button[data-size='sm'] > wui-loading-spinner {
width: 12px;
height: 12px;
}
`;var wt=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let me=class extends t.i$1{constructor(){super(...arguments),this.size="md",this.loading=!1}render(){const e=this.size==="md"?"paragraph-600":"small-600";return t.x`
<button data-size=${this.size} ?disabled=${this.loading}>
${this.loadingTemplate()}
<wui-text variant=${e} color=${this.loading?"accent-100":"inherit"}>
<slot></slot>
</wui-text>
</button>
`}loadingTemplate(){return this.loading?t.x`<wui-loading-spinner size=${this.size} color="accent-100"></wui-loading-spinner>`:null}};me.styles=[t.resetStyles,t.elementStyles,li];wt([a.n()],me.prototype,"size",void 0);wt([a.n({type:Boolean})],me.prototype,"loading",void 0);me=wt([a.customElement("wui-connect-button")],me);var V=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class H extends t.i$1{constructor(){super(),this.unsubscribe=[],this.size="md",this.label="Connect Wallet",this.loadingLabel="Connecting...",this.open=t.ModalController.state.open,this.loading=this.namespace?t.ModalController.state.loadingNamespaceMap.get(this.namespace):t.ModalController.state.loading,this.unsubscribe.push(t.ModalController.subscribe(e=>{this.open=e.open,this.loading=this.namespace?e.loadingNamespaceMap.get(this.namespace):e.loading}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){return t.x`
<wui-connect-button
size=${a.o(this.size)}
.loading=${this.loading}
@click=${this.onClick.bind(this)}
data-testid=${`connect-button${this.namespace?`-${this.namespace}`:""}`}
>
${this.loading?this.loadingLabel:this.label}
</wui-connect-button>
`}onClick(){this.open?t.ModalController.close():this.loading||t.ModalController.open({view:"Connect",namespace:this.namespace})}}V([a.n()],H.prototype,"size",void 0);V([a.n()],H.prototype,"label",void 0);V([a.n()],H.prototype,"loadingLabel",void 0);V([a.n()],H.prototype,"namespace",void 0);V([a.r()],H.prototype,"open",void 0);V([a.r()],H.prototype,"loading",void 0);exports.W3mConnectButton=class extends H{};exports.W3mConnectButton=V([a.customElement("w3m-connect-button")],exports.W3mConnectButton);exports.AppKitConnectButton=class extends H{};exports.AppKitConnectButton=V([a.customElement("appkit-connect-button")],exports.AppKitConnectButton);const ci=t.i`
:host {
display: block;
}
button {
border-radius: var(--wui-border-radius-3xl);
display: flex;
gap: var(--wui-spacing-xs);
padding: var(--wui-spacing-2xs) var(--wui-spacing-s) var(--wui-spacing-2xs)
var(--wui-spacing-xs);
border: 1px solid var(--wui-color-gray-glass-010);
background-color: var(--wui-color-gray-glass-005);
color: var(--wui-color-fg-100);
}
button:disabled {
border: 1px solid var(--wui-color-gray-glass-005);
background-color: var(--wui-color-gray-glass-015);
color: var(--wui-color-gray-glass-015);
}
@media (hover: hover) and (pointer: fine) {
button:hover:enabled {
background-color: var(--wui-color-gray-glass-010);
}
button:active:enabled {
background-color: var(--wui-color-gray-glass-015);
}
}
wui-image,
wui-icon-box {
border-radius: var(--wui-border-radius-3xl);
width: 24px;
height: 24px;
box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
}
`;var Me=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let ee=class extends t.i$1{constructor(){super(...arguments),this.imageSrc=void 0,this.isUnsupportedChain=void 0,this.disabled=!1}render(){return t.x`
<button data-testid="wui-network-button" ?disabled=${this.disabled}>
${this.visualTemplate()}
<wui-text variant="paragraph-600" color="inherit">
<slot></slot>
</wui-text>
</button>
`}visualTemplate(){return this.isUnsupportedChain?t.x`
<wui-icon-box
size="sm"
iconColor="error-100"
backgroundColor="error-100"
icon="warningCircle"
></wui-icon-box>
`:this.imageSrc?t.x`<wui-image src=${this.imageSrc}></wui-image>`:t.x`
<wui-icon-box
size="sm"
iconColor="inverse-100"
backgroundColor="fg-100"
icon="networkPlaceholder"
></wui-icon-box>
`}};ee.styles=[t.resetStyles,t.elementStyles,ci];Me([a.n()],ee.prototype,"imageSrc",void 0);Me([a.n({type:Boolean})],ee.prototype,"isUnsupportedChain",void 0);Me([a.n({type:Boolean})],ee.prototype,"disabled",void 0);ee=Me([a.customElement("wui-network-button")],ee);const ui=t.i`
:host {
display: block;
width: max-content;
}
`;var j=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class I extends t.i$1{constructor(){super(),this.unsubscribe=[],this.disabled=!1,this.network=t.ChainController.state.activeCaipNetwork,this.networkImage=t.AssetUtil.getNetworkImage(this.network),this.caipAddress=t.ChainController.state.activeCaipAddress,this.loading=t.ModalController.state.loading,this.isSupported=t.OptionsController.state.allowUnsupportedChain?!0:t.ChainController.state.activeChain?t.ChainController.checkIfSupportedNetwork(t.ChainController.state.activeChain):!0,this.unsubscribe.push(t.AssetController.subscribeNetworkImages(()=>{this.networkImage=t.AssetUtil.getNetworkImage(this.network)}),t.ChainController.subscribeKey("activeCaipAddress",e=>{this.caipAddress=e}),t.ChainController.subscribeKey("activeCaipNetwork",e=>{var i;this.network=e,this.networkImage=t.AssetUtil.getNetworkImage(e),this.isSupported=e!=null&&e.chainNamespace?t.ChainController.checkIfSupportedNetwork(e.chainNamespace):!0,t.AssetUtil.fetchNetworkImage((i=e==null?void 0:e.assets)==null?void 0:i.imageId)}),t.ModalController.subscribeKey("loading",e=>this.loading=e))}firstUpdated(){var e,i;t.AssetUtil.fetchNetworkImage((i=(e=this.network)==null?void 0:e.assets)==null?void 0:i.imageId)}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){const e=this.network?t.ChainController.checkIfSupportedNetwork(this.network.chainNamespace):!0;return t.x`
<wui-network-button
.disabled=${!!(this.disabled||this.loading)}
.isUnsupportedChain=${t.OptionsController.state.allowUnsupportedChain?!1:!e}
imageSrc=${a.o(this.networkImage)}
@click=${this.onClick.bind(this)}
data-testid="w3m-network-button"
>
${this.getLabel()}
<slot></slot>
</wui-network-button>
`}getLabel(){return this.network?!this.isSupported&&!t.OptionsController.state.allowUnsupportedChain?"Switch Network":this.network.name:this.label?this.label:this.caipAddress?"Unknown Network":"Select Network"}onClick(){this.loading||(t.EventsController.sendEvent({type:"track",event:"CLICK_NETWORKS"}),t.ModalController.open({view:"Networks"}))}}I.styles=ui;j([a.n({type:Boolean})],I.prototype,"disabled",void 0);j([a.n({type:String})],I.prototype,"label",void 0);j([a.r()],I.prototype,"network",void 0);j([a.r()],I.prototype,"networkImage",void 0);j([a.r()],I.prototype,"caipAddress",void 0);j([a.r()],I.prototype,"loading",void 0);j([a.r()],I.prototype,"isSupported",void 0);exports.W3mNetworkButton=class extends I{};exports.W3mNetworkButton=j([a.customElement("w3m-network-button")],exports.W3mNetworkButton);exports.AppKitNetworkButton=class extends I{};exports.AppKitNetworkButton=j([a.customElement("appkit-network-button")],exports.AppKitNetworkButton);const di=t.i`
:host {
display: block;
}
button {
width: 100%;
display: block;
padding-top: var(--wui-spacing-l);
padding-bottom: var(--wui-spacing-l);
padding-left: var(--wui-spacing-s);
padding-right: var(--wui-spacing-2l);
border-radius: var(--wui-border-radius-s);
background-color: var(--wui-color-accent-glass-010);
}
button:hover {
background-color: var(--wui-color-accent-glass-015) !important;
}
button:active {
background-color: var(--wui-color-accent-glass-020) !important;
}
`;var ze=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let te=class extends t.i$1{constructor(){super(...arguments),this.label="",this.description="",this.icon="wallet"}render(){return t.x`
<button>
<wui-flex gap="m" alignItems="center" justifyContent="space-between">
<wui-icon-box
size="lg"
iconcolor="accent-100"
backgroundcolor="accent-100"
icon=${this.icon}
background="transparent"
></wui-icon-box>
<wui-flex flexDirection="column" gap="3xs">
<wui-text variant="paragraph-500" color="fg-100">${this.label}</wui-text>
<wui-text variant="small-400" color="fg-200">${this.description}</wui-text>
</wui-flex>
<wui-icon size="md" color="fg-200" name="chevronRight"></wui-icon>
</wui-flex>
</button>
`}};te.styles=[t.resetStyles,t.elementStyles,di];ze([a.n()],te.prototype,"label",void 0);ze([a.n()],te.prototype,"description",void 0);ze([a.n()],te.prototype,"icon",void 0);te=ze([a.customElement("wui-notice-card")],te);var Ut=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let ot=class extends t.i$1{constructor(){super(),this.unsubscribe=[],this.socialProvider=t.StorageUtil.getConnectedSocialProvider(),this.socialUsername=t.StorageUtil.getConnectedSocialUsername(),this.namespace=t.ChainController.state.activeChain,this.unsubscribe.push(t.ChainController.subscribeKey("activeChain",e=>{this.namespace=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){const e=t.ConnectorController.getConnectorId(this.namespace),i=t.ConnectorController.getAuthConnector();if(!i||e!==t.ConstantsUtil$1.CONNECTOR_ID.AUTH)return this.style.cssText="display: none",null;const o=i.provider.getEmail()??"";return!o&&!this.socialUsername?(this.style.cssText="display: none",null):t.x`
<wui-list-item
variant="icon"
iconVariant="overlay"
icon=${this.socialProvider??"mail"}
iconSize=${this.socialProvider?"xxl":"sm"}
data-testid="w3m-account-email-update"
?chevron=${!this.socialProvider}
@click=${()=>{this.onGoToUpdateEmail(o,this.socialProvider)}}
>
<wui-text variant="paragraph-500" color="fg-100">${this.getAuthName(o)}</wui-text>
</wui-list-item>
`}onGoToUpdateEmail(e,i){i||t.RouterController.push("UpdateEmailWallet",{email:e,redirectView:"Account"})}getAuthName(e){return this.socialUsername?this.socialProvider==="discord"&&this.socialUsername.endsWith("0")?this.socialUsername.slice(0,-1):this.socialUsername:e.length>30?`${e.slice(0,-3)}...`:e}};Ut([a.r()],ot.prototype,"namespace",void 0);ot=Ut([a.customElement("w3m-account-auth-button")],ot);var T=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};exports.W3mAccountSettingsView=class extends t.i$1{constructor(){super(),this.usubscribe=[],this.networkImages=t.AssetController.state.networkImages,this.address=t.AccountController.state.address,this.profileImage=t.AccountController.state.profileImage,this.profileName=t.AccountController.state.profileName,this.network=t.ChainController.state.activeCaipNetwork,this.preferredAccountTypes=t.AccountController.state.preferredAccountTypes,this.disconnecting=!1,this.loading=!1,this.switched=!1,this.text="",this.usubscribe.push(t.AccountController.subscribe(e=>{e.address&&(this.address=e.address,this.profileImage=e.profileImage,this.profileName=e.profileName,this.preferredAccountTypes=e.preferredAccountTypes)}),t.AccountController.subscribeKey("preferredAccountTypes",e=>this.preferredAccountTypes=e),t.ChainController.subscribeKey("activeCaipNetwork",e=>{e!=null&&e.id&&(this.network=e)}))}disconnectedCallback(){this.usubscribe.forEach(e=>e())}render(){var i,o,r;if(!this.address)throw new Error("w3m-account-settings-view: No account provided");const e=this.networkImages[((o=(i=this.network)==null?void 0:i.assets)==null?void 0:o.imageId)??""];return t.x`
<wui-flex
flexDirection="column"
alignItems="center"
gap="l"
.padding=${["0","xl","m","xl"]}
>
<wui-avatar
alt=${this.address}
address=${this.address}
imageSrc=${a.o(this.profileImage)}
size="2lg"
></wui-avatar>
<wui-flex flexDirection="column" alignItems="center">
<wui-flex gap="3xs" alignItems="center" justifyContent="center">
<wui-text variant="title-6-600" color="fg-100" data-testid="account-settings-address">
${a.UiHelperUtil.getTruncateString({string:this.address,charsStart:4,charsEnd:6,truncate:"middle"})}
</wui-text>
<wui-icon-link
size="md"
icon="copy"
iconColor="fg-200"
@click=${this.onCopyAddress}
></wui-icon-link>
</wui-flex>
</wui-flex>
</wui-flex>
<wui-flex flexDirection="column" gap="m">
<wui-flex flexDirection="column" gap="xs" .padding=${["0","l","m","l"]}>
${this.authCardTemplate()}
<w3m-account-auth-button></w3m-account-auth-button>
<wui-list-item
.variant=${e?"image":"icon"}
iconVariant="overlay"
icon="networkPlaceholder"
imageSrc=${a.o(e)}
?chevron=${this.isAllowedNetworkSwitch()}
@click=${this.onNetworks.bind(this)}
data-testid="account-switch-network-button"
>
<wui-text variant="paragraph-500" color="fg-100">
${((r=this.network)==null?void 0:r.name)??"Unknown"}
</wui-text>
</wui-list-item>
${this.togglePreferredAccountBtnTemplate()} ${this.chooseNameButtonTemplate()}
<wui-list-item
variant="icon"
iconVariant="overlay"
icon="disconnect"
?chevron=${!1}
.loading=${this.disconnecting}
@click=${this.onDisconnect.bind(this)}
data-testid="disconnect-button"
>
<wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
</wui-list-item>
</wui-flex>
</wui-flex>
`}chooseNameButtonTemplate(){var n;const e=(n=this.network)==null?void 0:n.chainNamespace,i=t.ConnectorController.getConnectorId(e),o=t.ConnectorController.getAuthConnector();return!t.ChainController.checkIfNamesSupported()||!o||i!==t.ConstantsUtil$1.CONNECTOR_ID.AUTH||this.profileName?null:t.x`
<wui-list-item
variant="icon"
iconVariant="overlay"
icon="id"
iconSize="sm"
?chevron=${!0}
@click=${this.onChooseName.bind(this)}
data-testid="account-choose-name-button"
>
<wui-text variant="paragraph-500" color="fg-100">Choose account name </wui-text>
</wui-list-item>
`}authCardTemplate(){var n;const e=(n=this.network)==null?void 0:n.chainNamespace,i=t.ConnectorController.getConnectorId(e),o=t.ConnectorController.getAuthConnector(),{origin:r}=location;return!o||i!==t.ConstantsUtil$1.CONNECTOR_ID.AUTH||r.includes(t.ConstantsUtil.SECURE_SITE)?null:t.x`
<wui-notice-card
@click=${this.onGoToUpgradeView.bind(this)}
label="Upgrade your wallet"
description="Transition to a self-custodial wallet"
icon="wallet"
data-testid="w3m-wallet-upgrade-card"
></wui-notice-card>
`}isAllowedNetworkSwitch(){const e=t.ChainController.getAllRequestedCaipNetworks(),i=e?e.length>1:!1,o=e==null?void 0:e.find(({id:r})=>{var n;return r===((n=this.network)==null?void 0:n.id)});return i||!o}onCopyAddress(){try{this.address&&(t.CoreHelperUtil.copyToClopboard(this.address),t.SnackController.showSuccess("Address copied"))}catch{t.SnackController.showError("Failed to copy")}}togglePreferredAccountBtnTemplate(){var n,s;const e=(n=this.network)==null?void 0:n.chainNamespace,i=t.ChainController.checkIfSmartAccountEnabled(),o=t.ConnectorController.getConnectorId(e);return!t.ConnectorController.getAuthConnector()||o!==t.ConstantsUtil$1.CONNECTOR_ID.AUTH||!i?null:(this.switched||(this.text=((s=this.preferredAccountTypes)==null?void 0:s[e])===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT?"Switch to your EOA":"Switch to your smart account"),t.x`
<wui-list-item
variant="icon"
iconVariant="overlay"
icon="swapHorizontalBold"
iconSize="sm"
?chevron=${!0}
?loading=${this.loading}
@click=${this.changePreferredAccountType.bind(this)}
data-testid="account-toggle-preferred-account-type"
>
<wui-text variant="paragraph-500" color="fg-100">${this.text}</wui-text>
</wui-list-item>
`)}onChooseName(){t.RouterController.push("ChooseAccountName")}async changePreferredAccountType(){var n,s;const e=(n=this.network)==null?void 0:n.chainNamespace,i=t.ChainController.checkIfSmartAccountEnabled(),o=((s=this.preferredAccountTypes)==null?void 0:s[e])===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT||!i?t.W3mFrameRpcConstants.ACCOUNT_TYPES.EOA:t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT;t.ConnectorController.getAuthConnector()&&(this.loading=!0,await t.ConnectionController.setPreferredAccountType(o,e),this.text=o===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT?"Switch to your EOA":"Switch to your smart account",this.switched=!0,t.SendController.resetSend(),this.loading=!1,this.requestUpdate())}onNetworks(){this.isAllowedNetworkSwitch()&&t.RouterController.push("Networks")}async onDisconnect(){try{this.disconnecting=!0,await t.ConnectionController.disconnect(),t.ModalController.close()}catch{t.EventsController.sendEvent({type:"track",event:"DISCONNECT_ERROR"}),t.SnackController.showError("Failed to disconnect")}finally{this.disconnecting=!1}}onGoToUpgradeView(){t.EventsController.sendEvent({type:"track",event:"EMAIL_UPGRADE_FROM_MODAL"}),t.RouterController.push("UpgradeEmailWallet")}};T([a.r()],exports.W3mAccountSettingsView.prototype,"address",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"profileImage",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"profileName",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"network",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"preferredAccountTypes",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"disconnecting",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"loading",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"switched",void 0);T([a.r()],exports.W3mAccountSettingsView.prototype,"text",void 0);exports.W3mAccountSettingsView=T([a.customElement("w3m-account-settings-view")],exports.W3mAccountSettingsView);const pi=t.i`
button {
background-color: var(--wui-color-gray-glass-002);
border-radius: var(--wui-border-radius-3xl);
border: 1px solid var(--wui-color-gray-glass-002);
padding: var(--wui-spacing-xs) var(--wui-spacing-s) var(--wui-spacing-xs) var(--wui-spacing-xs);
position: relative;
}
wui-avatar {
width: 32px;
height: 32px;
box-shadow: 0 0 0 0;
outline: 3px solid var(--wui-color-gray-glass-005);
}
wui-icon-box,
wui-image {
width: 16px;
height: 16px;
border-radius: var(--wui-border-radius-3xl);
position: absolute;
left: 26px;
top: 24px;
}
wui-image {
outline: 2px solid var(--wui-color-bg-125);
}
wui-icon-box {
outline: 2px solid var(--wui-color-bg-200);
background-color: var(--wui-color-bg-250);
}
`;var Q=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let U=class extends t.i$1{constructor(){super(...arguments),this.avatarSrc=void 0,this.profileName="",this.address="",this.icon="mail"}render(){const e=t.ChainController.state.activeChain,o=t.ConnectorController.getConnectorId(e)===t.ConstantsUtil$1.CONNECTOR_ID.AUTH;return t.x`<button data-testid="wui-profile-button" @click=${this.handleClick}>
<wui-flex gap="xs" alignItems="center">
<wui-avatar
.imageSrc=${this.avatarSrc}
alt=${this.address}
address=${this.address}
></wui-avatar>
${o?this.getIconTemplate(this.icon):""}
<wui-flex gap="xs" alignItems="center">
<wui-text variant="large-600" color="fg-100">
${a.UiHelperUtil.getTruncateString({string:this.profileName||this.address,charsStart:this.profileName?18:4,charsEnd:this.profileName?0:4,truncate:this.profileName?"end":"middle"})}
</wui-text>
<wui-icon size="sm" color="fg-200" name="copy" id="copy-address"></wui-icon>
</wui-flex>
</wui-flex>
</button>`}handleClick(e){var i,o;if(e.target instanceof HTMLElement&&e.target.id==="copy-address"){(i=this.onCopyClick)==null||i.call(this,e);return}(o=this.onProfileClick)==null||o.call(this,e)}getIconTemplate(e){return t.x`
<wui-icon-box
size="xxs"
iconColor="fg-200"
backgroundColor="bg-100"
icon="${e||"networkPlaceholder"}"
></wui-icon-box>
`}};U.styles=[t.resetStyles,t.elementStyles,pi];Q([a.n()],U.prototype,"avatarSrc",void 0);Q([a.n()],U.prototype,"profileName",void 0);Q([a.n()],U.prototype,"address",void 0);Q([a.n()],U.prototype,"icon",void 0);Q([a.n()],U.prototype,"onProfileClick",void 0);Q([a.n()],U.prototype,"onCopyClick",void 0);U=Q([a.customElement("wui-profile-button-v2")],U);const hi=t.i`
:host {
display: inline-flex;
background-color: var(--wui-color-gray-glass-002);
border-radius: var(--wui-border-radius-3xl);
padding: var(--wui-spacing-3xs);
position: relative;
height: 36px;
min-height: 36px;
overflow: hidden;
}
:host::before {
content: '';
position: absolute;
pointer-events: none;
top: 4px;
left: 4px;
display: block;
width: var(--local-tab-width);
height: 28px;
border-radius: var(--wui-border-radius-3xl);
background-color: var(--wui-color-gray-glass-002);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
transition: transform var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: background-color, opacity;
}
:host([data-type='flex'])::before {
left: 3px;
transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px)));
}
:host([data-type='flex']) {
display: flex;
padding: 0px 0px 0px 12px;
gap: 4px;
}
:host([data-type='flex']) > button > wui-text {
position: absolute;
left: 18px;
opacity: 0;
}
button[data-active='true'] > wui-icon,
button[data-active='true'] > wui-text {
color: var(--wui-color-fg-100);
}
button[data-active='false'] > wui-icon,
button[data-active='false'] > wui-text {
color: var(--wui-color-fg-200);
}
button[data-active='true']:disabled,
button[data-active='false']:disabled {
background-color: transparent;
opacity: 0.5;
cursor: not-allowed;
}
button[data-active='true']:disabled > wui-text {
color: var(--wui-color-fg-200);
}
button[data-active='false']:disabled > wui-text {
color: var(--wui-color-fg-300);
}
button > wui-icon,
button > wui-text {
pointer-events: none;
transition: color var(--wui-e ase-out-power-1) var(--wui-duration-md);
will-change: color;
}
button {
width: var(--local-tab-width);
transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: background-color;
}
:host([data-type='flex']) > button {
width: 34px;
position: relative;
display: flex;
justify-content: flex-start;
}
button:hover:enabled,
button:active:enabled {
background-color: transparent !important;
}
button:hover:enabled > wui-icon,
button:active:enabled > wui-icon {
transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
color: var(--wui-color-fg-125);
}
button:hover:enabled > wui-text,
button:active:enabled > wui-text {
transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
color: var(--wui-color-fg-125);
}
button {
border-radius: var(--wui-border-radius-3xl);
}
`;var M=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let R=class extends t.i$1{constructor(){super(...arguments),this.tabs=[],this.onTabChange=()=>null,this.buttons=[],this.disabled=!1,this.localTabWidth="100px",this.activeTab=0,this.isDense=!1}render(){return this.isDense=this.tabs.length>3,this.style.cssText=`
--local-tab: ${this.activeTab};
--local-tab-width: ${this.localTabWidth};
`,this.dataset.type=this.isDense?"flex":"block",this.tabs.map((e,i)=>{var r;const o=i===this.activeTab;return t.x`
<button
?disabled=${this.disabled}
@click=${()=>this.onTabClick(i)}
data-active=${o}
data-testid="tab-${(r=e.label)==null?void 0:r.toLowerCase()}"
>
${this.iconTemplate(e)}
<wui-text variant="small-600" color="inherit"> ${e.label} </wui-text>
</button>
`})}firstUpdated(){this.shadowRoot&&this.isDense&&(this.buttons=[...this.shadowRoot.querySelectorAll("button")],setTimeout(()=>{this.animateTabs(0,!0)},0))}iconTemplate(e){return e.icon?t.x`<wui-icon size="xs" color="inherit" name=${e.icon}></wui-icon>`:null}onTabClick(e){this.buttons&&this.animateTabs(e,!1),this.activeTab=e,this.onTabChange(e)}animateTabs(e,i){const o=this.buttons[this.activeTab],r=this.buttons[e],n=o==null?void 0:o.querySelector("wui-text"),s=r==null?void 0:r.querySelector("wui-text"),c=r==null?void 0:r.getBoundingClientRect(),u=s==null?void 0:s.getBoundingClientRect();o&&n&&!i&&e!==this.activeTab&&(n.animate([{opacity:0}],{duration:50,easing:"ease",fill:"forwards"}),o.animate([{width:"34px"}],{duration:500,easing:"ease",fill:"forwards"})),r&&c&&u&&s&&(e!==this.activeTab||i)&&(this.localTabWidth=`${Math.round(c.width+u.width)+6}px`,r.animate([{width:`${c.width+u.width}px`}],{duration:i?0:500,fill:"forwards",easing:"ease"}),s.animate([{opacity:1}],{duration:i?0:125,delay:i?0:200,fill:"forwards",easing:"ease"}))}};R.styles=[t.resetStyles,t.elementStyles,hi];M([a.n({type:Array})],R.prototype,"tabs",void 0);M([a.n()],R.prototype,"onTabChange",void 0);M([a.n({type:Array})],R.prototype,"buttons",void 0);M([a.n({type:Boolean})],R.prototype,"disabled",void 0);M([a.n()],R.prototype,"localTabWidth",void 0);M([a.r()],R.prototype,"activeTab",void 0);M([a.r()],R.prototype,"isDense",void 0);R=M([a.customElement("wui-tabs")],R);const wi=t.i`
wui-flex {
width: 100%;
}
:host > wui-flex:first-child {
transform: translateY(calc(var(--wui-spacing-xxs) * -1));
}
wui-icon-link {
margin-right: calc(var(--wui-icon-box-size-md) * -1);
}
wui-notice-card {
margin-bottom: var(--wui-spacing-3xs);
}
wui-list-item > wui-text {
flex: 1;
}
w3m-transactions-view {
max-height: 200px;
}
.tab-content-container {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.tab-content-container::-webkit-scrollbar {
display: none;
}
.account-button {
width: auto;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: var(--wui-spacing-s);
height: 48px;
padding: var(--wui-spacing-xs);
padding-right: var(--wui-spacing-s);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
background-color: var(--wui-color-gray-glass-002);
border-radius: 24px;
transition: background-color 0.2s linear;
}
.account-button:hover {
background-color: var(--wui-color-gray-glass-005);
}
.avatar-container {
position: relative;
}
wui-avatar.avatar {
width: 32px;
height: 32px;
box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
}
wui-avatar.network-avatar {
width: 16px;
height: 16px;
position: absolute;
left: 100%;
top: 100%;
transform: translate(-75%, -75%);
box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
}
.account-links {
display: flex;
justify-content: space-between;
align-items: center;
}
.account-links wui-flex {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
background: red;
align-items: center;
justify-content: center;
height: 48px;
padding: 10px;
flex: 1 0 0;
border-radius: var(--XS, 16px);
border: 1px solid var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
background: var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
transition:
background-color var(--wui-ease-out-power-1) var(--wui-duration-md),
opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: background-color, opacity;
}
.account-links wui-flex:hover {
background: var(--dark-accent-glass-015, rgba(71, 161, 255, 0.15));
}
.account-links wui-flex wui-icon {
width: var(--S, 20px);
height: var(--S, 20px);
}
.account-links wui-flex wui-icon svg path {
stroke: #667dff;
}
`;var A=function(l,e,i,o){var r=arguments.length,n=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,i,o);else for(var c=l.length-1;c>=0;c--)(s=l[c])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let b=class extends t.i$1{constructor(){var e;super(),this.unsubscribe=[],this.caipAddress=t.AccountController.state.caipAddress,this.address=t.CoreHelperUtil.getPlainAddress(t.AccountController.state.caipAddress),this.allAccounts=t.AccountController.state.allAccounts,this.profileImage=t.AccountController.state.profileImage,this.profileName=t.AccountController.state.profileName,this.disconnecting=!1,this.balance=t.AccountController.state.balance,this.balanceSymbol=t.AccountController.state.balanceSymbol,this.features=t.OptionsController.state.features,this.namespace=t.ChainController.state.activeChain,this.chainId=(e=t.ChainController.state.activeCaipNetwork)==null?void 0:e.id,this.unsubscribe.push(t.AccountController.subscribeKey("caipAddress",i=>{this.address=t.CoreHelperUtil.getPlainAddress(i),this.caipAddress=i}),t.AccountController.subscribeKey("balance",i=>this.balance=i),t.AccountController.subscribeKey("balanceSymbol",i=>this.balanceSymbol=i),t.AccountController.subscribeKey("profileName",i=>this.profileName=i),t.AccountController.subscribeKey("profileImage",i=>this.profileImage=i),t.OptionsController.subscribeKey("features",i=>this.features=i),t.AccountController.subscribeKey("allAccounts",i=>{this.allAccounts=i}),t.ChainController.subscribeKey("activeChain",i=>this.namespace=i),t.ChainController.subscribeKey("activeCaipNetwork",i=>{var o;if(i){const[r,n]=((o=i==null?void 0:i.caipNetworkId)==null?void 0:o.split(":"))||[];r&&n&&(this.namespace=r,this.chainId=n)}}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){if(!this.caipAddress)return null;const e=t.ChainController.state.activeChain!==t.ConstantsUtil$1.CHAIN.SOLANA&&this.allAccounts.length>1;return t.x`<wui-flex
flexDirection="column"
.padding=${["0","xl","m","xl"]}
alignItems="center"
gap="l"
>
${e?this.multiAccountTemplate():this.singleAccountTemplate()}
<wui-flex flexDirection="column" alignItems="center">
<wui-text variant="paragraph-500" color="fg-200">
${t.CoreHelperUtil.formatBalance(this.balance,this.balanceSymbol)}
</wui-text>
</wui-flex>
${this.explorerBtnTemplate()}
</wui-flex>
<wui-flex flexDirection="column" gap="xs" .padding=${["0","s","s","s"]}>
${this.authCardTemplate()} <w3m-account-auth-button></w3m-account-auth-button>
${this.orderedFeaturesTemplate()} ${this.activityTemplate()}
<wui-list-item
variant="icon"
iconVariant="overlay"
icon="disconnect"
?chevron=${!1}
.loading=${this.disconnecting}
@click=${this.onDisconnect.bind(this)}
data-testid="disconnect-button"
>
<wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
</wui-list-item>
</wui-flex>`}onrampTemplate(){