chore: version packages v0.30.0 🌊

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@coinbase/onchainkit@0.30.0

Minor Changes

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

  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;
        };
      };

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit-coverage	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2024 11:50pm
onchainkit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2024 11:50pm
onchainkit-routes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2024 11:50pm