@ic-pay/icpay-widget 0.1.96 → 0.1.99
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.d.ts +1 -0
- package/dist/index.global.js +389 -342
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +144 -97
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var De=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var s=(o,a,e,t)=>{for(var i=t>1?void 0:t?Fe(a,e):a,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(t?r(a,e,i):r(i))||i);return t&&i&&De(a,e,i),i};import{css as Ke}from"lit";var $=Ke`
|
|
2
2
|
:host {
|
|
3
3
|
--icpay-primary: #f9fafb;
|
|
4
4
|
--icpay-secondary: #e5e7eb;
|
|
@@ -56,9 +56,9 @@ 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=(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(Ae=>Ae+Ae).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 _e,html as ne,css as et}from"lit";import{customElement as tt,property as it,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 W(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 A(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`
|
|
59
|
+
`;function ie(o,a){if(!o||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(K,z)=>{z&&o.style.setProperty(K,z)};i("--icpay-primary",e),i("--icpay-secondary",t);let n=K=>{if(!K)return null;let z=K.replace("#",""),H=z.length===3?z.split("").map(Te=>Te+Te).join(""):z,V=parseInt(H,16),te=V>>16&255,Re=V>>8&255,Be=V&255;return{r:te,g:Re,b:Be}},c=(K=>{let z=n(K);if(!z)return 0;let H=V=>{let te=V/255;return te<=.03928?te/12.92:Math.pow((te+.055)/1.055,2.4)};return .2126*H(z.r)+.7152*H(z.g)+.0722*H(z.b)})(e||t)>.6,d=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),p=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),E=a.borderColor||(c?"#d1d5db":"#4b5563"),ue=a.textColor||(c?"#111827":"#f9fafb"),be=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),me=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",be),i("--icpay-text",ue),i("--icpay-muted",me),i("--icpay-surface",d),i("--icpay-surface-alt",p),i("--icpay-border",E)}import{Icpay as Ne}from"@ic-pay/icpay-sdk";var Ue=typeof window<"u";function ve(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}function h(o){if(!Ue)return{client:{},quoteUsd:async()=>({tokenAmountDecimals:"0"}),sendUsd:async()=>({transactionId:"0",status:"pending"}),startOnrampUsd:async()=>({transactionId:"0",status:"pending",metadata:{onramp:{sessionId:null}}}),notifyIntentUntilComplete:()=>({stop:()=>{}})};ve(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),ve(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;ve(o.debug||!1,"typeof Icpay:",typeof Ne);let t=new Ne(a);if(Ue){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 ve(o.debug||!1,"Error creating SDK:",t),t}}import{LitElement as et,html as se,css as tt}from"lit";import{customElement as it,property as nt,state as U}from"lit/decorators.js";import{IcpayError as Pe}from"@ic-pay/icpay-sdk";var C={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"},ze={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 L(o,a=ze){o instanceof Pe?(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 Pe({code:C.UNKNOWN_ERROR,message:o instanceof Error?o.message:"An unknown error occurred",details:o})))}var He={[C.WALLET_NOT_CONNECTED]:"Please connect your wallet to continue",[C.WALLET_USER_CANCELLED]:"User have rejected the transfer",[C.WALLET_SIGNATURE_REJECTED]:"User have rejected the transfer",[C.INSUFFICIENT_BALANCE]:"Insufficient balance for this transaction",[C.NETWORK_ERROR]:"Network error. Please try again",[C.API_ERROR]:"Service temporarily unavailable",[C.LEDGER_NOT_FOUND]:"Selected token is not supported",[C.TRANSACTION_FAILED]:"Transaction failed. Please try again",[C.TRANSACTION_TIMEOUT]:"Transaction timed out. Please try again",[C.UNKNOWN_ERROR]:"Something went wrong. Please try again"};function O(o){return He[o.code]||o.message||"An error occurred"}function A(o){return!o.isUserCancelled()}function W(o){if(o.userAction)return o.userAction;switch(o.code){case C.WALLET_NOT_CONNECTED:return"Connect Wallet";case C.INSUFFICIENT_BALANCE:return"Add Funds";case C.NETWORK_ERROR:case C.API_ERROR:return"Try Again";default:return null}}function T(o){return o.isUserCancelled()?"info":o.isBalanceError()||o.isWalletError()?"warning":"error"}import{LitElement as je,html as S,css as Ve}from"lit";import{customElement as Ge,property as q,state as j}from"lit/decorators.js";function g(o,a,e){o&&(e!==void 0?console.log(a,e):console.log(a))}var Ye=[{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"}],m=class extends je{constructor(){super(...arguments);this.open=!1;this.steps=Ye;this.amount=0;this.currency="";this.ledgerSymbol="";this.debug=!1;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(g(this.debug,"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,g(this.debug,"ICPay Progress: Amount updated to:",e.detail.amount)),e?.detail?.currency&&(this.currentCurrency=e.detail.currency,this.currency=e.detail.currency,g(this.debug,"ICPay Progress: Currency updated to:",e.detail.currency)),e?.detail?.ledgerSymbol&&(this.currentLedgerSymbol=e.detail.ledgerSymbol,this.ledgerSymbol=e.detail.ledgerSymbol,g(this.debug,"ICPay Progress: Current state after method start:",{activeIndex:this.activeIndex,currentAmount:this.currentAmount,currentCurrency:this.currentCurrency,currentLedgerSymbol:this.currentLedgerSymbol})),g(this.debug,"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;g(this.debug,"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;g(this.debug,"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";g(this.debug,"ICPay Progress: Transaction completed event received:",e.detail),g(this.debug,"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;g(this.debug,"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";g(this.debug,"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";g(this.debug,"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";g(this.debug,"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";g(this.debug,"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;g(this.debug,"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";g(this.debug,"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(g(this.debug,"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";g(this.debug,"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(g(this.debug,"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(g(this.debug,"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(g(this.debug,"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(g(this.debug,"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{ie(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{ie(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"),g(this.debug,"ICPay Progress: Starting automatic progression from step:",this.activeIndex),this.progressionTimer=setInterval(()=>{if(this.failed||this.completed){this.stopAutomaticProgression();return}g(this.debug,"ICPay Progress: Processing step:",this.activeIndex),this.updateStepStatus(this.activeIndex,"completed"),this.activeIndex<this.currentSteps.length-1?(this.activeIndex++,this.updateStepStatus(this.activeIndex,"loading"),g(this.debug,"ICPay Progress: Auto-progressed to step:",this.activeIndex)):(this.stopAutomaticProgression(),g(this.debug,"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)),g(this.debug,`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 S`<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 S`
|
|
60
60
|
<div class="confetti">
|
|
61
|
-
${e.map(i=>
|
|
61
|
+
${e.map(i=>S`
|
|
62
62
|
<div
|
|
63
63
|
class="confetti-piece"
|
|
64
64
|
style="
|
|
@@ -71,7 +71,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
71
71
|
></div>
|
|
72
72
|
`)}
|
|
73
73
|
</div>
|
|
74
|
-
`}renderSuccessState(){let e=this.currentAmount||this.amount,t=this.currentLedgerSymbol||this.currentCurrency||this.currency;return
|
|
74
|
+
`}renderSuccessState(){let e=this.currentAmount||this.amount,t=this.currentLedgerSymbol||this.currentCurrency||this.currency;return g(this.debug,"ICPay Progress: Rendering success state with:",{displayAmount:e,displayCurrency:t,currentAmount:this.currentAmount,amount:this.amount,currentCurrency:this.currentCurrency,currency:this.currency,currentLedgerSymbol:this.currentLedgerSymbol,ledgerSymbol:this.ledgerSymbol}),S`
|
|
75
75
|
<div class="success-container">
|
|
76
76
|
<div class="success-icon">
|
|
77
77
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -79,12 +79,12 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
79
79
|
</svg>
|
|
80
80
|
</div>
|
|
81
81
|
<h2 class="success-title">Payment Complete!</h2>
|
|
82
|
-
<p class="success-message">Your payment of ${e}
|
|
82
|
+
<p class="success-message">Your payment of ${e} USD has been successfully processed.</p>
|
|
83
83
|
<div class="success-actions">
|
|
84
84
|
<button class="btn btn-primary" @click=${()=>{this.open=!1}}>Close</button>
|
|
85
85
|
</div>
|
|
86
86
|
</div>
|
|
87
|
-
`}renderErrorState(){return
|
|
87
|
+
`}renderErrorState(){return S`
|
|
88
88
|
<div class="error-message">
|
|
89
89
|
<div class="error-icon">⚠</div>
|
|
90
90
|
<div class="error-content">
|
|
@@ -95,7 +95,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
95
95
|
</div>
|
|
96
96
|
</div>
|
|
97
97
|
</div>
|
|
98
|
-
`}renderProgressContent(){return this.showSuccess?this.renderSuccessState():this.failed?this.renderErrorState():
|
|
98
|
+
`}renderProgressContent(){return this.showSuccess?this.renderSuccessState():this.failed?this.renderErrorState():S`
|
|
99
99
|
<div class="progress-container">
|
|
100
100
|
<div class="progress-header">
|
|
101
101
|
<h2 class="progress-title">Processing Payment</h2>
|
|
@@ -103,15 +103,15 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
103
103
|
${this.renderConfirmTip()}
|
|
104
104
|
</div>
|
|
105
105
|
<div class="progress-steps">
|
|
106
|
-
${this.currentSteps.map((e,t)=>
|
|
106
|
+
${this.currentSteps.map((e,t)=>S`
|
|
107
107
|
<div class="step ${t===this.activeIndex?"active":""} ${e.status==="completed"?"completed":""}">
|
|
108
108
|
<div class="step-icon">
|
|
109
|
-
${e.status==="loading"?
|
|
110
|
-
${e.status==="completed"?
|
|
109
|
+
${e.status==="loading"?S`<div class="loading-spinner"></div>`:""}
|
|
110
|
+
${e.status==="completed"?S`
|
|
111
111
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
112
112
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
113
113
|
</svg>
|
|
114
|
-
`:
|
|
114
|
+
`:S`
|
|
115
115
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
116
116
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
|
117
117
|
</svg>
|
|
@@ -125,7 +125,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
125
125
|
`)}
|
|
126
126
|
</div>
|
|
127
127
|
</div>
|
|
128
|
-
`}renderConfirmTip(){try{let e=this.getStepIndexByKey("confirm");if(e<0||!(this.activeIndex===e&&this.currentSteps[e]?.status==="loading"))return null;let i=this.confirmLoadingStartedAt||0;return(i?Date.now()-i:0)<3e4?null:
|
|
128
|
+
`}renderConfirmTip(){try{let e=this.getStepIndexByKey("confirm");if(e<0||!(this.activeIndex===e&&this.currentSteps[e]?.status==="loading"))return null;let i=this.confirmLoadingStartedAt||0;return(i?Date.now()-i:0)<3e4?null:S`<p class="progress-subtitle" style="margin-top:8px;color:#93c5fd">Verification can take from 30 seconds up to 10 minutes depending on the amount. Please wait…</p>`}catch{return null}}retryTransaction(){this.activeIndex=0,this.completed=!1,this.failed=!1,this.errorMessage=null,this.showSuccess=!1,this.showConfetti=!1,this.currentSteps=this.currentSteps.map(e=>({...e,status:"pending"})),this.updateStepStatus(0,"loading"),this.startAutomaticProgression(),this.requestUpdate()}closeProgress(){this.open=!1}renderStep(e,t){return S`
|
|
129
129
|
<div class="step-item ${e.status}">
|
|
130
130
|
<div class="step-icon">
|
|
131
131
|
${this.getStepIcon(e)}
|
|
@@ -134,30 +134,30 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
134
134
|
<div class="step-title">
|
|
135
135
|
${e.status==="completed"?"COMPLETED":e.label}
|
|
136
136
|
</div>
|
|
137
|
-
${e.status==="completed"?
|
|
137
|
+
${e.status==="completed"?S`
|
|
138
138
|
<div class="step-subtitle">
|
|
139
139
|
${e.timestamp} - ${e.tooltip}
|
|
140
140
|
</div>
|
|
141
|
-
`:e.status==="error"&&e.errorMessage?
|
|
141
|
+
`:e.status==="error"&&e.errorMessage?S`
|
|
142
142
|
<div class="step-error">${e.errorMessage}</div>
|
|
143
|
-
`:
|
|
143
|
+
`:S`
|
|
144
144
|
<div class="step-subtitle">${e.tooltip}</div>
|
|
145
145
|
`}
|
|
146
146
|
</div>
|
|
147
147
|
</div>
|
|
148
|
-
`}get isWalletConnectLoading(){try{let e=this.currentSteps.findIndex(t=>t.key==="wallet");return e<0?!1:this.currentSteps[e].status==="loading"&&!this.failed&&!this.showSuccess}catch{return!1}}render(){return
|
|
149
|
-
${this.open?
|
|
148
|
+
`}get isWalletConnectLoading(){try{let e=this.currentSteps.findIndex(t=>t.key==="wallet");return e<0?!1:this.currentSteps[e].status==="loading"&&!this.failed&&!this.showSuccess}catch{return!1}}render(){return S`
|
|
149
|
+
${this.open?S`
|
|
150
150
|
${this.renderConfetti()}
|
|
151
151
|
<div class="modal-overlay active">
|
|
152
152
|
<div class="modal-container">
|
|
153
|
-
${this.isWalletConnectLoading?
|
|
153
|
+
${this.isWalletConnectLoading?S`
|
|
154
154
|
<button class="close-button" @click=${()=>this.closeProgress()} aria-label="Close" title="Close">✕</button>
|
|
155
155
|
`:null}
|
|
156
156
|
${this.renderProgressContent()}
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
159
|
`:null}
|
|
160
|
-
`}};
|
|
160
|
+
`}};m.styles=Ve`
|
|
161
161
|
:host {
|
|
162
162
|
display: block;
|
|
163
163
|
font-family: var(--icpay-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
@@ -343,8 +343,8 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
343
343
|
opacity: 0;
|
|
344
344
|
}
|
|
345
345
|
}
|
|
346
|
-
`,s([
|
|
347
|
-
${this.showLabel?
|
|
346
|
+
`,s([q({type:Boolean})],m.prototype,"open",2),s([q({type:Array})],m.prototype,"steps",2),s([q({type:Number})],m.prototype,"amount",2),s([q({type:String})],m.prototype,"currency",2),s([q({type:String})],m.prototype,"ledgerSymbol",2),s([q({type:Boolean})],m.prototype,"debug",2),s([j()],m.prototype,"activeIndex",2),s([j()],m.prototype,"completed",2),s([j()],m.prototype,"failed",2),s([j()],m.prototype,"errorMessage",2),s([j()],m.prototype,"showSuccess",2),s([j()],m.prototype,"showConfetti",2),s([j()],m.prototype,"currentSteps",2),s([j()],m.prototype,"currentAmount",2),s([j()],m.prototype,"currentCurrency",2),s([j()],m.prototype,"currentLedgerSymbol",2),s([j()],m.prototype,"confirmLoadingStartedAt",2),s([q({type:Object})],m.prototype,"theme",2),m=s([Ge("icpay-progress-bar")],m);import{LitElement as Ze,html as Q,css as Je}from"lit";import{customElement as Xe,property as _}from"lit/decorators.js";import{query as $e}from"lit/decorators.js";var R=class extends Ze{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{ie(this,this.theme)}catch{}}updated(e){if(e.has("theme"))try{ie(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)),Q``}if(this.mode==="dropdown"){let i=this.effectiveSymbol,n=this.getOptionBySymbol(i)||{symbol:i,label:i};return Q`
|
|
347
|
+
${this.showLabel?Q`<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()}>
|
|
350
350
|
<div class="selected-option">
|
|
@@ -360,7 +360,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
360
360
|
</div>
|
|
361
361
|
|
|
362
362
|
<div class="dropdown-menu ${this.open?"open":""}">
|
|
363
|
-
${e.map(r=>
|
|
363
|
+
${e.map(r=>Q`
|
|
364
364
|
<div class="dropdown-option ${this.value===r.symbol||i===r.symbol?"selected":""}" @click=${()=>this.onSelect(r.symbol)}>
|
|
365
365
|
<img class="dropdown-selected-icon" src="${this.getLogoUrl(r.symbol)}" alt="${r.symbol}" />
|
|
366
366
|
<div class="crypto-info">
|
|
@@ -372,11 +372,11 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
372
372
|
</div>
|
|
373
373
|
</div>
|
|
374
374
|
<div class="dropdown-backdrop ${this.open?"open":""}" @click=${()=>this.closeDropdown()}></div>
|
|
375
|
-
`}let t=this.effectiveSymbol;return
|
|
375
|
+
`}let t=this.effectiveSymbol;return Q`
|
|
376
376
|
<div class="icpay-token-selector" style="width:100%;box-sizing:border-box;">
|
|
377
|
-
${this.showLabel?
|
|
377
|
+
${this.showLabel?Q`<label class="label">Payment method</label>`:null}
|
|
378
378
|
<div class="crypto-grid">
|
|
379
|
-
${e.map(i=>
|
|
379
|
+
${e.map(i=>Q`
|
|
380
380
|
<div class="crypto-option ${t===i.symbol?"selected":""}" @click=${()=>this.onSelect(i.symbol)}>
|
|
381
381
|
<img class="crypto-icon" src="${this.getLogoUrl(i.symbol)}" alt="${i.symbol}" />
|
|
382
382
|
<div class="crypto-name">${i.label}</div>
|
|
@@ -385,7 +385,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
385
385
|
`)}
|
|
386
386
|
</div>
|
|
387
387
|
</div>
|
|
388
|
-
`}};R.styles=
|
|
388
|
+
`}};R.styles=Je`
|
|
389
389
|
:host { display: block; width: 100%; box-sizing: border-box; }
|
|
390
390
|
|
|
391
391
|
/* Common */
|
|
@@ -442,21 +442,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
442
442
|
.dropdown-option { padding: 10px 12px; }
|
|
443
443
|
.dropdown-selected-icon { width: 28px; height: 28px; }
|
|
444
444
|
}
|
|
445
|
-
`,s([
|
|
445
|
+
`,s([_({type:Array})],R.prototype,"options",2),s([_({type:String})],R.prototype,"value",2),s([_({type:String})],R.prototype,"defaultSymbol",2),s([_({type:String})],R.prototype,"mode",2),s([_({type:Object})],R.prototype,"theme",2),s([_({type:Boolean})],R.prototype,"open",2),s([_({type:Boolean})],R.prototype,"showLabel",2),s([$e(".dropdown-trigger")],R.prototype,"triggerEl",2),s([$e(".dropdown-wrapper")],R.prototype,"wrapperEl",2),R=s([Xe("icpay-token-selector")],R);import{html as ne}from"lit";var qe="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78i iglkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuZGJhM2RhM2I1LCAyMDIzLzEyLzE1LTEwOjQyOjM3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpypmY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjUuNyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjUtMDktMDRUMTc6MTk6NDErMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI1LTA5LTA0VDE3OjIzOjU5KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI1LTA5LTA0VDE3OjIzOjU5KzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1YTMxZThhMi05MzVkLTRkY2YtOTk0Mi05NjgxZWE5MTQ0MDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NWEzMWU4YTItOTM1ZC00ZGNmLTk5NDItOTY4MWVhOTE0NDA4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NWEzMWU4YTItOTM1ZC00ZGNmLTk5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";function Qe(o){return!o||!o.startsWith("data:")?o:o.replace(/\s+/g,"")}function _e(o,a){let e=(o||"").toLowerCase();return e==="ii"?"Internet Identity":e==="nfid"?"NFID":e==="plug"?"Plug":e==="oisy"?"Oisy":a&&a.trim()?a:o?o.charAt(0).toUpperCase()+o.slice(1):"Wallet"}function B(o){if(!o.visible)return null;let{wallets:a,onSelect:e,onClose:t,isConnecting:i}=o,n=a.map(r=>{let l=(r.id||"").toLowerCase();return{...r,icon:l==="nfid"?qe:r.icon??null}});return ne`
|
|
446
446
|
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:10000">
|
|
447
447
|
<div style="background:#1f2937;border-radius:12px;padding:24px;max-width:400px;width:90%;border:1px solid rgba(255,255,255,0.1);position:relative">
|
|
448
448
|
<button @click=${t} style="position:absolute;top:16px;right:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:pointer;border:none;background:transparent;font-size:20px">✕</button>
|
|
449
449
|
<h3 style="color:#fff;margin:0 48px 16px 0;font-size:18px;font-weight:600">Choose Wallet</h3>
|
|
450
450
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
451
|
-
${n.map(r=>{let l=
|
|
451
|
+
${n.map(r=>{let l=_e(r.id,r.label);return ne`
|
|
452
452
|
<button
|
|
453
453
|
@click=${()=>e(r.id)}
|
|
454
454
|
style="width:100%;padding:12px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;text-align:left;cursor:pointer;font-size:14px;opacity:${i?.5:1};display:flex;align-items:center;gap:12px">
|
|
455
|
-
${r.icon?
|
|
455
|
+
${r.icon?ne`
|
|
456
456
|
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center">
|
|
457
|
-
<img src="${
|
|
457
|
+
<img src="${Qe(r.icon)}" alt="${l} logo" style="width:40px;height:40px;object-fit:cover;border-radius:12px" />
|
|
458
458
|
</div>
|
|
459
|
-
`:
|
|
459
|
+
`:ne`
|
|
460
460
|
<div style="width:48px;height:48px;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold">
|
|
461
461
|
${l}
|
|
462
462
|
</div>
|
|
@@ -464,7 +464,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
464
464
|
<div><div style="font-weight:500">${l}</div></div>
|
|
465
465
|
</button>`})}
|
|
466
466
|
</div>
|
|
467
|
-
${o.showCreditCard!==!1?
|
|
467
|
+
${o.showCreditCard!==!1?ne`
|
|
468
468
|
<div style="margin:12px 0;height:1px;background:rgba(255,255,255,0.08)"></div>
|
|
469
469
|
<div style="display:flex;flex-direction:column;gap:6px">
|
|
470
470
|
<button
|
|
@@ -473,17 +473,17 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
473
473
|
<span>💳</span>
|
|
474
474
|
<span style="font-weight:600">${o.creditCardLabel||"Pay with credit card"}</span>
|
|
475
475
|
</button>
|
|
476
|
-
${o.creditCardTooltip?
|
|
476
|
+
${o.creditCardTooltip?ne`<div style="font-size:12px;color:#f5d78a;text-align:center">${o.creditCardTooltip}</div>`:null}
|
|
477
477
|
</div>
|
|
478
478
|
`:null}
|
|
479
479
|
</div>
|
|
480
480
|
</div>
|
|
481
|
-
`}import{html as
|
|
481
|
+
`}import{html as xe}from"lit";function N(o){if(!o.visible)return null;let a=o.environment??"STAGING",e=o.width??420,t=o.height??680,i="";return o.sessionId&&(i=`${a==="PRODUCTION"?"https://global.transak.com":"https://global-stg.transak.com"}?sessionId=${encodeURIComponent(o.sessionId)}`),xe`
|
|
482
482
|
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);z-index:10000">
|
|
483
483
|
<div style="position:relative;background:#0f1115;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,0.5)">
|
|
484
484
|
<button @click=${o.onClose} aria-label="Close" title="Close"
|
|
485
485
|
style="position:absolute;top:10px;right:10px;background:transparent;border:none;color:#9ca3af;cursor:pointer;font-size:20px">✕</button>
|
|
486
|
-
${o.sessionId?
|
|
486
|
+
${o.sessionId?xe`
|
|
487
487
|
<iframe
|
|
488
488
|
id="transak-iframe"
|
|
489
489
|
style="border:none;border-radius:12px;background:#111"
|
|
@@ -492,7 +492,7 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
492
492
|
src="${i}"
|
|
493
493
|
allow="camera;microphone;payment"
|
|
494
494
|
></iframe>
|
|
495
|
-
`:
|
|
495
|
+
`:xe`
|
|
496
496
|
<div style="width:${String(e)}px;max-width:90vw;padding:12px">
|
|
497
497
|
<div style="background:#1a1f2e;border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:24px;color:#e5e7eb;text-align:center">
|
|
498
498
|
<div style="font-size:18px;font-weight:600;margin-bottom:8px">Service unavailable</div>
|
|
@@ -507,12 +507,19 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
507
507
|
`}
|
|
508
508
|
</div>
|
|
509
509
|
</div>
|
|
510
|
-
`}var
|
|
510
|
+
`}var Se=typeof window<"u",re=null;function G(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var v=class extends et{constructor(){super(...arguments);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}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;re||(re=(await import("@windoge98/plug-n-play")).PNP);let i=new re(this.config?.plugNPlay||{});this.walletConnected=!1,this.config={...this.config,connectedWallet:{owner:t.principal,principal:t.principal,connected:!1}}}catch{}}get cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Se&&(G(this.config?.debug||!1,"Premium content connected",{config:this.config}),this.tryAutoConnectPNP(),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers())}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.onPay()},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")}}async onPay(){if(Se&&!(this.processing||this.unlocked)){G(this.config?.debug||!1,"Premium content payment 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:"pay",type:"sendUsd",amount:this.config.priceUsd,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="pay",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0}));return}}else if(!this.walletConnected){G(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{re||(re=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new re(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(G(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="pay",this.showWalletModal=!0;return}catch(r){G(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}G(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);G(this.config?.debug||!1,"Payment details",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.config.priceUsd,i,{context:"premium-content"});G(this.config?.debug||!1,"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){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(t))}})}finally{this.processing=!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),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:"premium: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}select(e){this.selectedSymbol=e}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.onPay(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}render(){return this.config?se`
|
|
511
511
|
<div class="icpay-card icpay-section">
|
|
512
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
512
|
+
${this.config?.progressBar?.enabled!==!1?se`
|
|
513
|
+
<icpay-progress-bar
|
|
514
|
+
.debug=${!!this.config?.debug}
|
|
515
|
+
.theme=${this.config?.theme}
|
|
516
|
+
.amount=${Number(this.config?.priceUsd||0)}
|
|
517
|
+
.ledgerSymbol=${this.selectedSymbol||this.config?.defaultSymbol||"ICP"}
|
|
518
|
+
></icpay-progress-bar>
|
|
519
|
+
`:null}
|
|
513
520
|
<div class="image-container">
|
|
514
521
|
<div class="locked-image ${this.unlocked?"unlocked":""}" style="background-image:url('${this.config.imageUrl||""}')"></div>
|
|
515
|
-
${this.unlocked?null:
|
|
522
|
+
${this.unlocked?null:se`<div class="lock-overlay">🔒</div>`}
|
|
516
523
|
</div>
|
|
517
524
|
|
|
518
525
|
<div class="pricing">
|
|
@@ -534,21 +541,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
534
541
|
${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)}
|
|
535
542
|
</button>
|
|
536
543
|
|
|
537
|
-
${this.errorMessage?
|
|
544
|
+
${this.errorMessage?se`
|
|
538
545
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
539
546
|
${this.errorMessage}
|
|
540
|
-
${this.errorAction?
|
|
547
|
+
${this.errorAction?se`
|
|
541
548
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
542
549
|
${this.errorAction}
|
|
543
550
|
</button>
|
|
544
551
|
`:""}
|
|
545
552
|
</div>
|
|
546
553
|
`:""}
|
|
547
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
554
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return B({visible:!!(this.showWalletModal&&this.pnp),wallets:t,isConnecting:!1,onSelect:i=>this.connectWithWallet(i),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 n=Number(this.config?.priceUsd||0);return n>0&&n<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-n).toFixed(2)} more.`:null})()})})()}
|
|
548
555
|
|
|
549
|
-
${this.showOnrampModal?
|
|
556
|
+
${this.showOnrampModal?N({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}
|
|
550
557
|
</div>
|
|
551
|
-
`:
|
|
558
|
+
`:se`<div class="icpay-card icpay-section">Loading...</div>`}};v.styles=[$,tt`
|
|
552
559
|
.image-container {
|
|
553
560
|
position: relative;
|
|
554
561
|
border-radius: 16px;
|
|
@@ -599,17 +606,24 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
599
606
|
border-color: rgba(239, 68, 68, 0.3);
|
|
600
607
|
color: #ef4444;
|
|
601
608
|
}
|
|
602
|
-
`],s([
|
|
609
|
+
`],s([nt({type:Object})],v.prototype,"config",2),s([U()],v.prototype,"selectedSymbol",2),s([U()],v.prototype,"unlocked",2),s([U()],v.prototype,"succeeded",2),s([U()],v.prototype,"processing",2),s([U()],v.prototype,"availableLedgers",2),s([U()],v.prototype,"errorMessage",2),s([U()],v.prototype,"errorSeverity",2),s([U()],v.prototype,"errorAction",2),s([U()],v.prototype,"walletConnected",2),s([U()],v.prototype,"pendingAction",2),s([U()],v.prototype,"showWalletModal",2),s([U()],v.prototype,"showOnrampModal",2),s([U()],v.prototype,"onrampSessionId",2),s([U()],v.prototype,"onrampPaymentIntentId",2),s([U()],v.prototype,"onrampErrorMessage",2),v=s([it("icpay-premium-content")],v);import{LitElement as st,html as ee,css as rt}from"lit";import{customElement as ot,property as at,state as k}from"lit/decorators.js";var Ee=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 f=class extends st{constructor(){super(...arguments);this.selectedAmount=1;this.selectedSymbol="ICP";this.total=0;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.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}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{}}get amounts(){return this.config?.amountsUsd||[1,5,10]}get cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Ee&&(Y(this.config?.debug||!1,"Tip jar connected",{config:this.config}),this.config&&this.config.defaultAmountUsd&&(this.selectedAmount=this.config.defaultAmountUsd),this.tryAutoConnectPNP(),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==="tip"&&this.tip()},0)}}async loadVerifiedLedgers(){if(!(!Ee||!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.config?.cryptoOptions&&this.config.cryptoOptions.length===1&&(this.selectedSymbol=this.config.cryptoOptions[0].symbol),!this.selectedSymbol&&this.availableLedgers.length>0&&(this.selectedSymbol=this.config?.defaultSymbol||this.availableLedgers[0].symbol)}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")}}selectAmount(e){this.selectedAmount=e}selectSymbol(e){this.selectedSymbol=e}get fillPercentage(){return Math.min(this.total/50*100,100)}async tip(){if(Ee&&(Y(this.config?.debug||!1,"Tip button clicked!",{config:this.config,processing:this.processing}),!this.processing)){this.errorMessage=null,this.errorSeverity=null,this.errorAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"tip",type:"sendUsd",amount:this.selectedAmount,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="tip",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="tip",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,"Tip payment details",{amount:this.selectedAmount,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.selectedAmount,i,{context:"tip-jar"});Y(this.config?.debug||!1,"Tip payment completed",{resp:n}),this.total+=this.selectedAmount,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:n.transactionId,status:n.status,total:this.total}),this.dispatchEvent(new CustomEvent("icpay-tip",{detail:{amount:this.selectedAmount,tx:n},bubbles:!0}))}catch(e){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(t))}})}finally{this.processing=!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),i=this.cryptoOptions.find(d=>d.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol),n=await e.startOnrampUsd(this.selectedAmount,i,{context:"tip: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}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==="tip"&&setTimeout(()=>this.tip(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}render(){if(!this.config)return ee`<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";return ee`
|
|
603
610
|
<div class="icpay-card icpay-section" style="text-align:center;">
|
|
604
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
611
|
+
${this.config?.progressBar?.enabled!==!1?ee`
|
|
612
|
+
<icpay-progress-bar
|
|
613
|
+
.debug=${!!this.config?.debug}
|
|
614
|
+
.theme=${this.config?.theme}
|
|
615
|
+
.amount=${Number(this.selectedAmount||0)}
|
|
616
|
+
.ledgerSymbol=${this.selectedSymbol||this.config?.defaultSymbol||"ICP"}
|
|
617
|
+
></icpay-progress-bar>
|
|
618
|
+
`:null}
|
|
605
619
|
<div class="jar"><div class="fill" style="height:${this.fillPercentage}%"></div></div>
|
|
606
620
|
<div class="label">Total Tips: $${this.total}</div>
|
|
607
621
|
|
|
608
622
|
<div class="amounts">
|
|
609
|
-
${this.amounts.map(c=>
|
|
623
|
+
${this.amounts.map(c=>ee`<div class="chip ${this.selectedAmount===c?"selected":""}" @click=${()=>this.selectAmount(c)}>$${c}</div>`)}
|
|
610
624
|
</div>
|
|
611
625
|
|
|
612
|
-
${r?
|
|
626
|
+
${r?ee`
|
|
613
627
|
<div>
|
|
614
628
|
<icpay-token-selector
|
|
615
629
|
.options=${this.cryptoOptions}
|
|
@@ -627,21 +641,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
627
641
|
${this.succeeded&&this.config?.disableAfterSuccess?"Paid":this.processing?"Processing\u2026":this.config?.buttonLabel?this.config.buttonLabel.replace("{amount}",String(this.selectedAmount)).replace("{symbol}",this.selectedSymbol):`Tip $${this.selectedAmount} with ${this.selectedSymbol}`}
|
|
628
642
|
</button>
|
|
629
643
|
|
|
630
|
-
${this.errorMessage?
|
|
644
|
+
${this.errorMessage?ee`
|
|
631
645
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
632
646
|
${this.errorMessage}
|
|
633
|
-
${this.errorAction?
|
|
647
|
+
${this.errorAction?ee`
|
|
634
648
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
635
649
|
${this.errorAction}
|
|
636
650
|
</button>
|
|
637
651
|
`:""}
|
|
638
652
|
</div>
|
|
639
653
|
`:""}
|
|
640
|
-
${(()=>{let d=(this.pnp?.getEnabledWallets?.()||[]).map(p=>({id:this.getWalletId(p),label:this.getWalletLabel(p),icon:this.getWalletIcon(p)}));return
|
|
654
|
+
${(()=>{let d=(this.pnp?.getEnabledWallets?.()||[]).map(p=>({id:this.getWalletId(p),label:this.getWalletLabel(p),icon:this.getWalletIcon(p)}));return B({visible:!!(this.showWalletModal&&this.pnp),wallets:d,isConnecting:!1,onSelect:p=>this.connectWithWallet(p),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 E=Number(this.selectedAmount||this.config?.defaultAmountUsd||0);return E>0&&E<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-E).toFixed(2)} more.`:null})()})})()}
|
|
641
655
|
|
|
642
|
-
${this.showOnrampModal?
|
|
656
|
+
${this.showOnrampModal?N({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}
|
|
643
657
|
</div>
|
|
644
|
-
`}};
|
|
658
|
+
`}};f.styles=[$,rt`
|
|
645
659
|
.jar { width: 120px; height: 160px; margin: 0 auto 12px; position: relative; background: linear-gradient(135deg, #374151 0%, #4b5563 100%); border-radius: 0 0 60px 60px; border: 3px solid #6b7280; border-top: 8px solid #6b7280; overflow: hidden; }
|
|
646
660
|
.fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%); transition: height 0.8s ease; height: 0%; }
|
|
647
661
|
.amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
|
|
@@ -673,9 +687,16 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
673
687
|
border-color: rgba(239, 68, 68, 0.3);
|
|
674
688
|
color: #ef4444;
|
|
675
689
|
}
|
|
676
|
-
`],s([
|
|
690
|
+
`],s([at({type:Object})],f.prototype,"config",2),s([k()],f.prototype,"selectedAmount",2),s([k()],f.prototype,"selectedSymbol",2),s([k()],f.prototype,"total",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([ot("icpay-tip-jar")],f);import{LitElement as lt,html as fe,css as ct}from"lit";import{customElement as dt,property as we,state as P}from"lit/decorators.js";var ke=typeof window<"u",le=null;function Z(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var u=class extends lt{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;le||(le=(await import("@windoge98/plug-n-play")).PNP);let i=new le(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(),ke&&(Z(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(!(!ke||!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(ke&&!(this.processing||this.unlocked)){Z(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){Z(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{le||(le=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new le(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(Z(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="unlock",this.showWalletModal=!0;return}catch(r){Z(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}Z(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);Z(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"});Z(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){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(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?fe`
|
|
677
691
|
<div class="icpay-card icpay-section">
|
|
678
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
692
|
+
${this.config?.progressBar?.enabled!==!1?fe`
|
|
693
|
+
<icpay-progress-bar
|
|
694
|
+
.debug=${!!this.config?.debug}
|
|
695
|
+
.theme=${this.config?.theme}
|
|
696
|
+
.amount=${Number(this.config?.priceUsd||0)}
|
|
697
|
+
.ledgerSymbol=${this.selectedSymbol||this.config?.defaultSymbol||"ICP"}
|
|
698
|
+
></icpay-progress-bar>
|
|
699
|
+
`:null}
|
|
679
700
|
<div class="container">
|
|
680
701
|
<div class="title">${this.title}</div>
|
|
681
702
|
<div class="preview">${this.preview}</div>
|
|
@@ -698,21 +719,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
698
719
|
${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)}
|
|
699
720
|
</button>
|
|
700
721
|
|
|
701
|
-
${this.errorMessage?
|
|
722
|
+
${this.errorMessage?fe`
|
|
702
723
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
703
724
|
${this.errorMessage}
|
|
704
|
-
${this.errorAction?
|
|
725
|
+
${this.errorAction?fe`
|
|
705
726
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
706
727
|
${this.errorAction}
|
|
707
728
|
</button>
|
|
708
729
|
`:""}
|
|
709
730
|
</div>
|
|
710
731
|
`:""}
|
|
711
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
732
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return B({visible:!!(this.showWalletModal&&this.pnp),wallets:t,isConnecting:!1,onSelect:i=>this.connectWithWallet(i),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 n=Number(this.config?.priceUsd||0);return n>0&&n<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-n).toFixed(2)} more.`:null})()})})()}
|
|
712
733
|
|
|
713
|
-
${this.showOnrampModal?
|
|
734
|
+
${this.showOnrampModal?N({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}
|
|
714
735
|
</div>
|
|
715
|
-
`:
|
|
736
|
+
`:fe`<div class="icpay-card icpay-section">Loading...</div>`}};u.styles=[$,ct`
|
|
716
737
|
.container { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
|
|
717
738
|
.title { color: var(--icpay-text); font-weight: 700; margin-bottom: 8px; }
|
|
718
739
|
.preview { color: var(--icpay-muted); margin-bottom: 12px; line-height: 1.6; }
|
|
@@ -744,11 +765,18 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
744
765
|
border-color: rgba(239, 68, 68, 0.3);
|
|
745
766
|
color: #ef4444;
|
|
746
767
|
}
|
|
747
|
-
`],s([
|
|
768
|
+
`],s([we({type:Object})],u.prototype,"config",2),s([we({type:String})],u.prototype,"title",2),s([we({type:String})],u.prototype,"preview",2),s([we({type:String})],u.prototype,"lockedContent",2),s([P()],u.prototype,"selectedSymbol",2),s([P()],u.prototype,"unlocked",2),s([P()],u.prototype,"succeeded",2),s([P()],u.prototype,"processing",2),s([P()],u.prototype,"availableLedgers",2),s([P()],u.prototype,"errorMessage",2),s([P()],u.prototype,"errorSeverity",2),s([P()],u.prototype,"errorAction",2),s([P()],u.prototype,"walletConnected",2),s([P()],u.prototype,"pendingAction",2),s([P()],u.prototype,"showWalletModal",2),s([P()],u.prototype,"showOnrampModal",2),s([P()],u.prototype,"onrampSessionId",2),s([P()],u.prototype,"onrampPaymentIntentId",2),s([P()],u.prototype,"onrampErrorMessage",2),u=s([dt("icpay-article-paywall")],u);import{LitElement as pt,html as ce,css as ht}from"lit";import{customElement as gt,property as ut,state as D}from"lit/decorators.js";var Me=typeof window<"u",Ie=null;function J(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var w=class extends pt{constructor(){super(...arguments);this.selectedIndex=0;this.selectedSymbol="ICP";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 cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Me&&(J(this.config?.debug||!1,"Coffee shop connected",{config:this.config}),this.config&&typeof this.config.defaultItemIndex=="number"&&(this.selectedIndex=this.config.defaultItemIndex),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers())}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==="order"&&this.order()},0)}}async loadVerifiedLedgers(){if(!(!Me||!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.availableLedgers.length>0&&!this.selectedSymbol&&(this.selectedSymbol=this.availableLedgers[0].symbol)}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")}}selectItem(e){this.selectedIndex=e}selectSymbol(e){this.selectedSymbol=e}get selectedItem(){return this.config?.items?.[this.selectedIndex]||{name:"Loading...",priceUsd:0}}async order(){if(Me&&!this.processing){J(this.config?.debug||!1,"Coffee order started",{selectedItem:this.selectedItem,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:"order",type:"sendUsd",amount:this.selectedItem.priceUsd,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="order",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0}));return}}else if(!this.walletConnected){J(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{Ie||(Ie=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Ie(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(J(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="order",this.showWalletModal=!0;return}catch(r){J(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}J(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);J(this.config?.debug||!1,"Coffee order payment details",{item:this.selectedItem.name,priceUsd:this.selectedItem.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.selectedItem.priceUsd,i,{context:"coffee",item:this.selectedItem.name});J(this.config?.debug||!1,"Coffee order payment completed",{resp:n}),this.config.onSuccess&&this.config.onSuccess({id:n.transactionId,status:n.status,item:this.selectedItem.name}),this.dispatchEvent(new CustomEvent("icpay-coffee",{detail:{item:this.selectedItem,tx:n},bubbles:!0}))}catch(e){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(t))}})}finally{this.processing=!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),i=this.cryptoOptions.find(d=>d.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol),n=await e.startOnrampUsd(this.selectedItem.priceUsd,i,{context:"coffee:onramp",item:this.selectedItem.name}),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}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==="order"&&setTimeout(()=>this.order(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}render(){return this.config?ce`
|
|
748
769
|
<div class="icpay-card icpay-section">
|
|
749
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
770
|
+
${this.config?.progressBar?.enabled!==!1?ce`
|
|
771
|
+
<icpay-progress-bar
|
|
772
|
+
.debug=${!!this.config?.debug}
|
|
773
|
+
.theme=${this.config?.theme}
|
|
774
|
+
.amount=${Number(this.selectedItem?.priceUsd||0)}
|
|
775
|
+
.ledgerSymbol=${this.selectedSymbol||this.config?.defaultSymbol||"ICP"}
|
|
776
|
+
></icpay-progress-bar>
|
|
777
|
+
`:null}
|
|
750
778
|
<div class="menu">
|
|
751
|
-
${this.config.items.map((e,t)=>
|
|
779
|
+
${this.config.items.map((e,t)=>ce`
|
|
752
780
|
<div class="item ${this.selectedIndex===t?"selected":""}" @click=${()=>this.selectItem(t)}>
|
|
753
781
|
<span>${e.name}</span>
|
|
754
782
|
<span>$${Number(e?.priceUsd??0).toFixed(2)}</span>
|
|
@@ -772,21 +800,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
772
800
|
${this.processing?"Processing\u2026":`Order ${this.selectedItem.name}`}
|
|
773
801
|
</button>
|
|
774
802
|
|
|
775
|
-
${this.errorMessage?
|
|
803
|
+
${this.errorMessage?ce`
|
|
776
804
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
777
805
|
${this.errorMessage}
|
|
778
|
-
${this.errorAction?
|
|
806
|
+
${this.errorAction?ce`
|
|
779
807
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
780
808
|
${this.errorAction}
|
|
781
809
|
</button>
|
|
782
810
|
`:""}
|
|
783
811
|
</div>
|
|
784
812
|
`:""}
|
|
785
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
813
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return B({visible:!!(this.showWalletModal&&this.pnp),wallets:t,isConnecting:!1,onSelect:i=>this.connectWithWallet(i),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 n=this.config?.defaultItemIndex??0,r=Number(this.config?.items?.[n]?.priceUsd||0);return r>0&&r<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-r).toFixed(2)} more.`:null})()})})()}
|
|
786
814
|
|
|
787
|
-
${this.showOnrampModal?
|
|
815
|
+
${this.showOnrampModal?N({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}
|
|
788
816
|
</div>
|
|
789
|
-
`:
|
|
817
|
+
`:ce`<div class="icpay-card icpay-section">Loading...</div>`}};w.styles=[$,ht`
|
|
790
818
|
.menu { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
791
819
|
.item { background: var(--icpay-surface-alt); border: 2px solid var(--icpay-border); border-radius: 12px; padding: 16px; display:flex; justify-content: space-between; align-items:center; cursor: pointer; color: var(--icpay-text); font-weight: 600; }
|
|
792
820
|
.item.selected { background: var(--icpay-primary); color: #111827; border-color: var(--icpay-primary); }
|
|
@@ -817,14 +845,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
817
845
|
border-color: rgba(239, 68, 68, 0.3);
|
|
818
846
|
color: #ef4444;
|
|
819
847
|
}
|
|
820
|
-
`],s([
|
|
848
|
+
`],s([ut({type:Object})],w.prototype,"config",2),s([D()],w.prototype,"selectedIndex",2),s([D()],w.prototype,"selectedSymbol",2),s([D()],w.prototype,"processing",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([gt("icpay-coffee-shop")],w);import{LitElement as mt,html as de,css as ft}from"lit";import{customElement as yt,property as bt,state as M}from"lit/decorators.js";var Ce=typeof window<"u",pe=null;function X(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var y=class extends mt{constructor(){super(...arguments);this.selectedAmount=10;this.selectedSymbol="ICP";this.raised=0;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.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}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;pe||(pe=(await import("@windoge98/plug-n-play")).PNP);let i=new pe(this.config?.plugNPlay||{});this.walletConnected=!1,this.config={...this.config,connectedWallet:{owner:t.principal,principal:t.principal,connected:!1}}}catch{}}get amounts(){return this.config?.amountsUsd||[10,25,50,100,250,500]}get cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Ce&&(X(this.config?.debug||!1,"Donation thermometer connected",{config:this.config}),this.config&&typeof this.config.defaultAmountUsd=="number"&&(this.selectedAmount=this.config.defaultAmountUsd),this.tryAutoConnectPNP(),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers())}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==="donate"&&this.donate()},0)}}async loadVerifiedLedgers(){if(!(!Ce||!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.availableLedgers.length>0&&!this.selectedSymbol&&(this.selectedSymbol=this.availableLedgers[0].symbol)}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")}}selectAmount(e){this.selectedAmount=e}selectSymbol(e){this.selectedSymbol=e}get fillPercentage(){let e=Number(this.config?.goalUsd??1e3),t=e>0?e:1e3;return Math.min(this.raised/t*100,100)}async donate(){if(Ce&&!this.processing){X(this.config?.debug||!1,"Donation started",{amount:this.selectedAmount,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:"donate",type:"sendUsd",amount:this.selectedAmount,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="donate",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0}));return}}else if(!this.walletConnected){X(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{pe||(pe=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new pe(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(X(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="donate",this.showWalletModal=!0;return}catch(r){X(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}X(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);X(this.config?.debug||!1,"Donation payment details",{amount:this.selectedAmount,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.selectedAmount,i,{context:"donation"});X(this.config?.debug||!1,"Donation payment completed",{resp:n}),this.raised+=this.selectedAmount,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:n.transactionId,status:n.status,raised:this.raised}),this.dispatchEvent(new CustomEvent("icpay-donation",{detail:{amount:this.selectedAmount,tx:n},bubbles:!0}))}catch(e){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(t))}})}finally{this.processing=!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),i=this.cryptoOptions.find(d=>d.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol),n=await e.startOnrampUsd(this.selectedAmount,i,{context:"donation: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}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==="donate"&&setTimeout(()=>this.donate(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}render(){return this.config?de`
|
|
821
849
|
<div class="icpay-card icpay-section" style="text-align:center;">
|
|
822
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
850
|
+
${this.config?.progressBar?.enabled!==!1?de`
|
|
851
|
+
<icpay-progress-bar
|
|
852
|
+
.debug=${!!this.config?.debug}
|
|
853
|
+
.theme=${this.config?.theme}
|
|
854
|
+
.amount=${Number(this.selectedAmount||0)}
|
|
855
|
+
.ledgerSymbol=${this.selectedSymbol||this.config?.defaultSymbol||"ICP"}
|
|
856
|
+
></icpay-progress-bar>
|
|
857
|
+
`:null}
|
|
823
858
|
<div class="thermo"><div class="fill" style="height:${this.fillPercentage}%"></div></div>
|
|
824
859
|
<div class="total">$${Number(this.raised).toFixed(0)} / $${Number(this.config?.goalUsd??0).toFixed(2)}</div>
|
|
825
860
|
|
|
826
861
|
<div class="amounts">
|
|
827
|
-
${this.amounts.map(e=>
|
|
862
|
+
${this.amounts.map(e=>de`<div class="chip ${this.selectedAmount===e?"selected":""}" @click=${()=>this.selectAmount(e)}>$${e}</div>`)}
|
|
828
863
|
</div>
|
|
829
864
|
|
|
830
865
|
<div>
|
|
@@ -843,21 +878,21 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
843
878
|
${this.succeeded&&this.config?.disableAfterSuccess?"Donated":this.processing?"Processing\u2026":(this.config?.buttonLabel||"Donate {amount} with {symbol}").replace("{amount}",`${this.selectedAmount}`).replace("{symbol}",this.selectedSymbol)}
|
|
844
879
|
</button>
|
|
845
880
|
|
|
846
|
-
${this.errorMessage?
|
|
881
|
+
${this.errorMessage?de`
|
|
847
882
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
848
883
|
${this.errorMessage}
|
|
849
|
-
${this.errorAction?
|
|
884
|
+
${this.errorAction?de`
|
|
850
885
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
851
886
|
${this.errorAction}
|
|
852
887
|
</button>
|
|
853
888
|
`:""}
|
|
854
889
|
</div>
|
|
855
890
|
`:""}
|
|
856
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
891
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return B({visible:!!(this.showWalletModal&&this.pnp),wallets:t,isConnecting:!1,onSelect:i=>this.connectWithWallet(i),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 n=Number(this.selectedAmount||this.config?.defaultAmountUsd||0);return n>0&&n<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-n).toFixed(2)} more.`:null})()})})()}
|
|
857
892
|
|
|
858
|
-
${this.showOnrampModal?
|
|
893
|
+
${this.showOnrampModal?N({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}
|
|
859
894
|
</div>
|
|
860
|
-
`:
|
|
895
|
+
`:de`<div class="icpay-card icpay-section">Loading...</div>`}};y.styles=[$,ft`
|
|
861
896
|
.thermo { width: 60px; height: 200px; background: var(--icpay-surface-alt); border: 3px solid #6b7280; border-radius: 30px; margin: 0 auto 12px; position: relative; overflow: hidden; }
|
|
862
897
|
.fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%); transition: height 0.8s ease; height: 0%; border-radius: 0 0 27px 27px; }
|
|
863
898
|
.amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
|
|
@@ -889,20 +924,25 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
889
924
|
border-color: rgba(239, 68, 68, 0.3);
|
|
890
925
|
color: #ef4444;
|
|
891
926
|
}
|
|
892
|
-
`],s([
|
|
927
|
+
`],s([bt({type:Object})],y.prototype,"config",2),s([M()],y.prototype,"selectedAmount",2),s([M()],y.prototype,"selectedSymbol",2),s([M()],y.prototype,"raised",2),s([M()],y.prototype,"processing",2),s([M()],y.prototype,"succeeded",2),s([M()],y.prototype,"availableLedgers",2),s([M()],y.prototype,"errorMessage",2),s([M()],y.prototype,"errorSeverity",2),s([M()],y.prototype,"errorAction",2),s([M()],y.prototype,"walletConnected",2),s([M()],y.prototype,"pendingAction",2),s([M()],y.prototype,"showWalletModal",2),s([M()],y.prototype,"showOnrampModal",2),s([M()],y.prototype,"onrampSessionId",2),s([M()],y.prototype,"onrampPaymentIntentId",2),s([M()],y.prototype,"onrampErrorMessage",2),y=s([yt("icpay-donation-thermometer")],y);import{LitElement as vt,html as he,css as wt}from"lit";import{customElement as xt,property as St,state as F}from"lit/decorators.js";var Le=typeof window<"u",Oe=null;function ye(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var x=class extends vt{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(),Le&&(ye(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(!(!Le||!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{Oe||(Oe=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Oe(this.config?.plugNPlay||{});let e=this.pnp.getEnabledWallets();if(ye(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(ye(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(ye(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){ye(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 B({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,L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(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(!(!Le||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){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return he`<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),be=this.config?.progressBar?.enabled!==!1;return he`
|
|
893
928
|
<div class="icpay-card icpay-section">
|
|
894
|
-
${
|
|
895
|
-
<icpay-progress-bar
|
|
929
|
+
${be?he`
|
|
930
|
+
<icpay-progress-bar
|
|
931
|
+
.debug=${!!this.config?.debug}
|
|
932
|
+
.theme=${this.config?.theme}
|
|
933
|
+
.amount=${Number(this.config?.amountUsd||0)}
|
|
934
|
+
.ledgerSymbol=${c}
|
|
935
|
+
></icpay-progress-bar>
|
|
896
936
|
`:null}
|
|
897
937
|
|
|
898
938
|
<div class="row ${r?"":"single"}">
|
|
899
|
-
${r?
|
|
939
|
+
${r?he`
|
|
900
940
|
<icpay-token-selector
|
|
901
941
|
.options=${this.cryptoOptions}
|
|
902
942
|
.value=${this.selectedSymbol||""}
|
|
903
943
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
904
944
|
mode=${l}
|
|
905
|
-
@icpay-token-change=${
|
|
945
|
+
@icpay-token-change=${me=>this.selectSymbol(me.detail.symbol)}
|
|
906
946
|
></icpay-token-selector>
|
|
907
947
|
`:null}
|
|
908
948
|
<button class="pay-button ${this.processing?"processing":""}"
|
|
@@ -912,16 +952,16 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
912
952
|
</button>
|
|
913
953
|
</div>
|
|
914
954
|
|
|
915
|
-
${this.errorMessage?
|
|
955
|
+
${this.errorMessage?he`
|
|
916
956
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
917
957
|
${this.errorMessage}
|
|
918
|
-
${this.errorAction?
|
|
958
|
+
${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>`:""}
|
|
919
959
|
</div>
|
|
920
960
|
`:""}
|
|
921
961
|
${this.renderWalletModal()}
|
|
922
|
-
${this.showOnrampModal?
|
|
962
|
+
${this.showOnrampModal?N({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,apiUrl:this.config?.apiUrl,paymentIntentId:this.onrampPaymentIntentId,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}
|
|
923
963
|
</div>
|
|
924
|
-
`}};
|
|
964
|
+
`}};x.styles=[$,wt`
|
|
925
965
|
.row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
|
|
926
966
|
.row.single { grid-template-columns: 1fr; }
|
|
927
967
|
select { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); color: var(--icpay-text); border-radius: 8px; padding: 10px; font-weight: 600; }
|
|
@@ -929,24 +969,31 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
929
969
|
.error-message.info { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #3b82f6; }
|
|
930
970
|
.error-message.warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
|
|
931
971
|
.error-message.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
|
|
932
|
-
`],s([
|
|
972
|
+
`],s([St({type:Object})],x.prototype,"config",2),s([F()],x.prototype,"selectedSymbol",2),s([F()],x.prototype,"processing",2),s([F()],x.prototype,"succeeded",2),s([F()],x.prototype,"availableLedgers",2),s([F()],x.prototype,"errorMessage",2),s([F()],x.prototype,"errorSeverity",2),s([F()],x.prototype,"errorAction",2),s([F()],x.prototype,"walletConnected",2),s([F()],x.prototype,"pendingAction",2),s([F()],x.prototype,"showWalletModal",2),s([F()],x.prototype,"showOnrampModal",2),s([F()],x.prototype,"onrampSessionId",2),s([F()],x.prototype,"onrampPaymentIntentId",2),s([F()],x.prototype,"onrampErrorMessage",2),x=s([xt("icpay-pay-button")],x);import{LitElement as Et,html as ge,css as kt}from"lit";import{customElement as Mt,property as It,state as I}from"lit/decorators.js";var Ae=typeof window<"u",We=null;function Ct(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var b=class extends Et{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(),Ae&&(Ct(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(!(!Ae||!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(We||(We=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new We(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(!(!Ae||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){L(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),A(t)&&(this.errorMessage=O(t),this.errorSeverity=T(t),this.errorAction=W(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return ge`<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(K=>K.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"),ue=c==="dropdown"?"dropdown":p?"buttons":"none",me=this.config?.progressBar?.enabled!==!1&&(r==="modal"?!0:this.processing);return ge`
|
|
933
973
|
<div class="icpay-card icpay-section">
|
|
934
|
-
${
|
|
974
|
+
${me?ge`
|
|
975
|
+
<icpay-progress-bar
|
|
976
|
+
.debug=${!!this.config?.debug}
|
|
977
|
+
.theme=${this.config?.theme}
|
|
978
|
+
.amount=${Number(this.amountUsd||0)}
|
|
979
|
+
.ledgerSymbol=${this.selectedSymbol||this.config?.defaultSymbol||"ICP"}
|
|
980
|
+
></icpay-progress-bar>
|
|
981
|
+
`:null}
|
|
935
982
|
|
|
936
983
|
<div class="row">
|
|
937
984
|
<div class="top-row ${E?"with-selector":""}">
|
|
938
985
|
<div class="amount-field">
|
|
939
986
|
<span class="currency-prefix">$</span>
|
|
940
|
-
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${
|
|
987
|
+
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${K=>this.onInputChange(K)} />
|
|
941
988
|
</div>
|
|
942
|
-
${E?
|
|
989
|
+
${E?ge`
|
|
943
990
|
<icpay-token-selector
|
|
944
991
|
.options=${this.cryptoOptions}
|
|
945
992
|
.value=${this.selectedSymbol||""}
|
|
946
993
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
947
|
-
mode=${
|
|
994
|
+
mode=${ue}
|
|
948
995
|
.showLabel=${!1}
|
|
949
|
-
@icpay-token-change=${
|
|
996
|
+
@icpay-token-change=${K=>this.selectSymbol(K.detail.symbol)}
|
|
950
997
|
></icpay-token-selector>
|
|
951
998
|
`:null}
|
|
952
999
|
</div>
|
|
@@ -958,17 +1005,17 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
958
1005
|
</div>
|
|
959
1006
|
<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>
|
|
960
1007
|
|
|
961
|
-
${this.errorMessage?
|
|
1008
|
+
${this.errorMessage?ge`
|
|
962
1009
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
963
1010
|
${this.errorMessage}
|
|
964
|
-
${this.errorAction?
|
|
1011
|
+
${this.errorAction?ge`<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>`:""}
|
|
965
1012
|
</div>
|
|
966
1013
|
`:""}
|
|
967
|
-
${(()=>{let
|
|
1014
|
+
${(()=>{let z=(this.pnp?.getEnabledWallets?.()||[]).map(H=>({id:this.getWalletId(H),label:this.getWalletLabel(H),icon:this.getWalletIcon(H)}));return B({visible:!!(this.showWalletModal&&this.pnp),wallets:z,isConnecting:!1,onSelect:H=>this.connectWithWallet(H),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 V=Number(this.amountUsd||0);return V>0&&V<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-V).toFixed(2)} more.`:null})()})})()}
|
|
968
1015
|
|
|
969
|
-
${this.showOnrampModal?
|
|
1016
|
+
${this.showOnrampModal?N({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}
|
|
970
1017
|
</div>
|
|
971
|
-
`}};
|
|
1018
|
+
`}};b.styles=[$,kt`
|
|
972
1019
|
.row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
|
|
973
1020
|
.top-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
|
|
974
1021
|
.top-row.with-selector { grid-template-columns: 1fr 2fr; }
|
|
@@ -988,5 +1035,5 @@ var Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
988
1035
|
@media (max-width: 520px) {
|
|
989
1036
|
.top-row { grid-template-columns: 1fr; }
|
|
990
1037
|
}
|
|
991
|
-
`],s([
|
|
1038
|
+
`],s([It({type:Object})],b.prototype,"config",2),s([I()],b.prototype,"amountUsd",2),s([I()],b.prototype,"hasUserAmount",2),s([I()],b.prototype,"selectedSymbol",2),s([I()],b.prototype,"processing",2),s([I()],b.prototype,"succeeded",2),s([I()],b.prototype,"availableLedgers",2),s([I()],b.prototype,"errorMessage",2),s([I()],b.prototype,"errorSeverity",2),s([I()],b.prototype,"errorAction",2),s([I()],b.prototype,"walletConnected",2),s([I()],b.prototype,"pendingAction",2),s([I()],b.prototype,"showWalletModal",2),s([I()],b.prototype,"showOnrampModal",2),s([I()],b.prototype,"onrampSessionId",2),s([I()],b.prototype,"onrampPaymentIntentId",2),s([I()],b.prototype,"onrampErrorMessage",2),b=s([Mt("icpay-amount-input")],b);export{b as ICPayAmountInput,u as ICPayArticlePaywall,w as ICPayCoffeeShop,y as ICPayDonationThermometer,x as ICPayPayButton,v as ICPayPremiumContent,f as ICPayTipJar,ie as applyThemeVars,$ as baseStyles,h as createSdk,N as renderTransakOnrampModal};
|
|
992
1039
|
//# sourceMappingURL=index.js.map
|