fix: improve Next.js server environment compatibility (#2090)

Author: dschlabach

src/appchain/bridge/components/AppchainBridge.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useIsMounted } from '@/internal/hooks/useIsMounted';
 import { useTheme } from '@/internal/hooks/useTheme';
 import { background, border, cn, color, text } from '@/styles/theme';
@@ -13,11 +14,7 @@ import { AppchainBridgeTransactionButton } from './AppchainBridgeTransactionButt
 import { AppchainBridgeWithdraw } from './AppchainBridgeWithdraw';
 import { AppchainNetworkToggleButton } from './AppchainNetworkToggleButton';
 
-const AppchainBridgeDefaultContent = ({
-  title,
-}: {
-  title: string;
-}) => {
+const AppchainBridgeDefaultContent = ({ title }: { title: string }) => {
   const {
     isAddressModalOpen,
     isWithdrawModalOpen,

src/appchain/bridge/components/AppchainBridgeAddressInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Avatar, Address as OCKAddress } from '@/identity';
 import { PressableIcon } from '@/internal/components/PressableIcon';
 import { TextInput } from '@/internal/components/TextInput';

src/appchain/bridge/components/AppchainBridgeNetwork.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { background, border, cn, text } from '@/styles/theme';
 import { useAppchainBridgeContext } from './AppchainBridgeProvider';
 

src/appchain/bridge/components/AppchainBridgeProvider.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { getChainExplorer } from '@/core/network/getChainExplorer';
 import { useValue } from '@/internal/hooks/useValue';
 import { baseSvg } from '@/internal/svg/baseSvg';

src/appchain/bridge/components/AppchainBridgeResumeTransaction.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { PressableIcon } from '@/internal/components/PressableIcon';
 import { TextInput } from '@/internal/components/TextInput';
 import { backArrowSvg } from '@/internal/svg/backArrowSvg';

src/appchain/bridge/components/AppchainBridgeSuccess.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { SuccessSvg } from '@/internal/svg/fullWidthSuccessSvg';
 import { border, cn, color, pressable, text } from '@/styles/theme';
 import type { AppchainBridgeSuccessReact } from '../types';

src/appchain/bridge/components/AppchainBridgeTransactionButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { cn } from '@/styles/theme';
 import { border, color, pressable, text } from '@/styles/theme';
 import { ConnectWallet } from '@/wallet';

src/appchain/bridge/components/AppchainBridgeWithdraw.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Spinner } from '@/internal/components/Spinner';
 import { ErrorSvg } from '@/internal/svg/fullWidthErrorSvg';
 import { SuccessSvg } from '@/internal/svg/fullWidthSuccessSvg';

src/appchain/bridge/hooks/useAppchainConfig.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useReadContract } from 'wagmi';
 import { DeployChainABI } from '../abi';
 import { APPCHAIN_DEPLOY_CONTRACT_ADDRESS } from '../constants';

src/appchain/bridge/hooks/useDeposit.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useState } from 'react';
 import { parseEther, parseUnits } from 'viem';
 import type { Hex } from 'viem';

src/appchain/bridge/hooks/useDepositButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Spinner } from '@/internal/components/Spinner';
 import { useMemo } from 'react';
 import { useAccount } from 'wagmi';

src/appchain/bridge/hooks/useWithdraw.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useState } from 'react';
 import { type Hex, erc20Abi, keccak256, parseEther, parseUnits } from 'viem';
 import { getWithdrawalHashStorageSlot, getWithdrawals } from 'viem/op-stack';

src/appchain/bridge/hooks/useWithdrawButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Spinner } from '@/internal/components/Spinner';
 import { useMemo } from 'react';
 import type { UseWithdrawButtonParams } from '../types';

src/buy/components/BuyAmountInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { TextInput } from '../../internal/components/TextInput';
 import { isValidAmount } from '../../internal/utils/isValidAmount';
 import { background, border, cn, color } from '../../styles/theme';

src/buy/components/BuyButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useMemo } from 'react';
 import { Spinner } from '../../internal/components/Spinner';
 import { checkmarkSvg } from '../../internal/svg/checkmarkSvg';

