@0xsequence/checkout 0.0.0-20250314205219

package/dist/types/utils/transak.d.ts

@@ -0,0 +1,7 @@
+import { AddFundsSettings } from '../contexts';
+export declare const TRANSAK_API_KEY = "5911d9ec-46b5-48fa-a755-d59a715ff0cf";
+export declare const TRANSAK_API_KEY_STAGING = "c20f2a0e-fe6a-4133-8fa7-77e9f84edf98";
+export declare const TRANSAK_PROXY_ADDRESS = "0x4a598b7ec77b1562ad0df7dc64a162695ce4c78a";
+export declare const getTransakLink: (addFundsSettings: AddFundsSettings) => string;
+export declare const fetchTransakSupportedCountries: () => Promise<string[]>;
+//# sourceMappingURL=transak.d.ts.map

package/dist/types/utils/transak.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transak.d.ts","sourceRoot":"","sources":["../../../src/utils/transak.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,eAAO,MAAM,eAAe,yCAAyC,CAAA;AACrE,eAAO,MAAM,uBAAuB,yCAAyC,CAAA;AAC7E,eAAO,MAAM,qBAAqB,+CAA+C,CAAA;AAKjF,eAAO,MAAM,cAAc,GAAI,kBAAkB,gBAAgB,WAgChE,CAAA;AAuBD,eAAO,MAAM,8BAA8B,yBAK1C,CAAA"}

package/dist/types/views/AddFunds.d.ts

@@ -0,0 +1,2 @@
+export declare const AddFundsContent: () => import("react/jsx-runtime").JSX.Element | undefined;
+//# sourceMappingURL=AddFunds.d.ts.map

package/dist/types/views/AddFunds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddFunds.d.ts","sourceRoot":"","sources":["../../../src/views/AddFunds.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,eAAe,2DA+C3B,CAAA"}

package/dist/types/views/CheckoutSelection/component/OrderSummaryItem.d.ts

@@ -0,0 +1,10 @@
+interface OrderSummaryItem {
+    contractAddress: string;
+    tokenId: string;
+    quantityRaw: string;
+    chainId: number;
+}
+export declare const OrderSummaryItem: ({ contractAddress, tokenId, quantityRaw, chainId }: OrderSummaryItem) => import("react/jsx-runtime").JSX.Element;
+export declare const OrderSummarySkeleton: () => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OrderSummaryItem.d.ts.map

package/dist/types/views/CheckoutSelection/component/OrderSummaryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummaryItem.d.ts","sourceRoot":"","sources":["../../../../../src/views/CheckoutSelection/component/OrderSummaryItem.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,gBAAgB,GAAI,oDAAoD,gBAAgB,4CAsDpG,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAahC,CAAA"}

package/dist/types/views/CheckoutSelection/index.d.ts

@@ -0,0 +1,2 @@
+export declare const CheckoutSelection: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/CheckoutSelection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/CheckoutSelection/index.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,iBAAiB,+CAyL7B,CAAA"}

package/dist/types/views/PaymentSelection/Footer.d.ts

@@ -0,0 +1,2 @@
+export declare const Footer: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/types/views/PaymentSelection/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/views/PaymentSelection/Footer.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,+CAkClB,CAAA"}

package/dist/types/views/PaymentSelection/OrderSummary/Price.d.ts

@@ -0,0 +1,2 @@
+export declare const Price: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Price.d.ts.map

package/dist/types/views/PaymentSelection/OrderSummary/Price.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../src/views/PaymentSelection/OrderSummary/Price.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK,+CA0DjB,CAAA"}

package/dist/types/views/PaymentSelection/OrderSummary/index.d.ts

@@ -0,0 +1,2 @@
+export declare const OrderSummary: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/PaymentSelection/OrderSummary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/PaymentSelection/OrderSummary/index.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,+CAwGxB,CAAA"}

