@ic-pay/icpay-widget 0.1.81 → 0.1.83
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 +2 -0
- package/dist/index.global.js +382 -466
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +105 -189
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Re=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var s=(n,a,e,t)=>{for(var i=t>1?void 0:t?Te(a,e):a,r=n.length-1,o;r>=0;r--)(o=n[r])&&(i=(t?o(a,e,i):o(i))||i);return t&&i&&Re(a,e,i),i};import{css as Pe}from"lit";var E=Pe`
|
|
2
2
|
:host {
|
|
3
3
|
--icpay-primary: #f9fafb;
|
|
4
4
|
--icpay-secondary: #e5e7eb;
|
|
@@ -57,9 +57,9 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
57
57
|
0%, 100% { opacity: 1; }
|
|
58
58
|
50% { opacity: 0.7; }
|
|
59
59
|
}
|
|
60
|
-
`;function te(o,a){if(!o||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(_,E)=>{E&&o.style.setProperty(_,E)};i("--icpay-primary",e),i("--icpay-secondary",t);let r=_=>{if(!_)return null;let E=_.replace("#",""),ce=E.length===3?E.split("").map(Le=>Le+Le).join(""):E,de=parseInt(ce,16),pe=de>>16&255,Oe=de>>8&255,Ie=de&255;return{r:pe,g:Oe,b:Ie}},c=(_=>{let E=r(_);if(!E)return 0;let ce=de=>{let pe=de/255;return pe<=.03928?pe/12.92:Math.pow((pe+.055)/1.055,2.4)};return .2126*ce(E.r)+.7152*ce(E.g)+.0722*ce(E.b)})(e||t)>.6,h=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),F=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),q=a.borderColor||(c?"#d1d5db":"#4b5563"),A=a.textColor||(c?"#111827":"#f9fafb"),ee=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),le=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",ee),i("--icpay-text",A),i("--icpay-muted",le),i("--icpay-surface",h),i("--icpay-surface-alt",F),i("--icpay-border",q)}import{Icpay as Ce}from"@ic-pay/icpay-sdk";var Ae=typeof window<"u";function fe(o,a,e){o&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}function d(o){if(!Ae)return{client:{},quoteUsd:async()=>({tokenAmountDecimals:"0"}),sendUsd:async()=>({transactionId:"0",status:"pending"})};fe(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),fe(o.debug||!1,"Filtered SDK config:",a);try{fe(o.debug||!1,"typeof Icpay:",typeof Ce);let e=new Ce(a);if(Ae){let r=e,n=l=>{r.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(n)}async function t(r,n){return e.calculateTokenAmountFromUSD({usdAmount:r,ledgerCanisterId:n})}async function i(r,n,l){return e.sendFundsUsd({usdAmount:r,ledgerCanisterId:n,metadata:l})}return{client:e,quoteUsd:t,sendUsd:i}}catch(e){throw fe(o.debug||!1,"Error creating SDK:",e),e}}import{LitElement as Ve,html as B,css as He}from"lit";import{customElement as qe,property as Ge,state as N}from"lit/decorators.js";import{IcpayError as Me}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"},Re={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 k(o,a=Re){o instanceof Me?(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 Me({code:x.UNKNOWN_ERROR,message:o instanceof Error?o.message:"An unknown error occurred",details:o})))}var Pe={[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 W(o){return Pe[o.code]||o.message||"An error occurred"}function $(o){return!o.isUserCancelled()}function L(o){if(o.userAction)return o.userAction;switch(o.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 C(o){return o.isUserCancelled()?"info":o.isBalanceError()||o.isWalletError()?"warning":"error"}import{LitElement as je,html as m,css as De}from"lit";import{customElement as Ke,property as ie,state as T}from"lit/decorators.js";var Fe=[{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 je{constructor(){super(...arguments);this.open=!1;this.steps=Fe;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(r=>({...r,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.setLoadingByKey("transfer"):t==="notifyLedgerTransaction"&&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("init"),this.setLoadingByKey("await")):t==="sendFundsToLedger"?(this.completeByKey("transfer"),this.setLoadingByKey("verify")):t==="notifyLedgerTransaction"&&(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("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",r=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:r,step:this.activeIndex},bubbles:!0}))};this.onMethodError=e=>{let t=e?.detail?.name||"",i=e?.detail?.error?.message||e?.detail?.message||"An error occurred",r=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:r,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,r=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),r&&(this.currentLedgerSymbol=r,this.ledgerSymbol=r),!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-payment",{detail:{amount:t,currency:i,ledgerSymbol:r,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 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-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 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-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 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-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 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-coffee",{detail:{amount:t,currency:i,step:this.activeIndex},bubbles:!0}))}}connectedCallback(){super.connectedCallback();try{te(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{te(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 r=this.currentSteps[e],n=r.status;r.status=t,t==="completed"&&(r.timestamp=this.getCurrentTime()),t==="error"&&i&&(r.errorMessage=this.transformErrorMessage(i)),console.log(`ICPay Progress: Step ${e} (${r.label}) status changed from ${n} 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 m`<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,r)=>r),t=["#0066FF","#ef4444","#10b981","#f59e0b","#8b5cf6"];return m`
|
|
60
|
+
`;function Q(n,a){if(!n||!a)return;let e=a.primaryColor||void 0,t=a.secondaryColor||void 0,i=(Y,N)=>{N&&n.style.setProperty(Y,N)};i("--icpay-primary",e),i("--icpay-secondary",t);let r=Y=>{if(!Y)return null;let N=Y.replace("#",""),ce=N.length===3?N.split("").map(Ae=>Ae+Ae).join(""):N,de=parseInt(ce,16),pe=de>>16&255,Ne=de>>8&255,Ue=de&255;return{r:pe,g:Ne,b:Ue}},c=(Y=>{let N=r(Y);if(!N)return 0;let ce=de=>{let pe=de/255;return pe<=.03928?pe/12.92:Math.pow((pe+.055)/1.055,2.4)};return .2126*ce(N.r)+.7152*ce(N.g)+.0722*ce(N.b)})(e||t)>.6,b=a.surfaceColor||(c?"#f3f4f6":"#1f2937"),A=a.surfaceAltColor||(c?"#e5e7eb":"#374151"),ae=a.borderColor||(c?"#d1d5db":"#4b5563"),D=a.textColor||(c?"#111827":"#f9fafb"),le=a.accentColor||t||e||(c?"#6b7280":"#9ca3af"),F=a.mutedTextColor||(c?"#6b7280":"#9ca3af");i("--icpay-accent",le),i("--icpay-text",D),i("--icpay-muted",F),i("--icpay-surface",b),i("--icpay-surface-alt",A),i("--icpay-border",ae)}import{Icpay as Me}from"@ic-pay/icpay-sdk";var Oe=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(!Oe)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 Me);let e=new Me(a);if(Oe){let r=e,o=l=>{r.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(o)}async function t(r,o){return e.calculateTokenAmountFromUSD({usdAmount:r,ledgerCanisterId:o})}async function i(r,o,l){return e.sendFundsUsd({usdAmount:r,ledgerCanisterId:o,metadata:l})}return{client:e,quoteUsd:t,sendUsd:i}}catch(e){throw ye(n.debug||!1,"Error creating SDK:",e),e}}import{LitElement as qe,html as Z,css as Ge}from"lit";import{customElement as Ye,property as Qe,state as U}from"lit/decorators.js";import{IcpayError as Ie}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"},Ke={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=Ke){n instanceof Ie?(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 Ie({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 C(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 L(n){return n.isUserCancelled()?"info":n.isBalanceError()||n.isWalletError()?"warning":"error"}import{LitElement as De,html as y,css as Fe}from"lit";import{customElement as _e,property as X,state as T}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 De{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(r=>({...r,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",r=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:r,step:this.activeIndex},bubbles:!0}))};this.onMethodError=e=>{let t=e?.detail?.name||"",i=e?.detail?.error?.message||e?.detail?.message||"An error occurred",r=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:r,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,r=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),r&&(this.currentLedgerSymbol=r,this.ledgerSymbol=r),!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-payment",{detail:{amount:t,currency:i,ledgerSymbol:r,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 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-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 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-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 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-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 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-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 r=this.currentSteps[e],o=r.status;r.status=t,t==="completed"&&(r.timestamp=this.getCurrentTime()),t==="error"&&i&&(r.errorMessage=this.transformErrorMessage(i)),console.log(`ICPay Progress: Step ${e} (${r.label}) status changed from ${o} 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,r)=>r),t=["#0066FF","#ef4444","#10b981","#f59e0b","#8b5cf6"];return y`
|
|
61
61
|
<div class="confetti">
|
|
62
|
-
${e.map(i=>
|
|
62
|
+
${e.map(i=>y`
|
|
63
63
|
<div
|
|
64
64
|
class="confetti-piece"
|
|
65
65
|
style="
|
|
@@ -72,7 +72,7 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
72
72
|
></div>
|
|
73
73
|
`)}
|
|
74
74
|
</div>
|
|
75
|
-
`}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}),
|
|
75
|
+
`}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}),y`
|
|
76
76
|
<div class="success-container">
|
|
77
77
|
<div class="success-icon">
|
|
78
78
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -85,7 +85,7 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
85
85
|
<button class="btn btn-primary" @click=${()=>{this.open=!1}}>Close</button>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
88
|
-
`}renderErrorState(){return
|
|
88
|
+
`}renderErrorState(){return y`
|
|
89
89
|
<div class="error-message">
|
|
90
90
|
<div class="error-icon">⚠</div>
|
|
91
91
|
<div class="error-content">
|
|
@@ -96,22 +96,22 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
96
96
|
</div>
|
|
97
97
|
</div>
|
|
98
98
|
</div>
|
|
99
|
-
`}renderProgressContent(){return this.showSuccess?this.renderSuccessState():this.failed?this.renderErrorState():
|
|
99
|
+
`}renderProgressContent(){return this.showSuccess?this.renderSuccessState():this.failed?this.renderErrorState():y`
|
|
100
100
|
<div class="progress-container">
|
|
101
101
|
<div class="progress-header">
|
|
102
102
|
<h2 class="progress-title">Processing Payment</h2>
|
|
103
103
|
<p class="progress-subtitle">Please wait while we process your transaction</p>
|
|
104
104
|
</div>
|
|
105
105
|
<div class="progress-steps">
|
|
106
|
-
${this.currentSteps.map((e,t)=>
|
|
106
|
+
${this.currentSteps.map((e,t)=>y`
|
|
107
107
|
<div class="step ${t===this.activeIndex?"active":""} ${e.status==="completed"?"completed":""}">
|
|
108
108
|
<div class="step-icon">
|
|
109
|
-
${e.status==="loading"?
|
|
110
|
-
${e.status==="completed"?
|
|
109
|
+
${e.status==="loading"?y`<div class="loading-spinner"></div>`:""}
|
|
110
|
+
${e.status==="completed"?y`
|
|
111
111
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
112
112
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
113
113
|
</svg>
|
|
114
|
-
`:
|
|
114
|
+
`:y`
|
|
115
115
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
116
116
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
|
117
117
|
</svg>
|
|
@@ -125,7 +125,7 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
125
125
|
`)}
|
|
126
126
|
</div>
|
|
127
127
|
</div>
|
|
128
|
-
`}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
|
+
`}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 y`
|
|
129
129
|
<div class="step-item ${e.status}">
|
|
130
130
|
<div class="step-icon">
|
|
131
131
|
${this.getStepIcon(e)}
|
|
@@ -134,27 +134,30 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
134
134
|
<div class="step-title">
|
|
135
135
|
${e.status==="completed"?"COMPLETED":e.label}
|
|
136
136
|
</div>
|
|
137
|
-
${e.status==="completed"?
|
|
137
|
+
${e.status==="completed"?y`
|
|
138
138
|
<div class="step-subtitle">
|
|
139
139
|
${e.timestamp} - ${e.tooltip}
|
|
140
140
|
</div>
|
|
141
|
-
`:e.status==="error"&&e.errorMessage?
|
|
141
|
+
`:e.status==="error"&&e.errorMessage?y`
|
|
142
142
|
<div class="step-error">${e.errorMessage}</div>
|
|
143
|
-
`:
|
|
143
|
+
`:y`
|
|
144
144
|
<div class="step-subtitle">${e.tooltip}</div>
|
|
145
145
|
`}
|
|
146
146
|
</div>
|
|
147
147
|
</div>
|
|
148
|
-
`}render(){return
|
|
149
|
-
${this.open?
|
|
148
|
+
`}get isWalletConnectLoading(){try{let e=this.currentSteps.findIndex(t=>t.key==="wallet");return e<0?!1:this.currentSteps[e].status==="loading"&&!this.failed&&!this.showSuccess}catch{return!1}}render(){return y`
|
|
149
|
+
${this.open?y`
|
|
150
150
|
${this.renderConfetti()}
|
|
151
151
|
<div class="modal-overlay active">
|
|
152
152
|
<div class="modal-container">
|
|
153
|
+
${this.isWalletConnectLoading?y`
|
|
154
|
+
<button class="close-button" @click=${()=>this.closeProgress()} aria-label="Close" title="Close">✕</button>
|
|
155
|
+
`:null}
|
|
153
156
|
${this.renderProgressContent()}
|
|
154
157
|
</div>
|
|
155
158
|
</div>
|
|
156
159
|
`:null}
|
|
157
|
-
`}};p.styles=
|
|
160
|
+
`}};p.styles=Fe`
|
|
158
161
|
:host {
|
|
159
162
|
display: block;
|
|
160
163
|
font-family: var(--icpay-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
@@ -340,7 +343,7 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
340
343
|
opacity: 0;
|
|
341
344
|
}
|
|
342
345
|
}
|
|
343
|
-
`,s([
|
|
346
|
+
`,s([X({type:Boolean})],p.prototype,"open",2),s([X({type:Array})],p.prototype,"steps",2),s([X({type:Number})],p.prototype,"amount",2),s([X({type:String})],p.prototype,"currency",2),s([X({type:String})],p.prototype,"ledgerSymbol",2),s([T()],p.prototype,"activeIndex",2),s([T()],p.prototype,"completed",2),s([T()],p.prototype,"failed",2),s([T()],p.prototype,"errorMessage",2),s([T()],p.prototype,"showSuccess",2),s([T()],p.prototype,"showConfetti",2),s([T()],p.prototype,"currentSteps",2),s([T()],p.prototype,"currentAmount",2),s([T()],p.prototype,"currentCurrency",2),s([T()],p.prototype,"currentLedgerSymbol",2),s([X({type:Object})],p.prototype,"theme",2),p=s([_e("icpay-progress-bar")],p);import{LitElement as ze,html as ge,css as Ve}from"lit";import{customElement as He,property as he}from"lit/decorators.js";var P=class extends ze{constructor(){super(...arguments);this.options=[];this.value=null;this.defaultSymbol="ICP";this.mode="buttons"}connectedCallback(){super.connectedCallback();try{Q(this,this.theme)}catch{}}updated(e){if(e.has("theme"))try{Q(this,this.theme)}catch{}}get effectiveSymbol(){if(this.value)return this.value;let e=this.options?.[0]?.symbol;return this.defaultSymbol||e||"ICP"}onSelect(e){this.value=e,this.dispatchEvent(new CustomEvent("icpay-token-change",{detail:{symbol:e},bubbles:!0,composed:!0}))}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)),ge``}if(this.mode==="dropdown"){let i=this.effectiveSymbol;return ge`
|
|
344
347
|
<select @change=${r=>this.onSelect(r.target.value)}>
|
|
345
348
|
${e.map(r=>ge`<option value="${r.symbol}" ?selected=${i===r.symbol}>${r.label}<span class="icpay-token-selector-symbol"> (${r.symbol})</span></option>`)}
|
|
346
349
|
</select>
|
|
@@ -353,18 +356,43 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
353
356
|
`)}
|
|
354
357
|
</div>
|
|
355
358
|
</div>
|
|
356
|
-
`}};
|
|
359
|
+
`}};P.styles=Ve`
|
|
357
360
|
:host { display: block; }
|
|
358
361
|
.crypto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; }
|
|
359
362
|
.crypto-option { background: var(--icpay-surface-alt); border: 2px solid var(--icpay-border); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; color: var(--icpay-text); font-weight: 600; font-size: 12px; }
|
|
360
363
|
.crypto-option.selected { background: var(--icpay-primary); color: #111827; border-color: var(--icpay-primary); }
|
|
361
364
|
select { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); color: var(--icpay-text); border-radius: 8px; padding: 10px; font-weight: 600; }
|
|
362
|
-
`,s([he({type:Array})],
|
|
365
|
+
`,s([he({type:Array})],P.prototype,"options",2),s([he({type:String})],P.prototype,"value",2),s([he({type:String})],P.prototype,"defaultSymbol",2),s([he({type:String})],P.prototype,"mode",2),s([he({type:Object})],P.prototype,"theme",2),P=s([He("icpay-token-selector")],P);import{html as me}from"lit";function $(n){if(!n.visible)return null;let{wallets:a,onSelect:e,onClose:t,isConnecting:i}=n;return me`
|
|
366
|
+
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:10000">
|
|
367
|
+
<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">
|
|
368
|
+
<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>
|
|
369
|
+
<h3 style="color:#fff;margin:0 48px 16px 0;font-size:18px;font-weight:600">Choose Wallet</h3>
|
|
370
|
+
<div style="display:flex;flex-direction:column;gap:8px">
|
|
371
|
+
${a.map(r=>me`
|
|
372
|
+
<button
|
|
373
|
+
@click=${()=>e(r.id)}
|
|
374
|
+
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">
|
|
375
|
+
${r.icon?me`
|
|
376
|
+
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center">
|
|
377
|
+
<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)" />
|
|
378
|
+
</div>
|
|
379
|
+
`:me`
|
|
380
|
+
<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)">
|
|
381
|
+
${(r.id||"?").charAt(0).toUpperCase()}
|
|
382
|
+
</div>
|
|
383
|
+
`}
|
|
384
|
+
<div><div style="font-weight:500">${r.label}</div></div>
|
|
385
|
+
</button>
|
|
386
|
+
`)}
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
`}var ve=typeof window<"u",J=null;function _(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var m=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}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;J||(J=(await import("@windoge98/plug-n-play")).PNP);let i=new J(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(),ve&&(_(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(!(!ve||!this.config?.publishableKey))try{let t=await d(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(ve&&!(this.processing||this.unlocked)){_(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){_(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{J||(J=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new J(this.config?.plugNPlay||{});let o=this.pnp.getEnabledWallets();if(_(this.config?.debug||!1,"Available wallets",o),!o?.length)throw new Error("No wallets available");this.pendingAction="pay",this.showWalletModal=!0;return}catch(o){_(this.config?.debug||!1,"Wallet connection error:",o),this.errorMessage=o instanceof Error?o.message:"Wallet connection failed",this.errorSeverity="error";return}}_(this.config?.debug||!1,"Creating SDK for payment");let e=d(this.config),i=this.cryptoOptions.find(o=>o.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);_(this.config?.debug||!1,"Payment details",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let r=await e.sendUsd(this.config.priceUsd,i,{context:"premium-content"});_(this.config?.debug||!1,"Payment completed",{resp:r}),this.unlocked=!0,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:r.transactionId,status:r.status}),this.dispatchEvent(new CustomEvent("icpay-unlock",{detail:{amount:this.config.priceUsd,tx:r},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(t))}})}finally{this.processing=!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:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="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?Z`
|
|
363
391
|
<div class="card section">
|
|
364
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
392
|
+
${this.config?.progressBar?.enabled!==!1?Z`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
365
393
|
<div class="image-container">
|
|
366
394
|
<div class="locked-image ${this.unlocked?"unlocked":""}" style="background-image:url('${this.config.imageUrl||""}')"></div>
|
|
367
|
-
${this.unlocked?null:
|
|
395
|
+
${this.unlocked?null:Z`<div class="lock-overlay">🔒</div>`}
|
|
368
396
|
</div>
|
|
369
397
|
|
|
370
398
|
<div class="pricing">
|
|
@@ -386,35 +414,19 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
386
414
|
${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)}
|
|
387
415
|
</button>
|
|
388
416
|
|
|
389
|
-
${this.errorMessage?
|
|
417
|
+
${this.errorMessage?Z`
|
|
390
418
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
391
419
|
${this.errorMessage}
|
|
392
|
-
${this.errorAction?
|
|
420
|
+
${this.errorAction?Z`
|
|
393
421
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
394
422
|
${this.errorAction}
|
|
395
423
|
</button>
|
|
396
424
|
`:""}
|
|
397
425
|
</div>
|
|
398
426
|
`:""}
|
|
399
|
-
${(()=>{let
|
|
400
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
401
|
-
<div class="card section" style="width:380px;border-radius:12px">
|
|
402
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
403
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
404
|
-
${e.map(t=>{let i=this.getWalletId(t),r=this.getWalletLabel(t),n=this.getWalletIcon(t);return B`
|
|
405
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(i)}>
|
|
406
|
-
${n?B`<img src="${n}" alt="${r}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
407
|
-
<span>${r}</span>
|
|
408
|
-
</button>`})}
|
|
409
|
-
</div>
|
|
410
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
411
|
-
Cancel
|
|
412
|
-
</button>
|
|
413
|
-
</div>
|
|
414
|
-
</div>
|
|
415
|
-
`:null})()}
|
|
427
|
+
${(()=>{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}})})()}
|
|
416
428
|
</div>
|
|
417
|
-
`:
|
|
429
|
+
`:Z`<div class="card section">Loading...</div>`}};m.styles=[E,Ge`
|
|
418
430
|
.image-container {
|
|
419
431
|
position: relative;
|
|
420
432
|
border-radius: 16px;
|
|
@@ -465,17 +477,17 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
465
477
|
border-color: rgba(239, 68, 68, 0.3);
|
|
466
478
|
color: #ef4444;
|
|
467
479
|
}
|
|
468
|
-
`],s([
|
|
480
|
+
`],s([Qe({type:Object})],m.prototype,"config",2),s([U()],m.prototype,"selectedSymbol",2),s([U()],m.prototype,"unlocked",2),s([U()],m.prototype,"succeeded",2),s([U()],m.prototype,"processing",2),s([U()],m.prototype,"availableLedgers",2),s([U()],m.prototype,"errorMessage",2),s([U()],m.prototype,"errorSeverity",2),s([U()],m.prototype,"errorAction",2),s([U()],m.prototype,"walletConnected",2),s([U()],m.prototype,"pendingAction",2),s([U()],m.prototype,"showWalletModal",2),m=s([Ye("icpay-premium-content")],m);import{LitElement as Xe,html as q,css as Ze}from"lit";import{customElement as Je,property as et,state as M}from"lit/decorators.js";var we=typeof window<"u",te=null;function j(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var h=class extends Xe{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}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;te||(te=(await import("@windoge98/plug-n-play")).PNP);let i=new te(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(),we&&(j(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(!(!we||!this.config?.publishableKey))try{let t=await d(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(we&&(j(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){j(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{te||(te=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new te(this.config?.plugNPlay||{});let o=this.pnp.getEnabledWallets();if(j(this.config?.debug||!1,"Available wallets",o),!o?.length)throw new Error("No wallets available");this.pendingAction="tip",this.showWalletModal=!0;return}catch(o){j(this.config?.debug||!1,"Wallet connection error:",o),this.errorMessage=o instanceof Error?o.message:"Wallet connection failed",this.errorSeverity="error";return}}j(this.config?.debug||!1,"Creating SDK for payment");let e=d(this.config),i=this.cryptoOptions.find(o=>o.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);j(this.config?.debug||!1,"Tip payment details",{amount:this.selectedAmount,selectedSymbol:this.selectedSymbol,canisterId:i});let r=await e.sendUsd(this.selectedAmount,i,{context:"tip-jar"});j(this.config?.debug||!1,"Tip payment completed",{resp:r}),this.total+=this.selectedAmount,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:r.transactionId,status:r.status,total:this.total}),this.dispatchEvent(new CustomEvent("icpay-tip",{detail:{amount:this.selectedAmount,tx:r},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(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:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="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="card section">Loading...</div>`;let t=(this.cryptoOptions?.length||0)>1,i=this.config?.showLedgerDropdown,r=i==="dropdown"?"dropdown":i==="none"?"none":"buttons",o=r!=="none"&&(t||r==="dropdown"),l=r==="dropdown"?"dropdown":t?"buttons":"none";return q`
|
|
469
481
|
<div class="card section" style="text-align:center;">
|
|
470
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
482
|
+
${this.config?.progressBar?.enabled!==!1?q`<icpay-progress-bar></icpay-progress-bar>`:null}
|
|
471
483
|
<div class="jar"><div class="fill" style="height:${this.fillPercentage}%"></div></div>
|
|
472
484
|
<div class="label">Total Tips: $${this.total}</div>
|
|
473
485
|
|
|
474
486
|
<div class="amounts">
|
|
475
|
-
${this.amounts.map(c=>
|
|
487
|
+
${this.amounts.map(c=>q`<div class="chip ${this.selectedAmount===c?"selected":""}" @click=${()=>this.selectAmount(c)}>$${c}</div>`)}
|
|
476
488
|
</div>
|
|
477
489
|
|
|
478
|
-
${
|
|
490
|
+
${o?q`
|
|
479
491
|
<div>
|
|
480
492
|
<icpay-token-selector
|
|
481
493
|
.options=${this.cryptoOptions}
|
|
@@ -493,35 +505,19 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
493
505
|
${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}`}
|
|
494
506
|
</button>
|
|
495
507
|
|
|
496
|
-
${this.errorMessage?
|
|
508
|
+
${this.errorMessage?q`
|
|
497
509
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
498
510
|
${this.errorMessage}
|
|
499
|
-
${this.errorAction?
|
|
511
|
+
${this.errorAction?q`
|
|
500
512
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
501
513
|
${this.errorAction}
|
|
502
514
|
</button>
|
|
503
515
|
`:""}
|
|
504
516
|
</div>
|
|
505
517
|
`:""}
|
|
506
|
-
${(()=>{let
|
|
507
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
508
|
-
<div class="card section" style="width:380px;border-radius:12px">
|
|
509
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
510
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
511
|
-
${c.map(h=>{let F=this.getWalletId(h),q=this.getWalletLabel(h),A=this.getWalletIcon(h);return P`
|
|
512
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(F)}>
|
|
513
|
-
${A?P`<img src="${A}" alt="${q}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
514
|
-
<span>${q}</span>
|
|
515
|
-
</button>`})}
|
|
516
|
-
</div>
|
|
517
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
518
|
-
Cancel
|
|
519
|
-
</button>
|
|
520
|
-
</div>
|
|
521
|
-
</div>
|
|
522
|
-
`:null})()}
|
|
518
|
+
${(()=>{let b=(this.pnp?.getEnabledWallets?.()||[]).map(A=>({id:this.getWalletId(A),label:this.getWalletLabel(A),icon:this.getWalletIcon(A)}));return $({visible:!!(this.showWalletModal&&this.pnp),wallets:b,isConnecting:!1,onSelect:A=>this.connectWithWallet(A),onClose:()=>{this.showWalletModal=!1}})})()}
|
|
523
519
|
</div>
|
|
524
|
-
`}};
|
|
520
|
+
`}};h.styles=[E,Ze`
|
|
525
521
|
.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; }
|
|
526
522
|
.fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%); transition: height 0.8s ease; height: 0%; }
|
|
527
523
|
.amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
|
|
@@ -553,13 +549,13 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
553
549
|
border-color: rgba(239, 68, 68, 0.3);
|
|
554
550
|
color: #ef4444;
|
|
555
551
|
}
|
|
556
|
-
`],s([
|
|
552
|
+
`],s([et({type:Object})],h.prototype,"config",2),s([M()],h.prototype,"selectedAmount",2),s([M()],h.prototype,"selectedSymbol",2),s([M()],h.prototype,"total",2),s([M()],h.prototype,"processing",2),s([M()],h.prototype,"succeeded",2),s([M()],h.prototype,"availableLedgers",2),s([M()],h.prototype,"errorMessage",2),s([M()],h.prototype,"errorSeverity",2),s([M()],h.prototype,"errorAction",2),s([M()],h.prototype,"walletConnected",2),s([M()],h.prototype,"pendingAction",2),s([M()],h.prototype,"showWalletModal",2),h=s([Je("icpay-tip-jar")],h);import{LitElement as tt,html as ue,css as it}from"lit";import{customElement as st,property as be,state as R}from"lit/decorators.js";var xe=typeof window<"u",ie=null;function z(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var g=class extends tt{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}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;ie||(ie=(await import("@windoge98/plug-n-play")).PNP);let i=new ie(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&&(z(this.config?.debug||!1,"Article paywall connected",{config:this.config}),this.config&&(typeof this.config.title=="string"&&(this.title=this.config.title),typeof this.config.preview=="string"&&(this.preview=this.config.preview),typeof this.config.lockedContent=="string"&&(this.lockedContent=this.config.lockedContent)),this.tryAutoConnectPNP(),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers())}updated(e){if(e.has("config")&&this.config&&(typeof this.config.title=="string"&&(this.title=this.config.title),typeof this.config.preview=="string"&&(this.preview=this.config.preview),typeof this.config.lockedContent=="string"&&(this.lockedContent=this.config.lockedContent)),e.has("config")&&this.pendingAction&&this.config?.actorProvider){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="unlock"&&this.unlock()},0)}}async loadVerifiedLedgers(){if(!(!xe||!this.config?.publishableKey))try{let t=await d(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(xe&&!(this.processing||this.unlocked)){z(this.config?.debug||!1,"Article paywall unlock started",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,useOwnWallet:this.config.useOwnWallet}),this.errorMessage=null,this.errorSeverity=null,this.errorAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-method-start",{detail:{name:"unlock",type:"sendUsd",amount:this.config.priceUsd,currency:this.selectedSymbol}}))}catch{}this.processing=!0;try{if(this.config.useOwnWallet){if(!this.config.actorProvider){this.pendingAction="unlock",this.dispatchEvent(new CustomEvent("icpay-connect-wallet",{bubbles:!0}));return}}else if(!this.walletConnected){z(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{ie||(ie=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new ie(this.config?.plugNPlay||{});let o=this.pnp.getEnabledWallets();if(z(this.config?.debug||!1,"Available wallets",o),!o?.length)throw new Error("No wallets available");this.pendingAction="unlock",this.showWalletModal=!0;return}catch(o){z(this.config?.debug||!1,"Wallet connection error:",o),this.errorMessage=o instanceof Error?o.message:"Wallet connection failed",this.errorSeverity="error";return}}z(this.config?.debug||!1,"Creating SDK for payment");let e=d(this.config),i=this.cryptoOptions.find(o=>o.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);z(this.config?.debug||!1,"Article payment details",{priceUsd:this.config.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let r=await e.sendUsd(this.config.priceUsd,i,{context:"article"});z(this.config?.debug||!1,"Article payment completed",{resp:r}),this.unlocked=!0,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:r.transactionId,status:r.status}),this.dispatchEvent(new CustomEvent("icpay-unlock",{detail:{amount:this.config.priceUsd,tx:r},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(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:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="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?ue`
|
|
557
553
|
<div class="card section">
|
|
558
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
554
|
+
${this.config?.progressBar?.enabled!==!1?ue`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
559
555
|
<div class="container">
|
|
560
556
|
<div class="title">${this.title}</div>
|
|
561
557
|
<div class="preview">${this.preview}</div>
|
|
562
|
-
<div class="${this.unlocked?"unlocked":"locked"}">${this.lockedContent}</div>
|
|
558
|
+
<div class="${this.unlocked?"unlocked":"locked"}">${this.unlocked?this.lockedContent:this.obfuscatedLockedContent}</div>
|
|
563
559
|
</div>
|
|
564
560
|
<div class="pricing" style="text-align:center;">
|
|
565
561
|
<div class="price">$${Number(this.config?.priceUsd??0).toFixed(2)}</div>
|
|
@@ -578,35 +574,19 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
578
574
|
${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)}
|
|
579
575
|
</button>
|
|
580
576
|
|
|
581
|
-
${this.errorMessage?
|
|
577
|
+
${this.errorMessage?ue`
|
|
582
578
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
583
579
|
${this.errorMessage}
|
|
584
|
-
${this.errorAction?
|
|
580
|
+
${this.errorAction?ue`
|
|
585
581
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
586
582
|
${this.errorAction}
|
|
587
583
|
</button>
|
|
588
584
|
`:""}
|
|
589
585
|
</div>
|
|
590
586
|
`:""}
|
|
591
|
-
${(()=>{let
|
|
592
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
593
|
-
<div class="card section" style="width:380px;border-radius:12px">
|
|
594
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
595
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
596
|
-
${e.map(t=>{let i=this.getWalletId(t),r=this.getWalletLabel(t),n=this.getWalletIcon(t);return Q`
|
|
597
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(i)}>
|
|
598
|
-
${n?Q`<img src="${n}" alt="${r}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
599
|
-
<span>${r}</span>
|
|
600
|
-
</button>`})}
|
|
601
|
-
</div>
|
|
602
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
603
|
-
Cancel
|
|
604
|
-
</button>
|
|
605
|
-
</div>
|
|
606
|
-
</div>
|
|
607
|
-
`:null})()}
|
|
587
|
+
${(()=>{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}})})()}
|
|
608
588
|
</div>
|
|
609
|
-
`:
|
|
589
|
+
`:ue`<div class="card section">Loading...</div>`}};g.styles=[E,it`
|
|
610
590
|
.container { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
|
|
611
591
|
.title { color: var(--icpay-text); font-weight: 700; margin-bottom: 8px; }
|
|
612
592
|
.preview { color: var(--icpay-muted); margin-bottom: 12px; line-height: 1.6; }
|
|
@@ -638,11 +618,11 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
638
618
|
border-color: rgba(239, 68, 68, 0.3);
|
|
639
619
|
color: #ef4444;
|
|
640
620
|
}
|
|
641
|
-
`],s([
|
|
621
|
+
`],s([be({type:Object})],g.prototype,"config",2),s([be({type:String})],g.prototype,"title",2),s([be({type:String})],g.prototype,"preview",2),s([be({type:String})],g.prototype,"lockedContent",2),s([R()],g.prototype,"selectedSymbol",2),s([R()],g.prototype,"unlocked",2),s([R()],g.prototype,"succeeded",2),s([R()],g.prototype,"processing",2),s([R()],g.prototype,"availableLedgers",2),s([R()],g.prototype,"errorMessage",2),s([R()],g.prototype,"errorSeverity",2),s([R()],g.prototype,"errorAction",2),s([R()],g.prototype,"walletConnected",2),s([R()],g.prototype,"pendingAction",2),s([R()],g.prototype,"showWalletModal",2),g=s([st("icpay-article-paywall")],g);import{LitElement as rt,html as se,css as nt}from"lit";import{customElement as ot,property as at,state as K}from"lit/decorators.js";var Ee=typeof window<"u",Se=null;function V(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var v=class extends rt{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}get cryptoOptions(){return this.config.cryptoOptions?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Ee&&(V(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(!(!Ee||!this.config?.publishableKey))try{let t=await d(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(Ee&&!this.processing){V(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){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 o=this.pnp.getEnabledWallets();if(V(this.config?.debug||!1,"Available wallets",o),!o?.length)throw new Error("No wallets available");this.pendingAction="order",this.showWalletModal=!0;return}catch(o){V(this.config?.debug||!1,"Wallet connection error:",o),this.errorMessage=o instanceof Error?o.message:"Wallet connection failed",this.errorSeverity="error";return}}V(this.config?.debug||!1,"Creating SDK for payment");let e=d(this.config),i=this.cryptoOptions.find(o=>o.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);V(this.config?.debug||!1,"Coffee order payment details",{item:this.selectedItem.name,priceUsd:this.selectedItem.priceUsd,selectedSymbol:this.selectedSymbol,canisterId:i});let r=await e.sendUsd(this.selectedItem.priceUsd,i,{context:"coffee",item:this.selectedItem.name});V(this.config?.debug||!1,"Coffee order payment completed",{resp:r}),this.config.onSuccess&&this.config.onSuccess({id:r.transactionId,status:r.status,item:this.selectedItem.name}),this.dispatchEvent(new CustomEvent("icpay-coffee",{detail:{item:this.selectedItem,tx:r},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(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:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="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?se`
|
|
642
622
|
<div class="card section">
|
|
643
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
623
|
+
${this.config?.progressBar?.enabled!==!1?se`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
644
624
|
<div class="menu">
|
|
645
|
-
${this.config.items.map((e,t)=>
|
|
625
|
+
${this.config.items.map((e,t)=>se`
|
|
646
626
|
<div class="item ${this.selectedIndex===t?"selected":""}" @click=${()=>this.selectItem(t)}>
|
|
647
627
|
<span>${e.name}</span>
|
|
648
628
|
<span>$${Number(e?.priceUsd??0).toFixed(2)}</span>
|
|
@@ -666,35 +646,19 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
666
646
|
${this.processing?"Processing\u2026":`Order ${this.selectedItem.name}`}
|
|
667
647
|
</button>
|
|
668
648
|
|
|
669
|
-
${this.errorMessage?
|
|
649
|
+
${this.errorMessage?se`
|
|
670
650
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
671
651
|
${this.errorMessage}
|
|
672
|
-
${this.errorAction?
|
|
652
|
+
${this.errorAction?se`
|
|
673
653
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
674
654
|
${this.errorAction}
|
|
675
655
|
</button>
|
|
676
656
|
`:""}
|
|
677
657
|
</div>
|
|
678
658
|
`:""}
|
|
679
|
-
${(()=>{let
|
|
680
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
681
|
-
<div class="card section" style="width:380px;border-radius:12px">
|
|
682
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
683
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
684
|
-
${e.map(t=>{let i=this.getWalletId(t),r=this.getWalletLabel(t),n=this.getWalletIcon(t);return z`
|
|
685
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(i)}>
|
|
686
|
-
${n?z`<img src="${n}" alt="${r}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
687
|
-
<span>${r}</span>
|
|
688
|
-
</button>`})}
|
|
689
|
-
</div>
|
|
690
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
691
|
-
Cancel
|
|
692
|
-
</button>
|
|
693
|
-
</div>
|
|
694
|
-
</div>
|
|
695
|
-
`:null})()}
|
|
659
|
+
${(()=>{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}})})()}
|
|
696
660
|
</div>
|
|
697
|
-
`:
|
|
661
|
+
`:se`<div class="card section">Loading...</div>`}};v.styles=[E,nt`
|
|
698
662
|
.menu { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
699
663
|
.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; }
|
|
700
664
|
.item.selected { background: var(--icpay-primary); color: #111827; border-color: var(--icpay-primary); }
|
|
@@ -725,14 +689,14 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
725
689
|
border-color: rgba(239, 68, 68, 0.3);
|
|
726
690
|
color: #ef4444;
|
|
727
691
|
}
|
|
728
|
-
`],s([
|
|
692
|
+
`],s([at({type:Object})],v.prototype,"config",2),s([K()],v.prototype,"selectedIndex",2),s([K()],v.prototype,"selectedSymbol",2),s([K()],v.prototype,"processing",2),s([K()],v.prototype,"availableLedgers",2),s([K()],v.prototype,"errorMessage",2),s([K()],v.prototype,"errorSeverity",2),s([K()],v.prototype,"errorAction",2),s([K()],v.prototype,"walletConnected",2),s([K()],v.prototype,"pendingAction",2),s([K()],v.prototype,"showWalletModal",2),v=s([ot("icpay-coffee-shop")],v);import{LitElement as lt,html as re,css as ct}from"lit";import{customElement as dt,property as pt,state as O}from"lit/decorators.js";var ke=typeof window<"u",ne=null;function H(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var u=class extends lt{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}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;ne||(ne=(await import("@windoge98/plug-n-play")).PNP);let i=new ne(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(),ke&&(H(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(!(!ke||!this.config?.publishableKey))try{let t=await d(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(ke&&!this.processing){H(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){H(this.config?.debug||!1,"Connecting to wallet via Plug N Play");try{ne||(ne=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new ne(this.config?.plugNPlay||{});let o=this.pnp.getEnabledWallets();if(H(this.config?.debug||!1,"Available wallets",o),!o?.length)throw new Error("No wallets available");this.pendingAction="donate",this.showWalletModal=!0;return}catch(o){H(this.config?.debug||!1,"Wallet connection error:",o),this.errorMessage=o instanceof Error?o.message:"Wallet connection failed",this.errorSeverity="error";return}}H(this.config?.debug||!1,"Creating SDK for payment");let e=d(this.config),i=this.cryptoOptions.find(o=>o.symbol===this.selectedSymbol).canisterId||await e.client.getLedgerCanisterIdBySymbol(this.selectedSymbol);H(this.config?.debug||!1,"Donation payment details",{amount:this.selectedAmount,selectedSymbol:this.selectedSymbol,canisterId:i});let r=await e.sendUsd(this.selectedAmount,i,{context:"donation"});H(this.config?.debug||!1,"Donation payment completed",{resp:r}),this.raised+=this.selectedAmount,this.succeeded=!0,this.config.onSuccess&&this.config.onSuccess({id:r.transactionId,status:r.status,raised:this.raised}),this.dispatchEvent(new CustomEvent("icpay-donation",{detail:{amount:this.selectedAmount,tx:r},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(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:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="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?re`
|
|
729
693
|
<div class="card section" style="text-align:center;">
|
|
730
|
-
${this.config?.progressBar?.enabled!==!1?
|
|
694
|
+
${this.config?.progressBar?.enabled!==!1?re`<icpay-progress-bar mode="${this.config?.progressBar?.mode||"modal"}"></icpay-progress-bar>`:null}
|
|
731
695
|
<div class="thermo"><div class="fill" style="height:${this.fillPercentage}%"></div></div>
|
|
732
696
|
<div class="total">$${Number(this.raised).toFixed(0)} / $${Number(this.config?.goalUsd??0).toFixed(2)}</div>
|
|
733
697
|
|
|
734
698
|
<div class="amounts">
|
|
735
|
-
${this.amounts.map(e=>
|
|
699
|
+
${this.amounts.map(e=>re`<div class="chip ${this.selectedAmount===e?"selected":""}" @click=${()=>this.selectAmount(e)}>$${e}</div>`)}
|
|
736
700
|
</div>
|
|
737
701
|
|
|
738
702
|
<div>
|
|
@@ -751,35 +715,19 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
751
715
|
${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)}
|
|
752
716
|
</button>
|
|
753
717
|
|
|
754
|
-
${this.errorMessage?
|
|
718
|
+
${this.errorMessage?re`
|
|
755
719
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
756
720
|
${this.errorMessage}
|
|
757
|
-
${this.errorAction?
|
|
721
|
+
${this.errorAction?re`
|
|
758
722
|
<button style="margin-left: 8px; padding: 4px 8px; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
759
723
|
${this.errorAction}
|
|
760
724
|
</button>
|
|
761
725
|
`:""}
|
|
762
726
|
</div>
|
|
763
727
|
`:""}
|
|
764
|
-
${(()=>{let
|
|
765
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
766
|
-
<div class="card section" style="width:380px;border-radius:12px">
|
|
767
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
768
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
769
|
-
${e.map(t=>{let i=this.getWalletId(t),r=this.getWalletLabel(t),n=this.getWalletIcon(t);return V`
|
|
770
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(i)}>
|
|
771
|
-
${n?V`<img src="${n}" alt="${r}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
772
|
-
<span>${r}</span>
|
|
773
|
-
</button>`})}
|
|
774
|
-
</div>
|
|
775
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
776
|
-
Cancel
|
|
777
|
-
</button>
|
|
778
|
-
</div>
|
|
779
|
-
</div>
|
|
780
|
-
`:null})()}
|
|
728
|
+
${(()=>{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}})})()}
|
|
781
729
|
</div>
|
|
782
|
-
`:
|
|
730
|
+
`:re`<div class="card section">Loading...</div>`}};u.styles=[E,ct`
|
|
783
731
|
.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; }
|
|
784
732
|
.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; }
|
|
785
733
|
.amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
|
|
@@ -811,54 +759,38 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
811
759
|
border-color: rgba(239, 68, 68, 0.3);
|
|
812
760
|
color: #ef4444;
|
|
813
761
|
}
|
|
814
|
-
`],s([
|
|
815
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
816
|
-
<div class="card" style="width:380px;padding:16px;border-radius:12px">
|
|
817
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
818
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
819
|
-
${e.map(t=>{let i=this.getWalletId(t),r=this.getWalletLabel(t),n=this.getWalletIcon(t);return H`
|
|
820
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(i)}>
|
|
821
|
-
${n?H`<img src="${n}" alt="${r}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
822
|
-
<span>${r}</span>
|
|
823
|
-
</button>`})}
|
|
824
|
-
</div>
|
|
825
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
826
|
-
Cancel
|
|
827
|
-
</button>
|
|
828
|
-
</div>
|
|
829
|
-
</div>
|
|
830
|
-
`}async pay(){if(!(!Se||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=d(this.config),i=this.selectedSymbol||"ICP",n=this.cryptoOptions.find(F=>F.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.config?.amountUsd??0),c={context:"pay-button"},h=await t.sendUsd(l,n,c);this.config.onSuccess&&this.config.onSuccess({id:h.transactionId,status:h.status}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-pay",{detail:{amount:l,tx:h},bubbles:!0}))}catch(e){k(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),$(t)&&(this.errorMessage=W(t),this.errorSeverity=C(t),this.errorAction=L(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return H`<div class="card section">Loading...</div>`;let t=(this.cryptoOptions?.length||0)>1,i=this.config?.showLedgerDropdown,r=i==="dropdown"?"dropdown":i==="none"?"none":"buttons",n=r!=="none"&&(t||r==="dropdown"),l=r==="dropdown"?"dropdown":t?"buttons":"none",c=this.selectedSymbol||this.config?.defaultSymbol||"ICP",h=typeof this.config?.amountUsd=="number"?`${Number(this.config.amountUsd).toFixed(2)}`:"",q=(this.config?.buttonLabel||(typeof this.config?.amountUsd=="number"?"Pay ${amount} with {symbol}":"Pay with {symbol}")).replace("{amount}",h||"$0.00").replace("{symbol}",c),ee=this.config?.progressBar?.enabled!==!1;return H`
|
|
762
|
+
`],s([pt({type:Object})],u.prototype,"config",2),s([O()],u.prototype,"selectedAmount",2),s([O()],u.prototype,"selectedSymbol",2),s([O()],u.prototype,"raised",2),s([O()],u.prototype,"processing",2),s([O()],u.prototype,"succeeded",2),s([O()],u.prototype,"availableLedgers",2),s([O()],u.prototype,"errorMessage",2),s([O()],u.prototype,"errorSeverity",2),s([O()],u.prototype,"errorAction",2),s([O()],u.prototype,"walletConnected",2),s([O()],u.prototype,"pendingAction",2),s([O()],u.prototype,"showWalletModal",2),u=s([dt("icpay-donation-thermometer")],u);import{LitElement as gt,html as oe,css as ht}from"lit";import{customElement as ut,property as ft,state as B}from"lit/decorators.js";var We=typeof window<"u",Ce=null;function fe(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var w=class extends gt{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.pnp=null}get cryptoOptions(){return this.config?.cryptoOptions?.length?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),We&&(fe(this.config?.debug||!1,"Pay button connected",{config:this.config}),this.config?.cryptoOptions&&this.config.cryptoOptions.length>0||this.loadVerifiedLedgers(),this.config?.defaultSymbol&&(this.selectedSymbol=this.config.defaultSymbol))}updated(e){if(e.has("config")&&this.pendingAction&&this.config?.actorProvider){let t=this.pendingAction;this.pendingAction=null;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:"external"}}))}catch{}setTimeout(()=>{t==="pay"&&this.pay()},0)}}async loadVerifiedLedgers(){if(!(!We||!this.config?.publishableKey))try{let t=await d(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")}}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{Ce||(Ce=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new Ce(this.config?.plugNPlay||{});let e=this.pnp.getEnabledWallets();if(fe(this.config?.debug||!1,"Available wallets",e),!e?.length)throw new Error("No wallets available");return this.pendingAction="pay",this.showWalletModal=!0,!1}catch(e){return this.errorMessage=e instanceof Error?e.message:"Wallet connection failed",this.errorSeverity="error",!1}}getWalletId(e){return e&&(e.id||e.provider||e.key)||""}getWalletLabel(e){return e&&(e.label||e.name||e.title||e.id)||"Wallet"}getWalletIcon(e){return e&&(e.icon||e.logo||e.image)||null}async connectWithWallet(e){if(this.pnp)try{if(fe(this.config?.debug||!1,"Connecting to wallet",{walletId:e}),!e)throw new Error("No wallet ID provided");let t=await this.pnp.connect(e);if(fe(this.config?.debug||!1,"Wallet connect result",t),!!!(t&&(t.connected===!0||t.principal||t.owner||this.pnp?.account)))throw new Error("Wallet connection was rejected");this.walletConnected=!0;try{window.dispatchEvent(new CustomEvent("icpay-sdk-wallet-connected",{detail:{walletType:e}}))}catch{}this.config={...this.config,connectedWallet:t,actorProvider:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="pay"&&setTimeout(()=>this.pay(),0)}catch(t){fe(this.config?.debug||!1,"Wallet connection error",t),this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}renderWalletModal(){if(!this.showWalletModal||!this.pnp)return null;let t=(this.pnp.getEnabledWallets()||[]).map(i=>({id:this.getWalletId(i),label:this.getWalletLabel(i),icon:this.getWalletIcon(i)}));return $({visible:this.showWalletModal,wallets:t,isConnecting:!1,onSelect:i=>this.connectWithWallet(i),onClose:()=>{this.showWalletModal=!1}})}async pay(){if(!(!We||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=d(this.config),i=this.selectedSymbol||"ICP",o=this.cryptoOptions.find(A=>A.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.config?.amountUsd??0),c={context:"pay-button"},b=await t.sendUsd(l,o,c);this.config.onSuccess&&this.config.onSuccess({id:b.transactionId,status:b.status}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-pay",{detail:{amount:l,tx:b},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return oe`<div class="card section">Loading...</div>`;let t=(this.cryptoOptions?.length||0)>1,i=this.config?.showLedgerDropdown,r=i==="dropdown"?"dropdown":i==="none"?"none":"buttons",o=r!=="none"&&(t||r==="dropdown"),l=r==="dropdown"?"dropdown":t?"buttons":"none",c=this.selectedSymbol||this.config?.defaultSymbol||"ICP",b=typeof this.config?.amountUsd=="number"?`${Number(this.config.amountUsd).toFixed(2)}`:"",ae=(this.config?.buttonLabel||(typeof this.config?.amountUsd=="number"?"Pay ${amount} with {symbol}":"Pay with {symbol}")).replace("{amount}",b||"$0.00").replace("{symbol}",c),le=this.config?.progressBar?.enabled!==!1;return oe`
|
|
831
763
|
<div class="card section">
|
|
832
|
-
${
|
|
764
|
+
${le?oe`
|
|
833
765
|
<icpay-progress-bar></icpay-progress-bar>
|
|
834
766
|
`:null}
|
|
835
767
|
|
|
836
|
-
<div class="row ${
|
|
837
|
-
${
|
|
768
|
+
<div class="row ${o?"":"single"}">
|
|
769
|
+
${o?oe`
|
|
838
770
|
<icpay-token-selector
|
|
839
771
|
.options=${this.cryptoOptions}
|
|
840
772
|
.value=${this.selectedSymbol||""}
|
|
841
773
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
842
774
|
mode=${l}
|
|
843
|
-
@icpay-token-change=${
|
|
775
|
+
@icpay-token-change=${F=>this.selectSymbol(F.detail.symbol)}
|
|
844
776
|
></icpay-token-selector>
|
|
845
777
|
`:null}
|
|
846
778
|
<button class="pay-button ${this.processing?"processing":""}"
|
|
847
779
|
?disabled=${this.processing||this.config?.disablePaymentButton===!0||this.succeeded&&this.config?.disableAfterSuccess===!0}
|
|
848
780
|
@click=${()=>this.pay()}>
|
|
849
|
-
${this.succeeded&&this.config?.disableAfterSuccess?"Paid":this.processing?"Processing\u2026":
|
|
781
|
+
${this.succeeded&&this.config?.disableAfterSuccess?"Paid":this.processing?"Processing\u2026":ae}
|
|
850
782
|
</button>
|
|
851
783
|
</div>
|
|
852
784
|
|
|
853
|
-
${this.errorMessage?
|
|
785
|
+
${this.errorMessage?oe`
|
|
854
786
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
855
787
|
${this.errorMessage}
|
|
856
|
-
${this.errorAction?
|
|
788
|
+
${this.errorAction?oe`<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>`:""}
|
|
857
789
|
</div>
|
|
858
790
|
`:""}
|
|
859
791
|
${this.renderWalletModal()}
|
|
860
792
|
</div>
|
|
861
|
-
`}};w.styles=[
|
|
793
|
+
`}};w.styles=[E,ht`
|
|
862
794
|
.row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
|
|
863
795
|
.row.single { grid-template-columns: 1fr; }
|
|
864
796
|
select { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); color: var(--icpay-text); border-radius: 8px; padding: 10px; font-weight: 600; }
|
|
@@ -866,22 +798,22 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
866
798
|
.error-message.info { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #3b82f6; }
|
|
867
799
|
.error-message.warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
|
|
868
800
|
.error-message.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
|
|
869
|
-
`],s([
|
|
801
|
+
`],s([ft({type:Object})],w.prototype,"config",2),s([B()],w.prototype,"selectedSymbol",2),s([B()],w.prototype,"processing",2),s([B()],w.prototype,"succeeded",2),s([B()],w.prototype,"availableLedgers",2),s([B()],w.prototype,"errorMessage",2),s([B()],w.prototype,"errorSeverity",2),s([B()],w.prototype,"errorAction",2),s([B()],w.prototype,"walletConnected",2),s([B()],w.prototype,"pendingAction",2),s([B()],w.prototype,"showWalletModal",2),w=s([ut("icpay-pay-button")],w);import{LitElement as yt,html as G,css as mt}from"lit";import{customElement as bt,property as vt,state as I}from"lit/decorators.js";var Le=typeof window<"u",$e=null;function wt(n,a,e){n&&(e!==void 0?console.log(`[ICPay Widget] ${a}`,e):console.log(`[ICPay Widget] ${a}`))}var f=class extends yt{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.pnp=null}get cryptoOptions(){return this.config?.cryptoOptions?.length?this.config.cryptoOptions:this.availableLedgers}connectedCallback(){super.connectedCallback(),Le&&(wt(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(!(!Le||!this.config?.publishableKey))try{let t=await d(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)),r=Math.round(i/t)*t;this.amountUsd=Number(r.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($e||($e=(await import("@windoge98/plug-n-play")).PNP),this.pnp=new $e(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:(o,l)=>this.pnp.getActor({canisterId:o,idl:l,requiresSigning:!0,anon:!1})},this.showWalletModal=!1;let r=this.pendingAction;this.pendingAction=null,r==="pay"&&setTimeout(()=>this.pay(),0)}catch(t){this.errorMessage=t instanceof Error?t.message:"Wallet connection failed",this.errorSeverity="error",this.showWalletModal=!1}}async pay(){if(!(!Le||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=d(this.config),i=this.selectedSymbol||"ICP",o=this.cryptoOptions.find(A=>A.symbol===i)?.canisterId||await t.client.getLedgerCanisterIdBySymbol(i),l=Number(this.amountUsd),c={context:"amount-input"},b=await t.sendUsd(l,o,c);this.config.onSuccess&&this.config.onSuccess({id:b.transactionId,status:b.status,amountUsd:l}),this.succeeded=!0,this.dispatchEvent(new CustomEvent("icpay-amount-pay",{detail:{amount:l,tx:b},bubbles:!0}))}catch(e){S(e,{onError:t=>{this.dispatchEvent(new CustomEvent("icpay-error",{detail:t,bubbles:!0})),W(t)&&(this.errorMessage=k(t),this.errorSeverity=L(t),this.errorAction=C(t))}})}finally{this.processing=!1}}}render(){if(!this.config)return G`<div class="card 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"),r=this.config?.showLedgerDropdown===!0,o=this.cryptoOptions.find(D=>D.symbol===(this.selectedSymbol||""))?.label||this.cryptoOptions[0]?.label||this.config?.defaultSymbol||"ICP",l=this.config?.progressBar?.mode||"modal",c=this.config?.showLedgerDropdown,b=c==="buttons"?"buttons":c==="none"?"none":"dropdown",ae=this.config?.progressBar?.enabled!==!1&&(l==="modal"?!0:this.processing);return G`
|
|
870
802
|
<div class="card section">
|
|
871
|
-
${
|
|
803
|
+
${ae?G`<icpay-progress-bar mode="${l}"></icpay-progress-bar>`:null}
|
|
872
804
|
|
|
873
805
|
<div class="row">
|
|
874
|
-
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${
|
|
875
|
-
${
|
|
806
|
+
<input type="number" min="0" step="${Number(this.config?.stepUsd??.5)}" .value=${String(this.amountUsd||"")} placeholder="${e}" @input=${D=>this.onInputChange(D)} />
|
|
807
|
+
${b!=="none"?G`
|
|
876
808
|
<icpay-token-selector
|
|
877
809
|
.options=${this.cryptoOptions}
|
|
878
810
|
.value=${this.selectedSymbol||""}
|
|
879
811
|
.defaultSymbol=${this.config?.defaultSymbol||"ICP"}
|
|
880
|
-
mode=${
|
|
881
|
-
@icpay-token-change=${
|
|
812
|
+
mode=${b}
|
|
813
|
+
@icpay-token-change=${D=>this.selectSymbol(D.detail.symbol)}
|
|
882
814
|
></icpay-token-selector>
|
|
883
|
-
`:
|
|
884
|
-
<div class="label" style="padding: 10px;">${
|
|
815
|
+
`:G`
|
|
816
|
+
<div class="label" style="padding: 10px;">${o}</div>
|
|
885
817
|
`}
|
|
886
818
|
<button class="pay-button ${this.processing?"processing":""}"
|
|
887
819
|
?disabled=${this.processing||this.config?.disablePaymentButton===!0||this.succeeded&&this.config?.disableAfterSuccess===!0}
|
|
@@ -891,31 +823,15 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
891
823
|
</div>
|
|
892
824
|
<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>
|
|
893
825
|
|
|
894
|
-
${this.errorMessage?
|
|
826
|
+
${this.errorMessage?G`
|
|
895
827
|
<div class="error-message ${this.errorSeverity}" style="margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 14px; text-align: center;">
|
|
896
828
|
${this.errorMessage}
|
|
897
|
-
${this.errorAction?
|
|
829
|
+
${this.errorAction?G`<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>`:""}
|
|
898
830
|
</div>
|
|
899
831
|
`:""}
|
|
900
|
-
${(()=>{let
|
|
901
|
-
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:9999">
|
|
902
|
-
<div class="card" style="width:380px;padding:16px;border-radius:12px">
|
|
903
|
-
<div class="label" style="font-weight:700;margin-bottom:12px;text-align:center">Choose Wallet</div>
|
|
904
|
-
<div style="display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px">
|
|
905
|
-
${A.map(ee=>{let le=this.getWalletId(ee),_=this.getWalletLabel(ee),E=this.getWalletIcon(ee);return K`
|
|
906
|
-
<button class="pay-button" style="display:flex;align-items:center;gap:10px;justify-content:center;padding:12px" @click=${()=>this.connectWithWallet(le)}>
|
|
907
|
-
${E?K`<img src="${E}" alt="${_}" style="width:20px;height:20px;border-radius:4px;object-fit:contain;background:transparent" />`:""}
|
|
908
|
-
<span>${_}</span>
|
|
909
|
-
</button>`})}
|
|
910
|
-
</div>
|
|
911
|
-
<button class="pay-button" style="background:#6b7280;color:#f9fafb" @click=${()=>{this.showWalletModal=!1}}>
|
|
912
|
-
Cancel
|
|
913
|
-
</button>
|
|
914
|
-
</div>
|
|
915
|
-
</div>
|
|
916
|
-
`:null})()}
|
|
832
|
+
${(()=>{let le=(this.pnp?.getEnabledWallets?.()||[]).map(F=>({id:this.getWalletId(F),label:this.getWalletLabel(F),icon:this.getWalletIcon(F)}));return $({visible:!!(this.showWalletModal&&this.pnp),wallets:le,isConnecting:!1,onSelect:F=>this.connectWithWallet(F),onClose:()=>{this.showWalletModal=!1}})})()}
|
|
917
833
|
</div>
|
|
918
|
-
`}};
|
|
834
|
+
`}};f.styles=[E,mt`
|
|
919
835
|
.row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
|
|
920
836
|
input[type="number"] { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); color: var(--icpay-text); border-radius: 8px; padding: 10px; font-weight: 600; }
|
|
921
837
|
select { background: var(--icpay-surface-alt); border: 1px solid var(--icpay-border); color: var(--icpay-text); border-radius: 8px; padding: 10px; font-weight: 600; }
|
|
@@ -924,5 +840,5 @@ var Ne=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var s=(o,a,e
|
|
|
924
840
|
.error-message.warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
|
|
925
841
|
.error-message.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
|
|
926
842
|
.hint { font-size: 12px; color: var(--icpay-muted); margin-top: 6px; }
|
|
927
|
-
`],s([
|
|
843
|
+
`],s([vt({type:Object})],f.prototype,"config",2),s([I()],f.prototype,"amountUsd",2),s([I()],f.prototype,"hasUserAmount",2),s([I()],f.prototype,"selectedSymbol",2),s([I()],f.prototype,"processing",2),s([I()],f.prototype,"succeeded",2),s([I()],f.prototype,"availableLedgers",2),s([I()],f.prototype,"errorMessage",2),s([I()],f.prototype,"errorSeverity",2),s([I()],f.prototype,"errorAction",2),s([I()],f.prototype,"walletConnected",2),s([I()],f.prototype,"pendingAction",2),s([I()],f.prototype,"showWalletModal",2),f=s([bt("icpay-amount-input")],f);export{f as ICPayAmountInput,g as ICPayArticlePaywall,v as ICPayCoffeeShop,u as ICPayDonationThermometer,w as ICPayPayButton,m as ICPayPremiumContent,h as ICPayTipJar,Q as applyThemeVars,E as baseStyles,d as createSdk};
|
|
928
844
|
//# sourceMappingURL=index.js.map
|