src/buy/components/BuyDropdown.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useAnalytics } from '@/core/analytics/hooks/useAnalytics';
 import { BuyEvent, type BuyOption } from '@/core/analytics/types';
 import { openPopup } from '@/internal/utils/openPopup';

src/buy/components/BuyMessage.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { cn, color, text } from '../../styles/theme';
 import { isSwapError } from '../../swap/utils/isSwapError';
 import { useBuyContext } from './BuyProvider';

src/buy/components/BuyOnrampItem.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useMemo } from 'react';
 import { applePaySvg } from '../../internal/svg/applePaySvg';
 import { cardSvg } from '../../internal/svg/cardSvg';

src/buy/components/BuyProvider.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { RequestContext } from '@/core/network/constants';
 import { useLifecycleStatus } from '@/internal/hooks/useLifecycleStatus';
 import {

src/buy/components/BuyTokenItem.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useMemo } from 'react';
 import { getRoundedAmount } from '../../internal/utils/getRoundedAmount';
 import { cn, color, pressable, text } from '../../styles/theme';
@@ -58,7 +59,9 @@ export function BuyTokenItem({ swapUnit }: { swapUnit?: SwapUnit }) {
             'text-xs',
             hasInsufficientBalance ? color.error : color.foregroundMuted,
           )}
-        >{`${hasInsufficientBalance ? 'Insufficient balance' : 'Balance'}: ${roundedBalance}`}</div>
+        >{`${
+          hasInsufficientBalance ? 'Insufficient balance' : 'Balance'
+        }: ${roundedBalance}`}</div>
       </div>
     </button>
   );

src/earn/components/DepositAmountInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import type { DepositAmountInputReact } from '../types';
 import { EarnAmountInput } from './EarnAmountInput';
 import { useEarnContext } from './EarnProvider';

src/earn/components/DepositBalance.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { getTruncatedAmount } from '@/earn/utils/getTruncatedAmount';
 import { Skeleton } from '@/internal/components/Skeleton';
 import { cn } from '@/styles/theme';

src/earn/components/DepositButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useDepositAnalytics } from '@/earn/hooks/useDepositAnalytics';
 import { cn } from '@/styles/theme';
 import {

src/earn/components/Earn.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Tab, TabContent, Tabs, TabsList } from '@/internal';
 import { useTheme } from '@/internal/hooks/useTheme';
 import { border, cn } from '@/styles/theme';

src/earn/components/EarnDeposit.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { EarnDetails } from '@/earn/components/EarnDetails';
 import type { EarnDepositReact } from '../types';
 import { DepositAmountInput } from './DepositAmountInput';

src/earn/components/EarnDetails.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEarnContext } from '@/earn/components/EarnProvider';
 import { VaultDetails } from '@/earn/components/VaultDetails';
 import { YieldDetails } from '@/earn/components/YieldDetails';

src/earn/components/EarnProvider.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useBuildDepositToMorphoTx } from '@/earn/hooks/useBuildDepositToMorphoTx';
 import { getToken } from '@/earn/utils/getToken';
 import { useLifecycleStatus } from '@/internal/hooks/useLifecycleStatus';

src/earn/components/EarnWithdraw.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { EarnDetails } from '@/earn/components/EarnDetails';
 import type { EarnWithdrawReact } from '../types';
 import { EarnCard } from './EarnCard';

src/earn/components/VaultDetails.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { getTruncatedAmount } from '@/earn/utils/getTruncatedAmount';
 import { Popover } from '@/internal/components/Popover';
 import { Skeleton } from '@/internal/components/Skeleton';
