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

v0.29.4

Patch Changes

• feat: moved onSuccess and onError for Swap component at top level. By @Zizzamia #1123 886d974
• patch: removed unneccessary address prop from Transaction component and fix issue where Sponsor component isn't visible. By @abcrane123 #1114
• chore: updated disconnect SVG image. By @cpcramer #1103
• fix: improved issue with Swap where it wasn't fetching quote for amount without a leading 0. By @abcrane123 #1128
  g

v0.29.3

Patch Changes

• chore: Update all cases of BaseName to Basename. Update WalletDropdownBaseName to WalletDropdownBasename. Update the identity type BaseName to Basename and WalletDropdownBaseNameReact to WalletDropdownBasenameReact. By @cpcramer #1110 3d47932

v0.29.2

Patch Changes

• fix: better defined pressable classes were accessing the hover state variable. Update the TransactionButton and WalletDropdown to use our pre-existing pressable classes. By @cpcramer #1092 704e160
• feat: added transactionIdle and transactionPending to lifeCycleStatus in the Transaction experience. By @Zizzamia #1088

v0.29.1

Patch Changes

• feat: WalletDropdownFundLink small improvements. By @0xAlec #1070 a17237a
• feat: better handling of FrameButton post actions. By @brendan-defi #1053
• fix: default accountChain for Identity component. By @Zizzamia #1071