package/dist/types/views/PaymentSelection/PayWithCreditCard/PaymentProviderOption.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+interface PaymentProviderOptionProps {
+    name: string;
+    onClick: () => void;
+    isSelected: boolean;
+    isRecommended: boolean;
+    logo: JSX.Element;
+}
+export declare const PaymentProviderOption: ({ name, onClick, isSelected, isRecommended, logo }: PaymentProviderOptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PaymentProviderOption.d.ts.map

package/dist/types/views/PaymentSelection/PayWithCreditCard/PaymentProviderOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentProviderOption.d.ts","sourceRoot":"","sources":["../../../../../src/views/PaymentSelection/PayWithCreditCard/PaymentProviderOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE3B,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,qBAAqB,GAAI,oDAAoD,0BAA0B,4CA0BnH,CAAA"}

package/dist/types/views/PaymentSelection/PayWithCreditCard/index.d.ts

@@ -0,0 +1,9 @@
+import { SelectPaymentSettings } from '../../../contexts';
+interface PayWithCreditCardProps {
+    settings: SelectPaymentSettings;
+    disableButtons: boolean;
+    skipOnCloseCallback: () => void;
+}
+export declare const PayWithCreditCard: ({ settings, disableButtons, skipOnCloseCallback }: PayWithCreditCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/PaymentSelection/PayWithCreditCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/PaymentSelection/PayWithCreditCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAIzD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,cAAc,EAAE,OAAO,CAAA;IACvB,mBAAmB,EAAE,MAAM,IAAI,CAAA;CAChC;AAMD,eAAO,MAAM,iBAAiB,GAAI,mDAAmD,sBAAsB,4CA4J1G,CAAA"}

package/dist/types/views/PaymentSelection/PayWithCreditCard/providers/SardineLogo.d.ts

@@ -0,0 +1,2 @@
+export declare const SardineLogo: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SardineLogo.d.ts.map

package/dist/types/views/PaymentSelection/PayWithCreditCard/providers/SardineLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SardineLogo.d.ts","sourceRoot":"","sources":["../../../../../../src/views/PaymentSelection/PayWithCreditCard/providers/SardineLogo.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,+CAUvB,CAAA"}

package/dist/types/views/PaymentSelection/PayWithCrypto/index.d.ts

@@ -0,0 +1,12 @@
+import { SetStateAction } from 'react';
+import { SelectPaymentSettings } from '../../../contexts';
+interface PayWithCryptoProps {
+    settings: SelectPaymentSettings;
+    disableButtons: boolean;
+    selectedCurrency: string | undefined;
+    setSelectedCurrency: React.Dispatch<SetStateAction<string | undefined>>;
+    isLoading: boolean;
+}
+export declare const PayWithCrypto: ({ settings, disableButtons, selectedCurrency, setSelectedCurrency, isLoading }: PayWithCryptoProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/PaymentSelection/PayWithCrypto/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/PaymentSelection/PayWithCrypto/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiC,cAAc,EAAE,MAAM,OAAO,CAAA;AAIrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,cAAc,EAAE,OAAO,CAAA;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAA;IACvE,SAAS,EAAE,OAAO,CAAA;CACnB;AAID,eAAO,MAAM,aAAa,GAAI,gFAM3B,kBAAkB,4CA8NpB,CAAA"}

package/dist/types/views/PaymentSelection/TransferFunds.d.ts

@@ -0,0 +1,2 @@
+export declare const TransferFunds: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransferFunds.d.ts.map

package/dist/types/views/PaymentSelection/TransferFunds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferFunds.d.ts","sourceRoot":"","sources":["../../../../src/views/PaymentSelection/TransferFunds.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,+CAyFzB,CAAA"}

package/dist/types/views/PaymentSelection/index.d.ts

@@ -0,0 +1,4 @@
+export declare const PaymentSelection: () => import("react/jsx-runtime").JSX.Element;
+export declare const PaymentSelectionHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const PaymentSelectionContent: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/PaymentSelection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/PaymentSelection/index.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,gBAAgB,+CAO5B,CAAA;AAED,eAAO,MAAM,sBAAsB,+CAElC,CAAA;AAED,eAAO,MAAM,uBAAuB,sDAqbnC,CAAA"}

package/dist/types/views/PendingCreditCardTransaction.d.ts

@@ -0,0 +1,8 @@
+interface PendingCreditTransactionProps {
+    skipOnCloseCallback: () => void;
+}
+export declare const PendingCreditCardTransaction: () => import("react/jsx-runtime").JSX.Element;
+export declare const PendingCreditCardTransactionTransak: ({ skipOnCloseCallback }: PendingCreditTransactionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PendingCreditCardTransactionSardine: ({ skipOnCloseCallback }: PendingCreditTransactionProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PendingCreditCardTransaction.d.ts.map

package/dist/types/views/PendingCreditCardTransaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PendingCreditCardTransaction.d.ts","sourceRoot":"","sources":["../../../src/views/PendingCreditCardTransaction.tsx"],"names":[],"mappings":"AAsBA,UAAU,6BAA6B;IACrC,mBAAmB,EAAE,MAAM,IAAI,CAAA;CAChC;AAED,eAAO,MAAM,4BAA4B,+CAiBxC,CAAA;AAED,eAAO,MAAM,mCAAmC,GAAI,yBAAyB,6BAA6B,4CA+MzG,CAAA;AAED,eAAO,MAAM,mCAAmC,GAAI,yBAAyB,6BAA6B,4CA8KzG,CAAA"}

package/dist/types/views/Swap/index.d.ts

@@ -0,0 +1,2 @@
+export declare const Swap: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/Swap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Swap/index.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,IAAI,+CAqRhB,CAAA"}

package/dist/types/views/TransactionError.d.ts

@@ -0,0 +1,3 @@
+export declare const TransactionError: () => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationErrorIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransactionError.d.ts.map

package/dist/types/views/TransactionError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionError.d.ts","sourceRoot":"","sources":["../../../src/views/TransactionError.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,+CA0B5B,CAAA;AAED,eAAO,MAAM,qBAAqB,+CAIjC,CAAA"}

package/dist/types/views/TransactionStatus/index.d.ts

@@ -0,0 +1,9 @@
+export type TxStatus = 'pending' | 'success' | 'error';
+interface TransactionStatusHeaderProps {
+    status: TxStatus;
+    noItemsToDisplay: boolean;
+}
+export declare const TransactionStatusHeader: ({ status, noItemsToDisplay }: TransactionStatusHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionStatus: () => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/TransactionStatus/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/TransactionStatus/index.tsx"],"names":[],"mappings":"AA4BA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,UAAU,4BAA4B;IACpC,MAAM,EAAE,QAAQ,CAAA;IAChB,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,uBAAuB,GAAI,8BAA8B,4BAA4B,4CAkCjG,CAAA;AAED,eAAO,MAAM,iBAAiB,+CAyQ7B,CAAA"}

package/dist/types/views/TransactionSuccess.d.ts

@@ -0,0 +1,3 @@
+export declare const TransactionSuccess: () => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationSuccessIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransactionSuccess.d.ts.map

package/dist/types/views/TransactionSuccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionSuccess.d.ts","sourceRoot":"","sources":["../../../src/views/TransactionSuccess.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB,+CAqC9B,CAAA;AAED,eAAO,MAAM,uBAAuB,+CAInC,CAAA"}

package/dist/types/views/TransferToWallet/CopyButton.d.ts

@@ -0,0 +1,10 @@
+import { Button } from '@0xsequence/design-system';
+import { ComponentProps } from 'react';
+type ButtonProps = ComponentProps<typeof Button>;
+interface CopyButtonProps extends ButtonProps {
+    text: string;
+    inline?: boolean;
+}
+export declare const CopyButton: (props: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CopyButton.d.ts.map

package/dist/types/views/TransferToWallet/CopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../../src/views/TransferToWallet/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2B,MAAM,2BAA2B,CAAA;AAC3E,OAAO,EAAuB,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3D,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;AAEhD,UAAU,eAAgB,SAAQ,WAAW;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAyBhD,CAAA"}

package/dist/types/views/TransferToWallet/QRCode.d.ts

@@ -0,0 +1,6 @@
+interface QRCodeProps {
+    value: string | undefined;
+}
+export declare const QRCode: (props: QRCodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=QRCode.d.ts.map

package/dist/types/views/TransferToWallet/QRCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../../src/views/TransferToWallet/QRCode.tsx"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAexC,CAAA"}

package/dist/types/views/TransferToWallet/index.d.ts

@@ -0,0 +1,2 @@
+export declare const TransferToWallet: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/TransferToWallet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/TransferToWallet/index.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB,+CA2B5B,CAAA"}

package/dist/types/views/index.d.ts

@@ -0,0 +1,10 @@
+export * from './PendingCreditCardTransaction';
+export * from './TransactionSuccess';
+export * from './TransactionError';
+export * from './CheckoutSelection';
+export * from './AddFunds';
+export * from './PaymentSelection';
+export * from './TransferToWallet';
+export * from './TransactionStatus';
+export * from './Swap';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@0xsequence/checkout",
+  "version": "0.0.0-20250314205219",
+  "description": "Checkout UI for Sequence Web SDK",
+  "repository": "https://github.com/0xsequence/web-sdk/tree/master/packages/checkout",
+  "author": "Horizon Blockchain Games",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@0xsequence/marketplace": "^2.1.3",
+    "pako": "^2.1.0",
+    "qrcode.react": "^4.0.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "timeago-react": "^3.0.6"
+  },
+  "peerDependencies": {
+    "0xsequence": ">= 2.2.13",
+    "@0xsequence/api": ">= 2.2.13",
+    "@0xsequence/design-system": ">= 2.0.4",
+    "@0xsequence/indexer": ">= 2.2.13",
+    "@0xsequence/metadata": ">= 2.2.13",
+    "@0xsequence/network": ">= 2.2.13",
+    "@0xsequence/waas": ">= 2.2.13",
+    "@tanstack/react-query": ">= 5",
+    "ethers": ">= 6.13.0",
+    "motion": ">= 12",
+    "react": ">= 17",
+    "react-dom": ">= 17",
+    "viem": ">= 2.0.0",
+    "wagmi": ">= 2.14.13",
+    "@0xsequence/connect": "0.0.0-20250314205219",
+    "@0xsequence/react-hooks": "0.0.0-20250314205219"
+  },
+  "devDependencies": {
+    "@0xsequence/design-system": "^2.0.9",
+    "@tanstack/react-query": "^5.62.0",
+    "@types/pako": "^2.0.3",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "ethers": "^6.13.0",
+    "motion": "^12.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "viem": "^2.23.10",
+    "vite": "^5.2.11",
+    "wagmi": "^2.14.13",
+    "@0xsequence/react-hooks": "0.0.0-20250314205219",
+    "@0xsequence/connect": "0.0.0-20250314205219"
+  },
+  "scripts": {
+    "build": "pnpm build:clean && pnpm build:esm && pnpm build:cjs && pnpm build:types",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs/",
+    "build:esm": "tsc --module es2022 --outDir dist/esm/",
+    "build:types": "tsc --declaration --declarationMap --emitDeclarationOnly --declarationDir dist/types/",
+    "build:clean": "rimraf -g ./dist",
+    "dev": "tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm/ --declarationDir dist/types/",
+    "test": "echo",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/api/data.ts

@@ -0,0 +1,194 @@
+import { DEBUG } from '@0xsequence/connect'
+import { TokenMetadata } from '@0xsequence/metadata'
+import { ChainId, networks } from '@0xsequence/network'
+
+import { CreditCardCheckout } from '../contexts'
+
+export interface FetchSardineClientTokenReturn {
+  token: string
+  orderId: string
+}
+
+export interface MethodArguments {
+  [key: string]: any
+}
+
+export interface FetchSardineClientTokenArgs {
+  order: CreditCardCheckout
+  projectAccessKey: string
+  tokenMetadata?: TokenMetadata
+}
+
+export const fetchSardineClientToken = async ({
+  order,
+  projectAccessKey,
+  tokenMetadata
+}: FetchSardineClientTokenArgs): Promise<FetchSardineClientTokenReturn> => {
+  // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
+  const accessKey = DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+  const url = DEBUG
+    ? 'https://dev-api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
+    : 'https://api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': `${accessKey || ''}`
+    },
+    body: JSON.stringify({
+      params: {
+        name: tokenMetadata?.name || 'Unknown',
+        imageUrl: tokenMetadata?.image || 'https://sequence.market/images/placeholder.png',
+        network: networks[order.chainId as ChainId].name,
+        recipientAddress: order.recipientAddress,
+        contractAddress: order.contractAddress,
+        platform: 'calldata_execution',
+        blockchainNftId: order.nftId,
+        quantity: Number(order.nftQuantity),
+        decimals: Number(order?.nftDecimals || 0),
+        tokenAmount: order.currencyQuantity,
+        tokenAddress: order.currencyAddress,
+        tokenSymbol: order.currencySymbol,
+        tokenDecimals: Number(order.currencyDecimals),
+        callData: order.calldata,
+        ...(order?.approvedSpenderAddress ? { approvedSpenderAddress: order.approvedSpenderAddress } : {})
+      }
+    })
+  })
+
+  const {
+    resp: { orderId, token }
+  } = await res.json()
+
+  return {
+    token,
+    orderId
+  }
+}
+
+export const fetchSardineOrderStatus = async (orderId: string, projectAccessKey: string) => {
+  // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
+  const accessKey = DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+  const url = DEBUG
+    ? 'https://dev-api.sequence.app/rpc/API/SardineGetNFTCheckoutOrderStatus'
+    : 'https://api.sequence.app/rpc/API/SardineGetNFTCheckoutOrderStatus'
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': `${accessKey}`
+    },
+    body: JSON.stringify({
+      orderId
+    })
+  })
+
+  const json = await response.json()
+  console.log('json:', json)
+  return json
+}
+
+export interface Country {
+  code: string
+}
+
+export const fetchSupportedCountryCodes = async (): Promise<Country[]> => {
+  // Can also be fetches from sardine api
+  const supportedCountries = [
+    'AL',
+    'AO',
+    'AT',
+    'BB',
+    'BE',
+    'BZ',
+    'BJ',
+    'BO',
+    'BR',
+    'BG',
+    'KH',
+    'KY',
+    'CL',
+    'CO',
+    'KM',
+    'CR',
+    'HR',
+    'CY',
+    'CZ',
+    'DK',
+    'DM',
+    'DO',
+    'EC',
+    'EG',
+    'SV',
+    'GQ',
+    'EE',
+    'FO',
+    'FI',
+    'FR',
+    'GF',
+    'DE',
+    'GR',
+    'GN',
+    'GW',
+    'GY',
+    'HT',
+    'HN',
+    'HU',
+    'IS',
+    'ID',
+    'IE',
+    'IL',
+    'IT',
+    'JM',
+    'JP',
+    'KG',
+    'LA',
+    'LV',
+    'LI',
+    'LT',
+    'LU',
+    'MG',
+    'MY',
+    'MV',
+    'MT',
+    'MR',
+    'MX',
+    'MN',
+    'MZ',
+    'NL',
+    'NO',
+    'OM',
+    'PA',
+    'PY',
+    'PE',
+    'PH',
+    'PL',
+    'PT',
+    'RO',
+    'KN',
+    'MF',
+    'SA',
+    'SC',
+    'SG',
+    'SK',
+    'SI',
+    'KR',
+    'ES',
+    'LK',
+    'SE',
+    'CH',
+    'TZ',
+    'TH',
+    'TT',
+    'TR',
+    'AE',
+    'GB',
+    'UY',
+    'UZ',
+    'VU',
+    'VN'
+  ]
+
+  return supportedCountries.map(countryCode => ({ code: countryCode }))
+}

package/src/api/index.ts

@@ -0,0 +1 @@
+export * from './data'

package/src/components/CopyButton.tsx

@@ -0,0 +1,32 @@
+import { Button, CopyIcon, CheckmarkIcon } from '@0xsequence/design-system'
+import React, { useEffect, useState, ComponentProps } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+type ButtonProps = ComponentProps<typeof Button>
+
+interface CopyButtonProps extends ButtonProps {
+  text: string
+}
+
+export const CopyButton = (props: CopyButtonProps) => {
+  const { text, size = 'xs', ...rest } = props
+  const [isCopied, setCopy] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setCopy(false)
+      }, 4000)
+    }
+  }, [isCopied])
+
+  const handleCopy = () => {
+    setCopy(true)
+  }
+
+  return (
+    <CopyToClipboard text={text} onCopy={handleCopy}>
+      <Button size={size} leftIcon={isCopied ? CheckmarkIcon : CopyIcon} label={isCopied ? 'Copied' : 'Copy'} {...rest} />
+    </CopyToClipboard>
+  )
+}

