@prohetamine/redstone 0.0.1

package/dist/pay-with-exchange---G2M1Ag.js

@@ -0,0 +1,280 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CjZQCcwG.js");require("./index-BvUx3ULC.js");const x=e.css`
+  button {
+    border: none;
+    border-radius: ${({borderRadius:n})=>n[20]};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: ${({spacing:n})=>n[1]};
+    transition:
+      background-color ${({durations:n})=>n.lg}
+        ${({easings:n})=>n["ease-out-power-2"]},
+      box-shadow ${({durations:n})=>n.lg}
+        ${({easings:n})=>n["ease-out-power-2"]};
+    will-change: background-color, box-shadow;
+  }
+
+  /* -- Variants --------------------------------------------------------------- */
+  button[data-type='accent'] {
+    background-color: ${({tokens:n})=>n.core.backgroundAccentPrimary};
+    color: ${({tokens:n})=>n.theme.textPrimary};
+  }
+
+  button[data-type='neutral'] {
+    background-color: ${({tokens:n})=>n.theme.foregroundSecondary};
+    color: ${({tokens:n})=>n.theme.textPrimary};
+  }
+
+  /* -- Sizes --------------------------------------------------------------- */
+  button[data-size='sm'] {
+    height: 24px;
+  }
+
+  button[data-size='md'] {
+    height: 28px;
+  }
+
+  button[data-size='lg'] {
+    height: 32px;
+  }
+
+  button[data-size='sm'] > wui-image,
+  button[data-size='sm'] > wui-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='md'] > wui-image,
+  button[data-size='md'] > wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  button[data-size='lg'] > wui-image,
+  button[data-size='lg'] > wui-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  wui-text {
+    padding-left: ${({spacing:n})=>n[1]};
+    padding-right: ${({spacing:n})=>n[1]};
+  }
+
+  wui-image {
+    border-radius: ${({borderRadius:n})=>n[3]};
+    overflow: hidden;
+    user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+  }
+
+  /* -- States --------------------------------------------------------------- */
+  @media (hover: hover) and (pointer: fine) {
+    button[data-type='accent']:not(:disabled):hover {
+      background-color: ${({tokens:n})=>n.core.foregroundAccent060};
+    }
+
+    button[data-type='neutral']:not(:disabled):hover {
+      background-color: ${({tokens:n})=>n.theme.foregroundTertiary};
+    }
+  }
+
+  button[data-type='accent']:not(:disabled):focus-visible,
+  button[data-type='accent']:not(:disabled):active {
+    box-shadow: 0 0 0 4px ${({tokens:n})=>n.core.foregroundAccent020};
+  }
+
+  button[data-type='neutral']:not(:disabled):focus-visible,
+  button[data-type='neutral']:not(:disabled):active {
+    box-shadow: 0 0 0 4px ${({tokens:n})=>n.core.foregroundAccent020};
+  }
+
+  button:disabled {
+    opacity: 0.5;
+  }
+`;var m=function(n,t,r,o){var s=arguments.length,i=s<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,t,r,o);else for(var c=n.length-1;c>=0;c--)(a=n[c])&&(i=(s<3?a(i):s>3?a(t,r,i):a(t,r))||i);return s>3&&i&&Object.defineProperty(t,r,i),i};const w={sm:"sm-regular",md:"md-regular",lg:"lg-regular"};let u=class extends e.i{constructor(){super(...arguments),this.type="accent",this.size="md",this.imageSrc="",this.disabled=!1,this.leftIcon=void 0,this.rightIcon=void 0,this.text=""}render(){return e.b`
+      <button ?disabled=${this.disabled} data-type=${this.type} data-size=${this.size}>
+        ${this.imageSrc?e.b`<wui-image src=${this.imageSrc}></wui-image>`:null}
+        ${this.leftIcon?e.b`<wui-icon name=${this.leftIcon} color="inherit" size="inherit"></wui-icon>`:null}
+        <wui-text variant=${w[this.size]} color="inherit">${this.text}</wui-text>
+        ${this.rightIcon?e.b`<wui-icon name=${this.rightIcon} color="inherit" size="inherit"></wui-icon>`:null}
+      </button>
+    `}};u.styles=[e.resetStyles,e.elementStyles,x];m([e.n()],u.prototype,"type",void 0);m([e.n()],u.prototype,"size",void 0);m([e.n()],u.prototype,"imageSrc",void 0);m([e.n({type:Boolean})],u.prototype,"disabled",void 0);m([e.n()],u.prototype,"leftIcon",void 0);m([e.n()],u.prototype,"rightIcon",void 0);m([e.n()],u.prototype,"text",void 0);u=m([e.customElement("wui-chip-button")],u);var h=function(n,t,r,o){var s=arguments.length,i=s<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,t,r,o);else for(var c=n.length-1;c>=0;c--)(a=n[c])&&(i=(s<3?a(i):s>3?a(t,r,i):a(t,r))||i);return s>3&&i&&Object.defineProperty(t,r,i),i};let d=class extends e.i{constructor(){super(...arguments),this.maxDecimals=void 0,this.maxIntegers=void 0}render(){return e.b`
+      <wui-flex alignItems="center" gap="1">
+        <wui-input-amount
+          widthVariant="fit"
+          fontSize="h2"
+          .maxDecimals=${e.o(this.maxDecimals)}
+          .maxIntegers=${e.o(this.maxIntegers)}
+          .value=${this.amount?String(this.amount):""}
+        ></wui-input-amount>
+        <wui-text variant="md-regular" color="secondary">USD</wui-text>
+      </wui-flex>
+    `}};h([e.n({type:Number})],d.prototype,"amount",void 0);h([e.n({type:Number})],d.prototype,"maxDecimals",void 0);h([e.n({type:Number})],d.prototype,"maxIntegers",void 0);d=h([e.customElement("w3m-fund-input")],d);const f=e.css`
+  .amount-input-container {
+    border-radius: ${({borderRadius:n})=>n[6]};
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    background-color: ${({tokens:n})=>n.theme.foregroundPrimary};
+    padding: ${({spacing:n})=>n[1]};
+  }
+
+  .container {
+    border-radius: 30px;
+  }
+`;var l=function(n,t,r,o){var s=arguments.length,i=s<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,t,r,o);else for(var c=n.length-1;c>=0;c--)(a=n[c])&&(i=(s<3?a(i):s>3?a(t,r,i):a(t,r))||i);return s>3&&i&&Object.defineProperty(t,r,i),i};const g=[10,50,100],b=6,y=10;exports.W3mDepositFromExchangeView=class extends e.i{constructor(){super(),this.unsubscribe=[],this.network=e.ChainController.state.activeCaipNetwork,this.exchanges=e.ExchangeController.state.exchanges,this.isLoading=e.ExchangeController.state.isLoading,this.amount=e.ExchangeController.state.amount,this.tokenAmount=e.ExchangeController.state.tokenAmount,this.priceLoading=e.ExchangeController.state.priceLoading,this.isPaymentInProgress=e.ExchangeController.state.isPaymentInProgress,this.currentPayment=e.ExchangeController.state.currentPayment,this.paymentId=e.ExchangeController.state.paymentId,this.paymentAsset=e.ExchangeController.state.paymentAsset,this.unsubscribe.push(e.ChainController.subscribeKey("activeCaipNetwork",t=>{this.network=t,this.setDefaultPaymentAsset()}),e.ExchangeController.subscribe(t=>{var o,s;this.exchanges=t.exchanges,this.isLoading=t.isLoading,this.amount=t.amount,this.tokenAmount=t.tokenAmount,this.priceLoading=t.priceLoading,this.paymentId=t.paymentId,this.isPaymentInProgress=t.isPaymentInProgress,this.currentPayment=t.currentPayment,this.paymentAsset=t.paymentAsset,t.isPaymentInProgress&&((o=t.currentPayment)==null?void 0:o.exchangeId)&&((s=t.currentPayment)==null?void 0:s.sessionId)&&t.paymentId&&this.handlePaymentInProgress()}))}disconnectedCallback(){this.unsubscribe.forEach(r=>r()),e.ExchangeController.state.isPaymentInProgress||e.ExchangeController.reset()}async firstUpdated(){await this.getPaymentAssets(),this.paymentAsset||await this.setDefaultPaymentAsset(),e.ExchangeController.setAmount(g[0]),await e.ExchangeController.fetchExchanges()}render(){return e.b`
+      <wui-flex flexDirection="column" class="container">
+        ${this.amountInputTemplate()} ${this.exchangesTemplate()}
+      </wui-flex>
+    `}exchangesLoadingTemplate(){return Array.from({length:2}).map(()=>e.b`<wui-shimmer width="100%" height="65px" borderRadius="xxs"></wui-shimmer>`)}_exchangesTemplate(){return this.exchanges.length>0?this.exchanges.map(t=>e.b`<wui-list-item
+              @click=${()=>this.onExchangeClick(t)}
+              chevron
+              variant="image"
+              imageSrc=${t.imageUrl}
+              ?loading=${this.isLoading}
+            >
+              <wui-text variant="md-regular" color="primary">
+                Deposit from ${t.name}
+              </wui-text>
+            </wui-list-item>`):e.b`<wui-flex flexDirection="column" alignItems="center" gap="4" padding="4">
+          <wui-text variant="lg-medium" align="center" color="primary">
+            No exchanges support this asset on this network
+          </wui-text>
+        </wui-flex>`}exchangesTemplate(){return e.b`<wui-flex
+      flexDirection="column"
+      gap="2"
+      .padding=${["3","3","3","3"]}
+      class="exchanges-container"
+    >
+      ${this.isLoading?this.exchangesLoadingTemplate():this._exchangesTemplate()}
+    </wui-flex>`}amountInputTemplate(){var t,r;return e.b`
+      <wui-flex
+        flexDirection="column"
+        .padding=${["0","3","3","3"]}
+        class="amount-input-container"
+      >
+        <wui-flex
+          justifyContent="space-between"
+          alignItems="center"
+          .margin=${["0","0","6","0"]}
+        >
+          <wui-text variant="md-medium" color="secondary">Asset</wui-text>
+          <wui-token-button
+            data-testid="deposit-from-exchange-asset-button"
+            flexDirection="row-reverse"
+            text=${((t=this.paymentAsset)==null?void 0:t.metadata.symbol)||""}
+            imageSrc=${((r=this.paymentAsset)==null?void 0:r.metadata.iconUrl)||""}
+            @click=${()=>e.RouterController.push("PayWithExchangeSelectAsset")}
+            size="lg"
+            .chainImageSrc=${e.o(e.AssetUtil.getNetworkImage(this.network))}
+          >
+          </wui-token-button>
+        </wui-flex>
+        <wui-flex
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          .margin=${["0","0","4","0"]}
+        >
+          <w3m-fund-input
+            @inputChange=${this.onAmountChange.bind(this)}
+            .amount=${this.amount}
+            .maxDecimals=${b}
+            .maxIntegers=${y}
+          >
+          </w3m-fund-input>
+          ${this.tokenAmountTemplate()}
+        </wui-flex>
+        <wui-flex justifyContent="center" gap="2">
+          ${g.map(o=>e.b`<wui-chip-button
+                @click=${()=>e.ExchangeController.setAmount(o)}
+                type="neutral"
+                size="lg"
+                text=${`$${o}`}
+              ></wui-chip-button>`)}
+        </wui-flex>
+      </wui-flex>
+    `}tokenAmountTemplate(){var t;return this.priceLoading?e.b`<wui-shimmer
+        width="65px"
+        height="20px"
+        borderRadius="xxs"
+        variant="light"
+      ></wui-shimmer>`:e.b`
+      <wui-text variant="md-regular" color="secondary">
+        ${this.tokenAmount.toFixed(4)} ${(t=this.paymentAsset)==null?void 0:t.metadata.symbol}
+      </wui-text>
+    `}async onExchangeClick(t){if(!this.amount){e.SnackController.showError("Please enter an amount");return}await e.ExchangeController.handlePayWithExchange(t.id)}handlePaymentInProgress(){var o,s;const t=e.ChainController.state.activeChain,{redirectView:r="Account"}=e.RouterController.state.data??{};this.isPaymentInProgress&&((o=this.currentPayment)!=null&&o.exchangeId)&&((s=this.currentPayment)!=null&&s.sessionId)&&this.paymentId&&(e.ExchangeController.waitUntilComplete({exchangeId:this.currentPayment.exchangeId,sessionId:this.currentPayment.sessionId,paymentId:this.paymentId}).then(i=>{i.status==="SUCCESS"?(e.SnackController.showSuccess("Deposit completed"),e.ExchangeController.reset(),t&&(e.ChainController.fetchTokenBalance(),e.ConnectionController.updateBalance(t)),e.RouterController.replace("Transactions")):i.status==="FAILED"&&e.SnackController.showError("Deposit failed")}),e.SnackController.showLoading("Deposit in progress..."),e.RouterController.replace(r))}onAmountChange({detail:t}){e.ExchangeController.setAmount(t?Number(t):null)}async getPaymentAssets(){this.network&&await e.ExchangeController.getAssetsForNetwork(this.network.caipNetworkId)}async setDefaultPaymentAsset(){if(this.network){const t=await e.ExchangeController.getAssetsForNetwork(this.network.caipNetworkId);t[0]&&e.ExchangeController.setPaymentAsset(t[0])}}};exports.W3mDepositFromExchangeView.styles=f;l([e.r()],exports.W3mDepositFromExchangeView.prototype,"network",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"exchanges",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"isLoading",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"amount",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"tokenAmount",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"priceLoading",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"isPaymentInProgress",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"currentPayment",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"paymentId",void 0);l([e.r()],exports.W3mDepositFromExchangeView.prototype,"paymentAsset",void 0);exports.W3mDepositFromExchangeView=l([e.customElement("w3m-deposit-from-exchange-view")],exports.W3mDepositFromExchangeView);const C=e.css`
+  .contentContainer {
+    height: 440px;
+    overflow: scroll;
+    scrollbar-width: none;
+  }
+
+  .contentContainer::-webkit-scrollbar {
+    display: none;
+  }
+
+  wui-icon-box {
+    width: 40px;
+    height: 40px;
+    border-radius: ${({borderRadius:n})=>n[3]};
+  }
+`;var p=function(n,t,r,o){var s=arguments.length,i=s<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,t,r,o);else for(var c=n.length-1;c>=0;c--)(a=n[c])&&(i=(s<3?a(i):s>3?a(t,r,i):a(t,r))||i);return s>3&&i&&Object.defineProperty(t,r,i),i};exports.W3mDepositFromExchangeSelectAssetView=class extends e.i{constructor(){super(),this.unsubscribe=[],this.assets=e.ExchangeController.state.assets,this.search="",this.onDebouncedSearch=e.CoreHelperUtil.debounce(t=>{this.search=t}),this.unsubscribe.push(e.ExchangeController.subscribe(t=>{this.assets=t.assets}))}disconnectedCallback(){this.unsubscribe.forEach(t=>t())}render(){return e.b`
+      <wui-flex flexDirection="column">
+        ${this.templateSearchInput()} <wui-separator></wui-separator> ${this.templateTokens()}
+      </wui-flex>
+    `}templateSearchInput(){return e.b`
+      <wui-flex gap="2" padding="3">
+        <wui-input-text
+          @inputChange=${this.onInputChange.bind(this)}
+          class="network-search-input"
+          size="sm"
+          placeholder="Search token"
+          icon="search"
+        ></wui-input-text>
+      </wui-flex>
+    `}templateTokens(){const t=this.assets.filter(o=>o.metadata.name.toLowerCase().includes(this.search.toLowerCase())),r=t.length>0;return e.b`
+      <wui-flex
+        class="contentContainer"
+        flexDirection="column"
+        .padding=${["0","3","0","3"]}
+      >
+        <wui-flex justifyContent="flex-start" .padding=${["4","3","3","3"]}>
+          <wui-text variant="md-medium" color="secondary">Available tokens</wui-text>
+        </wui-flex>
+        <wui-flex flexDirection="column" gap="2">
+          ${r?t.map(o=>e.b`<wui-list-item
+                    .imageSrc=${o.metadata.iconUrl}
+                    ?clickable=${!0}
+                    @click=${this.handleTokenClick.bind(this,o)}
+                  >
+                    <wui-text variant="md-medium" color="primary">${o.metadata.name}</wui-text>
+                    <wui-text variant="md-regular" color="secondary"
+                      >${o.metadata.symbol}</wui-text
+                    >
+                  </wui-list-item>`):e.b`<wui-flex
+                .padding=${["20","0","0","0"]}
+                alignItems="center"
+                flexDirection="column"
+                gap="4"
+              >
+                <wui-icon-box icon="coinPlaceholder" color="default" size="lg"></wui-icon-box>
+                <wui-flex
+                  class="textContent"
+                  gap="2"
+                  flexDirection="column"
+                  justifyContent="center"
+                >
+                  <wui-text variant="lg-medium" align="center" color="primary">
+                    No tokens found
+                  </wui-text>
+                </wui-flex>
+                <wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>
+              </wui-flex>`}
+        </wui-flex>
+      </wui-flex>
+    `}onBuyClick(){e.RouterController.push("OnRampProviders")}onInputChange(t){this.onDebouncedSearch(t.detail)}handleTokenClick(t){e.ExchangeController.setPaymentAsset(t),e.RouterController.goBack()}};exports.W3mDepositFromExchangeSelectAssetView.styles=C;p([e.r()],exports.W3mDepositFromExchangeSelectAssetView.prototype,"assets",void 0);p([e.r()],exports.W3mDepositFromExchangeSelectAssetView.prototype,"search",void 0);exports.W3mDepositFromExchangeSelectAssetView=p([e.customElement("w3m-deposit-from-exchange-select-asset-view")],exports.W3mDepositFromExchangeSelectAssetView);