v0.32.0

Minor Changes

• feat: re-typed walletCapabilities object in OnchainKitConfig. By @0xAlec #1238
• fix: removed mt-4 from <TransactionButton>, ensuring the primary component maintains a clean and consistent design without outer margin. By @Zizzamia #1258
• fix: renamed LifeCycle to Lifecycle. By @Zizzamia #1257
• fix: SwapSlippageInput was visually resetting to default value on error. By @cpcramer #1250
• fix: removed context states and use lifecyclestatus as the source of truth, also persisted all lifecycle status data (except errors). By @alessey #1249
• fix: extracting SwapMessage to constants to avoid circular dependency. By @alessey #1255
• feat: enhanced Framegear Home component with layout, loading state, and placeholder improvements. By @adarshswaminath #1241

Breaking Changes

Removed walletCapabilities from the OnchainKitConfig and improved the internal types by using the native Viem wallet capabilities type. This update ensures that wallet capabilities are now used solely as read info, avoiding accidental changes to wallet capabilities.

The <TransactionButton> will no longer have a preset margin, allowing you to customize your app's spacing. Please check your app to see if you need to add a 4px margin. We aim to provide more neutral spacing, giving you the flexibility to add margin as needed.

The LifeCycleStatus type is now renamed LifecycleStatus. This update aligns with React's lifecycle naming best practices, ensuring a smoother experience with your app. Please take note of this improvement.

v0.31.6

Patch Changes

• 6147155: - feat: added custom max slippage support in the Swap component along with a new settings dropdown UI. By @cpcramer #1176 #1248
  • feat: added type LifecycleStatusDataShared to the LifeCycleStatus to hold shared lifeCycle state. By @Zizzamia #1234 #1240
  • feat: introduced config for the Swap component, with the first option for maxSlippage. By @Zizzamia & @cpcramer #1242
  • fix: added spacing between swap input and token select. By @alessey #1229

v0.31.5

Patch Changes

• ef232c3: - feat: added calls support to Transaction component. by @0xAlec #1220
  • feat: added ConnectWalletText to help customize style within ConnectWallet. By @Zizzamia #1116 #1222
  • feat: added isMainnetOnly to isBase and isEthereum utilities. By @Zizzamia #1167 #1221
  • fix: fixed issue with inputText state persisting to latter Framegear frames. By @brendan-defi #1218

v0.31.4

Patch Changes

• 63742da: - feat: added support for EIP-5792 (https://eips.ethereum.org/EIPS/eip-5792) in OnchainKitProvider. By @0xAlec #1181
  • fix: adjusted hover styling for the Fund and Disconnect wallet components in mobile view. By @cpcramer #1211
  • feat added walletCapabilities for atomic batching (useWriteContracts vs useWriteContract) in Transaction component. By @0xAlec #1214

v0.31.3

Patch Changes

• a417d30: - feat: added buildPayTransaction utilities for making RPC calls to hydrate a charge and build a pay transaction in preparation for Pay button. By @avidreder #1177
  • feat: implemented custom slippage support sub-components in the Swap component. By @cpcramer #1187 #1192 #1191 #1195 #1196 #1206
  • docs: added Build Onchain Apps guide using OnchainKit's app template. By @Zizzamia #1202
  • fix: updated v1 Swap API to pass the correct slippage unit of measurement. By @cpcramer #1189

v0.31.2

Patch Changes

• ef6e936: - feat: added connect wallet functionality to Swap component for disconnected users. By @abcrane123 #1173
  • fix: added logic to refetch balances and clear inputs after Swap succeeds. By @0xAlec #1089
  • fix: adjusted Swap component style to prevent UI shifting. By @abcrane123 #1184

v0.31.1

Patch Changes

• 003c9b6: - fix: improved hover state for WalletDropdown component. By @cpcramer #1156
  • feat: added onchainkit-version header to API requests. By @0xAlec #1169
  • feat: introduced getAddress and useAddress utilities to easily retrieve an address from ENS name or basename. By @Zizzamia #1170

v0.31.0

Minor Changes

• 4382d93: - fix: error message in Swap experience. By @Zizzamia & @0xAlec #1154 #1153 #1155

  • fix: removed address prop from Swap component. By @abcrane123 #1145
  • feat: moving getTokens, buildSwapTransaction and getSwapQuote under the API module. By @Zizzamia #1146 #1151
  • fix: handled SSR hydration issues. By @abcrane123 #1117

  Breaking Changes
  We streamlined the Swap experience to match the Transaction experience by eliminating the need for an address prop, making it work automatically.

  All APIs within OnchainKit are now consolidated under the @coinbase/onchainkit/api module. There's no change in functionality; simply import them from the api module.

v0.30.0

Minor Changes

• feat: Moved the onError and onSuccess lifecycle listeners from the <SwapButton> component to the <Swap> component. By @Zizzamia #1139 ed2379e

Breaking Changes
OnchainKit standardizes lifecycle listeners with three callbacks: onError, onSuccess, and onStatus. The onError and onSuccess callbacks handle only the error and success states, respectively. In contrast, the onStatus callback provides more granular phases of each component's experience.

Before, we used onError and onSuccess in the <SwapButton /> component.

    const handleOnError = useCallback((error) => {
      console.log(error);
    }, []);

    const handleOnSuccess = useCallback((response) => {
      console.log(response);
    }, []);

    ...

    <Swap address={address}>
      <SwapAmountInput
        label="Sell"
        swappableTokens={swappableTokens}
        token={ETHToken}
        type="from"
      />
      <SwapToggleButton />
      <SwapAmountInput
        label="Buy"
        swappableTokens={swappableTokens}
        token={USDCToken}
        type="to"
      />
      <SwapButton
        onError={handleOnError}
        onSuccess={handleOnSuccess}
      />
      <SwapMessage />
    </Swap>

After, we use onStatus in the <Swap /> component.

    const handleOnStatus = useCallback((lifeCycleStatus: LifeCycleStatus) => {
      console.log('Status:', lifeCycleStatus);
    }, []);

    ...

    <Swap
      address={address}
      onStatus={handleOnStatus}
    >
      <SwapAmountInput
        label="Sell"
        swappableTokens={swappableTokens}
        token={ETHToken}
        type="from"
      />
      <SwapToggleButton />
      <SwapAmountInput
        label="Buy"
        swappableTokens={swappableTokens}
        token={USDCToken}
        type="to"
      />
      <SwapButton />
      <SwapMessage />
    </Swap>

The onStatus callback will expose

    export type LifeCycleStatus =
      | {
          statusName: "init";
          statusData: null;
        }
      | {
          statusName: "error";
          statusData: SwapError;
        }
      | {
          statusName: "amountChange";
          statusData: null;
        }
      | {
          statusName: "transactionPending";
          statusData: null;
        }
      | {
          statusName: "transactionApproved";
          statusData: {
            transactionHash: Hex;
            transactionType: "ERC20" | "Permit2";
          };
        }
      | {
          statusName: "success";
          statusData: {
            transactionReceipt: TransactionReceipt;
          };
        };

v0.29.5

Patch Changes

• feat: exported buildSwapTransaction, getSwapQuote and getTokens from API module. By @Zizzamia #1133 07c5af6
• feat: added useSendCall and useSendCalls hooks to support call-type transactions in Transaction component. By @0xAlec #1130