package/src/components/DefaultIcon.tsx

@@ -0,0 +1,22 @@
+import { Text } from '@0xsequence/design-system'
+import React from 'react'
+
+interface DefaultIconProps {
+  size?: number
+}
+
+export const DefaultIcon = ({ size = 30 }: DefaultIconProps) => {
+  return (
+    <div
+      className="flex items-center justify-center rounded-full bg-background-inverse"
+      style={{
+        width: `${size}px`,
+        height: `${size}px`
+      }}
+    >
+      <Text className="inline-block" style={{ fontSize: `${size - 4}px` }} variant="large" color="inverse">
+        ?
+      </Text>
+    </div>
+  )
+}

package/src/components/NavigationHeader.tsx

@@ -0,0 +1,57 @@
+import { IconButton, ChevronLeftIcon, Text, ModalPrimitive } from '@0xsequence/design-system'
+import React from 'react'
+
+import { HEADER_HEIGHT } from '../constants'
+import { useNavigation } from '../hooks/useNavigation'
+
+interface NavigationHeaderProps {
+  primaryText?: string
+  secondaryText?: string
+  disableBack?: boolean
+}
+
+export const NavigationHeader = ({ secondaryText, primaryText, disableBack = false }: NavigationHeaderProps) => {
+  const { goBack, history } = useNavigation()
+
+  const onClickBack = () => {
+    goBack()
+  }
+
+  return (
+    <div
+      className="absolute flex bg-background-primary z-20 w-full flex-row items-center justify-between pt-1.5"
+      style={{
+        height: HEADER_HEIGHT
+      }}
+    >
+      {history.length > 0 && !disableBack ? (
+        <IconButton
+          onClick={onClickBack}
+          icon={ChevronLeftIcon}
+          size="sm"
+          style={{
+            background: 'rgba(0,0,0,0)',
+            width: '44px'
+          }}
+        />
+      ) : (
+        <div />
+      )}
+      <div className="flex w-full items-center justify-center" style={{ marginLeft: '40px' }}>
+        <Text fontWeight="medium" variant="small" color="muted">
+          {secondaryText}
+        </Text>
+        <ModalPrimitive.Title asChild>
+          <Text fontWeight="medium" variant="small" color="primary">
+            {primaryText}
+          </Text>
+        </ModalPrimitive.Title>
+      </div>
+      <div
+        style={{
+          width: '44px'
+        }}
+      />
+    </div>
+  )
+}