@0xsequence/checkout 0.0.0-20250319103505 → 5.0.0-ecosystem-beta

package/package.json

@@ -1,36 +1,36 @@
 {
   "name": "@0xsequence/checkout",
-  "version": "0.0.0-20250319103505",
+  "version": "5.0.0-ecosystem-beta",
   "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",
-  "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
+      "types": "./dist/types/index.d.ts",
       "require": "./dist/cjs/index.js",
-      "import": "./dist/esm/index.js"
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
     }
   },
   "files": [
+    "src",
     "dist"
   ],
   "dependencies": {
-    "@0xsequence/design-system": "^2.0.9",
     "@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",
-    "@0xsequence/hooks": "0.0.0-20250319103505"
+    "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",
@@ -42,9 +42,11 @@
     "react-dom": ">= 17",
     "viem": ">= 2.0.0",
     "wagmi": ">= 2.14.13",
-    "@0xsequence/connect": "0.0.0-20250319103505"
+    "@0xsequence/react-hooks": "5.0.0-ecosystem-beta",
+    "@0xsequence/connect": "5.0.0-ecosystem-beta"
   },
   "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",
@@ -55,15 +57,16 @@
     "viem": "^2.23.10",
     "vite": "^5.2.11",
     "wagmi": "^2.14.13",
-    "@0xsequence/connect": "0.0.0-20250319103505"
+    "@0xsequence/react-hooks": "5.0.0-ecosystem-beta",
+    "@0xsequence/connect": "5.0.0-ecosystem-beta"
   },
   "scripts": {
-    "build": "pnpm build:clean && pnpm build:esm && pnpm build:cjs",
-    "build:cjs": "tsc --module commonjs --declaration --declarationMap --outDir dist/cjs && echo '{ \"type\": \"commonjs\" }' > dist/cjs/package.json",
-    "build:esm": "tsc --module es2022 --declaration --declarationMap --outDir dist/esm",
+    "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",
-    "build:check": "attw --pack .",
-    "dev": "tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm",
+    "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>
+  )
+}