feat: feature-flag funkit checkout behind NEXT_PUBLIC_ENABLE_FUNKIT

.env.development

@@ -8,6 +8,7 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NEXT_PUBLIC_NARVAL_CLIENT_ID=
 NEXT_PUBLIC_ENABLE_STAKING=true
 NEXT_PUBLIC_ENABLE_GOVERNANCE=true
+NEXT_PUBLIC_ENABLE_FUNKIT=true
 NEXT_PUBLIC_API_BASEURL=https://aave-api-v2.aave.com
 NEXT_PUBLIC_SUBGRAPH_API_KEY=
 FAMILY_API_KEY=

.env.example

@@ -21,6 +21,7 @@ NEXT_PUBLIC_FIAT_ON_RAMP=true
 NEXT_PUBLIC_IS_CYPRESS_ENABLED=false
 NEXT_PUBLIC_AMPLITUDE_API_KEY=6b28cb736c53d59f0951a50f59597aae
 NEXT_PUBLIC_PRIVATE_RPC_ENABLED=false
+NEXT_PUBLIC_ENABLE_FUNKIT=false
 
 
 

.github/actions/build/action.yml

@@ -45,6 +45,10 @@ inputs:
     description: enables cypress
     required: false
     default: 'true'
+  NEXT_PUBLIC_ENABLE_FUNKIT:
+    description: enables funkit checkout integration for supply flows
+    required: false
+    default: 'false'
   NEXT_PUBLIC_FUNKIT_API_KEY:
     description: funkit checkout API key (publishable, client-side). Without it the funkit checkout host stays unmounted.
     required: false
@@ -93,4 +97,5 @@ runs:
         NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: '${{ inputs.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID }}'
         NEXT_PUBLIC_NARVAL_CLIENT_ID: '${{ inputs.NEXT_PUBLIC_NARVAL_CLIENT_ID }}'
         NEXT_PUBLIC_IS_CYPRESS_ENABLED: '${{ inputs.NEXT_PUBLIC_IS_CYPRESS_ENABLED }}'
+        NEXT_PUBLIC_ENABLE_FUNKIT: '${{ inputs.NEXT_PUBLIC_ENABLE_FUNKIT }}'
         NEXT_PUBLIC_FUNKIT_API_KEY: '${{ inputs.NEXT_PUBLIC_FUNKIT_API_KEY }}'

.github/workflows/build-test-deploy-dev.yml

@@ -39,6 +39,7 @@ jobs:
           NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
           NEXT_PUBLIC_NARVAL_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_NARVAL_CLIENT_ID }}
           NEXT_PUBLIC_IS_CYPRESS_ENABLED: ${{ matrix.build.cypress_enabled }}
+          NEXT_PUBLIC_ENABLE_FUNKIT: 'true'
           NEXT_PUBLIC_FUNKIT_API_KEY: ${{ secrets.FUNKIT_API_KEY }}
 
       - name: Upload artifacts

.github/workflows/build-test-deploy.yml

@@ -39,6 +39,7 @@ jobs:
           NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
           NEXT_PUBLIC_NARVAL_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_NARVAL_CLIENT_ID }}
           NEXT_PUBLIC_IS_CYPRESS_ENABLED: ${{ matrix.build.cypress_enabled }}
+          NEXT_PUBLIC_ENABLE_FUNKIT: 'true'
           NEXT_PUBLIC_FUNKIT_API_KEY: ${{ secrets.FUNKIT_API_KEY }}
 
       - name: Upload artifacts
@@ -59,6 +60,7 @@ jobs:
         uses: ./.github/actions/build
         with:
           NEXT_PUBLIC_ENV: 'staging'
+          NEXT_PUBLIC_ENABLE_FUNKIT: 'true'
           NEXT_PUBLIC_FUNKIT_API_KEY: ${{ secrets.FUNKIT_API_KEY }}
 
       - name: Upload artifacts

src/components/transactions/FunCheckout/FunkitCheckout.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { aaveTheme } from 'src/ui-config/funkit/aaveTheme';
 import { funkitConfig } from 'src/ui-config/funkit/funkitConfig';
 import { queryKeysFactory } from 'src/ui-config/queries';
+import { ENABLE_FUNKIT } from 'src/utils/marketsAndNetworksConfig';
 import { getAddress } from 'viem';
 import { useAccount } from 'wagmi';
 
@@ -136,7 +137,7 @@ export function FunkitCheckout() {
   // builds, preview builds, local without .env). Render nothing instead: the
   // Supply buttons fall back to the native modal because beginFunSupply() returns
   // false when the island never registers on the bridge.
-  if (!funkitConfig.apiKey) {
+  if (!ENABLE_FUNKIT || !funkitConfig.apiKey) {
     return null;
   }
 

src/components/transactions/FunCheckout/funSupplyAssets.ts

@@ -1,6 +1,7 @@
 import type { FunkitCheckoutConfig } from '@funkit/connect';
 import { createAaveSupplyCheckoutConfig } from '@funkit/connect/clients/aave';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
+import { ENABLE_FUNKIT } from 'src/utils/marketsAndNetworksConfig';
 import { type Address, getAddress } from 'viem';
 
 /**
@@ -27,7 +28,11 @@ export const FUN_SUPPLY_UNDERLYINGS: ReadonlySet<string> = new Set([
 
 /** True when this market+asset's Supply button should open the funkit modal. */
 export function isFunSupplyAsset(market: CustomMarket, underlyingAsset: string): boolean {
-  return market === FUN_SUPPLY_MARKET && FUN_SUPPLY_UNDERLYINGS.has(underlyingAsset.toLowerCase());
+  return (
+    ENABLE_FUNKIT &&
+    market === FUN_SUPPLY_MARKET &&
+    FUN_SUPPLY_UNDERLYINGS.has(underlyingAsset.toLowerCase())
+  );
 }
 
 /**

src/utils/marketsAndNetworksConfig.ts

@@ -25,6 +25,7 @@ export const STAGING_ENV = process.env.NEXT_PUBLIC_ENV === 'staging';
 export const PROD_ENV = !process.env.NEXT_PUBLIC_ENV || process.env.NEXT_PUBLIC_ENV === 'prod';
 export const ENABLE_TESTNET =
   PROD_ENV && global?.window?.localStorage.getItem('testnetsEnabled') === 'true';
+export const ENABLE_FUNKIT = process.env.NEXT_PUBLIC_ENABLE_FUNKIT === 'true';
 
 // determines if forks should be shown
 export const FORK_ENABLED =