@ic-pay/icpay-widget 0.1.90 → 0.1.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.global.js +64 -65
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +23 -24
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -56,7 +56,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
56
56
|
0%, 100% { opacity: 1; }
|
|
57
57
|
50% { opacity: 0.7; }
|
|
58
58
|
}
|
|
59
|
-
`;function ee(o,a){if(!o||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(j,F)=>{F&&o.style.setProperty(j,F)};i("--icpay-primary",e),i("--icpay-secondary",t);let n=j=>{if(!j)return null;let F=j.replace("#",""),ge=F.length===3?F.split("").map(We=>We+We).join(""):F,ue=parseInt(ge,16),me=ue>>16&255,Re=ue>>8&255,$e=ue&255;return{r:me,g:Re,b:$e}},c=(j=>{let F=n(j);if(!F)return 0;let ge=ue=>{let me=ue/255;return me<=.03928?me/12.92:Math.pow((me+.055)/1.055,2.4)};return .2126*ge(F.r)+.7152*ge(F.g)+.0722*ge(F.b)})(e||t)>.6,d=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),p=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),E=a.borderColor||(c?"#d1d5db":"#4b5563"),z=a.textColor||(c?"#111827":"#f9fafb"),he=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),H=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",he),i("--icpay-text",z),i("--icpay-muted",H),i("--icpay-surface",d),i("--icpay-surface-alt",p),i("--icpay-border",E)}import{Icpay as Te}from"@ic-pay/icpay-sdk";var Ne=typeof window<"u";function be(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}function h(o){if(!Ne)return{client:{},quoteUsd:async()=>({tokenAmountDecimals:"0"}),sendUsd:async()=>({transactionId:"0",status:"pending"}),startOnrampUsd:async()=>({transactionId:"0",status:"pending",metadata:{onramp:{sessionId:null}}}),notifyIntentUntilComplete:()=>({stop:()=>{}})};be(o.debug||!1,"Creating SDK with config:",o);let a={publishableKey:o.publishableKey};o.enableEvents!==void 0?a.enableEvents=o.enableEvents:a.enableEvents=!0,o.apiUrl&&(a.apiUrl=o.apiUrl),o.icHost&&(a.icHost=o.icHost),o.actorProvider&&(a.actorProvider=o.actorProvider),o.connectedWallet&&(a.connectedWallet=o.connectedWallet),o.debug!==void 0&&(a.debug=o.debug),be(o.debug||!1,"Filtered SDK config:",a);try{let l=function(c,d,p){return t.notifyPaymentIntentOnRamp({paymentIntentId:c,intervalMs:d,orderId:p})};var e=l;be(o.debug||!1,"typeof Icpay:",typeof Te);let t=new Te(a);if(Ne){let c=t,d=p=>{c.addEventListener(p,E=>{window.dispatchEvent(new CustomEvent(p,{detail:E?.detail??E}))})};["icpay-sdk-error","icpay-sdk-transaction-created","icpay-sdk-transaction-updated","icpay-sdk-transaction-completed","icpay-sdk-transaction-failed","icpay-sdk-method-start","icpay-sdk-method-success","icpay-sdk-method-error"].forEach(d)}async function i(c,d){return t.calculateTokenAmountFromUSD({usdAmount:c,ledgerCanisterId:d})}async function n(c,d,p){return t.sendFundsUsd({usdAmount:c,ledgerCanisterId:d,metadata:p})}async function r(c,d,p){return t.sendFundsUsd({usdAmount:c,ledgerCanisterId:d,metadata:p,onrampPayment:!0})}return{client:t,quoteUsd:i,sendUsd:n,startOnrampUsd:r,notifyIntentUntilComplete:l}}catch(t){throw be(o.debug||!1,"Error creating SDK:",t),t}}import{LitElement as qe,html as ne,css as Qe}from"lit";import{customElement as _e,property as et,state as N}from"lit/decorators.js";import{IcpayError as Ue}from"@ic-pay/icpay-sdk";var I={WALLET_NOT_CONNECTED:"WALLET_NOT_CONNECTED",WALLET_USER_CANCELLED:"WALLET_USER_CANCELLED",WALLET_SIGNATURE_REJECTED:"WALLET_SIGNATURE_REJECTED",INSUFFICIENT_BALANCE:"INSUFFICIENT_BALANCE",NETWORK_ERROR:"NETWORK_ERROR",API_ERROR:"API_ERROR",LEDGER_NOT_FOUND:"LEDGER_NOT_FOUND",TRANSACTION_FAILED:"TRANSACTION_FAILED",TRANSACTION_TIMEOUT:"TRANSACTION_TIMEOUT",UNKNOWN_ERROR:"UNKNOWN_ERROR"},Ke={onError:o=>{console.error("[ICPay Widget] Error:",o)},onUserCancelled:()=>{console.log("[ICPay Widget] User cancelled the action")},onInsufficientBalance:o=>{console.warn("[ICPay Widget] Insufficient balance:",o.message)},onWalletError:o=>{console.warn("[ICPay Widget] Wallet error:",o.message)},onNetworkError:o=>{console.error("[ICPay Widget] Network error:",o.message)}};function C(o,a=Ke){o instanceof Ue?(a.onError(o),o.isUserCancelled()?a.onUserCancelled?.():o.isBalanceError()?a.onInsufficientBalance?.(o):o.isWalletError()?a.onWalletError?.(o):o.isNetworkError()&&a.onNetworkError?.(o)):(console.error("[ICPay Widget] Unknown error:",o),a.onError(new Ue({code:I.UNKNOWN_ERROR,message:o instanceof Error?o.message:"An unknown error occurred",details:o})))}var ze={[I.WALLET_NOT_CONNECTED]:"Please connect your wallet to continue",[I.WALLET_USER_CANCELLED]:"User have rejected the transfer",[I.WALLET_SIGNATURE_REJECTED]:"User have rejected the transfer",[I.INSUFFICIENT_BALANCE]:"Insufficient balance for this transaction",[I.NETWORK_ERROR]:"Network error. Please try again",[I.API_ERROR]:"Service temporarily unavailable",[I.LEDGER_NOT_FOUND]:"Selected token is not supported",[I.TRANSACTION_FAILED]:"Transaction failed. Please try again",[I.TRANSACTION_TIMEOUT]:"Transaction timed out. Please try again",[I.UNKNOWN_ERROR]:"Something went wrong. Please try again"};function L(o){return ze[o.code]||o.message||"An error occurred"}function O(o){return!o.isUserCancelled()}function A(o){if(o.userAction)return o.userAction;switch(o.code){case I.WALLET_NOT_CONNECTED:return"Connect Wallet";case I.INSUFFICIENT_BALANCE:return"Add Funds";case I.NETWORK_ERROR:case I.API_ERROR:return"Try Again";default:return null}}function W(o){return o.isUserCancelled()?"info":o.isBalanceError()||o.isWalletError()?"warning":"error"}import{LitElement as He,html as x,css as je}from"lit";import{customElement as Ve,property as te,state as K}from"lit/decorators.js";var Ge=[{key:"wallet",label:"Connect Wallet",tooltip:"Awaiting wallet connection",status:"pending"},{key:"init",label:"Initialising ICPay",tooltip:"Initializing payment",status:"pending"},{key:"await",label:"Awaiting payment confirmation",tooltip:"Preparing payment",status:"pending"},{key:"transfer",label:"Transferring funds",tooltip:"Submitting payment",status:"pending"},{key:"verify",label:"Verifying payment",tooltip:"Confirming payment",status:"pending"},{key:"confirm",label:"Payment confirmed",tooltip:"Payment completed",status:"pending"}],u=class extends He{constructor(){super(...arguments);this.open=!1;this.steps=Ge;this.amount=0;this.currency="";this.ledgerSymbol="";this.activeIndex=0;this.completed=!1;this.failed=!1;this.errorMessage=null;this.showSuccess=!1;this.showConfetti=!1;this.currentSteps=[];this.currentAmount=0;this.currentCurrency="";this.currentLedgerSymbol="";this.confirmLoadingStartedAt=null;this.progressionTimer=null;this.onMethodStart=e=>{let t=e?.detail?.name||"",i=e?.detail?.type||"";if(console.log("ICPay Progress: Method start event received:",e.detail),t==="sendFunds"||t==="sendFundsUsd"||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order"){if(this.open=!0,this.activeIndex=0,this.completed=!1,this.failed=!1,this.errorMessage=null,this.showSuccess=!1,this.showConfetti=!1,this.currentSteps=this.currentSteps.map(n=>({...n,status:"pending"})),i==="onramp"){let n=this.getStepIndexByKey("wallet");n>=0&&(this.currentSteps[n]={...this.currentSteps[n],label:"Transak Started",tooltip:"Awaiting Transak information"})}this.setLoadingByKey("wallet"),e?.detail?.amount!==void 0&&(this.currentAmount=e.detail.amount,this.amount=e.detail.amount,console.log("ICPay Progress: Amount updated to:",e.detail.amount)),e?.detail?.currency&&(this.currentCurrency=e.detail.currency,this.currency=e.detail.currency,console.log("ICPay Progress: Currency updated to:",e.detail.currency)),e?.detail?.ledgerSymbol&&(this.currentLedgerSymbol=e.detail.ledgerSymbol,this.ledgerSymbol=e.detail.ledgerSymbol,console.log("ICPay Progress: Current state after method start:",{activeIndex:this.activeIndex,currentAmount:this.currentAmount,currentCurrency:this.currentCurrency,currentLedgerSymbol:this.currentLedgerSymbol})),console.log("ICPay Progress: Waiting for wallet confirmation before starting progression"),this.requestUpdate()}!this.failed&&!this.completed&&(t==="sendFundsToLedger"?(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.setLoadingByKey("transfer")):t==="notifyLedgerTransaction"&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.setLoadingByKey("verify")))};this.onMethodSuccess=e=>{let t=e?.detail?.name||"";(t==="sendFunds"||t==="sendFundsUsd"||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order")&&this.dispatchEvent(new CustomEvent("icpay-progress-method-success",{detail:{methodName:t,step:this.activeIndex},bubbles:!0})),!this.failed&&!this.completed&&(t==="getLedgerBalance"?(this.completeByKey("wallet"),this.completeByKey("init"),this.setLoadingByKey("await")):t==="sendFundsToLedger"?(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.setLoadingByKey("verify")):t==="notifyLedgerTransaction"&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.completeByKey("verify"),this.setLoadingByKey("confirm")))};this.onTransactionCreated=e=>{let t=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction created event received:",e.detail),!this.failed&&!this.completed&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.setLoadingByKey("transfer")),this.dispatchEvent(new CustomEvent("icpay-progress-transaction-created",{detail:{transactionId:t,step:this.activeIndex},bubbles:!0}))};this.onTransactionUpdated=e=>{let t=e?.detail?.status||"pending",i=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction updated event received:",e.detail),!this.failed&&this.completed,this.dispatchEvent(new CustomEvent("icpay-progress-transaction-updated",{detail:{status:t,transactionId:i,step:this.activeIndex},bubbles:!0}))};this.onTransactionCompleted=e=>{let t=e?.detail?.transactionId||e?.detail?.id,i=e?.detail?.status||"completed";console.log("ICPay Progress: Transaction completed event received:",e.detail),console.log("ICPay Progress: Current state when transaction completed:",{activeIndex:this.activeIndex,completed:this.completed,failed:this.failed,showSuccess:this.showSuccess}),this.completeByKey("transfer"),this.completeByKey("await"),this.completeByKey("init"),this.completeByKey("verify"),this.completeByKey("confirm"),this.completed=!0,this.showSuccess=!0,this.showConfetti=!0,this.dispatchEvent(new CustomEvent("icpay-progress-completed",{detail:{transactionId:t,status:i,amount:this.currentAmount||this.amount,currency:this.currentCurrency||this.currency,ledgerSymbol:this.currentLedgerSymbol||this.ledgerSymbol},bubbles:!0})),setTimeout(()=>{this.showConfetti=!1},3e3)};this.onTransactionFailed=e=>{let t=e?.detail?.message||e?.detail?.error?.message||"Transaction failed",i=e?.detail?.error?.code||e?.detail?.code||"UNKNOWN_ERROR",n=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction failed event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-failed",{detail:{errorMessage:t,errorCode:i,transactionId:n,step:this.activeIndex},bubbles:!0}))};this.onTransactionMismatched=e=>{let t=e?.detail?.requestedAmount,i=e?.detail?.paidAmount,n=e?.detail?.transactionId||e?.detail?.id;this.failed=!0;let r=t!=null?String(t):"unknown",l=i!=null?String(i):"unknown";this.errorMessage=`Amount mismatch. Requested ${r}, paid ${l}.`,this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",this.errorMessage),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-failed",{detail:{errorMessage:this.errorMessage,errorCode:"MISMATCHED_AMOUNT",transactionId:n,step:this.activeIndex,requestedAmount:t,paidAmount:i},bubbles:!0}))};this.onMethodError=e=>{let t=e?.detail?.name||"",i=e?.detail?.error?.message||e?.detail?.message||"An error occurred",n=e?.detail?.error?.code||e?.detail?.code||"METHOD_ERROR";console.log("ICPay Progress: Method error event received:",e.detail),(t?.startsWith("sendFunds")||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order")&&(this.failed=!0,this.errorMessage=this.transformErrorMessage(i),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",i),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-error",{detail:{methodName:t,errorMessage:i,errorCode:n,step:this.activeIndex},bubbles:!0})))};this.onSDKError=e=>{let t=e?.detail?.message||"SDK error occurred",i=e?.detail?.code||"SDK_ERROR";console.log("ICPay Progress: SDK error event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-sdk-error",{detail:{errorMessage:t,errorCode:i,step:this.activeIndex},bubbles:!0}))};this.onWalletConnected=e=>{let t=e?.detail?.walletType||"unknown";console.log("ICPay Progress: Wallet connected event received:",e.detail),this.completeByKey("wallet"),this.setLoadingByKey("init"),this.dispatchEvent(new CustomEvent("icpay-progress-wallet-connected",{detail:{walletType:t,step:this.activeIndex},bubbles:!0}))};this.onWalletDisconnected=e=>{let t=e?.detail?.walletType||"unknown";console.log("ICPay Progress: Wallet disconnected event received:",e.detail),this.dispatchEvent(new CustomEvent("icpay-progress-wallet-disconnected",{detail:{walletType:t,step:this.activeIndex},bubbles:!0}))};this.onBalanceCheck=e=>{let t=e?.detail?.hasBalance||!1,i=e?.detail?.balance||0;console.log("ICPay Progress: Balance check event received:",e.detail),t||(this.failed=!0,this.errorMessage="Insufficient balance for transaction",this.updateStepStatus(this.activeIndex,"error","Insufficient balance for transaction"),this.stopAutomaticProgression(),this.dispatchEvent(new CustomEvent("icpay-progress-insufficient-balance",{detail:{balance:i,required:this.currentAmount||this.amount,step:this.activeIndex},bubbles:!0})))};this.onLedgerVerified=e=>{let t=e?.detail?.ledgerId||e?.detail?.canisterId,i=e?.detail?.symbol||"unknown";console.log("ICPay Progress: Ledger verified event received:",e.detail),i&&i!=="unknown"&&(this.currentLedgerSymbol=i,this.ledgerSymbol=i),this.dispatchEvent(new CustomEvent("icpay-progress-ledger-verified",{detail:{ledgerId:t,symbol:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetPayment=e=>{let t=e?.detail?.amount,i=e?.detail?.currency,n=e?.detail?.ledgerSymbol;if(console.log("ICPay Progress: Widget payment event received:",e.detail),t!==void 0&&(this.currentAmount=t,this.amount=t),i&&(this.currentCurrency=i,this.currency=i),n&&(this.currentLedgerSymbol=n,this.ledgerSymbol=n),!this.failed){for(let r=this.activeIndex;r<this.currentSteps.length;r++)this.updateStepStatus(r,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-payment",{detail:{amount:t,currency:i,ledgerSymbol:n,step:this.activeIndex},bubbles:!0}))};this.onWidgetError=e=>{let t=e?.detail?.message||"Widget error occurred",i=e?.detail?.code||"WIDGET_ERROR";console.log("ICPay Progress: Widget error event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-widget-error",{detail:{errorMessage:t,errorCode:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetUnlock=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget unlock event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-unlock",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetTip=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget tip event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-tip",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetDonation=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget donation event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-donation",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetCoffee=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget coffee event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-coffee",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))}}connectedCallback(){super.connectedCallback();try{ee(this,this.theme)}catch{}this.currentSteps=[...this.steps],this.currentAmount=this.amount,this.currentCurrency=this.currency,this.currentLedgerSymbol=this.ledgerSymbol,this.attachSDKEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this.detachSDKEventListeners(),this.stopAutomaticProgression()}updated(e){if(e.has("theme"))try{ee(this,this.theme)}catch{}}attachSDKEventListeners(){window.addEventListener("icpay-sdk-method-start",this.onMethodStart),window.addEventListener("icpay-sdk-method-success",this.onMethodSuccess),window.addEventListener("icpay-sdk-method-error",this.onMethodError),window.addEventListener("icpay-sdk-transaction-created",this.onTransactionCreated),window.addEventListener("icpay-sdk-transaction-updated",this.onTransactionUpdated),window.addEventListener("icpay-sdk-transaction-completed",this.onTransactionCompleted),window.addEventListener("icpay-sdk-transaction-failed",this.onTransactionFailed),window.addEventListener("icpay-sdk-transaction-mismatched",this.onTransactionMismatched),window.addEventListener("icpay-sdk-error",this.onSDKError),window.addEventListener("icpay-sdk-wallet-connected",this.onWalletConnected),window.addEventListener("icpay-sdk-wallet-disconnected",this.onWalletDisconnected),window.addEventListener("icpay-sdk-balance-check",this.onBalanceCheck),window.addEventListener("icpay-sdk-ledger-verified",this.onLedgerVerified),window.addEventListener("icpay-pay",this.onWidgetPayment),window.addEventListener("icpay-error",this.onWidgetError),window.addEventListener("icpay-unlock",this.onWidgetUnlock),window.addEventListener("icpay-tip",this.onWidgetTip),window.addEventListener("icpay-donation",this.onWidgetDonation),window.addEventListener("icpay-coffee",this.onWidgetCoffee)}detachSDKEventListeners(){window.removeEventListener("icpay-sdk-method-start",this.onMethodStart),window.removeEventListener("icpay-sdk-method-success",this.onMethodSuccess),window.removeEventListener("icpay-sdk-method-error",this.onMethodError),window.removeEventListener("icpay-sdk-transaction-created",this.onTransactionCreated),window.removeEventListener("icpay-sdk-transaction-updated",this.onTransactionUpdated),window.removeEventListener("icpay-sdk-transaction-completed",this.onTransactionCompleted),window.removeEventListener("icpay-sdk-transaction-failed",this.onTransactionFailed),window.removeEventListener("icpay-sdk-transaction-mismatched",this.onTransactionMismatched),window.removeEventListener("icpay-sdk-error",this.onSDKError),window.removeEventListener("icpay-sdk-wallet-connected",this.onWalletConnected),window.removeEventListener("icpay-sdk-wallet-disconnected",this.onWalletDisconnected),window.removeEventListener("icpay-sdk-balance-check",this.onBalanceCheck),window.removeEventListener("icpay-sdk-ledger-verified",this.onLedgerVerified),window.removeEventListener("icpay-pay",this.onWidgetPayment),window.removeEventListener("icpay-error",this.onWidgetError),window.removeEventListener("icpay-unlock",this.onWidgetUnlock),window.removeEventListener("icpay-tip",this.onWidgetTip),window.removeEventListener("icpay-donation",this.onWidgetDonation),window.removeEventListener("icpay-coffee",this.onWidgetCoffee)}startAutomaticProgression(){this.progressionTimer&&clearInterval(this.progressionTimer),this.activeIndex=1,this.updateStepStatus(this.activeIndex,"loading"),console.log("ICPay Progress: Starting automatic progression from step:",this.activeIndex),this.progressionTimer=setInterval(()=>{if(this.failed||this.completed){this.stopAutomaticProgression();return}console.log("ICPay Progress: Processing step:",this.activeIndex),this.updateStepStatus(this.activeIndex,"completed"),this.activeIndex<this.currentSteps.length-1?(this.activeIndex++,this.updateStepStatus(this.activeIndex,"loading"),console.log("ICPay Progress: Auto-progressed to step:",this.activeIndex)):(this.stopAutomaticProgression(),console.log("ICPay Progress: All steps completed, waiting for transaction completion")),this.requestUpdate()},3e3)}stopAutomaticProgression(){this.progressionTimer&&(clearInterval(this.progressionTimer),this.progressionTimer=null)}updateStepStatus(e,t,i){if(e>=0&&e<this.currentSteps.length){let n=this.currentSteps[e],r=n.status;n.status=t,t==="completed"&&(n.timestamp=this.getCurrentTime()),t==="error"&&i&&(n.errorMessage=this.transformErrorMessage(i)),console.log(`ICPay Progress: Step ${e} (${n.label}) status changed from ${r} to ${t}`),this.requestUpdate()}}getCurrentTime(){return new Date().toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}progressPercent(){if(this.failed)return 0;if(this.showSuccess)return 100;let t=this.currentSteps.filter(i=>i.status==="completed").length/this.currentSteps.length*100;return Math.max(0,Math.min(100,t))}verticalPercent(){if(this.failed)return 0;if(this.showSuccess)return 100;let t=this.currentSteps.filter(i=>i.status==="completed").length/this.currentSteps.length*100;return Math.max(0,Math.min(100,t))}getStepIcon(e){switch(e.status){case"loading":return x`<div class="spinner"></div>`;case"completed":return"\u2713";case"error":return"\u2717";default:return"\u25CB"}}getStepIndexByKey(e){return this.currentSteps.findIndex(t=>t.key===e)}setLoadingByKey(e){let t=this.getStepIndexByKey(e);t>=0&&(this.activeIndex=t,this.updateStepStatus(t,"loading"),e==="confirm"&&(this.confirmLoadingStartedAt=Date.now()))}completeByKey(e){let t=this.getStepIndexByKey(e);t>=0&&(this.updateStepStatus(t,"completed"),this.activeIndex=t)}transformErrorMessage(e){let t=String(e||"").toLowerCase();return t.includes("user rejected")||t.includes("user cancelled")||t.includes("user canceled")||t.includes("signature rejected")?"User have rejected the transfer":e}renderConfetti(){if(!this.showConfetti)return"";let e=Array.from({length:50},(i,n)=>n),t=["#0066FF","#ef4444","#10b981","#f59e0b","#8b5cf6"];return x`
|
|
59
|
+
`;function ee(o,a){if(!o||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(F,K)=>{K&&o.style.setProperty(F,K)};i("--icpay-primary",e),i("--icpay-secondary",t);let n=F=>{if(!F)return null;let K=F.replace("#",""),z=K.length===3?K.split("").map(We=>We+We).join(""):K,j=parseInt(z,16),_=j>>16&255,Re=j>>8&255,$e=j&255;return{r:_,g:Re,b:$e}},c=(F=>{let K=n(F);if(!K)return 0;let z=j=>{let _=j/255;return _<=.03928?_/12.92:Math.pow((_+.055)/1.055,2.4)};return .2126*z(K.r)+.7152*z(K.g)+.0722*z(K.b)})(e||t)>.6,d=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),p=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),E=a.borderColor||(c?"#d1d5db":"#4b5563"),ge=a.textColor||(c?"#111827":"#f9fafb"),ye=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),ue=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",ye),i("--icpay-text",ge),i("--icpay-muted",ue),i("--icpay-surface",d),i("--icpay-surface-alt",p),i("--icpay-border",E)}import{Icpay as Te}from"@ic-pay/icpay-sdk";var Ne=typeof window<"u";function be(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}function h(o){if(!Ne)return{client:{},quoteUsd:async()=>({tokenAmountDecimals:"0"}),sendUsd:async()=>({transactionId:"0",status:"pending"}),startOnrampUsd:async()=>({transactionId:"0",status:"pending",metadata:{onramp:{sessionId:null}}}),notifyIntentUntilComplete:()=>({stop:()=>{}})};be(o.debug||!1,"Creating SDK with config:",o);let a={publishableKey:o.publishableKey};o.enableEvents!==void 0?a.enableEvents=o.enableEvents:a.enableEvents=!0,o.apiUrl&&(a.apiUrl=o.apiUrl),o.icHost&&(a.icHost=o.icHost),o.actorProvider&&(a.actorProvider=o.actorProvider),o.connectedWallet&&(a.connectedWallet=o.connectedWallet),o.debug!==void 0&&(a.debug=o.debug),be(o.debug||!1,"Filtered SDK config:",a);try{let l=function(c,d,p){return t.notifyPaymentIntentOnRamp({paymentIntentId:c,intervalMs:d,orderId:p})};var e=l;be(o.debug||!1,"typeof Icpay:",typeof Te);let t=new Te(a);if(Ne){let c=t,d=p=>{c.addEventListener(p,E=>{window.dispatchEvent(new CustomEvent(p,{detail:E?.detail??E}))})};["icpay-sdk-error","icpay-sdk-transaction-created","icpay-sdk-transaction-updated","icpay-sdk-transaction-completed","icpay-sdk-transaction-failed","icpay-sdk-method-start","icpay-sdk-method-success","icpay-sdk-method-error"].forEach(d)}async function i(c,d){return t.calculateTokenAmountFromUSD({usdAmount:c,ledgerCanisterId:d})}async function n(c,d,p){return t.sendFundsUsd({usdAmount:c,ledgerCanisterId:d,metadata:p})}async function r(c,d,p){return t.sendFundsUsd({usdAmount:c,ledgerCanisterId:d,metadata:p,onrampPayment:!0})}return{client:t,quoteUsd:i,sendUsd:n,startOnrampUsd:r,notifyIntentUntilComplete:l}}catch(t){throw be(o.debug||!1,"Error creating SDK:",t),t}}import{LitElement as qe,html as ne,css as Qe}from"lit";import{customElement as _e,property as et,state as N}from"lit/decorators.js";import{IcpayError as Ue}from"@ic-pay/icpay-sdk";var I={WALLET_NOT_CONNECTED:"WALLET_NOT_CONNECTED",WALLET_USER_CANCELLED:"WALLET_USER_CANCELLED",WALLET_SIGNATURE_REJECTED:"WALLET_SIGNATURE_REJECTED",INSUFFICIENT_BALANCE:"INSUFFICIENT_BALANCE",NETWORK_ERROR:"NETWORK_ERROR",API_ERROR:"API_ERROR",LEDGER_NOT_FOUND:"LEDGER_NOT_FOUND",TRANSACTION_FAILED:"TRANSACTION_FAILED",TRANSACTION_TIMEOUT:"TRANSACTION_TIMEOUT",UNKNOWN_ERROR:"UNKNOWN_ERROR"},Ke={onError:o=>{console.error("[ICPay Widget] Error:",o)},onUserCancelled:()=>{console.log("[ICPay Widget] User cancelled the action")},onInsufficientBalance:o=>{console.warn("[ICPay Widget] Insufficient balance:",o.message)},onWalletError:o=>{console.warn("[ICPay Widget] Wallet error:",o.message)},onNetworkError:o=>{console.error("[ICPay Widget] Network error:",o.message)}};function C(o,a=Ke){o instanceof Ue?(a.onError(o),o.isUserCancelled()?a.onUserCancelled?.():o.isBalanceError()?a.onInsufficientBalance?.(o):o.isWalletError()?a.onWalletError?.(o):o.isNetworkError()&&a.onNetworkError?.(o)):(console.error("[ICPay Widget] Unknown error:",o),a.onError(new Ue({code:I.UNKNOWN_ERROR,message:o instanceof Error?o.message:"An unknown error occurred",details:o})))}var ze={[I.WALLET_NOT_CONNECTED]:"Please connect your wallet to continue",[I.WALLET_USER_CANCELLED]:"User have rejected the transfer",[I.WALLET_SIGNATURE_REJECTED]:"User have rejected the transfer",[I.INSUFFICIENT_BALANCE]:"Insufficient balance for this transaction",[I.NETWORK_ERROR]:"Network error. Please try again",[I.API_ERROR]:"Service temporarily unavailable",[I.LEDGER_NOT_FOUND]:"Selected token is not supported",[I.TRANSACTION_FAILED]:"Transaction failed. Please try again",[I.TRANSACTION_TIMEOUT]:"Transaction timed out. Please try again",[I.UNKNOWN_ERROR]:"Something went wrong. Please try again"};function L(o){return ze[o.code]||o.message||"An error occurred"}function O(o){return!o.isUserCancelled()}function A(o){if(o.userAction)return o.userAction;switch(o.code){case I.WALLET_NOT_CONNECTED:return"Connect Wallet";case I.INSUFFICIENT_BALANCE:return"Add Funds";case I.NETWORK_ERROR:case I.API_ERROR:return"Try Again";default:return null}}function W(o){return o.isUserCancelled()?"info":o.isBalanceError()||o.isWalletError()?"warning":"error"}import{LitElement as He,html as x,css as je}from"lit";import{customElement as Ve,property as te,state as H}from"lit/decorators.js";var Ge=[{key:"wallet",label:"Connect Wallet",tooltip:"Awaiting wallet connection",status:"pending"},{key:"init",label:"Initialising ICPay",tooltip:"Initializing payment",status:"pending"},{key:"await",label:"Awaiting payment confirmation",tooltip:"Preparing payment",status:"pending"},{key:"transfer",label:"Transferring funds",tooltip:"Submitting payment",status:"pending"},{key:"verify",label:"Verifying payment",tooltip:"Confirming payment",status:"pending"},{key:"confirm",label:"Payment confirmed",tooltip:"Payment completed",status:"pending"}],u=class extends He{constructor(){super(...arguments);this.open=!1;this.steps=Ge;this.amount=0;this.currency="";this.ledgerSymbol="";this.activeIndex=0;this.completed=!1;this.failed=!1;this.errorMessage=null;this.showSuccess=!1;this.showConfetti=!1;this.currentSteps=[];this.currentAmount=0;this.currentCurrency="";this.currentLedgerSymbol="";this.confirmLoadingStartedAt=null;this.progressionTimer=null;this.onMethodStart=e=>{let t=e?.detail?.name||"",i=e?.detail?.type||"";if(console.log("ICPay Progress: Method start event received:",e.detail),t==="sendFunds"||t==="sendFundsUsd"||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order"){if(this.open=!0,this.activeIndex=0,this.completed=!1,this.failed=!1,this.errorMessage=null,this.showSuccess=!1,this.showConfetti=!1,this.currentSteps=this.currentSteps.map(n=>({...n,status:"pending"})),i==="onramp"){let n=this.getStepIndexByKey("wallet");n>=0&&(this.currentSteps[n]={...this.currentSteps[n],label:"Transak Started",tooltip:"Awaiting Transak information"})}this.setLoadingByKey("wallet"),e?.detail?.amount!==void 0&&(this.currentAmount=e.detail.amount,this.amount=e.detail.amount,console.log("ICPay Progress: Amount updated to:",e.detail.amount)),e?.detail?.currency&&(this.currentCurrency=e.detail.currency,this.currency=e.detail.currency,console.log("ICPay Progress: Currency updated to:",e.detail.currency)),e?.detail?.ledgerSymbol&&(this.currentLedgerSymbol=e.detail.ledgerSymbol,this.ledgerSymbol=e.detail.ledgerSymbol,console.log("ICPay Progress: Current state after method start:",{activeIndex:this.activeIndex,currentAmount:this.currentAmount,currentCurrency:this.currentCurrency,currentLedgerSymbol:this.currentLedgerSymbol})),console.log("ICPay Progress: Waiting for wallet confirmation before starting progression"),this.requestUpdate()}!this.failed&&!this.completed&&(t==="sendFundsToLedger"?(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.setLoadingByKey("transfer")):t==="notifyLedgerTransaction"&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.setLoadingByKey("verify")))};this.onMethodSuccess=e=>{let t=e?.detail?.name||"";(t==="sendFunds"||t==="sendFundsUsd"||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order")&&this.dispatchEvent(new CustomEvent("icpay-progress-method-success",{detail:{methodName:t,step:this.activeIndex},bubbles:!0})),!this.failed&&!this.completed&&(t==="getLedgerBalance"?(this.completeByKey("wallet"),this.completeByKey("init"),this.setLoadingByKey("await")):t==="sendFundsToLedger"?(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.setLoadingByKey("verify")):t==="notifyLedgerTransaction"&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.completeByKey("verify"),this.setLoadingByKey("confirm")))};this.onTransactionCreated=e=>{let t=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction created event received:",e.detail),!this.failed&&!this.completed&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.setLoadingByKey("transfer")),this.dispatchEvent(new CustomEvent("icpay-progress-transaction-created",{detail:{transactionId:t,step:this.activeIndex},bubbles:!0}))};this.onTransactionUpdated=e=>{let t=e?.detail?.status||"pending",i=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction updated event received:",e.detail),!this.failed&&this.completed,this.dispatchEvent(new CustomEvent("icpay-progress-transaction-updated",{detail:{status:t,transactionId:i,step:this.activeIndex},bubbles:!0}))};this.onTransactionCompleted=e=>{let t=e?.detail?.transactionId||e?.detail?.id,i=e?.detail?.status||"completed";console.log("ICPay Progress: Transaction completed event received:",e.detail),console.log("ICPay Progress: Current state when transaction completed:",{activeIndex:this.activeIndex,completed:this.completed,failed:this.failed,showSuccess:this.showSuccess}),this.completeByKey("transfer"),this.completeByKey("await"),this.completeByKey("init"),this.completeByKey("verify"),this.completeByKey("confirm"),this.completed=!0,this.showSuccess=!0,this.showConfetti=!0,this.dispatchEvent(new CustomEvent("icpay-progress-completed",{detail:{transactionId:t,status:i,amount:this.currentAmount||this.amount,currency:this.currentCurrency||this.currency,ledgerSymbol:this.currentLedgerSymbol||this.ledgerSymbol},bubbles:!0})),setTimeout(()=>{this.showConfetti=!1},3e3)};this.onTransactionFailed=e=>{let t=e?.detail?.message||e?.detail?.error?.message||"Transaction failed",i=e?.detail?.error?.code||e?.detail?.code||"UNKNOWN_ERROR",n=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction failed event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-failed",{detail:{errorMessage:t,errorCode:i,transactionId:n,step:this.activeIndex},bubbles:!0}))};this.onTransactionMismatched=e=>{let t=e?.detail?.requestedAmount,i=e?.detail?.paidAmount,n=e?.detail?.transactionId||e?.detail?.id;this.failed=!0;let r=t!=null?String(t):"unknown",l=i!=null?String(i):"unknown";this.errorMessage=`Amount mismatch. Requested ${r}, paid ${l}.`,this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",this.errorMessage),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-failed",{detail:{errorMessage:this.errorMessage,errorCode:"MISMATCHED_AMOUNT",transactionId:n,step:this.activeIndex,requestedAmount:t,paidAmount:i},bubbles:!0}))};this.onMethodError=e=>{let t=e?.detail?.name||"",i=e?.detail?.error?.message||e?.detail?.message||"An error occurred",n=e?.detail?.error?.code||e?.detail?.code||"METHOD_ERROR";console.log("ICPay Progress: Method error event received:",e.detail),(t?.startsWith("sendFunds")||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order")&&(this.failed=!0,this.errorMessage=this.transformErrorMessage(i),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",i),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-error",{detail:{methodName:t,errorMessage:i,errorCode:n,step:this.activeIndex},bubbles:!0})))};this.onSDKError=e=>{let t=e?.detail?.message||"SDK error occurred",i=e?.detail?.code||"SDK_ERROR";console.log("ICPay Progress: SDK error event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-sdk-error",{detail:{errorMessage:t,errorCode:i,step:this.activeIndex},bubbles:!0}))};this.onWalletConnected=e=>{let t=e?.detail?.walletType||"unknown";console.log("ICPay Progress: Wallet connected event received:",e.detail),this.completeByKey("wallet"),this.setLoadingByKey("init"),this.dispatchEvent(new CustomEvent("icpay-progress-wallet-connected",{detail:{walletType:t,step:this.activeIndex},bubbles:!0}))};this.onWalletDisconnected=e=>{let t=e?.detail?.walletType||"unknown";console.log("ICPay Progress: Wallet disconnected event received:",e.detail),this.dispatchEvent(new CustomEvent("icpay-progress-wallet-disconnected",{detail:{walletType:t,step:this.activeIndex},bubbles:!0}))};this.onBalanceCheck=e=>{let t=e?.detail?.hasBalance||!1,i=e?.detail?.balance||0;console.log("ICPay Progress: Balance check event received:",e.detail),t||(this.failed=!0,this.errorMessage="Insufficient balance for transaction",this.updateStepStatus(this.activeIndex,"error","Insufficient balance for transaction"),this.stopAutomaticProgression(),this.dispatchEvent(new CustomEvent("icpay-progress-insufficient-balance",{detail:{balance:i,required:this.currentAmount||this.amount,step:this.activeIndex},bubbles:!0})))};this.onLedgerVerified=e=>{let t=e?.detail?.ledgerId||e?.detail?.canisterId,i=e?.detail?.symbol||"unknown";console.log("ICPay Progress: Ledger verified event received:",e.detail),i&&i!=="unknown"&&(this.currentLedgerSymbol=i,this.ledgerSymbol=i),this.dispatchEvent(new CustomEvent("icpay-progress-ledger-verified",{detail:{ledgerId:t,symbol:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetPayment=e=>{let t=e?.detail?.amount,i=e?.detail?.currency,n=e?.detail?.ledgerSymbol;if(console.log("ICPay Progress: Widget payment event received:",e.detail),t!==void 0&&(this.currentAmount=t,this.amount=t),i&&(this.currentCurrency=i,this.currency=i),n&&(this.currentLedgerSymbol=n,this.ledgerSymbol=n),!this.failed){for(let r=this.activeIndex;r<this.currentSteps.length;r++)this.updateStepStatus(r,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-payment",{detail:{amount:t,currency:i,ledgerSymbol:n,step:this.activeIndex},bubbles:!0}))};this.onWidgetError=e=>{let t=e?.detail?.message||"Widget error occurred",i=e?.detail?.code||"WIDGET_ERROR";console.log("ICPay Progress: Widget error event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-widget-error",{detail:{errorMessage:t,errorCode:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetUnlock=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget unlock event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-unlock",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetTip=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget tip event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-tip",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetDonation=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget donation event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-donation",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetCoffee=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget coffee event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-coffee",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))}}connectedCallback(){super.connectedCallback();try{ee(this,this.theme)}catch{}this.currentSteps=[...this.steps],this.currentAmount=this.amount,this.currentCurrency=this.currency,this.currentLedgerSymbol=this.ledgerSymbol,this.attachSDKEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this.detachSDKEventListeners(),this.stopAutomaticProgression()}updated(e){if(e.has("theme"))try{ee(this,this.theme)}catch{}}attachSDKEventListeners(){window.addEventListener("icpay-sdk-method-start",this.onMethodStart),window.addEventListener("icpay-sdk-method-success",this.onMethodSuccess),window.addEventListener("icpay-sdk-method-error",this.onMethodError),window.addEventListener("icpay-sdk-transaction-created",this.onTransactionCreated),window.addEventListener("icpay-sdk-transaction-updated",this.onTransactionUpdated),window.addEventListener("icpay-sdk-transaction-completed",this.onTransactionCompleted),window.addEventListener("icpay-sdk-transaction-failed",this.onTransactionFailed),window.addEventListener("icpay-sdk-transaction-mismatched",this.onTransactionMismatched),window.addEventListener("icpay-sdk-error",this.onSDKError),window.addEventListener("icpay-sdk-wallet-connected",this.onWalletConnected),window.addEventListener("icpay-sdk-wallet-disconnected",this.onWalletDisconnected),window.addEventListener("icpay-sdk-balance-check",this.onBalanceCheck),window.addEventListener("icpay-sdk-ledger-verified",this.onLedgerVerified),window.addEventListener("icpay-pay",this.onWidgetPayment),window.addEventListener("icpay-error",this.onWidgetError),window.addEventListener("icpay-unlock",this.onWidgetUnlock),window.addEventListener("icpay-tip",this.onWidgetTip),window.addEventListener("icpay-donation",this.onWidgetDonation),window.addEventListener("icpay-coffee",this.onWidgetCoffee)}detachSDKEventListeners(){window.removeEventListener("icpay-sdk-method-start",this.onMethodStart),window.removeEventListener("icpay-sdk-method-success",this.onMethodSuccess),window.removeEventListener("icpay-sdk-method-error",this.onMethodError),window.removeEventListener("icpay-sdk-transaction-created",this.onTransactionCreated),window.removeEventListener("icpay-sdk-transaction-updated",this.onTransactionUpdated),window.removeEventListener("icpay-sdk-transaction-completed",this.onTransactionCompleted),window.removeEventListener("icpay-sdk-transaction-failed",this.onTransactionFailed),window.removeEventListener("icpay-sdk-transaction-mismatched",this.onTransactionMismatched),window.removeEventListener("icpay-sdk-error",this.onSDKError),window.removeEventListener("icpay-sdk-wallet-connected",this.onWalletConnected),window.removeEventListener("icpay-sdk-wallet-disconnected",this.onWalletDisconnected),window.removeEventListener("icpay-sdk-balance-check",this.onBalanceCheck),window.removeEventListener("icpay-sdk-ledger-verified",this.onLedgerVerified),window.removeEventListener("icpay-pay",this.onWidgetPayment),window.removeEventListener("icpay-error",this.onWidgetError),window.removeEventListener("icpay-unlock",this.onWidgetUnlock),window.removeEventListener("icpay-tip",this.onWidgetTip),window.removeEventListener("icpay-donation",this.onWidgetDonation),window.removeEventListener("icpay-coffee",this.onWidgetCoffee)}startAutomaticProgression(){this.progressionTimer&&clearInterval(this.progressionTimer),this.activeIndex=1,this.updateStepStatus(this.activeIndex,"loading"),console.log("ICPay Progress: Starting automatic progression from step:",this.activeIndex),this.progressionTimer=setInterval(()=>{if(this.failed||this.completed){this.stopAutomaticProgression();return}console.log("ICPay Progress: Processing step:",this.activeIndex),this.updateStepStatus(this.activeIndex,"completed"),this.activeIndex<this.currentSteps.length-1?(this.activeIndex++,this.updateStepStatus(this.activeIndex,"loading"),console.log("ICPay Progress: Auto-progressed to step:",this.activeIndex)):(this.stopAutomaticProgression(),console.log("ICPay Progress: All steps completed, waiting for transaction completion")),this.requestUpdate()},3e3)}stopAutomaticProgression(){this.progressionTimer&&(clearInterval(this.progressionTimer),this.progressionTimer=null)}updateStepStatus(e,t,i){if(e>=0&&e<this.currentSteps.length){let n=this.currentSteps[e],r=n.status;n.status=t,t==="completed"&&(n.timestamp=this.getCurrentTime()),t==="error"&&i&&(n.errorMessage=this.transformErrorMessage(i)),console.log(`ICPay Progress: Step ${e} (${n.label}) status changed from ${r} to ${t}`),this.requestUpdate()}}getCurrentTime(){return new Date().toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}progressPercent(){if(this.failed)return 0;if(this.showSuccess)return 100;let t=this.currentSteps.filter(i=>i.status==="completed").length/this.currentSteps.length*100;return Math.max(0,Math.min(100,t))}verticalPercent(){if(this.failed)return 0;if(this.showSuccess)return 100;let t=this.currentSteps.filter(i=>i.status==="completed").length/this.currentSteps.length*100;return Math.max(0,Math.min(100,t))}getStepIcon(e){switch(e.status){case"loading":return x`<div class="spinner"></div>`;case"completed":return"\u2713";case"error":return"\u2717";default:return"\u25CB"}}getStepIndexByKey(e){return this.currentSteps.findIndex(t=>t.key===e)}setLoadingByKey(e){let t=this.getStepIndexByKey(e);t>=0&&(this.activeIndex=t,this.updateStepStatus(t,"loading"),e==="confirm"&&(this.confirmLoadingStartedAt=Date.now()))}completeByKey(e){let t=this.getStepIndexByKey(e);t>=0&&(this.updateStepStatus(t,"completed"),this.activeIndex=t)}transformErrorMessage(e){let t=String(e||"").toLowerCase();return t.includes("user rejected")||t.includes("user cancelled")||t.includes("user canceled")||t.includes("signature rejected")?"User have rejected the transfer":e}renderConfetti(){if(!this.showConfetti)return"";let e=Array.from({length:50},(i,n)=>n),t=["#0066FF","#ef4444","#10b981","#f59e0b","#8b5cf6"];return x`
|
|
60
60
|
<div class="confetti">
|
|
61
61
|
${e.map(i=>x`
|
|
62
62
|
<div
|
|
@@ -343,7 +343,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
343
343
|
opacity: 0;
|
|
344
344
|
}
|
|
345
345
|
}
|
|
346
|
-
`,s([te({type:Boolean})],u.prototype,"open",2),s([te({type:Array})],u.prototype,"steps",2),s([te({type:Number})],u.prototype,"amount",2),s([te({type:String})],u.prototype,"currency",2),s([te({type:String})],u.prototype,"ledgerSymbol",2),s([
|
|
346
|
+
`,s([te({type:Boolean})],u.prototype,"open",2),s([te({type:Array})],u.prototype,"steps",2),s([te({type:Number})],u.prototype,"amount",2),s([te({type:String})],u.prototype,"currency",2),s([te({type:String})],u.prototype,"ledgerSymbol",2),s([H()],u.prototype,"activeIndex",2),s([H()],u.prototype,"completed",2),s([H()],u.prototype,"failed",2),s([H()],u.prototype,"errorMessage",2),s([H()],u.prototype,"showSuccess",2),s([H()],u.prototype,"showConfetti",2),s([H()],u.prototype,"currentSteps",2),s([H()],u.prototype,"currentAmount",2),s([H()],u.prototype,"currentCurrency",2),s([H()],u.prototype,"currentLedgerSymbol",2),s([H()],u.prototype,"confirmLoadingStartedAt",2),s([te({type:Object})],u.prototype,"theme",2),u=s([Ve("icpay-progress-bar")],u);import{LitElement as Ye,html as X,css as Ze}from"lit";import{customElement as Je,property as q}from"lit/decorators.js";import{query as Pe}from"lit/decorators.js";var R=class extends Ye{constructor(){super(...arguments);this.options=[];this.value=null;this.defaultSymbol="ICP";this.mode="buttons";this.open=!1;this.showLabel=!0;this.menuPos={left:0,top:0,width:0}}connectedCallback(){super.connectedCallback();try{ee(this,this.theme)}catch{}}updated(e){if(e.has("theme"))try{ee(this,this.theme)}catch{}}firstUpdated(){let e=i=>{if(!this.open)return;i.composedPath().includes(this)||this.closeDropdown()},t=i=>{i.key==="Escape"&&this.open&&this.closeDropdown()};this._onDocClick=e,this._onKey=t,window.addEventListener("click",e),window.addEventListener("keydown",t)}disconnectedCallback(){super.disconnectedCallback();let e=this._onDocClick,t=this._onKey;e&&window.removeEventListener("click",e),t&&window.removeEventListener("keydown",t)}get effectiveSymbol(){if(this.value)return this.value;let e=this.options?.[0]?.symbol;return this.defaultSymbol||e||"ICP"}getOptionBySymbol(e){return(this.options||[]).find(t=>t.symbol===e)}getLogoUrl(e){return`https://widget.icpay.org/ledger/${String(e||"").toLowerCase()}.svg`}onSelect(e){this.value=e,this.requestUpdate("value"),this.open=!1,this.dispatchEvent(new CustomEvent("icpay-token-change",{detail:{symbol:e},bubbles:!0,composed:!0}))}toggleDropdown(){this.open=!this.open}closeDropdown(){this.open=!1}render(){let e=this.options||[];if(this.mode==="none"||e.length<=1){let i=e.length===1?e[0].symbol:this.effectiveSymbol;return this.value!==i&&queueMicrotask(()=>this.onSelect(i)),X``}if(this.mode==="dropdown"){let i=this.effectiveSymbol,n=this.getOptionBySymbol(i)||{symbol:i,label:i};return X`
|
|
347
347
|
${this.showLabel?X`<label class="icpay-dropdown-label">Payment method</label>`:null}
|
|
348
348
|
<div class="dropdown-wrapper">
|
|
349
349
|
<div class="dropdown-trigger ${this.open?"open":""}" @click=${()=>this.toggleDropdown()}>
|
|
@@ -674,9 +674,9 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
674
674
|
border-color: rgba(239, 68, 68, 0.3);
|
|
675
675
|
color: #ef4444;
|
|
676
676
|
}
|
|
677
|
-
`],s([st({type:Object})],m.prototype,"config",2),s([S()],m.prototype,"selectedAmount",2),s([S()],m.prototype,"selectedSymbol",2),s([S()],m.prototype,"total",2),s([S()],m.prototype,"processing",2),s([S()],m.prototype,"succeeded",2),s([S()],m.prototype,"availableLedgers",2),s([S()],m.prototype,"errorMessage",2),s([S()],m.prototype,"errorSeverity",2),s([S()],m.prototype,"errorAction",2),s([S()],m.prototype,"walletConnected",2),s([S()],m.prototype,"pendingAction",2),s([S()],m.prototype,"showWalletModal",2),s([S()],m.prototype,"showOnrampModal",2),s([S()],m.prototype,"onrampSessionId",2),s([S()],m.prototype,"onrampPaymentIntentId",2),s([S()],m.prototype,"onrampErrorMessage",2),m=s([nt("icpay-tip-jar")],m);import{LitElement as rt,html as
|
|
677
|
+
`],s([st({type:Object})],m.prototype,"config",2),s([S()],m.prototype,"selectedAmount",2),s([S()],m.prototype,"selectedSymbol",2),s([S()],m.prototype,"total",2),s([S()],m.prototype,"processing",2),s([S()],m.prototype,"succeeded",2),s([S()],m.prototype,"availableLedgers",2),s([S()],m.prototype,"errorMessage",2),s([S()],m.prototype,"errorSeverity",2),s([S()],m.prototype,"errorAction",2),s([S()],m.prototype,"walletConnected",2),s([S()],m.prototype,"pendingAction",2),s([S()],m.prototype,"showWalletModal",2),s([S()],m.prototype,"showOnrampModal",2),s([S()],m.prototype,"onrampSessionId",2),s([S()],m.prototype,"onrampPaymentIntentId",2),s([S()],m.prototype,"onrampErrorMessage",2),m=s([nt("icpay-tip-jar")],m);import{LitElement as rt,html as me,css as ot}from"lit";import{customElement as at,property as ve,state as U}from"lit/decorators.js";var Se=typeof window<"u",ae=null;function Y(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var g=class extends rt{constructor(){super(...arguments);this.title="Article Title";this.preview="";this.lockedContent="";this.selectedSymbol="ICP";this.unlocked=!1;this.succeeded=!1;this.processing=!1;this.availableLedgers=[];this.errorMessage=null;this.errorSeverity=null;this.errorAction=null;this.walletConnected=!1;this.pendingAction=null;this.showWalletModal=!1;this.pnp=null;this.showOnrampModal=!1;this.onrampSessionId=null;this.onrampPaymentIntentId=null;this.onrampErrorMessage=null;this.transakMessageHandlerBound=null;this.onrampPollTimer=null;this.onrampPollingActive=!1;this.onrampNotifyController=null}get obfuscatedLockedContent(){try{return(this.lockedContent||"").replace(/[^\s]/g,"x")}catch{return"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}}async tryAutoConnectPNP(){try{if(!this.config||this.config?.useOwnWallet)return;let e=localStorage.getItem("icpay:pnp");if(!e)return;let t=JSON.parse(e);if(!t?.provider||!t?.principal)return;ae||(ae=(await import("@windoge98/plug-n-play")).PNP);let i=new ae(this.config?.plugNPlay||{});this.walletConnected=!1,this.config={...this.config,connectedWallet:{owner:t.principal,principal:t.principal,connected:!1}}}catch{}}attachTransakMessageListener(){if(!this.transakMessageHandlerBound){this.transakMessageHandlerBound=e=>this.onTransakMessage(e);try{window.addEventListener("message",this.transakMessageHandlerBound)}catch{}}}detachTransakMessageListener(){if(this.transakMessageHandlerBound){try{window.removeEventListener("message",this.transakMessageHandlerBound)}catch{}this.transakMessageHandlerBound=null}}onTransakMessage(e){let t=e?.data,i=t?.event_id||t?.eventId||t?.id;if(!(!i||typeof i!="string")&&i==="TRANSAK_ORDER_SUCCESSFUL"){if(this.detachTransakMessageListener(),this.onrampPollingActive)return;this.showOnrampModal=!1;let n=t?.data?.id||t?.id||t?.webhookData?.id||null;this.startOnrampPolling(n||void 0)}}startOnramp(){try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"sendFundsUsd",type:"onramp"}}))}catch{}this.showWalletModal=!1,setTimeout(()=>this.createOnrampIntent(),0)}async createOnrampIntent(){try{let e=h(this.config),i=this.cryptoOptions.find(d=>d.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol),n=await e.startOnrampUsd(this.config.priceUsd,i,{context:"article:onramp"}),r=n?.metadata?.onramp?.sessionId||n?.metadata?.onramp?.session_id||null,l=n?.metadata?.paymentIntentId||n?.paymentIntentId||null,c=n?.metadata?.onramp?.errorMessage||null;this.onrampPaymentIntentId=l,r?(this.onrampSessionId=r,this.onrampErrorMessage=null,this.showOnrampModal=!0,this.attachTransakMessageListener()):(this.onrampSessionId=null,this.onrampErrorMessage=c||"Failed to obtain onramp sessionId",this.showOnrampModal=!0)}catch(e){this.onrampSessionId=null,this.onrampErrorMessage=e?.message||"Failed to obtain onramp sessionId",this.showOnrampModal=!0}}startOnrampPolling(e){if(this.onrampPollTimer){try{clearInterval(this.onrampPollTimer)}catch{}this.onrampPollTimer=null}if(this.onrampNotifyController){try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null}let t=this.onrampPaymentIntentId;if(!t)return;let i=h(this.config),n=()=>{if(this.detachTransakMessageListener(),this.onrampNotifyController)try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null,this.onrampPollingActive=!1};try{window.addEventListener("icpay-sdk-transaction-completed",(()=>n()),{once:!0})}catch{}this.onrampPollingActive=!0,this.onrampNotifyController=i.notifyIntentUntilComplete(t,5e3,e),this.onrampPollTimer=1}get cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Se&&(Y(this.config?.debug||!1,"Article paywall connected",{config:this.config}),this.config&&(typeof this.config.title=="string"&&(this.title=this.config.title),typeof this.config.preview=="string"&&(this.preview=this.config.preview),typeof this.config.lockedContent=="string"&&(this.lockedContent=this.config.lockedContent)),this.tryAutoConnectPNP(),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers())}updated(e){if(e.has("config")&&this.config&&(typeof this.config.title=="string"&&(this.title=this.config.title),typeof this.config.preview=="string"&&(this.preview=this.config.preview),typeof this.config.lockedContent=="string"&&(this.lockedContent=this.config.lockedContent)),e.has("config")&&this.pendingAction&&this.config?.actorProvider){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="unlock"&&this.unlock()},0)}}async loadVerifiedLedgers(){if(!(!Se||!this.config?.publishableKey))try{let t=await h(this.config).client.getVerifiedLedgers();this.availableLedgers=t.map(i=>({symbol:i.symbol,label:i.name,canisterId:i.canisterId})),this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||this.availableLedgers[0]?.symbol||"ICP")}catch(e){console.warn("Failed to load verified ledgers:",e),this.availableLedgers=[{symbol:"ICP",label:"ICP",canisterId:"ryjl3-tyaaa-aaaaa-aaaba-cai"}],this.selectedSymbol||(this.selectedSymbol="ICP")}}selectSymbol(e){this.selectedSymbol=e}async unlock(){if(Se&&!(this.processing||this.unlocked)){Y(this.config?.debug||!1,"Article paywall unlock started",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,useOwnWallet:this.config.useOwnWallet}),this.errorMessage=null,this.errorSeverity=null,this.errorAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"unlock",type:"sendUsd",amount:this.config.priceUsd,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="unlock",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0}));return}}else if(!this.walletConnected){Y(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{ae||(ae=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new ae(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(Y(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="unlock",this.showWalletModal=!0;return}catch(r){Y(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}Y(this.config?.debug||!1,"Creating SDK for payment");let e=h(this.config),i=this.cryptoOptions.find(r=>r.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);Y(this.config?.debug||!1,"Article payment details",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.config.priceUsd,i,{context:"article"});Y(this.config?.debug||!1,"Article payment completed",{resp:n}),this.unlocked=!0,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:n.transactionId,status:n.status}),this.dispatchEvent(new CustomEvent("icpay-unlock",{detail:{amount:this.config.priceUsd,tx:n},bubbles:!0}))}catch(e){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}getWalletId(e){return e&&(e.id||e.provider||e.key)||""}getWalletLabel(e){return e&&(e.label||e.name||e.title||e.id)||"Wallet"}getWalletIcon(e){return e&&(e.icon||e.logo||e.image)||null}async connectWithWallet(e){if(this.pnp)try{if(!e)throw new Error("No wallet ID provided");let t=await this.pnp.connect(e);if(!!!(t&&(t.connected===!0||t.principal||t.owner||this.pnp?.account)))throw new Error("Wallet connection was rejected");this.walletConnected=!0;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:e}}))}catch{}this.config={...this.config,connectedWallet:t,actorProvider:(r,l)=>this.pnp.getActor({canisterId:r,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let n=this.pendingAction;this.pendingAction=null,n==="unlock"&&setTimeout(()=>this.unlock(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}render(){return this.config?me`
|
|
678
678
|
<div class="icpay-card icpay-section">
|
|
679
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
679
|
+
${this.config?.progressBar?.enabled!==!1?me`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
680
680
|
<div class="container">
|
|
681
681
|
<div class="title">${this.title}</div>
|
|
682
682
|
<div class="preview">${this.preview}</div>
|
|
@@ -699,10 +699,10 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
699
699
|
${this.unlocked?"Unlocked":this.processing?"Processing\u2026":(this.config?.buttonLabel||"Pay ${amount} with {symbol}").replace("{amount}",`${Number(this.config?.priceUsd??0).toFixed(2)}`).replace("{symbol}",this.selectedSymbol)}
|
|
700
700
|
</button>
|
|
701
701
|
|
|
702
|
-
${this.errorMessage?
|
|
702
|
+
${this.errorMessage?me`
|
|
703
703
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
704
704
|
${this.errorMessage}
|
|
705
|
-
${this.errorAction?
|
|
705
|
+
${this.errorAction?me`
|
|
706
706
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
707
707
|
${this.errorAction}
|
|
708
708
|
</button>
|
|
@@ -713,7 +713,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
713
713
|
|
|
714
714
|
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
715
715
|
</div>
|
|
716
|
-
`:
|
|
716
|
+
`:me`<div class="icpay-card icpay-section">Loading...</div>`}};g.styles=[P,ot`
|
|
717
717
|
.container { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
|
|
718
718
|
.title { color: var(--icpay-text); font-weight: 700; margin-bottom: 8px; }
|
|
719
719
|
.preview { color: var(--icpay-muted); margin-bottom: 12px; line-height: 1.6; }
|
|
@@ -890,9 +890,9 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
890
890
|
border-color: rgba(239, 68, 68, 0.3);
|
|
891
891
|
color: #ef4444;
|
|
892
892
|
}
|
|
893
|
-
`],s([mt({type:Object})],f.prototype,"config",2),s([k()],f.prototype,"selectedAmount",2),s([k()],f.prototype,"selectedSymbol",2),s([k()],f.prototype,"raised",2),s([k()],f.prototype,"processing",2),s([k()],f.prototype,"succeeded",2),s([k()],f.prototype,"availableLedgers",2),s([k()],f.prototype,"errorMessage",2),s([k()],f.prototype,"errorSeverity",2),s([k()],f.prototype,"errorAction",2),s([k()],f.prototype,"walletConnected",2),s([k()],f.prototype,"pendingAction",2),s([k()],f.prototype,"showWalletModal",2),s([k()],f.prototype,"showOnrampModal",2),s([k()],f.prototype,"onrampSessionId",2),s([k()],f.prototype,"onrampPaymentIntentId",2),s([k()],f.prototype,"onrampErrorMessage",2),f=s([ut("icpay-donation-thermometer")],f);import{LitElement as ft,html as pe,css as yt}from"lit";import{customElement as bt,property as vt,state as D}from"lit/decorators.js";var Ce=typeof window<"u",Le=null;function
|
|
893
|
+
`],s([mt({type:Object})],f.prototype,"config",2),s([k()],f.prototype,"selectedAmount",2),s([k()],f.prototype,"selectedSymbol",2),s([k()],f.prototype,"raised",2),s([k()],f.prototype,"processing",2),s([k()],f.prototype,"succeeded",2),s([k()],f.prototype,"availableLedgers",2),s([k()],f.prototype,"errorMessage",2),s([k()],f.prototype,"errorSeverity",2),s([k()],f.prototype,"errorAction",2),s([k()],f.prototype,"walletConnected",2),s([k()],f.prototype,"pendingAction",2),s([k()],f.prototype,"showWalletModal",2),s([k()],f.prototype,"showOnrampModal",2),s([k()],f.prototype,"onrampSessionId",2),s([k()],f.prototype,"onrampPaymentIntentId",2),s([k()],f.prototype,"onrampErrorMessage",2),f=s([ut("icpay-donation-thermometer")],f);import{LitElement as ft,html as pe,css as yt}from"lit";import{customElement as bt,property as vt,state as D}from"lit/decorators.js";var Ce=typeof window<"u",Le=null;function fe(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var w=class extends ft{constructor(){super(...arguments);this.selectedSymbol=null;this.processing=!1;this.succeeded=!1;this.availableLedgers=[];this.errorMessage=null;this.errorSeverity=null;this.errorAction=null;this.walletConnected=!1;this.pendingAction=null;this.showWalletModal=!1;this.showOnrampModal=!1;this.onrampSessionId=null;this.onrampPaymentIntentId=null;this.onrampErrorMessage=null;this.onrampPollTimer=null;this.transakMessageHandlerBound=null;this.pnp=null;this.sdk=null;this.onrampPollingActive=!1;this.onrampNotifyController=null}getSdk(){return this.sdk||(this.sdk=h(this.config)),this.sdk}get cryptoOptions(){return this.config?.cryptoOptions?.length?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Ce&&(fe(this.config?.debug||!1,"Pay button connected",{config:this.config}),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers(),this.config?.defaultSymbol&&(this.selectedSymbol=this.config.defaultSymbol))}updated(e){if(e.has("config")&&this.pendingAction&&this.config?.actorProvider){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="pay"&&this.pay()},0)}e.has("config")&&(this.sdk=null)}async loadVerifiedLedgers(){if(!(!Ce||!this.config?.publishableKey))try{let t=await this.getSdk().client.getVerifiedLedgers();this.availableLedgers=t.map(i=>({symbol:i.symbol,label:i.name,canisterId:i.canisterId})),this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||(this.availableLedgers[0]?.symbol??"ICP"))}catch(e){this.dispatchEvent(new CustomEvent("icpay-error",{detail:{message:"Failed to load verified ledgers",cause:e},bubbles:!0})),this.availableLedgers=[{symbol:"ICP",label:"ICP",canisterId:"ryjl3-tyaaa-aaaaa-aaaba-cai"}],this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||"ICP")}}selectSymbol(e){this.selectedSymbol=e}async ensureWallet(){if(this.config.useOwnWallet)return this.config.actorProvider?!0:(this.pendingAction="pay",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0})),!1);if(this.walletConnected)return!0;try{Le||(Le=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Le(this.config?.plugNPlay||{});let e=this.pnp.getEnabledWallets();if(fe(this.config?.debug||!1,"Available wallets",e),!e?.length)throw new Error("No wallets available");return this.pendingAction="pay",this.showWalletModal=!0,!1}catch(e){return this.errorMessage=e instanceof Error?e.message:"Wallet connection failed",this.errorSeverity="error",!1}}getWalletId(e){return e&&(e.id||e.provider||e.key)||""}getWalletLabel(e){return e&&(e.label||e.name||e.title||e.id)||"Wallet"}getWalletIcon(e){return e&&(e.icon||e.logo||e.image)||null}async connectWithWallet(e){if(this.pnp)try{if(fe(this.config?.debug||!1,"Connecting to wallet",{walletId:e}),!e)throw new Error("No wallet ID provided");let t=await this.pnp.connect(e);if(fe(this.config?.debug||!1,"Wallet connect result",t),!!!(t&&(t.connected===!0||t.principal||t.owner||this.pnp?.account)))throw new Error("Wallet connection was rejected");this.walletConnected=!0;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:e}}))}catch{}this.config={...this.config,connectedWallet:t,actorProvider:(r,l)=>this.pnp.getActor({canisterId:r,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let n=this.pendingAction;this.pendingAction=null,n==="pay"&&setTimeout(()=>this.pay(),0)}catch(t){fe(this.config?.debug||!1,"Wallet connection error",t),this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}renderWalletModal(){if(!this.showWalletModal||!this.pnp)return null;let t=(this.pnp.getEnabledWallets()||[]).map(p=>({id:this.getWalletId(p),label:this.getWalletLabel(p),icon:this.getWalletIcon(p)})),i=this.config?.onramp?.enabled!==!1,n=5,r=Number(this.config?.amountUsd??0),l=i&&r>0&&r<n,c=Math.max(0,n-r),d=l?`Note: Minimum card amount is $${n}. You will pay about $${c.toFixed(2)} more.`:null;return $({visible:this.showWalletModal,wallets:t,isConnecting:!1,onSelect:p=>this.connectWithWallet(p),onClose:()=>{this.showWalletModal=!1},onCreditCard:i?()=>this.startOnramp():void 0,creditCardLabel:this.config?.onramp?.creditCardLabel||"Pay with credit card",showCreditCard:i,creditCardTooltip:d})}startOnramp(){try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"sendFundsUsd",type:"onramp"}}))}catch{}this.showWalletModal=!1,setTimeout(()=>this.createOnrampIntent(),0)}async createOnrampIntent(){try{let e=Number(this.config?.amountUsd??0),t=this.getSdk(),i=this.selectedSymbol||"ICP",r=this.cryptoOptions.find(E=>E.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=await t.startOnrampUsd(e,r,{context:"pay-button:onramp"}),c=l?.metadata?.onramp?.sessionId||l?.metadata?.onramp?.session_id||null,d=l?.metadata?.onramp?.errorMessage||null;this.onrampErrorMessage=d||null;let p=l?.metadata?.paymentIntentId||l?.paymentIntentId||null;this.onrampPaymentIntentId=p,c?(this.onrampSessionId=c,this.showOnrampModal=!0,this.attachTransakMessageListener()):(this.onrampSessionId=null,this.showOnrampModal=!0)}catch(e){this.onrampSessionId=null,this.onrampErrorMessage=e?.message||null,this.showOnrampModal=!0,C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}}attachTransakMessageListener(){if(!this.transakMessageHandlerBound){this.transakMessageHandlerBound=e=>this.onTransakMessage(e);try{window.addEventListener("message",this.transakMessageHandlerBound)}catch{}}}detachTransakMessageListener(){if(this.transakMessageHandlerBound){try{window.removeEventListener("message",this.transakMessageHandlerBound)}catch{}this.transakMessageHandlerBound=null}}onTransakMessage(e){let t=e?.data,i=t?.event_id||t?.eventId||t?.id;if(!(!i||typeof i!="string")&&i==="TRANSAK_ORDER_SUCCESSFUL"){if(this.detachTransakMessageListener(),this.onrampPollingActive)return;let n=t?.data?.id||t?.id||t?.webhookData?.id||null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-success",{detail:{name:"getLedgerBalance"}}))}catch{}try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-success",{detail:{name:"sendFundsToLedger"}}))}catch{}try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-success",{detail:{name:"notifyLedgerTransaction"}}))}catch{}this.showOnrampModal=!1,this.startOnrampPolling(n||void 0)}}startOnrampPolling(e){if(this.onrampPollTimer){try{clearInterval(this.onrampPollTimer)}catch{}this.onrampPollTimer=null}if(this.onrampNotifyController){try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null}let t=this.onrampPaymentIntentId;if(!t)return;let i=this.getSdk(),n=()=>{if(this.detachTransakMessageListener(),this.onrampNotifyController)try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null,this.onrampPollingActive=!1},r=l=>{n()};try{window.addEventListener("icpay-sdk-transaction-completed",r,{once:!0})}catch{}this.onrampPollingActive=!0,this.onrampNotifyController=i.notifyIntentUntilComplete(t,5e3,e),this.onrampPollTimer=1}async pay(){if(!(!Ce||this.processing)){this.errorMessage=null,this.errorSeverity=null,this.errorAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"pay",type:"sendUsd",amount:this.config?.amountUsd,currency:this.selectedSymbol||this.config?.defaultSymbol}}))}catch{}this.processing=!0;try{if(!await this.ensureWallet())return;let t=this.getSdk(),i=this.selectedSymbol||"ICP",r=this.cryptoOptions.find(p=>p.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.config?.amountUsd??0),c={context:"pay-button"},d=await t.sendUsd(l,r,c);this.config.onSuccess&&this.config.onSuccess({id:d.transactionId,status:d.status}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-pay",{detail:{amount:l,tx:d},bubbles:!0}))}catch(e){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return pe`<div class="icpay-card icpay-section">Loading...</div>`;let t=(this.cryptoOptions?.length||0)>1,i=this.config?.showLedgerDropdown,n=i==="dropdown"?"dropdown":i==="none"?"none":"buttons",r=n!=="none"&&(t||n==="dropdown"),l=n==="dropdown"?"dropdown":t?"buttons":"none",c=this.selectedSymbol||this.config?.defaultSymbol||"ICP",d=typeof this.config?.amountUsd=="number"?`${Number(this.config.amountUsd).toFixed(2)}`:"",E=(this.config?.buttonLabel||(typeof this.config?.amountUsd=="number"?"Pay ${amount} with {symbol}":"Pay with {symbol}")).replace("{amount}",d||"$0.00").replace("{symbol}",c),ye=this.config?.progressBar?.enabled!==!1;return pe`
|
|
894
894
|
<div class="icpay-card icpay-section">
|
|
895
|
-
${
|
|
895
|
+
${ye?pe`
|
|
896
896
|
<icpay-progress-bar></icpay-progress-bar>
|
|
897
897
|
`:null}
|
|
898
898
|
|
|
@@ -903,7 +903,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
903
903
|
.value=${this.selectedSymbol||""}
|
|
904
904
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
905
905
|
mode=${l}
|
|
906
|
-
@icpay-token-change=${
|
|
906
|
+
@icpay-token-change=${ue=>this.selectSymbol(ue.detail.symbol)}
|
|
907
907
|
></icpay-token-selector>
|
|
908
908
|
`:null}
|
|
909
909
|
<button class="pay-button ${this.processing?"processing":""}"
|
|
@@ -930,28 +930,26 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
930
930
|
.error-message.info { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #3b82f6; }
|
|
931
931
|
.error-message.warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
|
|
932
932
|
.error-message.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
|
|
933
|
-
`],s([vt({type:Object})],w.prototype,"config",2),s([D()],w.prototype,"selectedSymbol",2),s([D()],w.prototype,"processing",2),s([D()],w.prototype,"succeeded",2),s([D()],w.prototype,"availableLedgers",2),s([D()],w.prototype,"errorMessage",2),s([D()],w.prototype,"errorSeverity",2),s([D()],w.prototype,"errorAction",2),s([D()],w.prototype,"walletConnected",2),s([D()],w.prototype,"pendingAction",2),s([D()],w.prototype,"showWalletModal",2),s([D()],w.prototype,"showOnrampModal",2),s([D()],w.prototype,"onrampSessionId",2),s([D()],w.prototype,"onrampPaymentIntentId",2),s([D()],w.prototype,"onrampErrorMessage",2),w=s([bt("icpay-pay-button")],w);import{LitElement as wt,html as
|
|
933
|
+
`],s([vt({type:Object})],w.prototype,"config",2),s([D()],w.prototype,"selectedSymbol",2),s([D()],w.prototype,"processing",2),s([D()],w.prototype,"succeeded",2),s([D()],w.prototype,"availableLedgers",2),s([D()],w.prototype,"errorMessage",2),s([D()],w.prototype,"errorSeverity",2),s([D()],w.prototype,"errorAction",2),s([D()],w.prototype,"walletConnected",2),s([D()],w.prototype,"pendingAction",2),s([D()],w.prototype,"showWalletModal",2),s([D()],w.prototype,"showOnrampModal",2),s([D()],w.prototype,"onrampSessionId",2),s([D()],w.prototype,"onrampPaymentIntentId",2),s([D()],w.prototype,"onrampErrorMessage",2),w=s([bt("icpay-pay-button")],w);import{LitElement as wt,html as he,css as xt}from"lit";import{customElement as Et,property as St,state as M}from"lit/decorators.js";var Oe=typeof window<"u",Ae=null;function kt(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var y=class extends wt{constructor(){super(...arguments);this.amountUsd=0;this.hasUserAmount=!1;this.selectedSymbol=null;this.processing=!1;this.succeeded=!1;this.availableLedgers=[];this.errorMessage=null;this.errorSeverity=null;this.errorAction=null;this.walletConnected=!1;this.pendingAction=null;this.showWalletModal=!1;this.showOnrampModal=!1;this.onrampSessionId=null;this.onrampPaymentIntentId=null;this.onrampErrorMessage=null;this.pnp=null;this.transakMessageHandlerBound=null;this.onrampPollTimer=null;this.onrampPollingActive=!1;this.onrampNotifyController=null}get cryptoOptions(){return this.config?.cryptoOptions?.length?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Oe&&(kt(this.config?.debug||!1,"Amount input connected",{config:this.config}),this.amountUsd=Number(this.config?.defaultAmountUsd??0),this.hasUserAmount=!1,this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers(),this.config?.defaultSymbol&&(this.selectedSymbol=this.config.defaultSymbol))}updated(e){if(e.has("config")&&(!this.hasUserAmount&&typeof this.config?.defaultAmountUsd=="number"&&(this.amountUsd===0||this.amountUsd==null||Number.isNaN(this.amountUsd))&&(this.amountUsd=Number(this.config.defaultAmountUsd)),!this.selectedSymbol&&this.config?.defaultSymbol&&(this.selectedSymbol=this.config.defaultSymbol),!(this.config?.cryptoOptions&&this.config.cryptoOptions.length>0)&&this.availableLedgers.length===0&&this.loadVerifiedLedgers(),this.pendingAction&&this.config?.actorProvider)){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="pay"&&this.pay()},0)}}async loadVerifiedLedgers(){if(!(!Oe||!this.config?.publishableKey))try{let t=await h(this.config).client.getVerifiedLedgers();this.availableLedgers=t.map(i=>({symbol:i.symbol,label:i.name,canisterId:i.canisterId})),this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||(this.availableLedgers[0]?.symbol??"ICP"))}catch(e){this.dispatchEvent(new CustomEvent("icpay-error",{detail:{message:"Failed to load verified ledgers",cause:e},bubbles:!0})),this.availableLedgers=[{symbol:"ICP",label:"ICP",canisterId:"ryjl3-tyaaa-aaaaa-aaaba-cai"}],this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||"ICP")}}onInputChange(e){let t=Number(this.config?.stepUsd??.5),i=Math.max(0,Number(e.target.value||0)),n=Math.round(i/t)*t;this.amountUsd=Number(n.toFixed(2)),this.hasUserAmount=!0}selectSymbol(e){this.selectedSymbol=e}isValidAmount(){let e=Number(this.config?.minUsd??.5),t=this.config?.maxUsd!==void 0?Number(this.config.maxUsd):1/0;return this.amountUsd>=e&&this.amountUsd<=t}async ensureWallet(){if(this.config.useOwnWallet)return this.config.actorProvider?!0:(this.pendingAction="pay",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0})),!1);if(this.walletConnected)return!0;try{if(Ae||(Ae=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Ae(this.config?.plugNPlay||{}),!this.pnp.getEnabledWallets()?.length)throw new Error("No wallets available");return this.pendingAction="pay",this.showWalletModal=!0,!1}catch(e){return this.errorMessage=e instanceof Error?e.message:"Wallet connection failed",this.errorSeverity="error",!1}}getWalletId(e){return e&&(e.id||e.provider||e.key)||""}getWalletLabel(e){return e&&(e.label||e.name||e.title||e.id)||"Wallet"}getWalletIcon(e){return e&&(e.icon||e.logo||e.image)||null}async connectWithWallet(e){if(this.pnp)try{if(!e)throw new Error("No wallet ID provided");let t=await this.pnp.connect(e);if(!!!(t&&(t.connected===!0||t.principal||t.owner||this.pnp?.account)))throw new Error("Wallet connection was rejected");this.walletConnected=!0;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:e}}))}catch{}this.config={...this.config,connectedWallet:t,actorProvider:(r,l)=>this.pnp.getActor({canisterId:r,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let n=this.pendingAction;this.pendingAction=null,n==="pay"&&setTimeout(()=>this.pay(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}attachTransakMessageListener(){if(!this.transakMessageHandlerBound){this.transakMessageHandlerBound=e=>this.onTransakMessage(e);try{window.addEventListener("message",this.transakMessageHandlerBound)}catch{}}}detachTransakMessageListener(){if(this.transakMessageHandlerBound){try{window.removeEventListener("message",this.transakMessageHandlerBound)}catch{}this.transakMessageHandlerBound=null}}onTransakMessage(e){let t=e?.data,i=t?.event_id||t?.eventId||t?.id;if(!(!i||typeof i!="string")&&i==="TRANSAK_ORDER_SUCCESSFUL"){if(this.detachTransakMessageListener(),this.onrampPollingActive)return;this.showOnrampModal=!1;let n=t?.data?.id||t?.id||t?.webhookData?.id||null;this.startOnrampPolling(n||void 0)}}startOnramp(){try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"sendFundsUsd",type:"onramp"}}))}catch{}this.showWalletModal=!1,setTimeout(()=>this.createOnrampIntent(),0)}async createOnrampIntent(){try{let e=h(this.config),t=this.selectedSymbol||"ICP",n=this.cryptoOptions.find(E=>E.symbol===t)?.canisterId||await e.client.getLedgerCanisterIdBySymbol(t),r=Number(this.amountUsd),l=await e.startOnrampUsd(r,n,{context:"amount-input:onramp"}),c=l?.metadata?.onramp?.sessionId||l?.metadata?.onramp?.session_id||null,d=l?.metadata?.paymentIntentId||l?.paymentIntentId||null,p=l?.metadata?.onramp?.errorMessage||null;this.onrampPaymentIntentId=d,c?(this.onrampSessionId=c,this.onrampErrorMessage=null,this.showOnrampModal=!0,this.attachTransakMessageListener()):(this.onrampSessionId=null,this.onrampErrorMessage=p||"Failed to obtain onramp sessionId",this.showOnrampModal=!0)}catch(e){this.onrampSessionId=null,this.onrampErrorMessage=e?.message||"Failed to obtain onramp sessionId",this.showOnrampModal=!0}}startOnrampPolling(e){if(this.onrampPollTimer){try{clearInterval(this.onrampPollTimer)}catch{}this.onrampPollTimer=null}if(this.onrampNotifyController){try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null}let t=this.onrampPaymentIntentId;if(!t)return;let i=h(this.config),n=()=>{if(this.detachTransakMessageListener(),this.onrampNotifyController)try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null,this.onrampPollingActive=!1};try{window.addEventListener("icpay-sdk-transaction-completed",(()=>n()),{once:!0})}catch{}this.onrampPollingActive=!0,this.onrampNotifyController=i.notifyIntentUntilComplete(t,5e3,e),this.onrampPollTimer=1}async pay(){if(!(!Oe||this.processing)){if(this.errorMessage=null,this.errorSeverity=null,this.errorAction=null,!this.isValidAmount()){this.errorMessage="Please enter a valid amount",this.errorSeverity="warning";return}try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"pay",type:"sendUsd",amount:this.amountUsd,currency:this.selectedSymbol||this.config?.defaultSymbol}}))}catch{}this.processing=!0;try{if(!await this.ensureWallet())return;let t=h(this.config),i=this.selectedSymbol||"ICP",r=this.cryptoOptions.find(p=>p.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.amountUsd),c={context:"amount-input"},d=await t.sendUsd(l,r,c);this.config.onSuccess&&this.config.onSuccess({id:d.transactionId,status:d.status,amountUsd:l}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-amount-pay",{detail:{amount:l,tx:d},bubbles:!0}))}catch(e){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return he`<div class="icpay-card icpay-section">Loading...</div>`;let e=this.config?.placeholder||"Enter amount in USD",i=(this.config?.buttonLabel||"Pay ${amount} with {symbol}").replace("{amount}",this.amountUsd?`${Number(this.amountUsd).toFixed(2)}`:"$0.00").replace("{symbol}",this.selectedSymbol||this.config?.defaultSymbol||"ICP"),n=this.cryptoOptions.find(F=>F.symbol===(this.selectedSymbol||""))?.label||this.cryptoOptions[0]?.label||this.config?.defaultSymbol||"ICP",r=this.config?.progressBar?.mode||"modal",l=this.config?.showLedgerDropdown,c=l==="buttons"?"buttons":l==="none"?"none":"dropdown",p=(this.cryptoOptions?.length||0)>1,E=c!=="none"&&(p||c==="dropdown"),ge=c==="dropdown"?"dropdown":p?"buttons":"none",ue=this.config?.progressBar?.enabled!==!1&&(r==="modal"?!0:this.processing);return he`
|
|
934
934
|
<div class="icpay-card icpay-section">
|
|
935
|
-
${
|
|
935
|
+
${ue?he`<icpay-progress-bar mode="${r}"></icpay-progress-bar>`:null}
|
|
936
936
|
|
|
937
937
|
<div class="row">
|
|
938
|
-
<div class="top-row">
|
|
938
|
+
<div class="top-row ${E?"with-selector":""}">
|
|
939
939
|
<div class="amount-field">
|
|
940
940
|
<span class="currency-prefix">$</span>
|
|
941
|
-
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${
|
|
941
|
+
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${F=>this.onInputChange(F)} />
|
|
942
942
|
</div>
|
|
943
|
-
${
|
|
943
|
+
${E?he`
|
|
944
944
|
<icpay-token-selector
|
|
945
945
|
.options=${this.cryptoOptions}
|
|
946
946
|
.value=${this.selectedSymbol||""}
|
|
947
947
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
948
|
-
mode=${
|
|
948
|
+
mode=${ge}
|
|
949
949
|
.showLabel=${!1}
|
|
950
|
-
@icpay-token-change=${
|
|
950
|
+
@icpay-token-change=${F=>this.selectSymbol(F.detail.symbol)}
|
|
951
951
|
></icpay-token-selector>
|
|
952
|
-
`:
|
|
953
|
-
<div class="label" style="padding: 10px;">${r}</div>
|
|
954
|
-
`}
|
|
952
|
+
`:null}
|
|
955
953
|
</div>
|
|
956
954
|
<button class="pay-button ${this.processing?"processing":""}"
|
|
957
955
|
?disabled=${this.processing||this.config?.disablePaymentButton===!0||this.succeeded&&this.config?.disableAfterSuccess===!0}
|
|
@@ -961,19 +959,20 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
961
959
|
</div>
|
|
962
960
|
<div class="hint">Default: ${this.config?.defaultSymbol||"ICP"}. Min: $${Number(this.config?.minUsd??.5).toFixed(2)}${this.config?.maxUsd?`, Max: $${Number(this.config.maxUsd).toFixed(2)}`:""}</div>
|
|
963
961
|
|
|
964
|
-
${this.errorMessage?
|
|
962
|
+
${this.errorMessage?he`
|
|
965
963
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
966
964
|
${this.errorMessage}
|
|
967
|
-
${this.errorAction?
|
|
965
|
+
${this.errorAction?he`<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">${this.errorAction}</button>`:""}
|
|
968
966
|
</div>
|
|
969
967
|
`:""}
|
|
970
|
-
${(()=>{let
|
|
968
|
+
${(()=>{let K=(this.pnp?.getEnabledWallets?.()||[]).map(z=>({id:this.getWalletId(z),label:this.getWalletLabel(z),icon:this.getWalletIcon(z)}));return $({visible:!!(this.showWalletModal&&this.pnp),wallets:K,isConnecting:!1,onSelect:z=>this.connectWithWallet(z),onClose:()=>{this.showWalletModal=!1},onCreditCard:this.config?.onramp?.enabled!==!1?()=>this.startOnramp():void 0,creditCardLabel:this.config?.onramp?.creditCardLabel||"Pay with credit card",showCreditCard:this.config?.onramp?.enabled!==!1,creditCardTooltip:(()=>{let j=Number(this.amountUsd||0);return j>0&&j<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-j).toFixed(2)} more.`:null})()})})()}
|
|
971
969
|
|
|
972
970
|
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
973
971
|
</div>
|
|
974
972
|
`}};y.styles=[P,xt`
|
|
975
973
|
.row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
|
|
976
|
-
.top-row { display: grid; grid-template-columns: 1fr
|
|
974
|
+
.top-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
|
|
975
|
+
.top-row.with-selector { grid-template-columns: 1fr 2fr; }
|
|
977
976
|
icpay-token-selector { width: 100%; }
|
|
978
977
|
.amount-field { position: relative; width: 100%; }
|
|
979
978
|
.amount-field .currency-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--icpay-muted, #a3a3a3); font-weight: 600; pointer-events: none; z-index: 2; }
|