Isaac/react sdk migration

.changeset/mean-ducks-cheer.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/payments": patch
+---
+
+Initial dev version

packages/payments/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    ["@babel/preset-env", { "targets": "defaults, not ie 11" }]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-flow-strip-types",
+    "@babel/plugin-transform-private-methods",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

packages/payments/.eslintignore

@@ -0,0 +1,4 @@
+# folders
+dist/
+
+# files

packages/payments/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  extends: ["thirdweb"],
+  plugins: ["better-tree-shaking"],
+  rules: {
+    "better-tree-shaking/no-top-level-side-effects": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "eventemitter3",
+            importNames: ["EventEmitter"],
+            message:
+              "Do not use named import for importing EventEmitter, Use default import instead.",
+          },
+        ],
+      },
+    ],
+  },
+};

packages/payments/CHANGELOG.md

@@ -0,0 +1,5 @@
+## 0.1.0
+
+### Minor Changes
+
+- [#420](https://github.com/thirdweb-dev/js/pull/420) [`639e535`](https://github.com/thirdweb-dev/js/commit/639e535ed55280ad9d081001aab3f5af72bb3e45) Thanks [@gerrysaporito](https://github.com/gerrysaporito)! - Init checkouts package

packages/payments/README.md

@@ -0,0 +1,14 @@
+<p align="center">
+<br />
+<a href="https://thirdweb.com"><img src="https://github.com/thirdweb-dev/js/blob/main/packages/sdk/logo.svg?raw=true" width="200" alt=""/></a>
+<br />
+</p>
+<h1 align="center">thirdweb Checkouts SDK</h1>
+<p align="center">
+<a href="https://www.npmjs.com/package/@thirdweb-dev/payments"><img src="https://img.shields.io/npm/v/@thirdweb-dev/payments?color=red&label=npm&logo=npm" alt="npm version"/></a>
+<a href="https://github.com/thirdweb-dev/js/actions/workflows/build-test-lint.yml"><img alt="Build Status" src="https://github.com/thirdweb-dev/js/actions/workflows/build-test-lint.yml/badge.svg"/></a>
+<a href="https://discord.gg/thirdweb"><img alt="Join our Discord!" src="https://img.shields.io/discord/834227967404146718.svg?color=7289da&label=discord&logo=discord&style=flat"/></a>
+
+</p>
+<p align="center"><strong>web3 Checkouts library to integrate any NFT checkout into your applications.</strong></p>
+<br />

packages/payments/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@thirdweb-dev/payments",
+  "version": "1.0.0",
+  "main": "dist/thirdweb-dev-payments.cjs.js",
+  "module": "dist/thirdweb-dev-payments.esm.js",
+  "types": "dist/thirdweb-dev-payments.cjs.d.ts",
+  "browser": {
+    "./dist/thirdweb-dev-payments.esm.js": "./dist/thirdweb-dev-payments.browser.esm.js"
+  },
+  "exports": {
+    ".": {
+      "module": {
+        "browser": "./dist/thirdweb-dev-payments.browser.esm.js",
+        "default": "./dist/thirdweb-dev-payments.esm.js"
+      },
+      "default": "./dist/thirdweb-dev-payments.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/payments",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/thirdweb-dev/js/issues"
+  },
+  "author": "thirdweb eng <[email protected]>",
+  "files": [
+    "dist/"
+  ],
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts"
+    ],
+    "exports": {
+      "envConditions": [
+        "browser"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "ethers": "^5.7.2"
+  },
+  "devDependencies": {
+    "@thirdweb-dev/tsconfig": "workspace:*",
+    "eslint-config-thirdweb": "workspace:*",
+    "typescript": "^5.1.6",
+    "@preconstruct/cli": "2.7.0"
+  },
+  "scripts": {
+    "format": "prettier --write 'src/**/*'",
+    "lint": "eslint src/",
+    "fix": "eslint src/ --fix",
+    "clean": "rm -rf dist/",
+    "build": "tsc && preconstruct build",
+    "preconstruct:fix": "preconstruct fix",
+    "push": "yalc push"
+  }
+}

packages/payments/src/constants/blockchain.ts

@@ -0,0 +1,56 @@
+// UNCHANGED: MERGED FROM sdk-common-utilities/blockchain
+export const ChainToPublicRpc: Record<Chain, string> = {
+  Ethereum: "https://ethereum.rpc.thirdweb.com",
+  Goerli: "https://goerli.rpc.thirdweb.com",
+  Mumbai: "https://mumbai.rpc.thirdweb.com",
+  Polygon: "https://polygon.rpc.thirdweb.com",
+  Avalanche: "https://avalanche.rpc.thirdweb.com",
+  Optimism: "https://optimism.rpc.thirdweb.com",
+  OptimismGoerli: "https://optimism-goerli.rpc.thirdweb.com",
+  BSC: "https://binance.rpc.thirdweb.com",
+  BSCTestnet: "https://binance-testnet.rpc.thirdweb.com",
+  ArbitrumOne: "https://arbitrum.rpc.thirdweb.com",
+  ArbitrumGoerli: "https://arbitrum-goerli.rpc.thirdweb.com",
+  Fantom: "https://fantom.rpc.thirdweb.com",
+  FantomTestnet: "https://fantom-testnet.rpc.thirdweb.com",
+  Sepolia: "https://sepolia.rpc.thirdweb.com",
+  AvalancheFuji: "https://avalanche-fuji.rpc.thirdweb.com",
+};
+
+export const ChainIdToChain: Record<number, Chain> = {
+  1: "Ethereum",
+  5: "Goerli",
+  80001: "Mumbai",
+  137: "Polygon",
+  43114: "Avalanche",
+  10: "Optimism",
+  420: "OptimismGoerli",
+  56: "BSC",
+  97: "BSCTestnet",
+  42161: "ArbitrumOne",
+  421613: "ArbitrumGoerli",
+  250: "Fantom",
+  4002: "FantomTestnet",
+  11155111: "Sepolia",
+  43113: "AvalancheFuji",
+};
+
+// General Embedded wallet types
+export type Chain =
+  | "Polygon"
+  | "Mumbai"
+  | "Goerli"
+  | "Ethereum"
+  | "Avalanche"
+  | "Optimism"
+  | "OptimismGoerli"
+  | "BSC"
+  | "BSCTestnet"
+  | "ArbitrumOne"
+  | "ArbitrumGoerli"
+  | "Fantom"
+  | "FantomTestnet"
+  | "Sepolia"
+  | "AvalancheFuji";
+
+export type SupportedChainName = Chain | "Rinkeby";

packages/payments/src/constants/iframeMessages.ts

@@ -0,0 +1,12 @@
+// UNCHANGED: MERGED FROM sdk-common-utilities/iframeMessages
+export type MessageType<T> =
+  | {
+      eventType: string;
+      success: true;
+      data: T;
+    }
+  | {
+      eventType: string;
+      success: false;
+      error: string;
+    };

packages/payments/src/constants/index.ts

@@ -0,0 +1,4 @@
+// CHANGED: export merged sdk-common-utilities/constants & js-client-sdk/constants
+export * from "./settings";
+export * from "./blockchain";
+export * from "./style";

packages/payments/src/constants/settings.ts

@@ -0,0 +1,32 @@
+// UNCHANGED: MERGE BETWEEN sdk-common-utilities/settings and js-client-sdk/settings
+const isDev = (): boolean => {
+  return !!(
+    typeof window !== "undefined" &&
+    window.localStorage.getItem("IS_PAPER_DEV") === "true"
+  );
+};
+
+const isOldPaperDomain = (): boolean =>
+  typeof window !== "undefined" && window.location.origin.includes("paper.xyz");
+
+export const getPaperOriginUrl = (): string => {
+  if (isDev()) {
+    return (
+      window.localStorage.getItem("PAPER_DEV_URL") ?? "http://localhost:3000"
+    );
+  }
+
+  if (isOldPaperDomain()) {
+    return window.location.origin;
+  }
+
+  return "https://payments.thirdweb.com";
+};
+
+// eslint-disable-next-line better-tree-shaking/no-top-level-side-effects
+export const PAPER_APP_URL = getPaperOriginUrl();
+
+export const CHECKOUT_WITH_ETH_IFRAME_URL = "/sdk/2022-08-12/checkout-with-eth";
+export const CHECKOUT_WITH_CARD_IFRAME_URL =
+  "/sdk/2022-08-12/checkout-with-card";
+export const CREATE_WALLET_IFRAME_URL = "/sdk/v2/verify-email";

packages/payments/src/constants/style.ts

@@ -0,0 +1,25 @@
+// // UNCHANGED: MERGED FROM sdk-common-utilities/style
+export type StyleObject = Partial<CSSStyleDeclaration>;
+
+export interface ICustomizationOptions {
+  colorPrimary?: string;
+  colorBackground?: string;
+  colorText?: string;
+  borderRadius?: number;
+  fontFamily?: string;
+
+  inputBackgroundColor?: string;
+  inputBorderColor?: string;
+}
+export type CustomizationOptionsType = {
+  [key in keyof ICustomizationOptions]: string;
+};
+export type Locale = "en" | "fr" | "es" | "it" | "de" | "ja" | "ko" | "zh";
+
+export const DEFAULT_BRAND_OPTIONS = {
+  colorPrimary: "#cf3781",
+  colorBackground: "#ffffff",
+  colorText: "#1a202c",
+  borderRadius: 12,
+  fontFamily: "Open Sans",
+};

packages/payments/src/index.ts

@@ -0,0 +1,8 @@
+// CHANGED: exports
+
+// Customization options and base urls
+export * from "./constants";
+// Types
+export * from "./interfaces";
+// Components
+export * from "./lib";

packages/payments/src/interfaces/CheckoutWithCard.ts

@@ -0,0 +1,67 @@
+// UNCHANGED
+
+export interface ReviewResult {
+  /**
+   * A unique ID for this purchase.
+   */
+  id: string;
+
+  /**
+   * The cardholder's full name provided by the buyer.
+   */
+  cardholderName: string;
+}
+
+export interface KycModal {
+  iframeLink: string;
+}
+
+/**
+ * The ICheckoutWithCardConfigs interface defines the configuration options for the checkoutWithCard component provided by Paper.
+ * This component allows users to generate a card payment component for NFTs without needing any backend calls.
+ *
+ * The configuration options include:
+ *
+ * - `contractId`: The id of your contract (not the address) found in you seller dashboard.
+ * - `walletAddress`: The wallet address to which the payment will be sent (AKA the receiving wallet).
+ * - `email`: (Optional) Email address of the buyer.
+ * - `quantity`: (Optional) The number of items to be purchased.
+ * - `metadata`: (Optional) A record of additional information about the transaction.
+ * - `mintMethod`: (Optional, Only required for Custom Contract Types) The contract function name, function args, and payment information which will be sent to your contract.
+ * - `contractArgs`: (Optional) Depending on the contract type, this can defined additional args to call your contract with. See [Thirdweb/Reservoir docs](https://docs.withpaper.com/reference/thirdweb-contracts) for more details.
+ * - `feeBearer`: (Optional) Who will bear the transaction fee, either 'BUYER' or 'SELLER'.
+ * - `capturePaymentLater`: (Optional) If set to true, the payment is authorized but not captured immediately.
+ * - `fiatCurrency`: (Optional) The type of fiat currency for the payment.
+ * - `title`: (Optional) The title to be displayed on the Stripe receipt.
+ * - `sendEmailOnTransferSucceeded`: (Optional) If set to true, an email is sent when the transfer succeeds.
+ * - `postPurchaseMessageMarkdown`: (Optional) A post-purchase message in Markdown format.
+ * - `postPurchaseButtonText`: (Optional) The text for the post-purchase button.
+ * - `successCallbackUrl`: (Optional) The URL to be called back when the transaction is successful.
+ *
+ * Note: This interface is part of an open-source npm package. Please ensure you understand the implications of each field before using this interface.
+ */
+export interface ICheckoutWithCardConfigs {
+  contractId: string;
+  walletAddress: string;
+  email?: string;
+  quantity?: number;
+  mintMethod?: {
+    name: string;
+    args: Record<string, any>;
+    payment: { value: string; currency: string };
+  };
+  contractArgs?: Record<string, any>;
+
+  // payment customizations
+  capturePaymentLater?: boolean;
+  fiatCurrency?: string;
+
+  // stripe receipt
+  title?: string;
+
+  // email
+  sendEmailOnTransferSucceeded?: boolean;
+  postPurchaseMessageMarkdown?: string;
+  postPurchaseButtonText?: string;
+  successCallbackUrl?: string;
+}

packages/payments/src/interfaces/Modal.ts

@@ -0,0 +1,17 @@
+// UNCHANGED
+
+import type { StyleObject } from "../constants/style";
+
+export interface ModalStyles {
+  main: StyleObject;
+  overlay: StyleObject;
+  body: StyleObject;
+  iframe: StyleObject;
+  closeButton?: StyleObject;
+  spinner: StyleObject;
+}
+
+export interface ModalInterface {
+  modalContainer?: HTMLElement;
+  modalStyles?: Partial<ModalStyles>;
+}

packages/payments/src/interfaces/PaperSDKError.ts

@@ -0,0 +1,31 @@
+// UNCHANGED
+
+export type PaperSDKError = {
+  /**
+   * An enum representing the error encountered.
+   * The value is a human-readable, English message describing the error.
+   */
+  code: PaperSDKErrorCode | PayWithCryptoErrorCode;
+  error: Error;
+};
+
+export enum PaperSDKErrorCode {
+  UserAbandonedCheckout = "User abandoned the checkout",
+  UserLoginFailed = "User login failed",
+  InvalidProps = "The props you passed in to this component are not valid.",
+  InvalidCard = "The card information is invalid. Please double check that the Card, CVC, and Zip code are all correct.",
+  EmailNotVerified = "The email was unable to be verified.",
+  NotEnoughSupply = "There is not enough supply to claim.",
+  AddressNotAllowed = "This address is not on the allowlist.",
+  NoActiveClaimPhase = "There is no active claim phase at the moment.",
+}
+
+export enum PayWithCryptoErrorCode {
+  ErrorConnectingToWallet = "Error connecting to wallet",
+  ErrorSendingTransaction = "Something went wrong sending transaction",
+  InsufficientBalance = `Insufficient ETH`,
+  TransactionCancelled = "Transaction Cancelled",
+  WrongChain = `Wrong Chain Detected`,
+  ChainSwitchUnderway = "There is a network switch already underway",
+  PendingSignature = "Pending Signature",
+}