atlas-react-widget 0.0.1

package/dist/style.css

@@ -0,0 +1 @@
+.atlas-container{background-color:#1f1f1f;padding:20px;color:#fff;font-family:Inter,system-ui,sans-serif;box-shadow:0 4px 20px #0000004d}.atlas-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.atlas-total{font-size:16px;color:#e0e0e0}.atlas-total span{color:#f2b300;font-weight:600}.atlas-divider{height:1px;background-color:#3a3a3a;margin:24px 0}.atlas-form{width:100%}.atlas-form-group{margin-bottom:24px}.atlas-label{display:block;margin-bottom:10px;font-size:16px;color:#fff;font-weight:500}.atlas-input{width:100%;padding:12px;border-radius:8px;border:1px solid #3a3a3a;background-color:#fbf6ea;font-size:16px;outline:none;transition:border-color .2s ease;color:#1f1f1f;box-sizing:border-box}.atlas-input:focus{border-color:#f2b300}.atlas-input::placeholder{color:#9b9b9b}.atlas-input:disabled{opacity:.6;cursor:not-allowed}.atlas-form-actions{margin-top:32px}.atlas-pay-button{width:100%;padding:16px;border-radius:12px;background-color:#f2b300;color:#1f1f1f;font-size:18px;font-weight:700;border:none;cursor:pointer;transition:all .2s ease;text-transform:capitalize;font-family:inherit}.atlas-pay-button:hover:not(:disabled){background-color:#ffc933;transform:translateY(-1px)}.atlas-pay-button:active:not(:disabled){transform:translateY(0)}.atlas-pay-button:disabled{opacity:.5;cursor:not-allowed}.atlas-payment-button{padding:14px 28px;border-radius:12px;background-color:#f2b300;color:#1f1f1f;font-size:16px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;font-family:Inter,system-ui,sans-serif;text-transform:capitalize}.atlas-payment-button:hover:not(:disabled){background-color:#ffc933;transform:translateY(-1px);box-shadow:0 4px 12px #f2b3004d}.atlas-payment-button:active:not(:disabled){transform:translateY(0)}.atlas-payment-button:disabled{opacity:.5;cursor:not-allowed}.atlas-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.atlas-modal{background-color:#1f1f1f;border-radius:20px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0006;animation:atlas-modal-enter .3s ease;scrollbar-width:none;-ms-overflow-style:none}@keyframes atlas-modal-enter{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.atlas-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #3a3a3a}.atlas-modal-header h3{margin:0;font-size:20px;font-weight:600;color:#fff}.atlas-modal-close{background:none;border:none;color:#9b9b9b;font-size:32px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.atlas-modal-header2{display:flex;gap:5px;align-items:center}.atlas-modal-close:hover{background-color:#3a3a3a;color:#fff}.atlas-status-wrapper{display:flex;flex-direction:column;gap:16px}.atlas-payment-status{padding:20px;border-radius:12px;margin-bottom:16px}.atlas-status-processing{background-color:#f2b3001a;border:1px solid rgba(242,179,0,.3)}.atlas-status-success{background-color:#2ecc711a;border:1px solid rgba(46,204,113,.3)}.atlas-status-error{background-color:#e74c3c1a;border:1px solid rgba(231,76,60,.3)}.atlas-status-content{display:flex;align-items:center;gap:16px}.atlas-spinner{width:24px;height:24px}.atlas-spinner-circle{width:100%;height:100%;border:3px solid rgba(242,179,0,.3);border-top-color:#f2b300;border-radius:50%;animation:atlas-spin 1s linear infinite}.atlas-status-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}.atlas-success{background-color:#2ecc71;color:#fff}.atlas-error{background-color:#e74c3c;color:#fff}.atlas-status-text{flex:1}.atlas-status-message{margin:0 0 8px;font-size:16px;font-weight:500;color:#fff}.atlas-transaction-hash{margin:0;font-size:14px;color:#9b9b9b;font-family:monospace}.atlas-error-message{margin:8px 0 0;font-size:14px;color:#ff6b6b}.atlas-secondary-button{background:transparent;color:#f2b300;border:2px solid #f2b300;padding:14px;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;transition:all .2s ease;font-family:inherit;width:100%}.atlas-secondary-button:hover{background-color:#f2b3001a}.atlas-secondary-button:active{transform:translateY(0)}@media (max-width: 480px){.atlas-container{padding:16px;border-radius:12px}.atlas-modal{width:95%;max-height:85vh;border-radius:16px}.atlas-modal-header{padding:16px}.atlas-payment-button{padding:12px 24px;font-size:15px}.atlas-pay-button{padding:14px;font-size:16px}}.atlas-input:focus-visible,.atlas-pay-button:focus-visible,.atlas-payment-button:focus-visible,.atlas-modal-close:focus-visible,.atlas-secondary-button:focus-visible{outline:2px solid #f2b300;outline-offset:2px}.atlas-modal::-webkit-scrollbar{display:none}.atlas-form-group.required .atlas-label:after{content:" *";color:#e74c3c}.atlas-input.error{border-color:#e74c3c;background-color:#e74c3c0d}.atlas-help-text{font-size:14px;color:#9b9b9b;margin-top:6px;display:block}.atlas-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.atlas-loading p{color:#9b9b9b;margin:16px 0 0}.atlas-loading .atlas-spinner{width:40px;height:40px;border:3px solid rgba(242,179,0,.3);border-top-color:#f2b300;border-radius:50%;animation:atlas-spin 1s linear infinite;margin-bottom:0}@keyframes atlas-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.atlas-error-state{padding:40px 20px;text-align:center;background-color:#e74c3c0d;border-radius:12px;border:1px solid rgba(231,76,60,.3)}.atlas-error-icon{font-size:48px;margin-bottom:16px;color:#e74c3c}.atlas-error-state h3{margin:0 0 8px;color:#e74c3c;font-size:18px;font-weight:600}.atlas-error-state p{color:#9b9b9b;margin-bottom:20px}.atlas-error-state .atlas-secondary-button{background:transparent;color:#e74c3c;border:2px solid #e74c3c;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.atlas-error-state .atlas-secondary-button:hover{background-color:#e74c3c1a}.atlas-amount-display-section{background:#f2b3001a;border:1px solid rgba(242,179,0,.3);border-radius:12px;padding:10px;margin:24px 0}.atlas-amount-main{display:flex;justify-content:space-between;align-items:center}.atlas-amount-label{color:#f2b300;font-weight:600;font-size:16px}.atlas-amount-value{font-size:28px;font-weight:700;color:#fff}.atlas-amount-token{font-size:16px;color:#f2b300;margin-left:4px}.atlas-amount-hint{color:#9b9b9b;font-size:13px;text-align:center;line-height:1.4}.atlas-payment-type-badge{display:inline-block;padding:6px 14px;background:#f2b30033;color:#f2b300;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.atlas-validation-info{background:#3a3a3a80;border:1px solid #3a3a3a;border-radius:12px;padding:20px;margin-bottom:24px}.atlas-info-section h4{margin:0 0 16px;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.atlas-info-grid{display:grid;gap:14px}.atlas-info-item{display:flex;justify-content:space-between;align-items:flex-start}.atlas-info-label{color:#9b9b9b;font-size:13px;font-weight:500;flex-shrink:0;margin-right:12px}.atlas-info-value{color:#fff;font-size:13px;font-family:SF Mono,Monaco,Inconsolata,monospace;font-weight:500;text-align:right;word-break:break-all}.atlas-merchant-info{background:#3a3a3a80;border:1px solid #3a3a3a;border-radius:12px;padding:20px;margin-bottom:24px}.atlas-merchant-info .atlas-info-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(58,58,58,.8)}.atlas-merchant-info .atlas-info-item:last-child{border-bottom:none;padding-bottom:0}.atlas-merchant-info .atlas-info-item:first-child{padding-top:0}.atlas-merchant-info .atlas-info-label{color:#b0b0b0;font-size:14px}.atlas-merchant-info .atlas-info-value{color:#fff;font-size:14px;font-weight:500}.atlas-hint{display:block;font-size:12px;color:#9b9b9b;margin-top:6px;line-height:1.4}.atlas-warning{background:#f2b3001a;border:1px solid rgba(242,179,0,.3);border-radius:8px;padding:12px;margin:16px 0;color:#f2b300;font-size:13px;display:flex;align-items:center;gap:8px}.atlas-warning:before{content:"⚠️";font-size:16px}.atlas-info-grid{display:flex;flex-direction:column;gap:12px}.atlas-network-label{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#3a3a3acc;border-radius:6px;font-size:12px;color:#9b9b9b}.atlas-network-label:before{content:"🌐";font-size:12px}.atlas-success-message{display:flex;align-items:center;gap:10px;padding:12px;background:#2ecc711a;border:1px solid rgba(46,204,113,.3);border-radius:8px;color:#2ecc71;font-size:14px;margin:16px 0}.atlas-success-message:before{content:"✓";font-weight:700;font-size:16px}.atlas-info-message{display:flex;align-items:center;gap:10px;padding:12px;background:#3498db1a;border:1px solid rgba(52,152,219,.3);border-radius:8px;color:#3498db;font-size:14px;margin:16px 0}.atlas-info-message:before{content:"ℹ️";font-size:14px}.atlas-token-select{width:100%;padding:12px 40px 12px 12px;border-radius:8px;border:1px solid #3a3a3a;background-color:#fbf6ea1a;font-size:16px;outline:none;transition:border-color .2s ease;color:#fff;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}.atlas-token-select:focus{border-color:#f2b300;background-color:#fbf6ea26}.atlas-token-select:disabled{opacity:.6;cursor:not-allowed}.atlas-token-select option{background-color:#1f1f1f;color:#fff}@media (max-width: 480px){.atlas-validation-info,.atlas-merchant-info,.atlas-amount-display-section{padding:16px;margin-bottom:20px}.atlas-amount-value{font-size:24px}.atlas-info-label,.atlas-info-value{font-size:12px}.atlas-payment-type-badge{padding:4px 10px;font-size:11px}}.atlas-token-select:focus-visible{outline:2px solid #f2b300;outline-offset:2px}

package/dist/types/index.d.ts

@@ -0,0 +1,51 @@
+export interface PaymentWidgetConfig {
+    pimlicoApiKey: string;
+    chainId?: number;
+    apiBaseUrl?: string;
+}
+export interface PaymentOptions {
+    cardIdentifier: string;
+    merchantIdentifier: string;
+    amount: string;
+    token: string;
+    tokenAddress?: `0x${string}`;
+}
+export interface PaymentStatus {
+    status: "idle" | "processing" | "success" | "error";
+    message?: string;
+    transactionHash?: string;
+    error?: string;
+}
+export interface PaymentWidgetProps {
+    config: PaymentWidgetConfig;
+    merchantPaymentAddress: string;
+    amount?: string;
+    onSuccess?: (receipt: any) => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    buttonText?: string;
+    disabled?: boolean;
+}
+export type PaymentType = "one_time_payment" | "delegate";
+export interface PaymentRequest {
+    authKey: string;
+    merchantPaymentAddress: string;
+    amount: string;
+    paymentType: PaymentType;
+}
+export interface ValidationResponse {
+    valid: boolean;
+    userAddress?: string;
+    cardId?: string;
+    businessAddress?: string;
+    grantedScopes?: string[];
+    metadata?: any;
+    authKeyId?: string;
+    error?: string;
+}
+export interface DecryptedCredentials {
+    address: string;
+    eoaAddress: string;
+    passkeyCredential: any;
+    identifier: string;
+}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "atlas-react-widget",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "dist/style.css"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite",
+    "lint": "eslint . --ext .ts,.tsx",
+    "test": "jest",
+    "watch": "tsc -p tsconfig.build.json --watch & vite build --watch"
+  },
+  "dependencies": {
+    "@metamask/smart-accounts-kit": "^0.3.0",
+    "permissionless": "^0.3.2",
+    "viem": "^2.39.3"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@vitejs/plugin-react": "^4",
+    "eslint": "^8",
+    "eslint-config-react": "^1.1.7",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5",
+    "vite": "^5",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}