Merge remote-tracking branch 'origin/master' into multiple-connection…

…-support

examples/react/src/config.ts

@@ -81,7 +81,7 @@ export const config =
         },
         walletConnect: {
           projectId: walletConnectProjectId
-        },
+        }
       })
     : createConfig('universal', {
         ...kitConfig,
@@ -111,16 +111,12 @@ export const getErc1155SaleContractConfig = (walletAddress: string) => ({
   // collectionAddress: '0x92473261f2c26f2264429c451f70b0192f858795',
   wallet: walletAddress,
   items: [
-
     {
-        tokenId: '1',
-        quantity: '1'
-      }
-
+      tokenId: '1',
+      quantity: '1'
+    }
   ],
   onSuccess: () => {
-
     console.log('success')
-
   }
 })

examples/react/src/index.tsx

@@ -4,7 +4,10 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import { App } from './App'
 
-console.log('VERSION:', process.env.PACKAGE_VERSION)
+// @ts-ignore
+console.log('VERSION:', __SEQUENCE_KIT_PACKAGE_VERSION__)
+// @ts-ignore
+console.log('DEBUG: ', __SEQUENCE_KIT_DEBUG__)
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(<App />)

examples/react/vite.config.js

@@ -21,8 +21,8 @@ export default defineConfig(() => {
       svgrPlugin()
     ],
     define: {
-      'process.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version),
-      'process.env.DEBUG': JSON.stringify(process.env.DEBUG || false)
+      __SEQUENCE_KIT_PACKAGE_VERSION__: JSON.stringify(process.env.npm_package_version),
+      __SEQUENCE_KIT_DEBUG__: JSON.stringify(process.env.DEBUG || false)
     },
     resolve: {
       dedupe: ['wagmi', 'viem']

packages/checkout/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @0xsequence/kit-connectors
 
+## 4.5.8
+
+### Patch Changes
+
+- Fixing process.env inclusion
+
+- Updated dependencies []:
+  - @0xsequence/kit@4.5.8
+
 ## 4.5.7
 
 ### Patch Changes

packages/checkout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-checkout",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "description": "Checkout UI for Sequence Kit",
   "repository": "https://github.com/0xsequence/kit/tree/master/packages/checkout",
   "author": "Horizon Blockchain Games",

packages/checkout/src/api/data.ts

@@ -1,3 +1,4 @@
+import { DEBUG } from '@0xsequence/kit'
 import { TokenMetadata } from '@0xsequence/metadata'
 import { ChainId, networks } from '@0xsequence/network'
 
@@ -24,8 +25,8 @@ export const fetchSardineClientToken = async ({
   tokenMetadata
 }: FetchSardineClientTokenArgs): Promise<FetchSardineClientTokenReturn> => {
   // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
-  const accessKey = process.env.DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
-  const url = process.env.DEBUG
+  const accessKey = DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+  const url = DEBUG
     ? 'https://dev-api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
     : 'https://api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
 
@@ -68,8 +69,8 @@ export const fetchSardineClientToken = async ({
 
 export const fetchSardineOrderStatus = async (orderId: string, projectAccessKey: string) => {
   // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
-  const accessKey = process.env.DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
-  const url = process.env.DEBUG
+  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, {

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -1,8 +1,9 @@
 import { Hex } from 'viem'
 
-import { createGenericContext } from './genericContext'
 import type { TransakConfig } from '../contexts/CheckoutModal'
 
+import { createGenericContext } from './genericContext'
+
 export type CreditCardProviders = 'sardine' | 'transak'
 
 export interface Collectible {

packages/checkout/src/contexts/SwapModal.ts

@@ -1,9 +1,9 @@
 'use client'
 
-import { createGenericContext } from './genericContext'
-
 import { Hex } from 'viem'
 
+import { createGenericContext } from './genericContext'
+
 interface Transaction {
   to: Hex
   data?: Hex

packages/checkout/src/contexts/TransactionStatusModal.ts

@@ -1,5 +1,3 @@
-import { Hex } from 'viem'
-
 import { createGenericContext } from './genericContext'
 
 interface Item {

packages/checkout/src/hooks/useCheckoutOptionsSalesContract.ts

@@ -1,5 +1,6 @@
-import { useQuery } from '@tanstack/react-query'
 import { CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace'
+import { useQuery } from '@tanstack/react-query'
+
 import { useMarketplaceClient } from './useMarketplaceClient'
 
 export interface UseGenerateBuyTransactionOptions {

packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts

@@ -1,14 +1,13 @@
-import { CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace'
+import { CheckoutOptionsSalesContractArgs, TransactionSwapProvider } from '@0xsequence/marketplace'
 import { findSupportedNetwork } from '@0xsequence/network'
-import { TransactionSwapProvider, TransactionNFTCheckoutProvider } from '@0xsequence/marketplace'
+import { Abi, Hex } from 'viem'
+import { useReadContract, useReadContracts } from 'wagmi'
 
-import { useERC1155SaleContractPaymentModal } from './useSelectPaymentModal'
-import { useCheckoutOptionsSalesContract } from './useCheckoutOptionsSalesContract'
 import { ERC_1155_SALE_CONTRACT } from '../constants/abi'
 import { SelectPaymentSettings } from '../contexts/SelectPaymentModal'
 
-import { Abi, Hex, padBytes } from 'viem'
-import { useReadContract, useReadContracts } from 'wagmi'
+import { useCheckoutOptionsSalesContract } from './useCheckoutOptionsSalesContract'
+import { useERC1155SaleContractPaymentModal } from './useSelectPaymentModal'
 
 type BasePaymentModalSettings = Pick<
   SelectPaymentSettings,

packages/checkout/src/hooks/useMarketplaceClient.ts

@@ -1,4 +1,4 @@
-import { useProjectAccessKey } from '@0xsequence/kit'
+import { DEBUG, useProjectAccessKey } from '@0xsequence/kit'
 import { MarketplaceIndexer } from '@0xsequence/marketplace'
 import { networks, stringTemplate } from '@0xsequence/network'
 import { useMemo } from 'react'
@@ -11,7 +11,7 @@ export const useMarketplaceClient = ({ chain }: UseMarketplaceClientArgs) => {
   const projectAccessKey = useProjectAccessKey()
 
   const marketplaceClient = useMemo(() => {
-    const env = process.env.DEBUG ? 'development' : 'production'
+    const env = DEBUG ? 'development' : 'production'
     const clientUrl = marketplaceApiURL(chain, env)
     return new MarketplaceIndexer(clientUrl, projectAccessKey)
   }, [projectAccessKey])

packages/checkout/src/hooks/useSkipOnCloseCallback.ts

@@ -1,12 +1,12 @@
-import { useEffect, useRef, MutableRefObject } from 'react'
+import { useEffect, useRef } from 'react'
 
 interface UseSkipOnCloseCallbackReturn {
   skipOnCloseCallback: () => void
 }
 
 export const useSkipOnCloseCallback = (onClose: () => void): UseSkipOnCloseCallbackReturn => {
   const skipOnCloseCallbackFlag = useRef(false)
-  
+
   const skipOnCloseCallback = () => {
     skipOnCloseCallbackFlag.current = true
   }
@@ -22,4 +22,4 @@ export const useSkipOnCloseCallback = (onClose: () => void): UseSkipOnCloseCallb
   return {
     skipOnCloseCallback
   }
-}
+}

packages/checkout/src/utils/sardine.ts

@@ -1,3 +1,4 @@
+import { DEBUG } from '@0xsequence/kit'
 import { ChainId, networks } from '@0xsequence/network'
 import { ethers } from 'ethers'
 
@@ -12,9 +13,9 @@ export const checkSardineWhitelistStatus = async (
 ) => {
   const referenceId = `sequence-kit-sardine-whitelist-check`
 
-  const accessKey = process.env.DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+  const accessKey = DEBUG ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
 
-  const url = process.env.DEBUG
+  const url = DEBUG
     ? 'https://dev-api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
     : 'https://api.sequence.app/rpc/API/SardineGetNFTCheckoutToken'
 

packages/checkout/src/utils/transak.ts

@@ -1,11 +1,13 @@
+import { DEBUG } from '@0xsequence/kit'
+
 import { AddFundsSettings } from '../contexts'
 
 export const TRANSAK_API_KEY = '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
 export const TRANSAK_API_KEY_STAGING = 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98'
 export const TRANSAK_PROXY_ADDRESS = '0x4a598b7ec77b1562ad0df7dc64a162695ce4c78a'
 
-const TransakUrlProd = 'https://global.transak.com';
-const TransakUrlSandbox = 'https://global-stg.transak.com';
+const TransakUrlProd = 'https://global.transak.com'
+const TransakUrlSandbox = 'https://global-stg.transak.com'
 
 export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
   const defaultNetworks =
@@ -15,8 +17,8 @@ export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
     [index: string]: string | undefined
   }
 
-  const url = new URL(process.env.DEBUG ? TransakUrlSandbox : TransakUrlProd);
-  const apiKey = process.env.DEBUG ? TRANSAK_API_KEY_STAGING : TRANSAK_API_KEY;
+  const url = new URL(DEBUG ? TransakUrlSandbox : TransakUrlProd)
+  const apiKey = DEBUG ? TRANSAK_API_KEY_STAGING : TRANSAK_API_KEY
 
   const options: Options = {
     apiKey: apiKey,

packages/checkout/src/views/AddFunds.tsx

@@ -5,10 +5,10 @@ import { HEADER_HEIGHT } from '../constants'
 import { useAddFundsModal } from '../hooks'
 import { getTransakLink } from '../utils/transak'
 
-const IframeId = 'sequenceOnRamp';
-const EventTypeOrderCreated = 'TRANSAK_ORDER_CREATED';
-const EventTypeOrderSuccessful = 'TRANSAK_ORDER_SUCCESSFUL';
-const EventTypeOrderFailed = 'TRANSAK_ORDER_FAILED';
+const IframeId = 'sequenceOnRamp'
+const EventTypeOrderCreated = 'TRANSAK_ORDER_CREATED'
+const EventTypeOrderSuccessful = 'TRANSAK_ORDER_SUCCESSFUL'
+const EventTypeOrderFailed = 'TRANSAK_ORDER_FAILED'
 
 export const AddFundsContent = () => {
   const { addFundsSettings } = useAddFundsModal()
@@ -18,28 +18,28 @@ export const AddFundsContent = () => {
   }
 
   useEffect(() => {
-    window.addEventListener('message', messageReceived);
+    window.addEventListener('message', messageReceived)
     return () => {
-      window.removeEventListener('message', messageReceived);
-    };
-  }, []);
+      window.removeEventListener('message', messageReceived)
+    }
+  }, [])
 
   function messageReceived(message: MessageEvent<any>) {
-    const element = document.getElementById(IframeId) as HTMLIFrameElement | undefined;
-    const iframe = element?.contentWindow;
+    const element = document.getElementById(IframeId) as HTMLIFrameElement | undefined
+    const iframe = element?.contentWindow
     if (message.source === iframe) {
-      const data = message.data;
-      const eventType = data.eventType as string;
+      const data = message.data
+      const eventType = data.eventType as string
       switch (eventType) {
         case EventTypeOrderCreated:
-          addFundsSettings?.onOrderCreated?.(data);
-          break;
+          addFundsSettings?.onOrderCreated?.(data)
+          break
         case EventTypeOrderSuccessful:
-          addFundsSettings?.onOrderSuccessful?.(data);
-          break;
+          addFundsSettings?.onOrderSuccessful?.(data)
+          break
         case EventTypeOrderFailed:
-          addFundsSettings?.onOrderFailed?.(data);
-          break;
+          addFundsSettings?.onOrderFailed?.(data)
+          break
       }
     }
   }

packages/checkout/src/views/PaymentSelection/Footer.tsx

@@ -1,4 +1,5 @@
 import { Box, Text } from '@0xsequence/design-system'
+
 import { useSelectPaymentModal } from '../../hooks'
 
 export const Footer = () => {

packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx

@@ -1,18 +1,7 @@
-import { useEffect } from 'react'
-import {
-  ArrowRightIcon,
-  Box,
-  Card,
-  PaymentsIcon,
-  SendIcon,
-  Spinner,
-  Text,
-  Scroll,
-  useMediaQuery
-} from '@0xsequence/design-system'
+import { ArrowRightIcon, Box, Card, PaymentsIcon, Spinner, Text } from '@0xsequence/design-system'
 import { useContractInfo } from '@0xsequence/kit'
 import { findSupportedNetwork } from '@0xsequence/network'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
 
 import { SelectPaymentSettings } from '../../../contexts'

packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx

@@ -92,8 +92,8 @@ export const PayWithCrypto = ({
   const balanceInfo = currencyBalanceData?.find(balanceData => compareAddress(currencyAddress, balanceData.contractAddress))
 
   const balance: bigint = BigInt(balanceInfo?.balance || '0')
-  let balanceFormatted = Number(formatUnits(balance, currencyInfoData?.decimals || 0))
-  balanceFormatted = Math.trunc(Number(balanceFormatted) * 10000) / 10000
+  // let balanceFormatted = Number(formatUnits(balance, currencyInfoData?.decimals || 0))
+  // balanceFormatted = Math.trunc(Number(balanceFormatted) * 10000) / 10000
 
   const isNotEnoughFunds: boolean = BigInt(price) > balance
 

packages/checkout/src/views/PaymentSelection/TransferFunds.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react'
 import { Box, Card, CheckmarkIcon, CopyIcon, IconButton, Text, truncateAddress } from '@0xsequence/design-system'
+import { QRCodeCanvas } from 'qrcode.react'
+import { useState, useEffect } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useAccount } from 'wagmi'
 
 import { useSelectPaymentModal, useTransferFundsModal } from '../../hooks'
-import { QRCodeCanvas } from 'qrcode.react'
-import { useAccount } from 'wagmi'
 
 export const TransferFunds = () => {
   const { openTransferFundsModal } = useTransferFundsModal()