@safe-stars/components/dist/index-27hLDrwu.cjs

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

"use strict";const i=require("./index-CtZaCMo8.cjs"),a=require("./if-defined-MmHKu2JE.cjs"),y=require("./index-BERKYpvk.cjs");require("./index-CKpCHYPu.cjs");require("./index-tmdyqLVs.cjs");require("./index-BXulAD-4.cjs");var A;(function(s){s.approve="approved",s.bought="bought",s.borrow="borrowed",s.burn="burnt",s.cancel="canceled",s.claim="claimed",s.deploy="deployed",s.deposit="deposited",s.execute="executed",s.mint="minted",s.receive="received",s.repay="repaid",s.send="sent",s.sell="sold",s.stake="staked",s.trade="swapped",s.unstake="unstaked",s.withdraw="withdrawn"})(A||(A={}));const T=i.i`
  :host > wui-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
    background-color: var(--wui-color-gray-glass-005);
  }

  :host > wui-flex wui-image {
    display: block;
  }

  :host > wui-flex,
  :host > wui-flex wui-image,
  .swap-images-container,
  .swap-images-container.nft,
  wui-image.nft {
    border-top-left-radius: var(--local-left-border-radius);
    border-top-right-radius: var(--local-right-border-radius);
    border-bottom-left-radius: var(--local-left-border-radius);
    border-bottom-right-radius: var(--local-right-border-radius);
  }

  wui-icon {
    width: 20px;
    height: 20px;
  }

  wui-icon-box {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(20%, 20%);
  }

  .swap-images-container {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
  }

  .swap-images-container wui-image:first-child {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0%;
    clip-path: inset(0px calc(50% + 2px) 0px 0%);
  }

  .swap-images-container wui-image:last-child {
    clip-path: inset(0px 0px 0px calc(50% + 2px));
  }
`;var g=function(s,t,e,o){var n=arguments.length,r=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(s,t,e,o);else for(var c=s.length-1;c>=0;c--)(l=s[c])&&(r=(n<3?l(r):n>3?l(t,e,r):l(t,e))||r);return n>3&&r&&Object.defineProperty(t,e,r),r};let w=class extends i.i$1{constructor(){super(...arguments),this.images=[],this.secondImage={type:void 0,url:""}}render(){const[t,e]=this.images,o=(t==null?void 0:t.type)==="NFT",n=e!=null&&e.url?e.type==="NFT":o,r=o?"var(--wui-border-radius-xxs)":"var(--wui-border-radius-s)",l=n?"var(--wui-border-radius-xxs)":"var(--wui-border-radius-s)";return this.style.cssText=`
    --local-left-border-radius: ${r};
    --local-right-border-radius: ${l};
    `,i.x`<wui-flex> ${this.templateVisual()} ${this.templateIcon()} </wui-flex>`}templateVisual(){const[t,e]=this.images,o=t==null?void 0:t.type;return this.images.length===2&&(t!=null&&t.url||e!=null&&e.url)?i.x`<div class="swap-images-container">
        ${t!=null&&t.url?i.x`<wui-image src=${t.url} alt="Transaction image"></wui-image>`:null}
        ${e!=null&&e.url?i.x`<wui-image src=${e.url} alt="Transaction image"></wui-image>`:null}
      </div>`:t!=null&&t.url?i.x`<wui-image src=${t.url} alt="Transaction image"></wui-image>`:o==="NFT"?i.x`<wui-icon size="inherit" color="fg-200" name="nftPlaceholder"></wui-icon>`:i.x`<wui-icon size="inherit" color="fg-200" name="coinPlaceholder"></wui-icon>`}templateIcon(){let t="accent-100",e;return e=this.getIcon(),this.status&&(t=this.getStatusColor()),e?i.x`
      <wui-icon-box
        size="xxs"
        iconColor=${t}
        backgroundColor=${t}
        background="opaque"
        icon=${e}
        ?border=${!0}
        borderColor="wui-color-bg-125"
      ></wui-icon-box>
    `:null}getDirectionIcon(){switch(this.direction){case"in":return"arrowBottom";case"out":return"arrowTop";default:return}}getIcon(){return this.onlyDirectionIcon?this.getDirectionIcon():this.type==="trade"?"swapHorizontalBold":this.type==="approve"?"checkmark":this.type==="cancel"?"close":this.getDirectionIcon()}getStatusColor(){switch(this.status){case"confirmed":return"success-100";case"failed":return"error-100";case"pending":return"inverse-100";default:return"accent-100"}}};w.styles=[T];g([a.n()],w.prototype,"type",void 0);g([a.n()],w.prototype,"status",void 0);g([a.n()],w.prototype,"direction",void 0);g([a.n({type:Boolean})],w.prototype,"onlyDirectionIcon",void 0);g([a.n({type:Array})],w.prototype,"images",void 0);g([a.n({type:Object})],w.prototype,"secondImage",void 0);w=g([a.customElement("wui-transaction-visual")],w);const N=i.i`
  :host > wui-flex:first-child {
    align-items: center;
    column-gap: var(--wui-spacing-s);
    padding: 6.5px var(--wui-spacing-xs) 6.5px var(--wui-spacing-xs);
    width: 100%;
  }

  :host > wui-flex:first-child wui-text:nth-child(1) {
    text-transform: capitalize;
  }

  wui-transaction-visual {
    width: 40px;
    height: 40px;
  }

  wui-flex {
    flex: 1;
  }

  :host wui-flex wui-flex {
    overflow: hidden;
  }

  :host .description-container wui-text span {
    word-break: break-all;
  }

  :host .description-container wui-text {
    overflow: hidden;
  }

  :host .description-separator-icon {
    margin: 0px 6px;
  }

  :host wui-text > span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
`;var h=function(s,t,e,o){var n=arguments.length,r=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(s,t,e,o);else for(var c=s.length-1;c>=0;c--)(l=s[c])&&(r=(n<3?l(r):n>3?l(t,e,r):l(t,e))||r);return n>3&&r&&Object.defineProperty(t,e,r),r};let p=class extends i.i$1{constructor(){super(...arguments),this.type="approve",this.onlyDirectionIcon=!1,this.images=[],this.price=[],this.amount=[],this.symbol=[]}render(){return i.x`
      <wui-flex>
        <wui-transaction-visual
          .status=${this.status}
          direction=${a.o(this.direction)}
          type=${this.type}
          onlyDirectionIcon=${a.o(this.onlyDirectionIcon)}
          .images=${this.images}
        ></wui-transaction-visual>
        <wui-flex flexDirection="column" gap="3xs">
          <wui-text variant="paragraph-600" color="fg-100">
            ${A[this.type]||this.type}
          </wui-text>
          <wui-flex class="description-container">
            ${this.templateDescription()} ${this.templateSecondDescription()}
          </wui-flex>
        </wui-flex>
        <wui-text variant="micro-700" color="fg-300"><span>${this.date}</span></wui-text>
      </wui-flex>
    `}templateDescription(){var e;const t=(e=this.descriptions)==null?void 0:e[0];return t?i.x`
          <wui-text variant="small-500" color="fg-200">
            <span>${t}</span>
          </wui-text>
        `:null}templateSecondDescription(){var e;const t=(e=this.descriptions)==null?void 0:e[1];return t?i.x`
          <wui-icon class="description-separator-icon" size="xxs" name="arrowRight"></wui-icon>
          <wui-text variant="small-400" color="fg-200">
            <span>${t}</span>
          </wui-text>
        `:null}};p.styles=[i.resetStyles,N];h([a.n()],p.prototype,"type",void 0);h([a.n({type:Array})],p.prototype,"descriptions",void 0);h([a.n()],p.prototype,"date",void 0);h([a.n({type:Boolean})],p.prototype,"onlyDirectionIcon",void 0);h([a.n()],p.prototype,"status",void 0);h([a.n()],p.prototype,"direction",void 0);h([a.n({type:Array})],p.prototype,"images",void 0);h([a.n({type:Array})],p.prototype,"price",void 0);h([a.n({type:Array})],p.prototype,"amount",void 0);h([a.n({type:Array})],p.prototype,"symbol",void 0);p=h([a.customElement("wui-transaction-list-item")],p);const R=i.i`
  :host {
    min-height: 100%;
  }

  .group-container[last-group='true'] {
    padding-bottom: var(--wui-spacing-m);
  }

  .contentContainer {
    height: 280px;
  }

  .contentContainer > wui-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--wui-border-radius-xxs);
  }

  .contentContainer > .textContent {
    width: 65%;
  }

  .emptyContainer {
    height: 100%;
  }
`;var f=function(s,t,e,o){var n=arguments.length,r=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(s,t,e,o);else for(var c=s.length-1;c>=0;c--)(l=s[c])&&(r=(n<3?l(r):n>3?l(t,e,r):l(t,e))||r);return n>3&&r&&Object.defineProperty(t,e,r),r};const C="last-transaction",k=7;let x=class extends i.i$1{constructor(){super(),this.unsubscribe=[],this.paginationObserver=void 0,this.page="activity",this.caipAddress=i.ChainController.state.activeCaipAddress,this.transactionsByYear=i.TransactionsController.state.transactionsByYear,this.loading=i.TransactionsController.state.loading,this.empty=i.TransactionsController.state.empty,this.next=i.TransactionsController.state.next,i.TransactionsController.clearCursor(),this.unsubscribe.push(i.ChainController.subscribeKey("activeCaipAddress",t=>{t&&this.caipAddress!==t&&(i.TransactionsController.resetTransactions(),i.TransactionsController.fetchTransactions(t)),this.caipAddress=t}),i.ChainController.subscribeKey("activeCaipNetwork",()=>{this.updateTransactionView()}),i.TransactionsController.subscribe(t=>{this.transactionsByYear=t.transactionsByYear,this.loading=t.loading,this.empty=t.empty,this.next=t.next}))}firstUpdated(){this.updateTransactionView(),this.createPaginationObserver()}updated(){this.setPaginationObserver()}disconnectedCallback(){this.unsubscribe.forEach(t=>t())}render(){return i.x` ${this.empty?null:this.templateTransactionsByYear()}
    ${this.loading?this.templateLoading():null}
    ${!this.loading&&this.empty?this.templateEmpty():null}`}updateTransactionView(){var o;const t=(o=i.ChainController.state.activeCaipNetwork)==null?void 0:o.caipNetworkId;i.TransactionsController.state.lastNetworkInView!==t&&(i.TransactionsController.resetTransactions(),this.caipAddress&&i.TransactionsController.fetchTransactions(i.CoreHelperUtil.getPlainAddress(this.caipAddress))),i.TransactionsController.setLastNetworkInView(t)}templateTransactionsByYear(){return Object.keys(this.transactionsByYear).sort().reverse().map(e=>{const o=parseInt(e,10),n=new Array(12).fill(null).map((r,l)=>{var u;const c=y.TransactionUtil.getTransactionGroupTitle(o,l),d=(u=this.transactionsByYear[o])==null?void 0:u[l];return{groupTitle:c,transactions:d}}).filter(({transactions:r})=>r).reverse();return n.map(({groupTitle:r,transactions:l},c)=>{const d=c===n.length-1;return l?i.x`
          <wui-flex
            flexDirection="column"
            class="group-container"
            last-group="${d?"true":"false"}"
            data-testid="month-indexes"
          >
            <wui-flex
              alignItems="center"
              flexDirection="row"
              .padding=${["xs","s","s","s"]}
            >
              <wui-text variant="paragraph-500" color="fg-200" data-testid="group-title"
                >${r}</wui-text
              >
            </wui-flex>
            <wui-flex flexDirection="column" gap="xs">
              ${this.templateTransactions(l,d)}
            </wui-flex>
          </wui-flex>
        `:null})})}templateRenderTransaction(t,e){const{date:o,descriptions:n,direction:r,isAllNFT:l,images:c,status:d,transfers:u,type:m}=this.getTransactionListItemProps(t),v=(u==null?void 0:u.length)>1;return(u==null?void 0:u.length)===2&&!l?i.x`
        <wui-transaction-list-item
          date=${o}
          .direction=${r}
          id=${e&&this.next?C:""}
          status=${d}
          type=${m}
          .images=${c}
          .descriptions=${n}
        ></wui-transaction-list-item>
      `:v?u.map((b,D)=>{const I=y.TransactionUtil.getTransferDescription(b),O=e&&D===u.length-1;return i.x` <wui-transaction-list-item
          date=${o}
          direction=${b.direction}
          id=${O&&this.next?C:""}
          status=${d}
          type=${m}
          .onlyDirectionIcon=${!0}
          .images=${[c[D]]}
          .descriptions=${[I]}
        ></wui-transaction-list-item>`}):i.x`
      <wui-transaction-list-item
        date=${o}
        .direction=${r}
        id=${e&&this.next?C:""}
        status=${d}
        type=${m}
        .images=${c}
        .descriptions=${n}
      ></wui-transaction-list-item>
    `}templateTransactions(t,e){return t.map((o,n)=>{const r=e&&n===t.length-1;return i.x`${this.templateRenderTransaction(o,r)}`})}emptyStateActivity(){return i.x`<wui-flex
      class="emptyContainer"
      flexGrow="1"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
      .padding=${["3xl","xl","3xl","xl"]}
      gap="xl"
      data-testid="empty-activity-state"
    >
      <wui-icon-box
        backgroundColor="gray-glass-005"
        background="gray"
        iconColor="fg-200"
        icon="wallet"
        size="lg"
        ?border=${!0}
        borderColor="wui-color-bg-125"
      ></wui-icon-box>
      <wui-flex flexDirection="column" alignItems="center" gap="xs">
        <wui-text align="center" variant="paragraph-500" color="fg-100"
          >No Transactions yet</wui-text
        >
        <wui-text align="center" variant="small-500" color="fg-200"
          >Start trading on dApps <br />
          to grow your wallet!</wui-text
        >
      </wui-flex>
    </wui-flex>`}emptyStateAccount(){return i.x`<wui-flex
      class="contentContainer"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      gap="l"
      data-testid="empty-account-state"
    >
      <wui-icon-box
        icon="swapHorizontal"
        size="inherit"
        iconColor="fg-200"
        backgroundColor="fg-200"
        iconSize="lg"
      ></wui-icon-box>
      <wui-flex
        class="textContent"
        gap="xs"
        flexDirection="column"
        justifyContent="center"
        flexDirection="column"
      >
        <wui-text variant="paragraph-500" align="center" color="fg-100">No activity yet</wui-text>
        <wui-text variant="small-400" align="center" color="fg-200"
          >Your next transactions will appear here</wui-text
        >
      </wui-flex>
      <wui-link @click=${this.onReceiveClick.bind(this)}>Trade</wui-link>
    </wui-flex>`}templateEmpty(){return this.page==="account"?i.x`${this.emptyStateAccount()}`:i.x`${this.emptyStateActivity()}`}templateLoading(){return this.page==="activity"?Array(k).fill(i.x` <wui-transaction-list-item-loader></wui-transaction-list-item-loader> `).map(t=>t):null}onReceiveClick(){i.RouterController.push("WalletReceive")}createPaginationObserver(){const t=i.ChainController.state.activeChain,{projectId:e}=i.OptionsController.state;this.paginationObserver=new IntersectionObserver(([o])=>{var n;o!=null&&o.isIntersecting&&!this.loading&&(i.TransactionsController.fetchTransactions(i.CoreHelperUtil.getPlainAddress(this.caipAddress)),i.EventsController.sendEvent({type:"track",event:"LOAD_MORE_TRANSACTIONS",properties:{address:i.CoreHelperUtil.getPlainAddress(this.caipAddress),projectId:e,cursor:this.next,isSmartAccount:((n=i.AccountController.state.preferredAccountTypes)==null?void 0:n[t])===i.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT}}))},{}),this.setPaginationObserver()}setPaginationObserver(){var e,o,n;(e=this.paginationObserver)==null||e.disconnect();const t=(o=this.shadowRoot)==null?void 0:o.querySelector(`#${C}`);t&&((n=this.paginationObserver)==null||n.observe(t))}getTransactionListItemProps(t){var d,u,m,v,$;const e=y.DateUtil.formatDate((d=t==null?void 0:t.metadata)==null?void 0:d.minedAt),o=y.TransactionUtil.getTransactionDescriptions(t),n=t==null?void 0:t.transfers,r=(u=t==null?void 0:t.transfers)==null?void 0:u[0],l=!!r&&((m=t==null?void 0:t.transfers)==null?void 0:m.every(b=>!!b.nft_info)),c=y.TransactionUtil.getTransactionImages(n);return{date:e,direction:r==null?void 0:r.direction,descriptions:o,isAllNFT:l,images:c,status:(v=t.metadata)==null?void 0:v.status,transfers:n,type:($=t.metadata)==null?void 0:$.operationType}}};x.styles=R;f([a.n()],x.prototype,"page",void 0);f([a.r()],x.prototype,"caipAddress",void 0);f([a.r()],x.prototype,"transactionsByYear",void 0);f([a.r()],x.prototype,"loading",void 0);f([a.r()],x.prototype,"empty",void 0);f([a.r()],x.prototype,"next",void 0);x=f([a.customElement("w3m-activity-list")],x);
//# sourceMappingURL=index-27hLDrwu.cjs.map