@ic-pay/icpay-widget 0.1.88 → 0.1.90
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 +148 -2
- package/dist/index.global.js +448 -393
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +142 -87
- 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 Be=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var s=(o,a,e,t)=>{for(var i=t>1?void 0:t?De(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&&Be(a,e,i),i};import{css as Fe}from"lit";var P=Fe`
|
|
2
2
|
:host {
|
|
3
3
|
--icpay-primary: #f9fafb;
|
|
4
4
|
--icpay-secondary: #e5e7eb;
|
|
@@ -56,9 +56,9 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
56
56
|
0%, 100% { opacity: 1; }
|
|
57
57
|
50% { opacity: 0.7; }
|
|
58
58
|
}
|
|
59
|
-
`;function Q(n,a){if(!n||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(q,R)=>{R&&n.style.setProperty(q,R)};i("--icpay-primary",e),i("--icpay-secondary",t);let o=q=>{if(!q)return null;let R=q.replace("#",""),pe=R.length===3?R.split("").map(Me=>Me+Me).join(""):R,ge=parseInt(pe,16),he=ge>>16&255,Re=ge>>8&255,Ue=ge&255;return{r:he,g:Re,b:Ue}},c=(q=>{let R=o(q);if(!R)return 0;let pe=ge=>{let he=ge/255;return he<=.03928?he/12.92:Math.pow((he+.055)/1.055,2.4)};return .2126*pe(R.r)+.7152*pe(R.g)+.0722*pe(R.b)})(e||t)>.6,m=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),O=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),ce=a.borderColor||(c?"#d1d5db":"#4b5563"),B=a.textColor||(c?"#111827":"#f9fafb"),de=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),K=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",de),i("--icpay-text",B),i("--icpay-muted",K),i("--icpay-surface",m),i("--icpay-surface-alt",O),i("--icpay-border",ce)}import{Icpay as Oe}from"@ic-pay/icpay-sdk";var Ie=typeof window<"u";function ye(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}function d(n){if(!Ie)return{client:{},quoteUsd:async()=>({tokenAmountDecimals:"0"}),sendUsd:async()=>({transactionId:"0",status:"pending"})};ye(n.debug||!1,"Creating SDK with config:",n);let a={publishableKey:n.publishableKey};n.enableEvents!==void 0?a.enableEvents=n.enableEvents:a.enableEvents=!0,n.apiUrl&&(a.apiUrl=n.apiUrl),n.icHost&&(a.icHost=n.icHost),n.actorProvider&&(a.actorProvider=n.actorProvider),n.connectedWallet&&(a.connectedWallet=n.connectedWallet),n.debug!==void 0&&(a.debug=n.debug),ye(n.debug||!1,"Filtered SDK config:",a);try{ye(n.debug||!1,"typeof Icpay:",typeof Oe);let e=new Oe(a);if(Ie){let o=e,r=l=>{o.addEventListener(l,c=>{window.dispatchEvent(new CustomEvent(l,{detail:c?.detail??c}))})};["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(r)}async function t(o,r){return e.calculateTokenAmountFromUSD({usdAmount:o,ledgerCanisterId:r})}async function i(o,r,l){return e.sendFundsUsd({usdAmount:o,ledgerCanisterId:r,metadata:l})}return{client:e,quoteUsd:t,sendUsd:i}}catch(e){throw ye(n.debug||!1,"Error creating SDK:",e),e}}import{LitElement as Je,html as ee,css as Xe}from"lit";import{customElement as qe,property as Qe,state as U}from"lit/decorators.js";import{IcpayError as Ne}from"@ic-pay/icpay-sdk";var x={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:n=>{console.error("[ICPay Widget] Error:",n)},onUserCancelled:()=>{console.log("[ICPay Widget] User cancelled the action")},onInsufficientBalance:n=>{console.warn("[ICPay Widget] Insufficient balance:",n.message)},onWalletError:n=>{console.warn("[ICPay Widget] Wallet error:",n.message)},onNetworkError:n=>{console.error("[ICPay Widget] Network error:",n.message)}};function S(n,a=ze){n instanceof Ne?(a.onError(n),n.isUserCancelled()?a.onUserCancelled?.():n.isBalanceError()?a.onInsufficientBalance?.(n):n.isWalletError()?a.onWalletError?.(n):n.isNetworkError()&&a.onNetworkError?.(n)):(console.error("[ICPay Widget] Unknown error:",n),a.onError(new Ne({code:x.UNKNOWN_ERROR,message:n instanceof Error?n.message:"An unknown error occurred",details:n})))}var Be={[x.WALLET_NOT_CONNECTED]:"Please connect your wallet to continue",[x.WALLET_USER_CANCELLED]:"User have rejected the transfer",[x.WALLET_SIGNATURE_REJECTED]:"User have rejected the transfer",[x.INSUFFICIENT_BALANCE]:"Insufficient balance for this transaction",[x.NETWORK_ERROR]:"Network error. Please try again",[x.API_ERROR]:"Service temporarily unavailable",[x.LEDGER_NOT_FOUND]:"Selected token is not supported",[x.TRANSACTION_FAILED]:"Transaction failed. Please try again",[x.TRANSACTION_TIMEOUT]:"Transaction timed out. Please try again",[x.UNKNOWN_ERROR]:"Something went wrong. Please try again"};function k(n){return Be[n.code]||n.message||"An error occurred"}function W(n){return!n.isUserCancelled()}function L(n){if(n.userAction)return n.userAction;switch(n.code){case x.WALLET_NOT_CONNECTED:return"Connect Wallet";case x.INSUFFICIENT_BALANCE:return"Add Funds";case x.NETWORK_ERROR:case x.API_ERROR:return"Try Again";default:return null}}function A(n){return n.isUserCancelled()?"info":n.isBalanceError()||n.isWalletError()?"warning":"error"}import{LitElement as Ke,html as y,css as Fe}from"lit";import{customElement as Ve,property as _,state as $}from"lit/decorators.js";var je=[{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"}],p=class extends Ke{constructor(){super(...arguments);this.open=!1;this.steps=je;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.progressionTimer=null;this.onMethodStart=e=>{let t=e?.detail?.name||"",i=e?.detail?.type||"";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")&&(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(o=>({...o,status:"pending"})),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.open&&this.showSuccess&&!this.failed&&(this.open=!1)},2e3),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",o=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:o,step:this.activeIndex},bubbles:!0}))};this.onMethodError=e=>{let t=e?.detail?.name||"",i=e?.detail?.error?.message||e?.detail?.message||"An error occurred",o=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:o,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,o=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),o&&(this.currentLedgerSymbol=o,this.ledgerSymbol=o),!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:o,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 o=this.activeIndex;o<this.currentSteps.length;o++)this.updateStepStatus(o,"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 o=this.activeIndex;o<this.currentSteps.length;o++)this.updateStepStatus(o,"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 o=this.activeIndex;o<this.currentSteps.length;o++)this.updateStepStatus(o,"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 o=this.activeIndex;o<this.currentSteps.length;o++)this.updateStepStatus(o,"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{Q(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{Q(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-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-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 o=this.currentSteps[e],r=o.status;o.status=t,t==="completed"&&(o.timestamp=this.getCurrentTime()),t==="error"&&i&&(o.errorMessage=this.transformErrorMessage(i)),console.log(`ICPay Progress: Step ${e} (${o.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 y`<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"))}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,o)=>o),t=["#0066FF","#ef4444","#10b981","#f59e0b","#8b5cf6"];return y`
|
|
59
|
+
`;function ee(o,a){if(!o||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(j,F)=>{F&&o.style.setProperty(j,F)};i("--icpay-primary",e),i("--icpay-secondary",t);let n=j=>{if(!j)return null;let F=j.replace("#",""),ge=F.length===3?F.split("").map(We=>We+We).join(""):F,ue=parseInt(ge,16),me=ue>>16&255,Re=ue>>8&255,$e=ue&255;return{r:me,g:Re,b:$e}},c=(j=>{let F=n(j);if(!F)return 0;let ge=ue=>{let me=ue/255;return me<=.03928?me/12.92:Math.pow((me+.055)/1.055,2.4)};return .2126*ge(F.r)+.7152*ge(F.g)+.0722*ge(F.b)})(e||t)>.6,d=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),p=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),E=a.borderColor||(c?"#d1d5db":"#4b5563"),z=a.textColor||(c?"#111827":"#f9fafb"),he=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),H=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",he),i("--icpay-text",z),i("--icpay-muted",H),i("--icpay-surface",d),i("--icpay-surface-alt",p),i("--icpay-border",E)}import{Icpay as Te}from"@ic-pay/icpay-sdk";var Ne=typeof window<"u";function be(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}function h(o){if(!Ne)return{client:{},quoteUsd:async()=>({tokenAmountDecimals:"0"}),sendUsd:async()=>({transactionId:"0",status:"pending"}),startOnrampUsd:async()=>({transactionId:"0",status:"pending",metadata:{onramp:{sessionId:null}}}),notifyIntentUntilComplete:()=>({stop:()=>{}})};be(o.debug||!1,"Creating SDK with config:",o);let a={publishableKey:o.publishableKey};o.enableEvents!==void 0?a.enableEvents=o.enableEvents:a.enableEvents=!0,o.apiUrl&&(a.apiUrl=o.apiUrl),o.icHost&&(a.icHost=o.icHost),o.actorProvider&&(a.actorProvider=o.actorProvider),o.connectedWallet&&(a.connectedWallet=o.connectedWallet),o.debug!==void 0&&(a.debug=o.debug),be(o.debug||!1,"Filtered SDK config:",a);try{let l=function(c,d,p){return t.notifyPaymentIntentOnRamp({paymentIntentId:c,intervalMs:d,orderId:p})};var e=l;be(o.debug||!1,"typeof Icpay:",typeof Te);let t=new Te(a);if(Ne){let c=t,d=p=>{c.addEventListener(p,E=>{window.dispatchEvent(new CustomEvent(p,{detail:E?.detail??E}))})};["icpay-sdk-error","icpay-sdk-transaction-created","icpay-sdk-transaction-updated","icpay-sdk-transaction-completed","icpay-sdk-transaction-failed","icpay-sdk-method-start","icpay-sdk-method-success","icpay-sdk-method-error"].forEach(d)}async function i(c,d){return t.calculateTokenAmountFromUSD({usdAmount:c,ledgerCanisterId:d})}async function n(c,d,p){return t.sendFundsUsd({usdAmount:c,ledgerCanisterId:d,metadata:p})}async function r(c,d,p){return t.sendFundsUsd({usdAmount:c,ledgerCanisterId:d,metadata:p,onrampPayment:!0})}return{client:t,quoteUsd:i,sendUsd:n,startOnrampUsd:r,notifyIntentUntilComplete:l}}catch(t){throw be(o.debug||!1,"Error creating SDK:",t),t}}import{LitElement as qe,html as ne,css as Qe}from"lit";import{customElement as _e,property as et,state as N}from"lit/decorators.js";import{IcpayError as Ue}from"@ic-pay/icpay-sdk";var I={WALLET_NOT_CONNECTED:"WALLET_NOT_CONNECTED",WALLET_USER_CANCELLED:"WALLET_USER_CANCELLED",WALLET_SIGNATURE_REJECTED:"WALLET_SIGNATURE_REJECTED",INSUFFICIENT_BALANCE:"INSUFFICIENT_BALANCE",NETWORK_ERROR:"NETWORK_ERROR",API_ERROR:"API_ERROR",LEDGER_NOT_FOUND:"LEDGER_NOT_FOUND",TRANSACTION_FAILED:"TRANSACTION_FAILED",TRANSACTION_TIMEOUT:"TRANSACTION_TIMEOUT",UNKNOWN_ERROR:"UNKNOWN_ERROR"},Ke={onError:o=>{console.error("[ICPay Widget] Error:",o)},onUserCancelled:()=>{console.log("[ICPay Widget] User cancelled the action")},onInsufficientBalance:o=>{console.warn("[ICPay Widget] Insufficient balance:",o.message)},onWalletError:o=>{console.warn("[ICPay Widget] Wallet error:",o.message)},onNetworkError:o=>{console.error("[ICPay Widget] Network error:",o.message)}};function C(o,a=Ke){o instanceof Ue?(a.onError(o),o.isUserCancelled()?a.onUserCancelled?.():o.isBalanceError()?a.onInsufficientBalance?.(o):o.isWalletError()?a.onWalletError?.(o):o.isNetworkError()&&a.onNetworkError?.(o)):(console.error("[ICPay Widget] Unknown error:",o),a.onError(new Ue({code:I.UNKNOWN_ERROR,message:o instanceof Error?o.message:"An unknown error occurred",details:o})))}var ze={[I.WALLET_NOT_CONNECTED]:"Please connect your wallet to continue",[I.WALLET_USER_CANCELLED]:"User have rejected the transfer",[I.WALLET_SIGNATURE_REJECTED]:"User have rejected the transfer",[I.INSUFFICIENT_BALANCE]:"Insufficient balance for this transaction",[I.NETWORK_ERROR]:"Network error. Please try again",[I.API_ERROR]:"Service temporarily unavailable",[I.LEDGER_NOT_FOUND]:"Selected token is not supported",[I.TRANSACTION_FAILED]:"Transaction failed. Please try again",[I.TRANSACTION_TIMEOUT]:"Transaction timed out. Please try again",[I.UNKNOWN_ERROR]:"Something went wrong. Please try again"};function L(o){return ze[o.code]||o.message||"An error occurred"}function O(o){return!o.isUserCancelled()}function A(o){if(o.userAction)return o.userAction;switch(o.code){case I.WALLET_NOT_CONNECTED:return"Connect Wallet";case I.INSUFFICIENT_BALANCE:return"Add Funds";case I.NETWORK_ERROR:case I.API_ERROR:return"Try Again";default:return null}}function W(o){return o.isUserCancelled()?"info":o.isBalanceError()||o.isWalletError()?"warning":"error"}import{LitElement as He,html as x,css as je}from"lit";import{customElement as Ve,property as te,state as K}from"lit/decorators.js";var Ge=[{key:"wallet",label:"Connect Wallet",tooltip:"Awaiting wallet connection",status:"pending"},{key:"init",label:"Initialising ICPay",tooltip:"Initializing payment",status:"pending"},{key:"await",label:"Awaiting payment confirmation",tooltip:"Preparing payment",status:"pending"},{key:"transfer",label:"Transferring funds",tooltip:"Submitting payment",status:"pending"},{key:"verify",label:"Verifying payment",tooltip:"Confirming payment",status:"pending"},{key:"confirm",label:"Payment confirmed",tooltip:"Payment completed",status:"pending"}],u=class extends He{constructor(){super(...arguments);this.open=!1;this.steps=Ge;this.amount=0;this.currency="";this.ledgerSymbol="";this.activeIndex=0;this.completed=!1;this.failed=!1;this.errorMessage=null;this.showSuccess=!1;this.showConfetti=!1;this.currentSteps=[];this.currentAmount=0;this.currentCurrency="";this.currentLedgerSymbol="";this.confirmLoadingStartedAt=null;this.progressionTimer=null;this.onMethodStart=e=>{let t=e?.detail?.name||"",i=e?.detail?.type||"";if(console.log("ICPay Progress: Method start event received:",e.detail),t==="sendFunds"||t==="sendFundsUsd"||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order"){if(this.open=!0,this.activeIndex=0,this.completed=!1,this.failed=!1,this.errorMessage=null,this.showSuccess=!1,this.showConfetti=!1,this.currentSteps=this.currentSteps.map(n=>({...n,status:"pending"})),i==="onramp"){let n=this.getStepIndexByKey("wallet");n>=0&&(this.currentSteps[n]={...this.currentSteps[n],label:"Transak Started",tooltip:"Awaiting Transak information"})}this.setLoadingByKey("wallet"),e?.detail?.amount!==void 0&&(this.currentAmount=e.detail.amount,this.amount=e.detail.amount,console.log("ICPay Progress: Amount updated to:",e.detail.amount)),e?.detail?.currency&&(this.currentCurrency=e.detail.currency,this.currency=e.detail.currency,console.log("ICPay Progress: Currency updated to:",e.detail.currency)),e?.detail?.ledgerSymbol&&(this.currentLedgerSymbol=e.detail.ledgerSymbol,this.ledgerSymbol=e.detail.ledgerSymbol,console.log("ICPay Progress: Current state after method start:",{activeIndex:this.activeIndex,currentAmount:this.currentAmount,currentCurrency:this.currentCurrency,currentLedgerSymbol:this.currentLedgerSymbol})),console.log("ICPay Progress: Waiting for wallet confirmation before starting progression"),this.requestUpdate()}!this.failed&&!this.completed&&(t==="sendFundsToLedger"?(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.setLoadingByKey("transfer")):t==="notifyLedgerTransaction"&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.setLoadingByKey("verify")))};this.onMethodSuccess=e=>{let t=e?.detail?.name||"";(t==="sendFunds"||t==="sendFundsUsd"||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order")&&this.dispatchEvent(new CustomEvent("icpay-progress-method-success",{detail:{methodName:t,step:this.activeIndex},bubbles:!0})),!this.failed&&!this.completed&&(t==="getLedgerBalance"?(this.completeByKey("wallet"),this.completeByKey("init"),this.setLoadingByKey("await")):t==="sendFundsToLedger"?(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.setLoadingByKey("verify")):t==="notifyLedgerTransaction"&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.completeByKey("transfer"),this.completeByKey("verify"),this.setLoadingByKey("confirm")))};this.onTransactionCreated=e=>{let t=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction created event received:",e.detail),!this.failed&&!this.completed&&(this.completeByKey("wallet"),this.completeByKey("init"),this.completeByKey("await"),this.setLoadingByKey("transfer")),this.dispatchEvent(new CustomEvent("icpay-progress-transaction-created",{detail:{transactionId:t,step:this.activeIndex},bubbles:!0}))};this.onTransactionUpdated=e=>{let t=e?.detail?.status||"pending",i=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction updated event received:",e.detail),!this.failed&&this.completed,this.dispatchEvent(new CustomEvent("icpay-progress-transaction-updated",{detail:{status:t,transactionId:i,step:this.activeIndex},bubbles:!0}))};this.onTransactionCompleted=e=>{let t=e?.detail?.transactionId||e?.detail?.id,i=e?.detail?.status||"completed";console.log("ICPay Progress: Transaction completed event received:",e.detail),console.log("ICPay Progress: Current state when transaction completed:",{activeIndex:this.activeIndex,completed:this.completed,failed:this.failed,showSuccess:this.showSuccess}),this.completeByKey("transfer"),this.completeByKey("await"),this.completeByKey("init"),this.completeByKey("verify"),this.completeByKey("confirm"),this.completed=!0,this.showSuccess=!0,this.showConfetti=!0,this.dispatchEvent(new CustomEvent("icpay-progress-completed",{detail:{transactionId:t,status:i,amount:this.currentAmount||this.amount,currency:this.currentCurrency||this.currency,ledgerSymbol:this.currentLedgerSymbol||this.ledgerSymbol},bubbles:!0})),setTimeout(()=>{this.showConfetti=!1},3e3)};this.onTransactionFailed=e=>{let t=e?.detail?.message||e?.detail?.error?.message||"Transaction failed",i=e?.detail?.error?.code||e?.detail?.code||"UNKNOWN_ERROR",n=e?.detail?.transactionId||e?.detail?.id;console.log("ICPay Progress: Transaction failed event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-failed",{detail:{errorMessage:t,errorCode:i,transactionId:n,step:this.activeIndex},bubbles:!0}))};this.onTransactionMismatched=e=>{let t=e?.detail?.requestedAmount,i=e?.detail?.paidAmount,n=e?.detail?.transactionId||e?.detail?.id;this.failed=!0;let r=t!=null?String(t):"unknown",l=i!=null?String(i):"unknown";this.errorMessage=`Amount mismatch. Requested ${r}, paid ${l}.`,this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",this.errorMessage),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-failed",{detail:{errorMessage:this.errorMessage,errorCode:"MISMATCHED_AMOUNT",transactionId:n,step:this.activeIndex,requestedAmount:t,paidAmount:i},bubbles:!0}))};this.onMethodError=e=>{let t=e?.detail?.name||"",i=e?.detail?.error?.message||e?.detail?.message||"An error occurred",n=e?.detail?.error?.code||e?.detail?.code||"METHOD_ERROR";console.log("ICPay Progress: Method error event received:",e.detail),(t?.startsWith("sendFunds")||t==="sendUsd"||t==="pay"||t==="unlock"||t==="tip"||t==="donate"||t==="order")&&(this.failed=!0,this.errorMessage=this.transformErrorMessage(i),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",i),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-error",{detail:{methodName:t,errorMessage:i,errorCode:n,step:this.activeIndex},bubbles:!0})))};this.onSDKError=e=>{let t=e?.detail?.message||"SDK error occurred",i=e?.detail?.code||"SDK_ERROR";console.log("ICPay Progress: SDK error event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-sdk-error",{detail:{errorMessage:t,errorCode:i,step:this.activeIndex},bubbles:!0}))};this.onWalletConnected=e=>{let t=e?.detail?.walletType||"unknown";console.log("ICPay Progress: Wallet connected event received:",e.detail),this.completeByKey("wallet"),this.setLoadingByKey("init"),this.dispatchEvent(new CustomEvent("icpay-progress-wallet-connected",{detail:{walletType:t,step:this.activeIndex},bubbles:!0}))};this.onWalletDisconnected=e=>{let t=e?.detail?.walletType||"unknown";console.log("ICPay Progress: Wallet disconnected event received:",e.detail),this.dispatchEvent(new CustomEvent("icpay-progress-wallet-disconnected",{detail:{walletType:t,step:this.activeIndex},bubbles:!0}))};this.onBalanceCheck=e=>{let t=e?.detail?.hasBalance||!1,i=e?.detail?.balance||0;console.log("ICPay Progress: Balance check event received:",e.detail),t||(this.failed=!0,this.errorMessage="Insufficient balance for transaction",this.updateStepStatus(this.activeIndex,"error","Insufficient balance for transaction"),this.stopAutomaticProgression(),this.dispatchEvent(new CustomEvent("icpay-progress-insufficient-balance",{detail:{balance:i,required:this.currentAmount||this.amount,step:this.activeIndex},bubbles:!0})))};this.onLedgerVerified=e=>{let t=e?.detail?.ledgerId||e?.detail?.canisterId,i=e?.detail?.symbol||"unknown";console.log("ICPay Progress: Ledger verified event received:",e.detail),i&&i!=="unknown"&&(this.currentLedgerSymbol=i,this.ledgerSymbol=i),this.dispatchEvent(new CustomEvent("icpay-progress-ledger-verified",{detail:{ledgerId:t,symbol:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetPayment=e=>{let t=e?.detail?.amount,i=e?.detail?.currency,n=e?.detail?.ledgerSymbol;if(console.log("ICPay Progress: Widget payment event received:",e.detail),t!==void 0&&(this.currentAmount=t,this.amount=t),i&&(this.currentCurrency=i,this.currency=i),n&&(this.currentLedgerSymbol=n,this.ledgerSymbol=n),!this.failed){for(let r=this.activeIndex;r<this.currentSteps.length;r++)this.updateStepStatus(r,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-payment",{detail:{amount:t,currency:i,ledgerSymbol:n,step:this.activeIndex},bubbles:!0}))};this.onWidgetError=e=>{let t=e?.detail?.message||"Widget error occurred",i=e?.detail?.code||"WIDGET_ERROR";console.log("ICPay Progress: Widget error event received:",e.detail),this.failed=!0,this.errorMessage=this.transformErrorMessage(t),this.showSuccess=!1,this.updateStepStatus(this.activeIndex,"error",t),this.stopAutomaticProgression(),this.open=!0,this.dispatchEvent(new CustomEvent("icpay-progress-widget-error",{detail:{errorMessage:t,errorCode:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetUnlock=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget unlock event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-unlock",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetTip=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget tip event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-tip",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetDonation=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget donation event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-donation",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))};this.onWidgetCoffee=e=>{let t=e?.detail?.amount,i=e?.detail?.currency;if(console.log("ICPay Progress: Widget coffee event received:",e.detail),!this.failed){for(let n=this.activeIndex;n<this.currentSteps.length;n++)this.updateStepStatus(n,"completed");this.activeIndex=this.currentSteps.length-1,this.completed=!0,this.showSuccess=!0,this.showConfetti=!0}this.dispatchEvent(new CustomEvent("icpay-progress-widget-coffee",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))}}connectedCallback(){super.connectedCallback();try{ee(this,this.theme)}catch{}this.currentSteps=[...this.steps],this.currentAmount=this.amount,this.currentCurrency=this.currency,this.currentLedgerSymbol=this.ledgerSymbol,this.attachSDKEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this.detachSDKEventListeners(),this.stopAutomaticProgression()}updated(e){if(e.has("theme"))try{ee(this,this.theme)}catch{}}attachSDKEventListeners(){window.addEventListener("icpay-sdk-method-start",this.onMethodStart),window.addEventListener("icpay-sdk-method-success",this.onMethodSuccess),window.addEventListener("icpay-sdk-method-error",this.onMethodError),window.addEventListener("icpay-sdk-transaction-created",this.onTransactionCreated),window.addEventListener("icpay-sdk-transaction-updated",this.onTransactionUpdated),window.addEventListener("icpay-sdk-transaction-completed",this.onTransactionCompleted),window.addEventListener("icpay-sdk-transaction-failed",this.onTransactionFailed),window.addEventListener("icpay-sdk-transaction-mismatched",this.onTransactionMismatched),window.addEventListener("icpay-sdk-error",this.onSDKError),window.addEventListener("icpay-sdk-wallet-connected",this.onWalletConnected),window.addEventListener("icpay-sdk-wallet-disconnected",this.onWalletDisconnected),window.addEventListener("icpay-sdk-balance-check",this.onBalanceCheck),window.addEventListener("icpay-sdk-ledger-verified",this.onLedgerVerified),window.addEventListener("icpay-pay",this.onWidgetPayment),window.addEventListener("icpay-error",this.onWidgetError),window.addEventListener("icpay-unlock",this.onWidgetUnlock),window.addEventListener("icpay-tip",this.onWidgetTip),window.addEventListener("icpay-donation",this.onWidgetDonation),window.addEventListener("icpay-coffee",this.onWidgetCoffee)}detachSDKEventListeners(){window.removeEventListener("icpay-sdk-method-start",this.onMethodStart),window.removeEventListener("icpay-sdk-method-success",this.onMethodSuccess),window.removeEventListener("icpay-sdk-method-error",this.onMethodError),window.removeEventListener("icpay-sdk-transaction-created",this.onTransactionCreated),window.removeEventListener("icpay-sdk-transaction-updated",this.onTransactionUpdated),window.removeEventListener("icpay-sdk-transaction-completed",this.onTransactionCompleted),window.removeEventListener("icpay-sdk-transaction-failed",this.onTransactionFailed),window.removeEventListener("icpay-sdk-transaction-mismatched",this.onTransactionMismatched),window.removeEventListener("icpay-sdk-error",this.onSDKError),window.removeEventListener("icpay-sdk-wallet-connected",this.onWalletConnected),window.removeEventListener("icpay-sdk-wallet-disconnected",this.onWalletDisconnected),window.removeEventListener("icpay-sdk-balance-check",this.onBalanceCheck),window.removeEventListener("icpay-sdk-ledger-verified",this.onLedgerVerified),window.removeEventListener("icpay-pay",this.onWidgetPayment),window.removeEventListener("icpay-error",this.onWidgetError),window.removeEventListener("icpay-unlock",this.onWidgetUnlock),window.removeEventListener("icpay-tip",this.onWidgetTip),window.removeEventListener("icpay-donation",this.onWidgetDonation),window.removeEventListener("icpay-coffee",this.onWidgetCoffee)}startAutomaticProgression(){this.progressionTimer&&clearInterval(this.progressionTimer),this.activeIndex=1,this.updateStepStatus(this.activeIndex,"loading"),console.log("ICPay Progress: Starting automatic progression from step:",this.activeIndex),this.progressionTimer=setInterval(()=>{if(this.failed||this.completed){this.stopAutomaticProgression();return}console.log("ICPay Progress: Processing step:",this.activeIndex),this.updateStepStatus(this.activeIndex,"completed"),this.activeIndex<this.currentSteps.length-1?(this.activeIndex++,this.updateStepStatus(this.activeIndex,"loading"),console.log("ICPay Progress: Auto-progressed to step:",this.activeIndex)):(this.stopAutomaticProgression(),console.log("ICPay Progress: All steps completed, waiting for transaction completion")),this.requestUpdate()},3e3)}stopAutomaticProgression(){this.progressionTimer&&(clearInterval(this.progressionTimer),this.progressionTimer=null)}updateStepStatus(e,t,i){if(e>=0&&e<this.currentSteps.length){let n=this.currentSteps[e],r=n.status;n.status=t,t==="completed"&&(n.timestamp=this.getCurrentTime()),t==="error"&&i&&(n.errorMessage=this.transformErrorMessage(i)),console.log(`ICPay Progress: Step ${e} (${n.label}) status changed from ${r} to ${t}`),this.requestUpdate()}}getCurrentTime(){return new Date().toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}progressPercent(){if(this.failed)return 0;if(this.showSuccess)return 100;let t=this.currentSteps.filter(i=>i.status==="completed").length/this.currentSteps.length*100;return Math.max(0,Math.min(100,t))}verticalPercent(){if(this.failed)return 0;if(this.showSuccess)return 100;let t=this.currentSteps.filter(i=>i.status==="completed").length/this.currentSteps.length*100;return Math.max(0,Math.min(100,t))}getStepIcon(e){switch(e.status){case"loading":return x`<div class="spinner"></div>`;case"completed":return"\u2713";case"error":return"\u2717";default:return"\u25CB"}}getStepIndexByKey(e){return this.currentSteps.findIndex(t=>t.key===e)}setLoadingByKey(e){let t=this.getStepIndexByKey(e);t>=0&&(this.activeIndex=t,this.updateStepStatus(t,"loading"),e==="confirm"&&(this.confirmLoadingStartedAt=Date.now()))}completeByKey(e){let t=this.getStepIndexByKey(e);t>=0&&(this.updateStepStatus(t,"completed"),this.activeIndex=t)}transformErrorMessage(e){let t=String(e||"").toLowerCase();return t.includes("user rejected")||t.includes("user cancelled")||t.includes("user canceled")||t.includes("signature rejected")?"User have rejected the transfer":e}renderConfetti(){if(!this.showConfetti)return"";let e=Array.from({length:50},(i,n)=>n),t=["#0066FF","#ef4444","#10b981","#f59e0b","#8b5cf6"];return x`
|
|
60
60
|
<div class="confetti">
|
|
61
|
-
${e.map(i=>
|
|
61
|
+
${e.map(i=>x`
|
|
62
62
|
<div
|
|
63
63
|
class="confetti-piece"
|
|
64
64
|
style="
|
|
@@ -71,7 +71,7 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,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 console.log("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}),
|
|
74
|
+
`}renderSuccessState(){let e=this.currentAmount||this.amount,t=this.currentLedgerSymbol||this.currentCurrency||this.currency;return console.log("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}),x`
|
|
75
75
|
<div class="success-container">
|
|
76
76
|
<div class="success-icon">
|
|
77
77
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -84,7 +84,7 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
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 x`
|
|
88
88
|
<div class="error-message">
|
|
89
89
|
<div class="error-icon">⚠</div>
|
|
90
90
|
<div class="error-content">
|
|
@@ -95,22 +95,23 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,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():x`
|
|
99
99
|
<div class="progress-container">
|
|
100
100
|
<div class="progress-header">
|
|
101
101
|
<h2 class="progress-title">Processing Payment</h2>
|
|
102
102
|
<p class="progress-subtitle">Please wait while we process your transaction</p>
|
|
103
|
+
${this.renderConfirmTip()}
|
|
103
104
|
</div>
|
|
104
105
|
<div class="progress-steps">
|
|
105
|
-
${this.currentSteps.map((e,t)=>
|
|
106
|
+
${this.currentSteps.map((e,t)=>x`
|
|
106
107
|
<div class="step ${t===this.activeIndex?"active":""} ${e.status==="completed"?"completed":""}">
|
|
107
108
|
<div class="step-icon">
|
|
108
|
-
${e.status==="loading"?
|
|
109
|
-
${e.status==="completed"?
|
|
109
|
+
${e.status==="loading"?x`<div class="loading-spinner"></div>`:""}
|
|
110
|
+
${e.status==="completed"?x`
|
|
110
111
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
111
112
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
112
113
|
</svg>
|
|
113
|
-
`:
|
|
114
|
+
`:x`
|
|
114
115
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
115
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" />
|
|
116
117
|
</svg>
|
|
@@ -124,7 +125,7 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
124
125
|
`)}
|
|
125
126
|
</div>
|
|
126
127
|
</div>
|
|
127
|
-
`}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
|
|
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:x`<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 x`
|
|
128
129
|
<div class="step-item ${e.status}">
|
|
129
130
|
<div class="step-icon">
|
|
130
131
|
${this.getStepIcon(e)}
|
|
@@ -133,30 +134,30 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
133
134
|
<div class="step-title">
|
|
134
135
|
${e.status==="completed"?"COMPLETED":e.label}
|
|
135
136
|
</div>
|
|
136
|
-
${e.status==="completed"?
|
|
137
|
+
${e.status==="completed"?x`
|
|
137
138
|
<div class="step-subtitle">
|
|
138
139
|
${e.timestamp} - ${e.tooltip}
|
|
139
140
|
</div>
|
|
140
|
-
`:e.status==="error"&&e.errorMessage?
|
|
141
|
+
`:e.status==="error"&&e.errorMessage?x`
|
|
141
142
|
<div class="step-error">${e.errorMessage}</div>
|
|
142
|
-
`:
|
|
143
|
+
`:x`
|
|
143
144
|
<div class="step-subtitle">${e.tooltip}</div>
|
|
144
145
|
`}
|
|
145
146
|
</div>
|
|
146
147
|
</div>
|
|
147
|
-
`}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
|
|
148
|
-
${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 x`
|
|
149
|
+
${this.open?x`
|
|
149
150
|
${this.renderConfetti()}
|
|
150
151
|
<div class="modal-overlay active">
|
|
151
152
|
<div class="modal-container">
|
|
152
|
-
${this.isWalletConnectLoading?
|
|
153
|
+
${this.isWalletConnectLoading?x`
|
|
153
154
|
<button class="close-button" @click=${()=>this.closeProgress()} aria-label="Close" title="Close">✕</button>
|
|
154
155
|
`:null}
|
|
155
156
|
${this.renderProgressContent()}
|
|
156
157
|
</div>
|
|
157
158
|
</div>
|
|
158
159
|
`:null}
|
|
159
|
-
`}};
|
|
160
|
+
`}};u.styles=je`
|
|
160
161
|
:host {
|
|
161
162
|
display: block;
|
|
162
163
|
font-family: var(--icpay-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
@@ -342,15 +343,15 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
342
343
|
opacity: 0;
|
|
343
344
|
}
|
|
344
345
|
}
|
|
345
|
-
`,s([
|
|
346
|
-
${this.showLabel?
|
|
346
|
+
`,s([te({type:Boolean})],u.prototype,"open",2),s([te({type:Array})],u.prototype,"steps",2),s([te({type:Number})],u.prototype,"amount",2),s([te({type:String})],u.prototype,"currency",2),s([te({type:String})],u.prototype,"ledgerSymbol",2),s([K()],u.prototype,"activeIndex",2),s([K()],u.prototype,"completed",2),s([K()],u.prototype,"failed",2),s([K()],u.prototype,"errorMessage",2),s([K()],u.prototype,"showSuccess",2),s([K()],u.prototype,"showConfetti",2),s([K()],u.prototype,"currentSteps",2),s([K()],u.prototype,"currentAmount",2),s([K()],u.prototype,"currentCurrency",2),s([K()],u.prototype,"currentLedgerSymbol",2),s([K()],u.prototype,"confirmLoadingStartedAt",2),s([te({type:Object})],u.prototype,"theme",2),u=s([Ve("icpay-progress-bar")],u);import{LitElement as Ye,html as X,css as Ze}from"lit";import{customElement as Je,property as q}from"lit/decorators.js";import{query as Pe}from"lit/decorators.js";var R=class extends Ye{constructor(){super(...arguments);this.options=[];this.value=null;this.defaultSymbol="ICP";this.mode="buttons";this.open=!1;this.showLabel=!0;this.menuPos={left:0,top:0,width:0}}connectedCallback(){super.connectedCallback();try{ee(this,this.theme)}catch{}}updated(e){if(e.has("theme"))try{ee(this,this.theme)}catch{}}firstUpdated(){let e=i=>{if(!this.open)return;i.composedPath().includes(this)||this.closeDropdown()},t=i=>{i.key==="Escape"&&this.open&&this.closeDropdown()};this._onDocClick=e,this._onKey=t,window.addEventListener("click",e),window.addEventListener("keydown",t)}disconnectedCallback(){super.disconnectedCallback();let e=this._onDocClick,t=this._onKey;e&&window.removeEventListener("click",e),t&&window.removeEventListener("keydown",t)}get effectiveSymbol(){if(this.value)return this.value;let e=this.options?.[0]?.symbol;return this.defaultSymbol||e||"ICP"}getOptionBySymbol(e){return(this.options||[]).find(t=>t.symbol===e)}getLogoUrl(e){return`https://widget.icpay.org/ledger/${String(e||"").toLowerCase()}.svg`}onSelect(e){this.value=e,this.requestUpdate("value"),this.open=!1,this.dispatchEvent(new CustomEvent("icpay-token-change",{detail:{symbol:e},bubbles:!0,composed:!0}))}toggleDropdown(){this.open=!this.open}closeDropdown(){this.open=!1}render(){let e=this.options||[];if(this.mode==="none"||e.length<=1){let i=e.length===1?e[0].symbol:this.effectiveSymbol;return this.value!==i&&queueMicrotask(()=>this.onSelect(i)),X``}if(this.mode==="dropdown"){let i=this.effectiveSymbol,n=this.getOptionBySymbol(i)||{symbol:i,label:i};return X`
|
|
347
|
+
${this.showLabel?X`<label class="icpay-dropdown-label">Payment method</label>`:null}
|
|
347
348
|
<div class="dropdown-wrapper">
|
|
348
349
|
<div class="dropdown-trigger ${this.open?"open":""}" @click=${()=>this.toggleDropdown()}>
|
|
349
350
|
<div class="selected-option">
|
|
350
|
-
<img class="dropdown-selected-icon" src="${this.getLogoUrl(
|
|
351
|
+
<img class="dropdown-selected-icon" src="${this.getLogoUrl(n.symbol)}" alt="${n.symbol}" />
|
|
351
352
|
<div class="crypto-info">
|
|
352
|
-
<div class="dropdown-crypto-name">${
|
|
353
|
-
<div class="dropdown-crypto-symbol">${
|
|
353
|
+
<div class="dropdown-crypto-name">${n.label}</div>
|
|
354
|
+
<div class="dropdown-crypto-symbol">${n.symbol}</div>
|
|
354
355
|
</div>
|
|
355
356
|
</div>
|
|
356
357
|
<svg class="dropdown-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
@@ -359,7 +360,7 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
359
360
|
</div>
|
|
360
361
|
|
|
361
362
|
<div class="dropdown-menu ${this.open?"open":""}">
|
|
362
|
-
${e.map(r=>
|
|
363
|
+
${e.map(r=>X`
|
|
363
364
|
<div class="dropdown-option ${this.value===r.symbol||i===r.symbol?"selected":""}" @click=${()=>this.onSelect(r.symbol)}>
|
|
364
365
|
<img class="dropdown-selected-icon" src="${this.getLogoUrl(r.symbol)}" alt="${r.symbol}" />
|
|
365
366
|
<div class="crypto-info">
|
|
@@ -371,11 +372,11 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
371
372
|
</div>
|
|
372
373
|
</div>
|
|
373
374
|
<div class="dropdown-backdrop ${this.open?"open":""}" @click=${()=>this.closeDropdown()}></div>
|
|
374
|
-
`}let t=this.effectiveSymbol;return
|
|
375
|
+
`}let t=this.effectiveSymbol;return X`
|
|
375
376
|
<div class="icpay-token-selector" style="width:100%;box-sizing:border-box;">
|
|
376
|
-
${this.showLabel?
|
|
377
|
+
${this.showLabel?X`<label class="label">Payment method</label>`:null}
|
|
377
378
|
<div class="crypto-grid">
|
|
378
|
-
${e.map(i=>
|
|
379
|
+
${e.map(i=>X`
|
|
379
380
|
<div class="crypto-option ${t===i.symbol?"selected":""}" @click=${()=>this.onSelect(i.symbol)}>
|
|
380
381
|
<img class="crypto-icon" src="${this.getLogoUrl(i.symbol)}" alt="${i.symbol}" />
|
|
381
382
|
<div class="crypto-name">${i.label}</div>
|
|
@@ -384,7 +385,7 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
384
385
|
`)}
|
|
385
386
|
</div>
|
|
386
387
|
</div>
|
|
387
|
-
`}};
|
|
388
|
+
`}};R.styles=Ze`
|
|
388
389
|
:host { display: block; width: 100%; box-sizing: border-box; }
|
|
389
390
|
|
|
390
391
|
/* Common */
|
|
@@ -441,21 +442,21 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
441
442
|
.dropdown-option { padding: 10px 12px; }
|
|
442
443
|
.dropdown-selected-icon { width: 28px; height: 28px; }
|
|
443
444
|
}
|
|
444
|
-
`,s([
|
|
445
|
+
`,s([q({type:Array})],R.prototype,"options",2),s([q({type:String})],R.prototype,"value",2),s([q({type:String})],R.prototype,"defaultSymbol",2),s([q({type:String})],R.prototype,"mode",2),s([q({type:Object})],R.prototype,"theme",2),s([q({type:Boolean})],R.prototype,"open",2),s([q({type:Boolean})],R.prototype,"showLabel",2),s([Pe(".dropdown-trigger")],R.prototype,"triggerEl",2),s([Pe(".dropdown-wrapper")],R.prototype,"wrapperEl",2),R=s([Je("icpay-token-selector")],R);import{html as ie}from"lit";var Xe="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuZGJhM2RhM2I1LCAyMDIzLzEyLzE1LTEwOjQyOjM3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjUuNyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjUtMDktMDRUMTc6MTk6NDErMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI1LTA5LTA0VDE3OjIzOjU5KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI1LTA5LTA0VDE3OjIzOjU5KzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1YTMxZThhMi05MzVkLTRkY2YtOTk0Mi05NjgxZWE5MTQ0MDgiIHhtcE1NOkRvY3VtZW50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";function $(o){if(!o.visible)return null;let{wallets:a,onSelect:e,onClose:t,isConnecting:i}=o,n=a.map(r=>({...r,icon:r.icon??(r.id==="nfid"?Xe:null)}));return ie`
|
|
445
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">
|
|
446
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">
|
|
447
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>
|
|
448
449
|
<h3 style="color:#fff;margin:0 48px 16px 0;font-size:18px;font-weight:600">Choose Wallet</h3>
|
|
449
450
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
450
|
-
${
|
|
451
|
+
${n.map(r=>ie`
|
|
451
452
|
<button
|
|
452
453
|
@click=${()=>e(r.id)}
|
|
453
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">
|
|
454
|
-
${r.icon?
|
|
455
|
+
${r.icon?ie`
|
|
455
456
|
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center">
|
|
456
457
|
<img src="${r.icon}" alt="${r.label} logo" style="width:40px;height:40px;object-fit:cover;border-radius:12px;border:1px solid rgba(156,163,175,0.3)" />
|
|
457
458
|
</div>
|
|
458
|
-
`:
|
|
459
|
+
`:ie`
|
|
459
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;border:1px solid rgba(156,163,175,0.3)">
|
|
460
461
|
${r.id?r.id==="nfid"?"NFID":r.id.charAt(0).toUpperCase():"?"}
|
|
461
462
|
</div>
|
|
@@ -464,14 +465,55 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
464
465
|
</button>
|
|
465
466
|
`)}
|
|
466
467
|
</div>
|
|
468
|
+
${o.showCreditCard!==!1?ie`
|
|
469
|
+
<div style="margin:12px 0;height:1px;background:rgba(255,255,255,0.08)"></div>
|
|
470
|
+
<div style="display:flex;flex-direction:column;gap:6px">
|
|
471
|
+
<button
|
|
472
|
+
@click=${()=>{o.onCreditCard&&o.onCreditCard()}}
|
|
473
|
+
style="width:100%;padding:12px 16px;background:linear-gradient(135deg,#3b82f6 0%,#10b981 100%);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#fff;text-align:center;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;gap:10px">
|
|
474
|
+
<span>💳</span>
|
|
475
|
+
<span style="font-weight:600">${o.creditCardLabel||"Pay with credit card"}</span>
|
|
476
|
+
</button>
|
|
477
|
+
${o.creditCardTooltip?ie`<div style="font-size:12px;color:#f5d78a;text-align:center">${o.creditCardTooltip}</div>`:null}
|
|
478
|
+
</div>
|
|
479
|
+
`:null}
|
|
467
480
|
</div>
|
|
468
481
|
</div>
|
|
469
|
-
`}
|
|
482
|
+
`}import{html as we}from"lit";function T(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)}`),we`
|
|
483
|
+
<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">
|
|
484
|
+
<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)">
|
|
485
|
+
<button @click=${o.onClose} aria-label="Close" title="Close"
|
|
486
|
+
style="position:absolute;top:10px;right:10px;background:transparent;border:none;color:#9ca3af;cursor:pointer;font-size:20px">✕</button>
|
|
487
|
+
${o.sessionId?we`
|
|
488
|
+
<iframe
|
|
489
|
+
id="transak-iframe"
|
|
490
|
+
style="border:none;border-radius:12px;background:#111"
|
|
491
|
+
width="${String(e)}"
|
|
492
|
+
height="${String(t)}"
|
|
493
|
+
src="${i}"
|
|
494
|
+
allow="camera;microphone;payment"
|
|
495
|
+
></iframe>
|
|
496
|
+
`:we`
|
|
497
|
+
<div style="width:${String(e)}px;max-width:90vw;padding:12px">
|
|
498
|
+
<div style="background:#1a1f2e;border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:24px;color:#e5e7eb;text-align:center">
|
|
499
|
+
<div style="font-size:18px;font-weight:600;margin-bottom:8px">Service unavailable</div>
|
|
500
|
+
<div style="font-size:14px;opacity:0.85;margin-bottom:16px">${o.errorMessage||"The service is currently unavailable, please try again later."}</div>
|
|
501
|
+
<button
|
|
502
|
+
@click=${()=>{o.onBack?o.onBack():o.onClose()}}
|
|
503
|
+
style="padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,0.15);background:linear-gradient(135deg,#3b82f6 0%,#10b981 100%);color:#fff;cursor:pointer;font-weight:600">
|
|
504
|
+
Go back to wallet selection
|
|
505
|
+
</button>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
`}
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
`}var xe=typeof window<"u",se=null;function V(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var b=class extends qe{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;se||(se=(await import("@windoge98/plug-n-play")).PNP);let i=new se(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(),xe&&(V(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(!(!xe||!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(xe&&!(this.processing||this.unlocked)){V(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){V(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{se||(se=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new se(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(V(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="pay",this.showWalletModal=!0;return}catch(r){V(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}V(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);V(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"});V(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){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}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?ne`
|
|
470
512
|
<div class="icpay-card icpay-section">
|
|
471
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
513
|
+
${this.config?.progressBar?.enabled!==!1?ne`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
472
514
|
<div class="image-container">
|
|
473
515
|
<div class="locked-image ${this.unlocked?"unlocked":""}" style="background-image:url('${this.config.imageUrl||""}')"></div>
|
|
474
|
-
${this.unlocked?null:
|
|
516
|
+
${this.unlocked?null:ne`<div class="lock-overlay">🔒</div>`}
|
|
475
517
|
</div>
|
|
476
518
|
|
|
477
519
|
<div class="pricing">
|
|
@@ -493,19 +535,21 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
493
535
|
${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)}
|
|
494
536
|
</button>
|
|
495
537
|
|
|
496
|
-
${this.errorMessage?
|
|
538
|
+
${this.errorMessage?ne`
|
|
497
539
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
498
540
|
${this.errorMessage}
|
|
499
|
-
${this.errorAction?
|
|
541
|
+
${this.errorAction?ne`
|
|
500
542
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
501
543
|
${this.errorAction}
|
|
502
544
|
</button>
|
|
503
545
|
`:""}
|
|
504
546
|
</div>
|
|
505
547
|
`:""}
|
|
506
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
548
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return $({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})()})})()}
|
|
549
|
+
|
|
550
|
+
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
507
551
|
</div>
|
|
508
|
-
`:
|
|
552
|
+
`:ne`<div class="icpay-card icpay-section">Loading...</div>`}};b.styles=[P,Qe`
|
|
509
553
|
.image-container {
|
|
510
554
|
position: relative;
|
|
511
555
|
border-radius: 16px;
|
|
@@ -556,17 +600,17 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
556
600
|
border-color: rgba(239, 68, 68, 0.3);
|
|
557
601
|
color: #ef4444;
|
|
558
602
|
}
|
|
559
|
-
`],s([
|
|
603
|
+
`],s([et({type:Object})],b.prototype,"config",2),s([N()],b.prototype,"selectedSymbol",2),s([N()],b.prototype,"unlocked",2),s([N()],b.prototype,"succeeded",2),s([N()],b.prototype,"processing",2),s([N()],b.prototype,"availableLedgers",2),s([N()],b.prototype,"errorMessage",2),s([N()],b.prototype,"errorSeverity",2),s([N()],b.prototype,"errorAction",2),s([N()],b.prototype,"walletConnected",2),s([N()],b.prototype,"pendingAction",2),s([N()],b.prototype,"showWalletModal",2),s([N()],b.prototype,"showOnrampModal",2),s([N()],b.prototype,"onrampSessionId",2),s([N()],b.prototype,"onrampPaymentIntentId",2),s([N()],b.prototype,"onrampErrorMessage",2),b=s([_e("icpay-premium-content")],b);import{LitElement as tt,html as Q,css as it}from"lit";import{customElement as nt,property as st,state as S}from"lit/decorators.js";var Ee=typeof window<"u",oe=null;function G(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var m=class extends tt{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;oe||(oe=(await import("@windoge98/plug-n-play")).PNP);let i=new oe(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&&(G(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&&(G(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){G(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{oe||(oe=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new oe(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="tip",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,"Tip payment details",{amount:this.selectedAmount,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.selectedAmount,i,{context:"tip-jar"});G(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){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}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 Q`<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 Q`
|
|
560
604
|
<div class="icpay-card icpay-section" style="text-align:center;">
|
|
561
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
605
|
+
${this.config?.progressBar?.enabled!==!1?Q`<icpay-progress-bar></icpay-progress-bar>`:null}
|
|
562
606
|
<div class="jar"><div class="fill" style="height:${this.fillPercentage}%"></div></div>
|
|
563
607
|
<div class="label">Total Tips: $${this.total}</div>
|
|
564
608
|
|
|
565
609
|
<div class="amounts">
|
|
566
|
-
${this.amounts.map(c=>
|
|
610
|
+
${this.amounts.map(c=>Q`<div class="chip ${this.selectedAmount===c?"selected":""}" @click=${()=>this.selectAmount(c)}>$${c}</div>`)}
|
|
567
611
|
</div>
|
|
568
612
|
|
|
569
|
-
${r?
|
|
613
|
+
${r?Q`
|
|
570
614
|
<div>
|
|
571
615
|
<icpay-token-selector
|
|
572
616
|
.options=${this.cryptoOptions}
|
|
@@ -584,19 +628,21 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
584
628
|
${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}`}
|
|
585
629
|
</button>
|
|
586
630
|
|
|
587
|
-
${this.errorMessage?
|
|
631
|
+
${this.errorMessage?Q`
|
|
588
632
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
589
633
|
${this.errorMessage}
|
|
590
|
-
${this.errorAction?
|
|
634
|
+
${this.errorAction?Q`
|
|
591
635
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
592
636
|
${this.errorAction}
|
|
593
637
|
</button>
|
|
594
638
|
`:""}
|
|
595
639
|
</div>
|
|
596
640
|
`:""}
|
|
597
|
-
${(()=>{let
|
|
641
|
+
${(()=>{let d=(this.pnp?.getEnabledWallets?.()||[]).map(p=>({id:this.getWalletId(p),label:this.getWalletLabel(p),icon:this.getWalletIcon(p)}));return $({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})()})})()}
|
|
642
|
+
|
|
643
|
+
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
598
644
|
</div>
|
|
599
|
-
`}};
|
|
645
|
+
`}};m.styles=[P,it`
|
|
600
646
|
.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; }
|
|
601
647
|
.fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%); transition: height 0.8s ease; height: 0%; }
|
|
602
648
|
.amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
|
|
@@ -628,9 +674,9 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
628
674
|
border-color: rgba(239, 68, 68, 0.3);
|
|
629
675
|
color: #ef4444;
|
|
630
676
|
}
|
|
631
|
-
`],s([
|
|
677
|
+
`],s([st({type:Object})],m.prototype,"config",2),s([S()],m.prototype,"selectedAmount",2),s([S()],m.prototype,"selectedSymbol",2),s([S()],m.prototype,"total",2),s([S()],m.prototype,"processing",2),s([S()],m.prototype,"succeeded",2),s([S()],m.prototype,"availableLedgers",2),s([S()],m.prototype,"errorMessage",2),s([S()],m.prototype,"errorSeverity",2),s([S()],m.prototype,"errorAction",2),s([S()],m.prototype,"walletConnected",2),s([S()],m.prototype,"pendingAction",2),s([S()],m.prototype,"showWalletModal",2),s([S()],m.prototype,"showOnrampModal",2),s([S()],m.prototype,"onrampSessionId",2),s([S()],m.prototype,"onrampPaymentIntentId",2),s([S()],m.prototype,"onrampErrorMessage",2),m=s([nt("icpay-tip-jar")],m);import{LitElement as rt,html as fe,css as ot}from"lit";import{customElement as at,property as ve,state as U}from"lit/decorators.js";var Se=typeof window<"u",ae=null;function Y(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var g=class extends rt{constructor(){super(...arguments);this.title="Article Title";this.preview="";this.lockedContent="";this.selectedSymbol="ICP";this.unlocked=!1;this.succeeded=!1;this.processing=!1;this.availableLedgers=[];this.errorMessage=null;this.errorSeverity=null;this.errorAction=null;this.walletConnected=!1;this.pendingAction=null;this.showWalletModal=!1;this.pnp=null;this.showOnrampModal=!1;this.onrampSessionId=null;this.onrampPaymentIntentId=null;this.onrampErrorMessage=null;this.transakMessageHandlerBound=null;this.onrampPollTimer=null;this.onrampPollingActive=!1;this.onrampNotifyController=null}get obfuscatedLockedContent(){try{return(this.lockedContent||"").replace(/[^\s]/g,"x")}catch{return"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}}async tryAutoConnectPNP(){try{if(!this.config||this.config?.useOwnWallet)return;let e=localStorage.getItem("icpay:pnp");if(!e)return;let t=JSON.parse(e);if(!t?.provider||!t?.principal)return;ae||(ae=(await import("@windoge98/plug-n-play")).PNP);let i=new ae(this.config?.plugNPlay||{});this.walletConnected=!1,this.config={...this.config,connectedWallet:{owner:t.principal,principal:t.principal,connected:!1}}}catch{}}attachTransakMessageListener(){if(!this.transakMessageHandlerBound){this.transakMessageHandlerBound=e=>this.onTransakMessage(e);try{window.addEventListener("message",this.transakMessageHandlerBound)}catch{}}}detachTransakMessageListener(){if(this.transakMessageHandlerBound){try{window.removeEventListener("message",this.transakMessageHandlerBound)}catch{}this.transakMessageHandlerBound=null}}onTransakMessage(e){let t=e?.data,i=t?.event_id||t?.eventId||t?.id;if(!(!i||typeof i!="string")&&i==="TRANSAK_ORDER_SUCCESSFUL"){if(this.detachTransakMessageListener(),this.onrampPollingActive)return;this.showOnrampModal=!1;let n=t?.data?.id||t?.id||t?.webhookData?.id||null;this.startOnrampPolling(n||void 0)}}startOnramp(){try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"sendFundsUsd",type:"onramp"}}))}catch{}this.showWalletModal=!1,setTimeout(()=>this.createOnrampIntent(),0)}async createOnrampIntent(){try{let e=h(this.config),i=this.cryptoOptions.find(d=>d.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol),n=await e.startOnrampUsd(this.config.priceUsd,i,{context:"article:onramp"}),r=n?.metadata?.onramp?.sessionId||n?.metadata?.onramp?.session_id||null,l=n?.metadata?.paymentIntentId||n?.paymentIntentId||null,c=n?.metadata?.onramp?.errorMessage||null;this.onrampPaymentIntentId=l,r?(this.onrampSessionId=r,this.onrampErrorMessage=null,this.showOnrampModal=!0,this.attachTransakMessageListener()):(this.onrampSessionId=null,this.onrampErrorMessage=c||"Failed to obtain onramp sessionId",this.showOnrampModal=!0)}catch(e){this.onrampSessionId=null,this.onrampErrorMessage=e?.message||"Failed to obtain onramp sessionId",this.showOnrampModal=!0}}startOnrampPolling(e){if(this.onrampPollTimer){try{clearInterval(this.onrampPollTimer)}catch{}this.onrampPollTimer=null}if(this.onrampNotifyController){try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null}let t=this.onrampPaymentIntentId;if(!t)return;let i=h(this.config),n=()=>{if(this.detachTransakMessageListener(),this.onrampNotifyController)try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null,this.onrampPollingActive=!1};try{window.addEventListener("icpay-sdk-transaction-completed",(()=>n()),{once:!0})}catch{}this.onrampPollingActive=!0,this.onrampNotifyController=i.notifyIntentUntilComplete(t,5e3,e),this.onrampPollTimer=1}get cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Se&&(Y(this.config?.debug||!1,"Article paywall connected",{config:this.config}),this.config&&(typeof this.config.title=="string"&&(this.title=this.config.title),typeof this.config.preview=="string"&&(this.preview=this.config.preview),typeof this.config.lockedContent=="string"&&(this.lockedContent=this.config.lockedContent)),this.tryAutoConnectPNP(),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers())}updated(e){if(e.has("config")&&this.config&&(typeof this.config.title=="string"&&(this.title=this.config.title),typeof this.config.preview=="string"&&(this.preview=this.config.preview),typeof this.config.lockedContent=="string"&&(this.lockedContent=this.config.lockedContent)),e.has("config")&&this.pendingAction&&this.config?.actorProvider){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="unlock"&&this.unlock()},0)}}async loadVerifiedLedgers(){if(!(!Se||!this.config?.publishableKey))try{let t=await h(this.config).client.getVerifiedLedgers();this.availableLedgers=t.map(i=>({symbol:i.symbol,label:i.name,canisterId:i.canisterId})),this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||this.availableLedgers[0]?.symbol||"ICP")}catch(e){console.warn("Failed to load verified ledgers:",e),this.availableLedgers=[{symbol:"ICP",label:"ICP",canisterId:"ryjl3-tyaaa-aaaaa-aaaba-cai"}],this.selectedSymbol||(this.selectedSymbol="ICP")}}selectSymbol(e){this.selectedSymbol=e}async unlock(){if(Se&&!(this.processing||this.unlocked)){Y(this.config?.debug||!1,"Article paywall unlock started",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,useOwnWallet:this.config.useOwnWallet}),this.errorMessage=null,this.errorSeverity=null,this.errorAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"unlock",type:"sendUsd",amount:this.config.priceUsd,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="unlock",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0}));return}}else if(!this.walletConnected){Y(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{ae||(ae=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new ae(this.config?.plugNPlay||{});let r=this.pnp.getEnabledWallets();if(Y(this.config?.debug||!1,"Available wallets",r),!r?.length)throw new Error("No wallets available");this.pendingAction="unlock",this.showWalletModal=!0;return}catch(r){Y(this.config?.debug||!1,"Wallet connection error:",r),this.errorMessage=r instanceof Error?r.message:"Wallet connection failed",this.errorSeverity="error";return}}Y(this.config?.debug||!1,"Creating SDK for payment");let e=h(this.config),i=this.cryptoOptions.find(r=>r.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);Y(this.config?.debug||!1,"Article payment details",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.config.priceUsd,i,{context:"article"});Y(this.config?.debug||!1,"Article payment completed",{resp:n}),this.unlocked=!0,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:n.transactionId,status:n.status}),this.dispatchEvent(new CustomEvent("icpay-unlock",{detail:{amount:this.config.priceUsd,tx:n},bubbles:!0}))}catch(e){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}getWalletId(e){return e&&(e.id||e.provider||e.key)||""}getWalletLabel(e){return e&&(e.label||e.name||e.title||e.id)||"Wallet"}getWalletIcon(e){return e&&(e.icon||e.logo||e.image)||null}async connectWithWallet(e){if(this.pnp)try{if(!e)throw new Error("No wallet ID provided");let t=await this.pnp.connect(e);if(!!!(t&&(t.connected===!0||t.principal||t.owner||this.pnp?.account)))throw new Error("Wallet connection was rejected");this.walletConnected=!0;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:e}}))}catch{}this.config={...this.config,connectedWallet:t,actorProvider:(r,l)=>this.pnp.getActor({canisterId:r,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let n=this.pendingAction;this.pendingAction=null,n==="unlock"&&setTimeout(()=>this.unlock(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}render(){return this.config?fe`
|
|
632
678
|
<div class="icpay-card icpay-section">
|
|
633
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
679
|
+
${this.config?.progressBar?.enabled!==!1?fe`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
634
680
|
<div class="container">
|
|
635
681
|
<div class="title">${this.title}</div>
|
|
636
682
|
<div class="preview">${this.preview}</div>
|
|
@@ -653,19 +699,21 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
653
699
|
${this.unlocked?"Unlocked":this.processing?"Processing\u2026":(this.config?.buttonLabel||"Pay ${amount} with {symbol}").replace("{amount}",`${Number(this.config?.priceUsd??0).toFixed(2)}`).replace("{symbol}",this.selectedSymbol)}
|
|
654
700
|
</button>
|
|
655
701
|
|
|
656
|
-
${this.errorMessage?
|
|
702
|
+
${this.errorMessage?fe`
|
|
657
703
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
658
704
|
${this.errorMessage}
|
|
659
|
-
${this.errorAction?
|
|
705
|
+
${this.errorAction?fe`
|
|
660
706
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
661
707
|
${this.errorAction}
|
|
662
708
|
</button>
|
|
663
709
|
`:""}
|
|
664
710
|
</div>
|
|
665
711
|
`:""}
|
|
666
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
712
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return $({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})()})})()}
|
|
713
|
+
|
|
714
|
+
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
667
715
|
</div>
|
|
668
|
-
`:
|
|
716
|
+
`:fe`<div class="icpay-card icpay-section">Loading...</div>`}};g.styles=[P,ot`
|
|
669
717
|
.container { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
|
|
670
718
|
.title { color: var(--icpay-text); font-weight: 700; margin-bottom: 8px; }
|
|
671
719
|
.preview { color: var(--icpay-muted); margin-bottom: 12px; line-height: 1.6; }
|
|
@@ -697,11 +745,11 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
697
745
|
border-color: rgba(239, 68, 68, 0.3);
|
|
698
746
|
color: #ef4444;
|
|
699
747
|
}
|
|
700
|
-
`],s([
|
|
748
|
+
`],s([ve({type:Object})],g.prototype,"config",2),s([ve({type:String})],g.prototype,"title",2),s([ve({type:String})],g.prototype,"preview",2),s([ve({type:String})],g.prototype,"lockedContent",2),s([U()],g.prototype,"selectedSymbol",2),s([U()],g.prototype,"unlocked",2),s([U()],g.prototype,"succeeded",2),s([U()],g.prototype,"processing",2),s([U()],g.prototype,"availableLedgers",2),s([U()],g.prototype,"errorMessage",2),s([U()],g.prototype,"errorSeverity",2),s([U()],g.prototype,"errorAction",2),s([U()],g.prototype,"walletConnected",2),s([U()],g.prototype,"pendingAction",2),s([U()],g.prototype,"showWalletModal",2),s([U()],g.prototype,"showOnrampModal",2),s([U()],g.prototype,"onrampSessionId",2),s([U()],g.prototype,"onrampPaymentIntentId",2),s([U()],g.prototype,"onrampErrorMessage",2),g=s([at("icpay-article-paywall")],g);import{LitElement as lt,html as le,css as ct}from"lit";import{customElement as dt,property as pt,state as B}from"lit/decorators.js";var ke=typeof window<"u",Me=null;function Z(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var v=class extends lt{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(),ke&&(Z(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(!(!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.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(ke&&!this.processing){Z(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){Z(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{Me||(Me=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Me(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="order",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,"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});Z(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){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}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?le`
|
|
701
749
|
<div class="icpay-card icpay-section">
|
|
702
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
750
|
+
${this.config?.progressBar?.enabled!==!1?le`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
703
751
|
<div class="menu">
|
|
704
|
-
${this.config.items.map((e,t)=>
|
|
752
|
+
${this.config.items.map((e,t)=>le`
|
|
705
753
|
<div class="item ${this.selectedIndex===t?"selected":""}" @click=${()=>this.selectItem(t)}>
|
|
706
754
|
<span>${e.name}</span>
|
|
707
755
|
<span>$${Number(e?.priceUsd??0).toFixed(2)}</span>
|
|
@@ -725,19 +773,21 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
725
773
|
${this.processing?"Processing\u2026":`Order ${this.selectedItem.name}`}
|
|
726
774
|
</button>
|
|
727
775
|
|
|
728
|
-
${this.errorMessage?
|
|
776
|
+
${this.errorMessage?le`
|
|
729
777
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
730
778
|
${this.errorMessage}
|
|
731
|
-
${this.errorAction?
|
|
779
|
+
${this.errorAction?le`
|
|
732
780
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
733
781
|
${this.errorAction}
|
|
734
782
|
</button>
|
|
735
783
|
`:""}
|
|
736
784
|
</div>
|
|
737
785
|
`:""}
|
|
738
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
786
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return $({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})()})})()}
|
|
787
|
+
|
|
788
|
+
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
739
789
|
</div>
|
|
740
|
-
`:
|
|
790
|
+
`:le`<div class="icpay-card icpay-section">Loading...</div>`}};v.styles=[P,ct`
|
|
741
791
|
.menu { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
742
792
|
.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; }
|
|
743
793
|
.item.selected { background: var(--icpay-primary); color: #111827; border-color: var(--icpay-primary); }
|
|
@@ -768,14 +818,14 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
768
818
|
border-color: rgba(239, 68, 68, 0.3);
|
|
769
819
|
color: #ef4444;
|
|
770
820
|
}
|
|
771
|
-
`],s([
|
|
821
|
+
`],s([pt({type:Object})],v.prototype,"config",2),s([B()],v.prototype,"selectedIndex",2),s([B()],v.prototype,"selectedSymbol",2),s([B()],v.prototype,"processing",2),s([B()],v.prototype,"availableLedgers",2),s([B()],v.prototype,"errorMessage",2),s([B()],v.prototype,"errorSeverity",2),s([B()],v.prototype,"errorAction",2),s([B()],v.prototype,"walletConnected",2),s([B()],v.prototype,"pendingAction",2),s([B()],v.prototype,"showWalletModal",2),s([B()],v.prototype,"showOnrampModal",2),s([B()],v.prototype,"onrampSessionId",2),s([B()],v.prototype,"onrampPaymentIntentId",2),s([B()],v.prototype,"onrampErrorMessage",2),v=s([dt("icpay-coffee-shop")],v);import{LitElement as ht,html as ce,css as gt}from"lit";import{customElement as ut,property as mt,state as k}from"lit/decorators.js";var Ie=typeof window<"u",de=null;function J(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var f=class extends ht{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;de||(de=(await import("@windoge98/plug-n-play")).PNP);let i=new de(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(),Ie&&(J(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(!(!Ie||!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(Ie&&!this.processing){J(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){J(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{de||(de=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new de(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="donate",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,"Donation payment details",{amount:this.selectedAmount,selectedSymbol:this.selectedSymbol,canisterId:i});let n=await e.sendUsd(this.selectedAmount,i,{context:"donation"});J(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){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}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?ce`
|
|
772
822
|
<div class="icpay-card icpay-section" style="text-align:center;">
|
|
773
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
823
|
+
${this.config?.progressBar?.enabled!==!1?ce`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
774
824
|
<div class="thermo"><div class="fill" style="height:${this.fillPercentage}%"></div></div>
|
|
775
825
|
<div class="total">$${Number(this.raised).toFixed(0)} / $${Number(this.config?.goalUsd??0).toFixed(2)}</div>
|
|
776
826
|
|
|
777
827
|
<div class="amounts">
|
|
778
|
-
${this.amounts.map(e=>
|
|
828
|
+
${this.amounts.map(e=>ce`<div class="chip ${this.selectedAmount===e?"selected":""}" @click=${()=>this.selectAmount(e)}>$${e}</div>`)}
|
|
779
829
|
</div>
|
|
780
830
|
|
|
781
831
|
<div>
|
|
@@ -794,19 +844,21 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
794
844
|
${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)}
|
|
795
845
|
</button>
|
|
796
846
|
|
|
797
|
-
${this.errorMessage?
|
|
847
|
+
${this.errorMessage?ce`
|
|
798
848
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
799
849
|
${this.errorMessage}
|
|
800
|
-
${this.errorAction?
|
|
850
|
+
${this.errorAction?ce`
|
|
801
851
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
802
852
|
${this.errorAction}
|
|
803
853
|
</button>
|
|
804
854
|
`:""}
|
|
805
855
|
</div>
|
|
806
856
|
`:""}
|
|
807
|
-
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return
|
|
857
|
+
${(()=>{let t=(this.pnp?.getEnabledWallets?.()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return $({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})()})})()}
|
|
858
|
+
|
|
859
|
+
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
808
860
|
</div>
|
|
809
|
-
`:
|
|
861
|
+
`:ce`<div class="icpay-card icpay-section">Loading...</div>`}};f.styles=[P,gt`
|
|
810
862
|
.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; }
|
|
811
863
|
.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; }
|
|
812
864
|
.amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
|
|
@@ -838,38 +890,39 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
838
890
|
border-color: rgba(239, 68, 68, 0.3);
|
|
839
891
|
color: #ef4444;
|
|
840
892
|
}
|
|
841
|
-
`],s([
|
|
893
|
+
`],s([mt({type:Object})],f.prototype,"config",2),s([k()],f.prototype,"selectedAmount",2),s([k()],f.prototype,"selectedSymbol",2),s([k()],f.prototype,"raised",2),s([k()],f.prototype,"processing",2),s([k()],f.prototype,"succeeded",2),s([k()],f.prototype,"availableLedgers",2),s([k()],f.prototype,"errorMessage",2),s([k()],f.prototype,"errorSeverity",2),s([k()],f.prototype,"errorAction",2),s([k()],f.prototype,"walletConnected",2),s([k()],f.prototype,"pendingAction",2),s([k()],f.prototype,"showWalletModal",2),s([k()],f.prototype,"showOnrampModal",2),s([k()],f.prototype,"onrampSessionId",2),s([k()],f.prototype,"onrampPaymentIntentId",2),s([k()],f.prototype,"onrampErrorMessage",2),f=s([ut("icpay-donation-thermometer")],f);import{LitElement as ft,html as pe,css as yt}from"lit";import{customElement as bt,property as vt,state as D}from"lit/decorators.js";var Ce=typeof window<"u",Le=null;function ye(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var w=class extends ft{constructor(){super(...arguments);this.selectedSymbol=null;this.processing=!1;this.succeeded=!1;this.availableLedgers=[];this.errorMessage=null;this.errorSeverity=null;this.errorAction=null;this.walletConnected=!1;this.pendingAction=null;this.showWalletModal=!1;this.showOnrampModal=!1;this.onrampSessionId=null;this.onrampPaymentIntentId=null;this.onrampErrorMessage=null;this.onrampPollTimer=null;this.transakMessageHandlerBound=null;this.pnp=null;this.sdk=null;this.onrampPollingActive=!1;this.onrampNotifyController=null}getSdk(){return this.sdk||(this.sdk=h(this.config)),this.sdk}get cryptoOptions(){return this.config?.cryptoOptions?.length?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Ce&&(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(!(!Ce||!this.config?.publishableKey))try{let t=await this.getSdk().client.getVerifiedLedgers();this.availableLedgers=t.map(i=>({symbol:i.symbol,label:i.name,canisterId:i.canisterId})),this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||(this.availableLedgers[0]?.symbol??"ICP"))}catch(e){this.dispatchEvent(new CustomEvent("icpay-error",{detail:{message:"Failed to load verified ledgers",cause:e},bubbles:!0})),this.availableLedgers=[{symbol:"ICP",label:"ICP",canisterId:"ryjl3-tyaaa-aaaaa-aaaba-cai"}],this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||"ICP")}}selectSymbol(e){this.selectedSymbol=e}async ensureWallet(){if(this.config.useOwnWallet)return this.config.actorProvider?!0:(this.pendingAction="pay",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0})),!1);if(this.walletConnected)return!0;try{Le||(Le=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Le(this.config?.plugNPlay||{});let e=this.pnp.getEnabledWallets();if(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 $({visible:this.showWalletModal,wallets:t,isConnecting:!1,onSelect:p=>this.connectWithWallet(p),onClose:()=>{this.showWalletModal=!1},onCreditCard:i?()=>this.startOnramp():void 0,creditCardLabel:this.config?.onramp?.creditCardLabel||"Pay with credit card",showCreditCard:i,creditCardTooltip:d})}startOnramp(){try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"sendFundsUsd",type:"onramp"}}))}catch{}this.showWalletModal=!1,setTimeout(()=>this.createOnrampIntent(),0)}async createOnrampIntent(){try{let e=Number(this.config?.amountUsd??0),t=this.getSdk(),i=this.selectedSymbol||"ICP",r=this.cryptoOptions.find(E=>E.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=await t.startOnrampUsd(e,r,{context:"pay-button:onramp"}),c=l?.metadata?.onramp?.sessionId||l?.metadata?.onramp?.session_id||null,d=l?.metadata?.onramp?.errorMessage||null;this.onrampErrorMessage=d||null;let p=l?.metadata?.paymentIntentId||l?.paymentIntentId||null;this.onrampPaymentIntentId=p,c?(this.onrampSessionId=c,this.showOnrampModal=!0,this.attachTransakMessageListener()):(this.onrampSessionId=null,this.showOnrampModal=!0)}catch(e){this.onrampSessionId=null,this.onrampErrorMessage=e?.message||null,this.showOnrampModal=!0,C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}}attachTransakMessageListener(){if(!this.transakMessageHandlerBound){this.transakMessageHandlerBound=e=>this.onTransakMessage(e);try{window.addEventListener("message",this.transakMessageHandlerBound)}catch{}}}detachTransakMessageListener(){if(this.transakMessageHandlerBound){try{window.removeEventListener("message",this.transakMessageHandlerBound)}catch{}this.transakMessageHandlerBound=null}}onTransakMessage(e){let t=e?.data,i=t?.event_id||t?.eventId||t?.id;if(!(!i||typeof i!="string")&&i==="TRANSAK_ORDER_SUCCESSFUL"){if(this.detachTransakMessageListener(),this.onrampPollingActive)return;let n=t?.data?.id||t?.id||t?.webhookData?.id||null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-success",{detail:{name:"getLedgerBalance"}}))}catch{}try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-success",{detail:{name:"sendFundsToLedger"}}))}catch{}try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-success",{detail:{name:"notifyLedgerTransaction"}}))}catch{}this.showOnrampModal=!1,this.startOnrampPolling(n||void 0)}}startOnrampPolling(e){if(this.onrampPollTimer){try{clearInterval(this.onrampPollTimer)}catch{}this.onrampPollTimer=null}if(this.onrampNotifyController){try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null}let t=this.onrampPaymentIntentId;if(!t)return;let i=this.getSdk(),n=()=>{if(this.detachTransakMessageListener(),this.onrampNotifyController)try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null,this.onrampPollingActive=!1},r=l=>{n()};try{window.addEventListener("icpay-sdk-transaction-completed",r,{once:!0})}catch{}this.onrampPollingActive=!0,this.onrampNotifyController=i.notifyIntentUntilComplete(t,5e3,e),this.onrampPollTimer=1}async pay(){if(!(!Ce||this.processing)){this.errorMessage=null,this.errorSeverity=null,this.errorAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"pay",type:"sendUsd",amount:this.config?.amountUsd,currency:this.selectedSymbol||this.config?.defaultSymbol}}))}catch{}this.processing=!0;try{if(!await this.ensureWallet())return;let t=this.getSdk(),i=this.selectedSymbol||"ICP",r=this.cryptoOptions.find(p=>p.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.config?.amountUsd??0),c={context:"pay-button"},d=await t.sendUsd(l,r,c);this.config.onSuccess&&this.config.onSuccess({id:d.transactionId,status:d.status}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-pay",{detail:{amount:l,tx:d},bubbles:!0}))}catch(e){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return pe`<div class="icpay-card icpay-section">Loading...</div>`;let t=(this.cryptoOptions?.length||0)>1,i=this.config?.showLedgerDropdown,n=i==="dropdown"?"dropdown":i==="none"?"none":"buttons",r=n!=="none"&&(t||n==="dropdown"),l=n==="dropdown"?"dropdown":t?"buttons":"none",c=this.selectedSymbol||this.config?.defaultSymbol||"ICP",d=typeof this.config?.amountUsd=="number"?`${Number(this.config.amountUsd).toFixed(2)}`:"",E=(this.config?.buttonLabel||(typeof this.config?.amountUsd=="number"?"Pay ${amount} with {symbol}":"Pay with {symbol}")).replace("{amount}",d||"$0.00").replace("{symbol}",c),he=this.config?.progressBar?.enabled!==!1;return pe`
|
|
842
894
|
<div class="icpay-card icpay-section">
|
|
843
|
-
${
|
|
895
|
+
${he?pe`
|
|
844
896
|
<icpay-progress-bar></icpay-progress-bar>
|
|
845
897
|
`:null}
|
|
846
898
|
|
|
847
899
|
<div class="row ${r?"":"single"}">
|
|
848
|
-
${r?
|
|
900
|
+
${r?pe`
|
|
849
901
|
<icpay-token-selector
|
|
850
902
|
.options=${this.cryptoOptions}
|
|
851
903
|
.value=${this.selectedSymbol||""}
|
|
852
904
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
853
905
|
mode=${l}
|
|
854
|
-
@icpay-token-change=${
|
|
906
|
+
@icpay-token-change=${H=>this.selectSymbol(H.detail.symbol)}
|
|
855
907
|
></icpay-token-selector>
|
|
856
908
|
`:null}
|
|
857
909
|
<button class="pay-button ${this.processing?"processing":""}"
|
|
858
910
|
?disabled=${this.processing||this.config?.disablePaymentButton===!0||this.succeeded&&this.config?.disableAfterSuccess===!0}
|
|
859
911
|
@click=${()=>this.pay()}>
|
|
860
|
-
${this.succeeded&&this.config?.disableAfterSuccess?"Paid":this.processing?"Processing\u2026":
|
|
912
|
+
${this.succeeded&&this.config?.disableAfterSuccess?"Paid":this.processing?"Processing\u2026":E}
|
|
861
913
|
</button>
|
|
862
914
|
</div>
|
|
863
915
|
|
|
864
|
-
${this.errorMessage?
|
|
916
|
+
${this.errorMessage?pe`
|
|
865
917
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
866
918
|
${this.errorMessage}
|
|
867
|
-
${this.errorAction?
|
|
919
|
+
${this.errorAction?pe`<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>`:""}
|
|
868
920
|
</div>
|
|
869
921
|
`:""}
|
|
870
922
|
${this.renderWalletModal()}
|
|
923
|
+
${this.showOnrampModal?T({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}
|
|
871
924
|
</div>
|
|
872
|
-
`}};w.styles=[
|
|
925
|
+
`}};w.styles=[P,yt`
|
|
873
926
|
.row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
|
|
874
927
|
.row.single { grid-template-columns: 1fr; }
|
|
875
928
|
select { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); color: var(--icpay-text); border-radius: 8px; padding: 10px; font-weight: 600; }
|
|
@@ -877,26 +930,26 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
877
930
|
.error-message.info { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #3b82f6; }
|
|
878
931
|
.error-message.warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
|
|
879
932
|
.error-message.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
|
|
880
|
-
`],s([
|
|
933
|
+
`],s([vt({type:Object})],w.prototype,"config",2),s([D()],w.prototype,"selectedSymbol",2),s([D()],w.prototype,"processing",2),s([D()],w.prototype,"succeeded",2),s([D()],w.prototype,"availableLedgers",2),s([D()],w.prototype,"errorMessage",2),s([D()],w.prototype,"errorSeverity",2),s([D()],w.prototype,"errorAction",2),s([D()],w.prototype,"walletConnected",2),s([D()],w.prototype,"pendingAction",2),s([D()],w.prototype,"showWalletModal",2),s([D()],w.prototype,"showOnrampModal",2),s([D()],w.prototype,"onrampSessionId",2),s([D()],w.prototype,"onrampPaymentIntentId",2),s([D()],w.prototype,"onrampErrorMessage",2),w=s([bt("icpay-pay-button")],w);import{LitElement as wt,html as _,css as xt}from"lit";import{customElement as Et,property as St,state as M}from"lit/decorators.js";var Oe=typeof window<"u",Ae=null;function kt(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var y=class extends wt{constructor(){super(...arguments);this.amountUsd=0;this.hasUserAmount=!1;this.selectedSymbol=null;this.processing=!1;this.succeeded=!1;this.availableLedgers=[];this.errorMessage=null;this.errorSeverity=null;this.errorAction=null;this.walletConnected=!1;this.pendingAction=null;this.showWalletModal=!1;this.showOnrampModal=!1;this.onrampSessionId=null;this.onrampPaymentIntentId=null;this.onrampErrorMessage=null;this.pnp=null;this.transakMessageHandlerBound=null;this.onrampPollTimer=null;this.onrampPollingActive=!1;this.onrampNotifyController=null}get cryptoOptions(){return this.config?.cryptoOptions?.length?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Oe&&(kt(this.config?.debug||!1,"Amount input connected",{config:this.config}),this.amountUsd=Number(this.config?.defaultAmountUsd??0),this.hasUserAmount=!1,this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers(),this.config?.defaultSymbol&&(this.selectedSymbol=this.config.defaultSymbol))}updated(e){if(e.has("config")&&(!this.hasUserAmount&&typeof this.config?.defaultAmountUsd=="number"&&(this.amountUsd===0||this.amountUsd==null||Number.isNaN(this.amountUsd))&&(this.amountUsd=Number(this.config.defaultAmountUsd)),!this.selectedSymbol&&this.config?.defaultSymbol&&(this.selectedSymbol=this.config.defaultSymbol),!(this.config?.cryptoOptions&&this.config.cryptoOptions.length>0)&&this.availableLedgers.length===0&&this.loadVerifiedLedgers(),this.pendingAction&&this.config?.actorProvider)){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="pay"&&this.pay()},0)}}async loadVerifiedLedgers(){if(!(!Oe||!this.config?.publishableKey))try{let t=await h(this.config).client.getVerifiedLedgers();this.availableLedgers=t.map(i=>({symbol:i.symbol,label:i.name,canisterId:i.canisterId})),this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||(this.availableLedgers[0]?.symbol??"ICP"))}catch(e){this.dispatchEvent(new CustomEvent("icpay-error",{detail:{message:"Failed to load verified ledgers",cause:e},bubbles:!0})),this.availableLedgers=[{symbol:"ICP",label:"ICP",canisterId:"ryjl3-tyaaa-aaaaa-aaaba-cai"}],this.selectedSymbol||(this.selectedSymbol=this.config?.defaultSymbol||"ICP")}}onInputChange(e){let t=Number(this.config?.stepUsd??.5),i=Math.max(0,Number(e.target.value||0)),n=Math.round(i/t)*t;this.amountUsd=Number(n.toFixed(2)),this.hasUserAmount=!0}selectSymbol(e){this.selectedSymbol=e}isValidAmount(){let e=Number(this.config?.minUsd??.5),t=this.config?.maxUsd!==void 0?Number(this.config.maxUsd):1/0;return this.amountUsd>=e&&this.amountUsd<=t}async ensureWallet(){if(this.config.useOwnWallet)return this.config.actorProvider?!0:(this.pendingAction="pay",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0})),!1);if(this.walletConnected)return!0;try{if(Ae||(Ae=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Ae(this.config?.plugNPlay||{}),!this.pnp.getEnabledWallets()?.length)throw new Error("No wallets available");return this.pendingAction="pay",this.showWalletModal=!0,!1}catch(e){return this.errorMessage=e instanceof Error?e.message:"Wallet connection failed",this.errorSeverity="error",!1}}getWalletId(e){return e&&(e.id||e.provider||e.key)||""}getWalletLabel(e){return e&&(e.label||e.name||e.title||e.id)||"Wallet"}getWalletIcon(e){return e&&(e.icon||e.logo||e.image)||null}async connectWithWallet(e){if(this.pnp)try{if(!e)throw new Error("No wallet ID provided");let t=await this.pnp.connect(e);if(!!!(t&&(t.connected===!0||t.principal||t.owner||this.pnp?.account)))throw new Error("Wallet connection was rejected");this.walletConnected=!0;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:e}}))}catch{}this.config={...this.config,connectedWallet:t,actorProvider:(r,l)=>this.pnp.getActor({canisterId:r,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let n=this.pendingAction;this.pendingAction=null,n==="pay"&&setTimeout(()=>this.pay(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}attachTransakMessageListener(){if(!this.transakMessageHandlerBound){this.transakMessageHandlerBound=e=>this.onTransakMessage(e);try{window.addEventListener("message",this.transakMessageHandlerBound)}catch{}}}detachTransakMessageListener(){if(this.transakMessageHandlerBound){try{window.removeEventListener("message",this.transakMessageHandlerBound)}catch{}this.transakMessageHandlerBound=null}}onTransakMessage(e){let t=e?.data,i=t?.event_id||t?.eventId||t?.id;if(!(!i||typeof i!="string")&&i==="TRANSAK_ORDER_SUCCESSFUL"){if(this.detachTransakMessageListener(),this.onrampPollingActive)return;this.showOnrampModal=!1;let n=t?.data?.id||t?.id||t?.webhookData?.id||null;this.startOnrampPolling(n||void 0)}}startOnramp(){try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"sendFundsUsd",type:"onramp"}}))}catch{}this.showWalletModal=!1,setTimeout(()=>this.createOnrampIntent(),0)}async createOnrampIntent(){try{let e=h(this.config),t=this.selectedSymbol||"ICP",n=this.cryptoOptions.find(E=>E.symbol===t)?.canisterId||await e.client.getLedgerCanisterIdBySymbol(t),r=Number(this.amountUsd),l=await e.startOnrampUsd(r,n,{context:"amount-input:onramp"}),c=l?.metadata?.onramp?.sessionId||l?.metadata?.onramp?.session_id||null,d=l?.metadata?.paymentIntentId||l?.paymentIntentId||null,p=l?.metadata?.onramp?.errorMessage||null;this.onrampPaymentIntentId=d,c?(this.onrampSessionId=c,this.onrampErrorMessage=null,this.showOnrampModal=!0,this.attachTransakMessageListener()):(this.onrampSessionId=null,this.onrampErrorMessage=p||"Failed to obtain onramp sessionId",this.showOnrampModal=!0)}catch(e){this.onrampSessionId=null,this.onrampErrorMessage=e?.message||"Failed to obtain onramp sessionId",this.showOnrampModal=!0}}startOnrampPolling(e){if(this.onrampPollTimer){try{clearInterval(this.onrampPollTimer)}catch{}this.onrampPollTimer=null}if(this.onrampNotifyController){try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null}let t=this.onrampPaymentIntentId;if(!t)return;let i=h(this.config),n=()=>{if(this.detachTransakMessageListener(),this.onrampNotifyController)try{this.onrampNotifyController.stop()}catch{}this.onrampNotifyController=null,this.onrampPollingActive=!1};try{window.addEventListener("icpay-sdk-transaction-completed",(()=>n()),{once:!0})}catch{}this.onrampPollingActive=!0,this.onrampNotifyController=i.notifyIntentUntilComplete(t,5e3,e),this.onrampPollTimer=1}async pay(){if(!(!Oe||this.processing)){if(this.errorMessage=null,this.errorSeverity=null,this.errorAction=null,!this.isValidAmount()){this.errorMessage="Please enter a valid amount",this.errorSeverity="warning";return}try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"pay",type:"sendUsd",amount:this.amountUsd,currency:this.selectedSymbol||this.config?.defaultSymbol}}))}catch{}this.processing=!0;try{if(!await this.ensureWallet())return;let t=h(this.config),i=this.selectedSymbol||"ICP",r=this.cryptoOptions.find(p=>p.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.amountUsd),c={context:"amount-input"},d=await t.sendUsd(l,r,c);this.config.onSuccess&&this.config.onSuccess({id:d.transactionId,status:d.status,amountUsd:l}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-amount-pay",{detail:{amount:l,tx:d},bubbles:!0}))}catch(e){C(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),O(t)&&(this.errorMessage=L(t),this.errorSeverity=W(t),this.errorAction=A(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return _`<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.config?.showLedgerDropdown===!0,r=this.cryptoOptions.find(z=>z.symbol===(this.selectedSymbol||""))?.label||this.cryptoOptions[0]?.label||this.config?.defaultSymbol||"ICP",l=this.config?.progressBar?.mode||"modal",c=this.config?.showLedgerDropdown,d=c==="buttons"?"buttons":c==="none"?"none":"dropdown",E=this.config?.progressBar?.enabled!==!1&&(l==="modal"?!0:this.processing);return _`
|
|
881
934
|
<div class="icpay-card icpay-section">
|
|
882
|
-
${
|
|
935
|
+
${E?_`<icpay-progress-bar mode="${l}"></icpay-progress-bar>`:null}
|
|
883
936
|
|
|
884
937
|
<div class="row">
|
|
885
938
|
<div class="top-row">
|
|
886
939
|
<div class="amount-field">
|
|
887
940
|
<span class="currency-prefix">$</span>
|
|
888
|
-
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${
|
|
941
|
+
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${z=>this.onInputChange(z)} />
|
|
889
942
|
</div>
|
|
890
|
-
${
|
|
943
|
+
${d!=="none"?_`
|
|
891
944
|
<icpay-token-selector
|
|
892
945
|
.options=${this.cryptoOptions}
|
|
893
946
|
.value=${this.selectedSymbol||""}
|
|
894
947
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
895
|
-
mode=${
|
|
948
|
+
mode=${d}
|
|
896
949
|
.showLabel=${!1}
|
|
897
|
-
@icpay-token-change=${
|
|
950
|
+
@icpay-token-change=${z=>this.selectSymbol(z.detail.symbol)}
|
|
898
951
|
></icpay-token-selector>
|
|
899
|
-
`:
|
|
952
|
+
`:_`
|
|
900
953
|
<div class="label" style="padding: 10px;">${r}</div>
|
|
901
954
|
`}
|
|
902
955
|
</div>
|
|
@@ -908,15 +961,17 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
908
961
|
</div>
|
|
909
962
|
<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>
|
|
910
963
|
|
|
911
|
-
${this.errorMessage?
|
|
964
|
+
${this.errorMessage?_`
|
|
912
965
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
913
966
|
${this.errorMessage}
|
|
914
|
-
${this.errorAction?
|
|
967
|
+
${this.errorAction?_`<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>`:""}
|
|
915
968
|
</div>
|
|
916
969
|
`:""}
|
|
917
|
-
${(()=>{let
|
|
970
|
+
${(()=>{let he=(this.pnp?.getEnabledWallets?.()||[]).map(H=>({id:this.getWalletId(H),label:this.getWalletLabel(H),icon:this.getWalletIcon(H)}));return $({visible:!!(this.showWalletModal&&this.pnp),wallets:he,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 j=Number(this.amountUsd||0);return j>0&&j<5&&this.config?.onramp?.enabled!==!1?`Note: Minimum card amount is $5. You will pay about $${(5-j).toFixed(2)} more.`:null})()})})()}
|
|
971
|
+
|
|
972
|
+
${this.showOnrampModal?T({visible:this.showOnrampModal,sessionId:this.onrampSessionId,errorMessage:this.onrampErrorMessage,apiKey:this.config?.onramp?.apiKey,environment:this.config?.onramp?.environment||"STAGING",width:this.config?.onramp?.width,height:this.config?.onramp?.height,onClose:()=>{this.showOnrampModal=!1},onBack:()=>{this.showOnrampModal=!1,this.showWalletModal=!0}}):null}
|
|
918
973
|
</div>
|
|
919
|
-
`}};
|
|
974
|
+
`}};y.styles=[P,xt`
|
|
920
975
|
.row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
|
|
921
976
|
.top-row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; align-items: center; }
|
|
922
977
|
icpay-token-selector { width: 100%; }
|
|
@@ -935,5 +990,5 @@ var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var s=(n,a,e
|
|
|
935
990
|
@media (max-width: 520px) {
|
|
936
991
|
.top-row { grid-template-columns: 1fr; }
|
|
937
992
|
}
|
|
938
|
-
`],s([
|
|
993
|
+
`],s([St({type:Object})],y.prototype,"config",2),s([M()],y.prototype,"amountUsd",2),s([M()],y.prototype,"hasUserAmount",2),s([M()],y.prototype,"selectedSymbol",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([Et("icpay-amount-input")],y);export{y as ICPayAmountInput,g as ICPayArticlePaywall,v as ICPayCoffeeShop,f as ICPayDonationThermometer,w as ICPayPayButton,b as ICPayPremiumContent,m as ICPayTipJar,ee as applyThemeVars,P as baseStyles,h as createSdk,T as renderTransakOnrampModal};
|
|
939
994
|
//# sourceMappingURL=index.js.map
|