@@ -90,13 +91,17 @@ export function VaultDetails() {
             {deposits ? (
               <Row
                 label="Total deposits"
-                value={`${getTruncatedAmount(deposits, 1, 'compact')} ${vaultToken.symbol}`}
+                value={`${getTruncatedAmount(deposits, 1, 'compact')} ${
+                  vaultToken.symbol
+                }`}
               />
             ) : null}
             {liquidity ? (
               <Row
                 label="Liquidity"
-                value={`${getTruncatedAmount(liquidity, 1, 'compact')} ${vaultToken.symbol}`}
+                value={`${getTruncatedAmount(liquidity, 1, 'compact')} ${
+                  vaultToken.symbol
+                }`}
               />
             ) : null}
           </div>

src/earn/components/WithdrawAmountInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import type { WithdrawAmountInputReact } from '../types';
 import { EarnAmountInput } from './EarnAmountInput';
 import { useEarnContext } from './EarnProvider';

src/earn/components/WithdrawBalance.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { getTruncatedAmount } from '@/earn/utils/getTruncatedAmount';
 import { Skeleton } from '@/internal/components/Skeleton';
 import { useCallback, useMemo } from 'react';

src/earn/components/WithdrawButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useWithdrawAnalytics } from '@/earn/hooks/useWithdrawAnalytics';
 import { cn } from '@/styles/theme';
 import {

src/earn/components/YieldDetails.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEarnContext } from '@/earn/components/EarnProvider';
 import { getTruncatedAmount } from '@/earn/utils/getTruncatedAmount';
 import { Popover } from '@/internal/components/Popover';

src/earn/hooks/useBuildDepositToMorphoTx.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useMorphoVault } from '@/earn/hooks/useMorphoVault';
 import { buildDepositToMorphoTx } from '@/earn/utils/buildDepositToMorphoTx';
 import type { Call } from '@/transaction/types';

src/earn/hooks/useBuildWithdrawFromMorphoTx.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useMorphoVault } from '@/earn/hooks/useMorphoVault';
 import { buildWithdrawFromMorphoTx } from '@/earn/utils/buildWithdrawFromMorphoTx';
 import type { Call } from '@/transaction/types';

src/earn/hooks/useMorphoVault.ts

@@ -1,3 +1,4 @@
+'use client';
 import { MORPHO_VAULT_ABI } from '@/earn/abis/morpho';
 import { MORPHO_TOKEN_BASE_ADDRESS } from '@/earn/constants';
 import calculateMorphoRewards from '@/earn/utils/calculateMorphoRewards';

src/fund/components/FundCard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { useTheme } from '../../internal/hooks/useTheme';
 import { background, border, cn, color, text } from '../../styles/theme';

src/fund/components/FundCardAmountInput.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { AmountInput } from '@/internal/components/amount-input/AmountInput';
 import { useThrottle } from '@/internal/hooks/useThrottle';
 import { useCallback } from 'react';

src/fund/components/FundCardAmountInputTypeSwitch.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { AmountInputTypeSwitch } from '@/internal/components/amount-input/AmountInputTypeSwitch';
 import type { FundCardAmountInputTypeSwitchPropsReact } from '../types';
 import { useFundContext } from './FundCardProvider';

src/fund/components/FundCardHeader.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { cn, text } from '@/styles/theme';
 import type { FundCardHeaderPropsReact } from '../types';
 import { useFundContext } from './FundCardProvider';

src/fund/components/FundCardPaymentMethodDropdown.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { isApplePaySupported } from '@/buy/utils/isApplePaySupported';
 import { Skeleton } from '@/internal/components/Skeleton';
 import { useOutsideClick } from '@/internal/hooks/useOutsideClick';

src/fund/components/FundCardPresetAmountInputList.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useAmountInput } from '@/internal/hooks/useAmountInput';
 import { FundCardPresetAmountInputItem } from './FundCardPresetAmountInputItem';
 import { useFundContext } from './FundCardProvider';

src/fund/components/FundCardProvider.tsx

@@ -1,3 +1,4 @@
+'use client';
 import type { LifecycleStatusUpdate } from '@/internal/types';
 import {
   createContext,

src/fund/components/FundCardSubmitButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useMemo } from 'react';
 import { useFundCardFundingUrl } from '../hooks/useFundCardFundingUrl';
 import { FundButton } from './FundButton';

src/internal/components/tabs/Tabs.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useValue } from '@/internal/hooks/useValue';
 import { cn } from '@/styles/theme';
 import { createContext, useContext, useState } from 'react';