Consolidate usages of process.env.DEBUG (#240)

* Consolidate usages of process.env.DEBUG * Set a global rather than use process.env * Fix reference error
0xsequence · Jan 16, 2025 · b3fa90e · b3fa90e
1 parent 629db5d
commit b3fa90e
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 30 deletions.
diff --git a/examples/react/src/index.tsx b/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 />)
diff --git a/examples/react/vite.config.js b/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']

diff --git a/packages/checkout/src/api/data.ts b/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, {

diff --git a/packages/checkout/src/hooks/useMarketplaceClient.ts b/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])

diff --git a/packages/checkout/src/utils/sardine.ts b/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'
 

diff --git a/packages/checkout/src/utils/transak.ts b/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,

diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
@@ -1,5 +1,5 @@
 import { Box, Spinner, Text } from '@0xsequence/design-system'
-import { useProjectAccessKey, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
+import { useProjectAccessKey, useContractInfo, useTokenMetadata, DEBUG } from '@0xsequence/kit'
 import { findSupportedNetwork } from '@0xsequence/network'
 import pako from 'pako'
 import { useEffect } from 'react'
@@ -68,7 +68,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen
 
   const transakConfig = settings?.creditCardCheckout?.transakConfig
 
-  const baseUrl = process.env.DEBUG ? 'https://global-stg.transak.com' : 'https://global.transak.com'
+  const baseUrl = DEBUG ? 'https://global-stg.transak.com' : 'https://global.transak.com'
 
   // Transak requires the recipient address to be the proxy address
   // so we need to replace the recipient address with the proxy address in the calldata
@@ -256,7 +256,7 @@ export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: Pen
 
   const authToken = data?.token
 
-  const url = process.env.DEBUG
+  const url = DEBUG
     ? `https://sardine-checkout-sandbox.sequence.info?api_url=https://sardine-api-sandbox.sequence.info&client_token=${authToken}&show_features=true`
     : `https://sardine-checkout.sequence.info?api_url=https://sardine-api.sequence.info&client_token=${authToken}&show_features=true`
 

diff --git a/packages/kit/src/connectors/wagmiConnectors/sequenceWaasConnector.ts b/packages/kit/src/connectors/wagmiConnectors/sequenceWaasConnector.ts
@@ -20,6 +20,7 @@ import {
 import { createConnector } from 'wagmi'
 
 import { LocalStorageKey } from '../../constants/localStorage'
+import { DEBUG } from '../../env'
 
 export interface SequenceWaasConnectConfig {
   googleClientId?: string
@@ -51,7 +52,7 @@ export function sequenceWaasWallet(params: BaseSequenceWaasConnectorOptions) {
     [LocalStorageKey.WaasSignInEmail]: string
   }
 
-  const nodesUrl = process.env.DEBUG ? 'https://dev-nodes.sequence.app' : 'https://nodes.sequence.app'
+  const nodesUrl = DEBUG ? 'https://dev-nodes.sequence.app' : 'https://nodes.sequence.app'
 
   const showConfirmationModal = params.enableConfirmationModal ?? false
 

diff --git a/packages/kit/src/env.ts b/packages/kit/src/env.ts
@@ -0,0 +1,2 @@
+// @ts-ignore
+export const DEBUG = !!globalThis.__SEQUENCE_KIT_DEBUG__
diff --git a/packages/kit/src/hooks/useAPIClient.ts b/packages/kit/src/hooks/useAPIClient.ts
@@ -1,14 +1,14 @@
 import { SequenceAPIClient } from '@0xsequence/api'
 import { useMemo } from 'react'
 
-import { useKitConfig } from '../contexts/KitConfig'
+import { DEBUG } from '../env'
 
 import { useProjectAccessKey } from './useProjectAccessKey'
 
 export const useAPIClient = () => {
   const projectAccessKey = useProjectAccessKey()
 
-  const clientUrl = process.env.DEBUG ? 'https://dev-api.sequence.app' : 'https://api.sequence.app'
+  const clientUrl = DEBUG ? 'https://dev-api.sequence.app' : 'https://api.sequence.app'
 
   const apiClient = useMemo(() => {
     return new SequenceAPIClient(clientUrl, projectAccessKey)

diff --git a/packages/kit/src/hooks/useIndexerClient.ts b/packages/kit/src/hooks/useIndexerClient.ts
@@ -2,7 +2,7 @@ import { SequenceIndexer } from '@0xsequence/indexer'
 import { ChainId, networks } from '@0xsequence/network'
 import { useMemo } from 'react'
 
-import { useKitConfig } from '../contexts/KitConfig'
+import { DEBUG } from '../env'
 
 import { useProjectAccessKey } from './useProjectAccessKey'
 
@@ -14,9 +14,7 @@ export const useIndexerClient = (chainId: ChainId) => {
   }, [projectAccessKey])
 
   const network = networks[chainId]
-  const clientUrl = process.env.DEBUG
-    ? `https://dev-${network.name}-indexer.sequence.app`
-    : `https://${network.name}-indexer.sequence.app`
+  const clientUrl = DEBUG ? `https://dev-${network.name}-indexer.sequence.app` : `https://${network.name}-indexer.sequence.app`
 
   if (!indexerClients.has(chainId)) {
     indexerClients.set(chainId, new SequenceIndexer(clientUrl, projectAccessKey))
@@ -42,9 +40,7 @@ export const useIndexerClients = (chainIds: ChainId[]) => {
 
   for (const chainId of chainIds) {
     const network = networks[chainId]
-    const clientUrl = process.env.DEBUG
-      ? `https://dev-${network.name}-indexer.sequence.app`
-      : `https://${network.name}-indexer.sequence.app`
+    const clientUrl = DEBUG ? `https://dev-${network.name}-indexer.sequence.app` : `https://${network.name}-indexer.sequence.app`
 
     if (!indexerClients.has(chainId)) {
       indexerClients.set(chainId, new SequenceIndexer(clientUrl, projectAccessKey))

diff --git a/packages/kit/src/hooks/useMetadataClient.ts b/packages/kit/src/hooks/useMetadataClient.ts
@@ -1,15 +1,15 @@
 import { SequenceMetadata } from '@0xsequence/metadata'
 import { useMemo } from 'react'
 
-import { useKitConfig } from '../contexts/KitConfig'
+import { DEBUG } from '../env'
 
 import { useProjectAccessKey } from './useProjectAccessKey'
 
 export const useMetadataClient = () => {
   const projectAccessKey = useProjectAccessKey()
 
   const metadataClient = useMemo(() => {
-    const clientUrl = process.env.DEBUG ? 'https://dev-metadata.sequence.app' : 'https://metadata.sequence.app'
+    const clientUrl = DEBUG ? 'https://dev-metadata.sequence.app' : 'https://metadata.sequence.app'
 
     return new SequenceMetadata(clientUrl, projectAccessKey)
   }, [projectAccessKey])

diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts
@@ -127,3 +127,6 @@ export { CollectibleTileImage } from './components/CollectibleTileImage'
 
 // Indexer
 export { ContractVerificationStatus } from '@0xsequence/indexer'
+
+// XXX
+export { DEBUG } from './env'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// @ts-ignore
		export const DEBUG = !!globalThis.__SEQUENCE_KIT_DEBUG__