-chore: Updated OnchainKitProvider
to fallback to CB verified schemaID. By @cpcramer #1575
-chore: Updated hasCopyAddressOnClick
functionality to specify Address
component. By @cpcramer #1547
-docs: Updated documentation. @dschlabach @fakepixels #1555 #1567
-docs: Added installation steps for Astro
, Nextjs
, Remix
, and Vite
. @brendan-defi #1546
-feat: Added hot-loading for playground development. @dschlabach #1551
-feat: Added NFTCard
, NFTCardDefault
, NFTMintCard
, and NFTMintCardDefault
components. @alessey #1580 #1483 #1490
- feat: Added
onConnect
handler to<ConnectWallet />
. By @dschlabach #1529 - feat: Added
NFTCard
andNFTMintCard
components. By @alessey #1409 - fix: Added media square prop, default to true. By @alessey #1548
- fix: Updated Transaction link for smart wallets. by @abcrane123 #1550
- fix: Updated Warpcast Socials link and SVG. By @cpcramer #1542
- fix: Updated badge checkmark styling. By @cpcramer #1537
- fix: Updated
hasCopyAddressOnClick
. By @cpcramer #1547
- d84e29d: -feat: Added
IdentityCard
andSocials
components. By @cpcramer #1489 -fix: AddedisSponsored
prop to components. By @abcrane123 #1499 -fix: Enforce base as chain for name resolution for Basenames. By @kirkas #1517
- feat: Added ability to customize error and success states for
TransactionButton
. By @abcrane123 #1460 - feat: Added custom
Theming
support. By @cpcramer #1465 - feat: added
name
andlogo
toOnchainKitProvider
. by @0xAlec #1506 - fix: Added callback support to the
Transaction
component. By @alessy #1473 - docs: Updated documentation. By @0xAlec @dschlabach @fakepixels @cpcramer #1465 #1470 #1477 #1478 #1486 #1487 #1490
- feat: Updated playground with
Checkout
component and customTheming
. @0xAlec @cpcramer #1428 #1465 - feat: Updated landing page. @mindapivessa #1482 #1496
- fix: clear error message in CheckoutStatus if a request is denied. by @0xAlec #1510
- feat: Add handling for calls and contracts promises in Transactions component. By @alessey #1450
- feat: added presetCryptoAmount param to Checkout. by @0xAlec #1461
- chore renamed
Pay
module toCheckout
. by @0xAlec #1455 - fix: fixed paymaster sponsorship prop
isSponsored
inCheckout
component. by @0xAlec #1458 - fix: Updated
ConnectWalletText
component styling to match theConnectWallet
text prop formatting. By @cpcramer #1445
Breaking Changes:
Pay
has been renamed to Checkout
. If you are using this component, please update your imports as necessary.
- chore: Update missing address error handling in the
Identity
components. By @cpcramer #1430 - feat: Added formatting for scientific notation for Swap amounts. by @0xAlec #1423
- feat: Added
paymaster
field to OnchainKitConfig. by @0xAlec #1425 - feat Added
isSponsored
toPay
component. by 0xAlec #1427 - feat: Added
Pay
component theming support. By @cpcramer #1431 - fix: Added browser window check in usePreferredColorScheme to fix server side errors. By @cpcramer #1424
- feat: Added
Theming
support. By @cpcramer #1354 - docs: Added
Pay
component docs. By @0xAlec #1400
Breaking Changes
- Added a new config parameter to the
OnchainKitProvider
. The config object includes an appearance property with optionalmode
andtheme
parameters, allowing you to customize the appearance of your components. - Updated CSS variables to use the
ock
prefix (e.g.,--ock-bg-default
). We’ve also introduced many new variables to enhance theming customization. - For detailed information and theming instructions, refer to the
Theming Guide
in the documentation.
-chore: Updated documentation, including support for copy to clipboard
functionality in code blocks. By @alessey @fakepixels #1342 -chore: Reset state in Pay
component after Get USDC
is clicked. By @0xAlec #1394
-fix: Removed circular dependency for WalletDefault. By @abcrane123 #1378
- feat: Added SwapDefault component which renders suggested implementation of Swap. By @abcrane123 #1303
- feat: Added WalletDefault component which renders suggested implementation of Wallet. By @abcrane123 #1302
- feat: Added TransactionDefault component which renders suggested implementation of Transaction. By @abcrane123 #1350
- feat: Added [Pay] component. by @0xAlec #1349
- feat: Implemented the fund button integrated with Coinbase Onramp. By @steveviselli-cb #1322
- feat: integrated Coinbase Onramp into
WalletDropdownFundLink
for funding EOA wallets. By @steveviselli-cb #1285
- feat: added Swap USD values. By @cpcramer #1286
- feat: added
SwapToast
component that renders on success. By @abcrane123 #1281 - feat: added
isSponsored
prop forSwap
. By @0xAlec #1293
- feat: set v2 as default API for Swap. by @0xAlec #1254
- chore: updated
SwapSettingsSlippageInput
to use the input config defaultMaxSlippage value. By @cpcramer #1263 - feat: added batched Swap transactions from ERC-20. by @0xAlec #1272
Breaking Changes
Updated LifecycleStatus
in Swap
component for swaps from ERC-20 tokens.
Previously, there were 2 transactions when swapping from an ERC-20 token.
Now, there is an extra approval. (Approve ERC-20 against Permit2 -> Approve Uniswap to spend the approved ERC-20s on Permit2 -> Execute Swap Transaction)
Additionally, for Coinbase Smart Wallet users, transaction calls are now batched so only one transactionApproved
lifecycle status will be emitted under the Batched
transaction type for swaps from ERC-20s.
If you're listening to the LifecycleStatus
in Swap
, please make sure your app accounts for the extra transaction.
-
7e18c98: - 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 theOnchainKitConfig
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 renamedLifecycleStatus
. This update aligns with React's lifecycle naming best practices, ensuring a smoother experience with your app. Please take note of this improvement. - fix: removed
- 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 theLifeCycleStatus
to hold shared lifeCycle state. By @zizzamia #1234 #1240 - feat: introduced
config
for theSwap
component, with the first option formaxSlippage
. By @zizzamia & @cpcramer #1242 - fix: added spacing between swap input and token select. By @alessey #1229
- feat: added calls support to
Transaction
component. By @0xAlec #1220 - feat: added
ConnectWalletText
to help customize style withinConnectWallet
. By @zizzamia #1116 #1222 - feat: added
isMainnetOnly
toisBase
andisEthereum
utilities. By @zizzamia #1167 #1221 - fix: fixed issue with inputText state persisting to latter Framegear frames. By @brendan-defi #1218
- feat: added support for
EIP-5792
(https://eips.ethereum.org/EIPS/eip-5792) inOnchainKitProvider
. By@0xAlec #1181 - fix: adjusted hover styling for the
Fund
andDisconnect
wallet components in mobile view. By @cpcramer #1211 - feat added
walletCapabilities
for atomic batching (useWriteContracts
vsuseWriteContract
) inTransaction
component. By @0xAlec #1214
- feat: added
buildPayTransaction
utilities for making RPC calls to hydrate a charge and build a pay transaction in preparation forPay
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
- 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
- fix: improved hover state for WalletDropdown component. By @cpcramer #1156
- feat: added
onchainkit-version
header to API requests. By @0xAlec #1169 - feat: introduced
getAddress
anduseAddress
utilities to easily retrieve an address from ENS name or basename. By @zizzamia #1170
- fix: error message in
Swap
experience. By @zizzamia & @0xAlec #1154 #1153 #1155 4382d93 - fix: removed
address
prop fromSwap
component. By @abcrane123 #1145 - feat: moving
getTokens
,buildSwapTransaction
andgetSwapQuote
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.
- feat: Moved the
onError
andonSuccess
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;
};
};
- feat: exported
buildSwapTransaction
,getSwapQuote
andgetTokens
from API module. By @zizzamia #1133 07c5af6 - feat: added
useSendCall
anduseSendCalls
hooks to support call-type transactions inTransaction
component. By @0xAlec #1130
- feat: moved
onSuccess
andonError
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
- chore: Update all cases of BaseName to Basename. Update
WalletDropdownBaseName
toWalletDropdownBasename
. Update the identity typeBaseName
toBasename
andWalletDropdownBaseNameReact
toWalletDropdownBasenameReact
. By @cpcramer #1110 3d47932
- fix: better defined pressable classes were accessing the hover state variable. Update the
TransactionButton
andWalletDropdown
to use our pre-existing pressable classes. By @cpcramer #1092 704e160 - feat: added
transactionIdle
andtransactionPending
tolifeCycleStatus
in the Transaction experience. By @zizzamia #1088
- 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
- feat: updated view transaction link experience. By @abcrane123 #1016 ccfc47f
- fix: modified
Avatar
component to handle images with varying height/width ratio. By @kirkas #1058 - chore: removed console.log statement in
useWriteContracts
. By @abcrane123 #1048 - feat: added mobile drawer for
Wallet
experinece, anduseBreakpoints
hook. By @abcrane123 #1045 - feat: introduced
onStatus
listener, to help expose the internalTransaction
's component lifecycle.By @zizzamia #1034 #1047 #1055 - feat: added
WalletDropdownFundLink
component as dropdown link for the keys.coinbase.com funding flow.By @0xAlec #1021 - chore: increased
Wallet
dropdown png size to 18x18. By @cpcramer #1041 #1064 - chore:
Transaction
components cleanup. By @zizzamia #1028 #1029 #1052 - fix: adjusted dark mode within
TransactionToast
. By @abcrane123 #1020
- fix:
Wallet
components svg render. By @cpcramer #1011 c14ca17
- fix: exported
TransactionResponse
type. By @abcrane123 #1007 2169905
- feat: added
isBasename
andgetBaseDefaultProfilePicture
function to resolve to default avatars. By @kirkas #1002 9fbb7ec - feat: modified
getAvatar
to resolve default avatars, only for basenames. By @kirkas #1002
- chore: updated all Wallet dropdown SVGs to render 16x16. Update text to Claim Basename (if no Basename), otherwise "Profile". By @cpcramer #990 0351295
- feat: added chain props to
useAvatar
andgetAvatar
to resolve Base avatar. By @kirkas #986 - feat: modified
getAvatar
to resolve Base avatar, and fallback to mainnet if none is found. By @kirkas #986
- fix: wallet dark mode. By @kyhyco #995 031251d
- feat: dark mode. By @kyhyco #977 d0e2a08
- feat: added
Permit2
approval process for UniversalRouter in theSwap
experiece. By @0xAlec #980 16c004b
- feat: refactored the
<Transaction>
component'sonSuccess
handler to manage multiple receipts for various contracts, supporting both EOA and Smart Wallet scenarios. baa5cf8
Breaking Changes
When using onSuccess
in the <Transaction>
component, refactor the response to handle:
type TransactionResponse = {
transactionReceipts: TransactionReceipt[];
};
- fix: added Base Names testnet compatibility. By @cpcramer #966 a348e27
- chore: organized const variables and update imports for the
Transaction
component. By @cpcramer #961 - fix: added close wallet dropdown when clicking outside of the component's container. By @cpcramer #925
- feat: renamed
<TransactionToast>
prop fromdelayMs
todurationMs
. By @abcrane123 #967 f40b855
Breaking Changes
The delayMs
prop for the <TransactionToast>
component has been renamed to durationMs
. Thischange clarifies that delay
refers to when something starts, while duration
specifies how longit lasts.
Learn more about this component type at https://onchainkit.xyz/transactiontypes#transactiontoastreact
- feat: add
onStart
hook toSwapButton
. By @0xAlec #914 904e495
- feat: added experimental configurable maxSlippage feature for
Swap
. By @0xAlec #946 1c0ba1d
- feat: added
WalletDropdownBaseName
component. By @cpcramer #913 d50b85d
- feat: continued
Transaction
component QA. By @abcrane123 #944 1110ec9
- fix: handle edge case in
toReadableAmount
. By @0xAlec #934 74bd1a0 - fix: hide sponsor if txn in progress. By @abcrane123 #931
- fix:
formatDecimals
precision. By @0xAlec #912 5d9b4f8 - fix: additional
Transaction
component QA. By @abcrane123 #923 #931
- fix: made
IdentityProvider
to use address directly when switching address. By @kirkas #910 e4a9c5c
- feat: added wait for transaction receipt hook. By @abcrane123 #907 41e27f6
- fix:
WalletCapabilities
type in the Transaction component. By @zizzamia #908 69119dc
- fix: updatd Base mainnet L2 resolver address. By @kirkas #903 04e1376
- feat: added
SmartWalletCapabilities
paymaster support in theTransaction
component. By @ilikesymmetry @cpcramer #893
- fix: have
WalletDropdownDisconnect
to correclty disconnect all connectors. By @kirkas #895 8e78166
- feat: added
convertChainIdToCoinType
function to convert a chainId to a coinTypeHex for ENSIP-19 reverse resolution. By @kirkas #891 3cfbdc0 - fix: modified
convertReverseNodeToBytes
to useconvertChainIdToCoinType
instead of hardcoded resolver address. By @kirkas #891 - fix: modified
useName
to return a typeBaseName
for extra type safety. By @kirkas #891 - feat: Add more storybook scenarios for
<Name>
. By @kirkas #891
- feat: added experimental API for
Swap
components to enable UniswapRouter. By @0xAlec #878 6cf5f66
- fix: fetch ens with
getName
. By @zizzamia #888 92a0cf0
- fix: colors for
Swap
components. By @zizzamia #879 6992cff - chore: adjust messaging related to transaction status. By @abcrane123 #875
- fix: have
useName
hook to usechain.id
in the query key to avoid overlap between chains. By @kirkas #869 - feat: added EOA account support to
Transaction
component. By @cpcramer #866
- fix: copy popover style within the
IdenityLayout
. By @zizzamia #870 3128263 - feat: added toast animation for
TransactionToast
component. By @abcrane123 #865
- feat: added the
ock
prefix to the Tailwind configuration to prevent conflicting styles (#852) when using OnchainKit alongside an existing Tailwind setup. By @zizzamia #867 ff8d359
Breaking Changes
For apps using OnchainKit with the same Tailwind variables, you might see style changes. We recommend following the guide at https://onchainkit.xyz/guides/tailwind or adjusting your custom OnchainKit styles. If you encounter any issues, reach out to @zizzamia or @onchainkit on Twitter for immediate assistance.
- feat: added
TransactionSponsor
component. By @abcrane123 #853 a2eae6c - chore: updated sliced address to display the first and last 4 characters. By @cpcramer #847
- fix:
Name
component to return the sliced address when no ENS name is found. By @cpcramer #842 387e2b4 - feat: polish
Transaction
component. By @abcrane123 #831 #835 - chore: fix TransactionGasFee test. By @cpcramer #830
- feat: adjust
writeContracts
functionality. By @zizzamia #826 53ba268 - feat: added
Transaction
toast components. By @zizzamia #818 - chore: added unit tests to the
Transaction
component. By @cpcramer #817
- chore: exported
Transaction
components. By @zizzamia #820 8e07918
- feat: added initial version of
Transaction
component. By @abcrane123 & @zizzamia #816 #787 5c6ce95 - feat: updated Viem and Wagmi version. By @zizzamia #815
- chore: Add WalletDropdown Disconnect and Link tests. By @cpcramer #810
- chore: Add Identity unit tests. By @cpcramer #807
- feat: added RainbowKit support to the
ConnectWallet
component. By @zizzamia #797 d80b01e
- fix: modified
getName
to default to ENS name when custom chain name is not available. By @kirkas #792 7ef7bac
- feat:
Swap
ERC-20 Approval Flow. This is a breaking change that removes theonSubmit
functionality from theSwapButton
component and adds an approval flow for swapping from ERC-20 tokens. By @0xAlec #761. 77531f4 - feat: Added
chain
option to<IdentityProvider>
for L2 chain name resolution support. By@kirkas #781 - feat: Added
chain
option to<Identity>
component for L2 chain name resolution support. By@kirkas #781 - fix: Modify
<Name>
to prioritize its own address/chain props over the provider's. By @kirkas#781 - fix: Modify
<Address>
,<Avatar>
,<EthBalance>
&<DisplayBadge>
to prioritize its ownaddress prop over the provider's. By @kirkas #781
Breaking Changes
Removed the onSubmit
functionality from the SwapButton
component and adds an approval flow forswapping from ERC-20 tokens.
- feat: Added
chain
option touseName
function for L2 chain name resolution support. By @kirkas #781 beed765 - feat: Added
chain
option to<Name>
component for L2 chain name resolution support. By @kirkas #781 - fix: Modified
getName
to return a rejected promise instead of an error. By @kirkas #781 - fix: Disabled
retry
ingetNewReactQueryTestProvider
to run tests faster and avoid timeouts. By @kirkas #781
- feat: added
chain
option togetName
, this will help add ENS support for L2 chains. By @kirkas #773 19fd6b8 - feat: added
isEthereum
function, to help check if a chain is L1. By @kirkas #773 - chore: simplified type for
getAttestations
. By @zizzamia
- feat: added
isSliced
option to theAddress
component. This allows this component to render the full users address when set to false. UpdategetName
and theName
component to returnnull
if the ENS name is not found for the given address. By @cpcramer #737 8124f8c
- feat: init
Transaction
components. By @zizzamia #763 4a37815
- feat: exported
SwapToggleButtonReact
,WalletDropdownDisconnectReact
andWalletDropdownLinkReact
types. Added more custom option toWalletDropdownLink
component. By @zizzamia #754 5959b49
- chore: Swap components internal refactor. By @kyhyco #746 d638dc9
Breaking Changes
ConnectAccount
has been removed fromWallet
module.ConnectWallet
'slabel
prop renamed totext
.- Update
getName
and theName
component to returnnull
if the ENS name is not found for the given address.
- feat: add className to ConnectWallet and WalletDropdown components. By @kyhyco #737 6a3fde5
- docs: Update Swap docs to include className override changes. Add new override example and image in the Swap page. By @cpcramer #722 19a7f6f
- feat: add hasCopyAddressOnClick to Identity component. By @kyhyco #730 #734 72f287b
- feat: add EthBalance component to identity. By @kyhyco #729
- feat: add ConnectWallet component. By @kyhyco #720 #728
- chore: Remove unsupported fields from the Coinbase Wallet Provider. appChainIds and options. By @cpcramer #717 f98d4bf
- docs: Update Token Type docs with new className parameter. By @cpcramer #716 cc7cf73
- feat: Add Swap Kit component className override. By: @cpcramer #719 e6a2d77
- fix: revert peer dependancy PRs. f4fcd2a
- docs: Update Swap component docs. Update wagmi import from sendTransaction to useSendTransaction. Add EthToken and USDCToken parameters. By @cpcramer #694 6ce8682
- docs: Update getting started guide. Add OnchainProviders.tsx file name. Add code focus for the newly added OnchainProviders.tsx code in the ConfigureWagmiProvider step. By @cpcramer #692 a16c5ed
- fix: Avatar component now handles className override correctly. By @kyhyco #697 1ad6c98
- fix: revert "use client". By @kyhyco #690 ad7cd60
- feat: Identity polish. By @kyhyco #675 b834572
- add
fill
theme - update
Name
component default font color - add
className
prop toIdentity
- add
className
prop toBadge
and remove styling props - add
className
prop toAvatar
- fix using
address
prop onAvatar
andName
component along withIdentity
- remove
showAddress
fromgetName
- add
- feat: add
use client
directives components. By @roushou #668 #669 #670 #655 #667 - docs: force doc site to connect to base. By @kyhyco #613 1f8fcb1
- chore: Add test coverage and comments. By @abcrane123 #676 2198bed
- feat: Add "everything you need to build onchain" section to the landing page. By @cpcramer #679 097df0d
- docs: Update docs with SwapMessage info. By @abcrane123 #662 d4fdc77
- chore: Refactor balance api calls into reusable hooks. By @abcrane123 #673 a1b87f6
- chore: Update the landing page View Docs button styling, title description, and href link behavior to always open in a new tab. By @cpcramer #660 0e9bd1b
- chore: Update swap messages and reset error states. By @abcrane123 #677 72138fe
- feat: refactor Identity components and add Address component. By @kyhyco #641 0903bf7
Breaking Changes
showAddress
has been removed fromName
component.showAttestion
has been removed fromName
andAvatar
components. AddBadge
inName
orAvatar
children to render attestations.
Features
Address
component handles rendering account address.Address
component can be passed intoIdentity
component- Similar to
Name
component,address
prop can be assigned toAddress
orIdentity
component
- docs: fix ui regression on index.mdx. By @cpcramer #661 78d38b0
- feat: added background, pressable and color themes. By @kyhyco #642
- docs: updated Tailwind integration guide. By @kyhyco #636
- feat: updated
SwapMessage
component to display error and loading states. By @abcrane123 #611
- feat: update
lib
toesm
for exported files. By @kyhyco #653 eb19002 - feat: init Wallet component. By @zizzamia #654
- feat: added loading state and spinner to
SwapButton
. By @abcrane123 #633 ac33e28
- feat: add className override to all Text components. By @kyhyco #640 4387f14
- fix: revert "chore: upgrade packemon to v4". By @zizzamia #646
- chore: upgrade packemon to v4 and going forward support ESM only. By @kyhyco #616 4b762a1
- feat: enable geo blocking for restricted territories. By @cpcramer #614
- feat: added theming to all
Text
components. By @kyhyco #632 bf26c81 - feat: refactored balance api calls and add swap quote loading state. By @abcrane123 #630
- feat: added badge feature to
Identity
component. By @zizzamia #627 8c873f1
- fix:
Identity
matchingName
component. By @zizzamia #624 425f4fd
- feat: added
Name
toIdentity
. By @zizzamia #622 0c9fdc9
- feat: intro
Identity
component. By @zizzamia #620 5c7f076
- feat: added title prop to Swap component. By @kyhyco #615 693e145
- fix: handled edge case for Swap Balance. By @abcrane123 #612
- docs: updated doc site to 0.20.15 and include Swap component variations. By @kyhyco #609
- feat: disabled
SwapButton
in docs and removedonSubmit
. by @0xAlec #608
- fix: remove onError prop from Swap components. By @kyhyco #602 356fe39
- feat: docs for
buildSwapTransaction
+ cleanup. By @0xAlec #605 9eed9b5 - feat: add optional disable prop to SwapButton. By @abcrane123 #604 3d71b4a
- fix: error message from an unset api key. By @0xAlec #600 2adbe4f
- feat: simplified
Transaction
type inSwap
experience. By @zizzamia #598 cb44eba - feat: init
SwapMessage
component. By @zizzamia #596
- feat: added
delayMs
optional prop toSwapAmountInput
. By @zizzamia #594 d26378f - docs: config update. By @kyhyco #586
- fix:
SwapAmountInput
now correctly displays text styles. By @kyhyco #581 fb26571
- fix: fix
TokenSelectButton
hit detection. By @kyhyco #577 8aff0e8
- feat: added DM Sans. By @kyhyco #574 199c00f
- featt: added Balance info in
Swap
components. By @abcrane123 #558 - feat: added
SwapToggleButton
. By @kyhyco #572
- fix: fix get quote logic in
Swap
component. By @kyhyco #568 5479818
- fix: swap
Token
pair mode. By @kyhyco #566 5347ea9 - feat: added input delay to
SwapAmountInput
. By @kyhyco #563 - feat: addeded swappable tokens to
SwapAmountInput
. By @abcrane123 #561 - fix: updated Smart Wallet util. By @lukasrosario #564
- chore: updated
isWalletASmartWallet
name to beisWalletACoinbaseSmartWallet
. We want to explicitly state that this is checking for Coinbase Smart Wallets. By @cpcramer #562 - feat: enableded linting in CI. By @zizzamia #559
- fix: fix
Identity
components lint errors. By @kyhyco #555 1cd548a - fix: fix
Token
component lint errors. By @kyhyco #554 - feat: updated
Swap
style. By @kyhyco #553 - feat: refactored and clean up internals. By @zizzamia #552
- feat: introduce
Inter
font-family and internal text components. By @kyhyco #506
- fix: added Token amount formatter. By @abcrane123 #543 #544 0225039
- chore: more code cleanup. By @zizzamia #536 #537
- fix:
Swap
type. By @zizzamia #532 5a8cd45
- feat: exported
Swap
components. By @zizzamia #530 5cab65c
- feat: added
Swap
component. By @abcrane123 & @kyhyco #522 9fef5e9
- feat: added
buildSwapTransaction
. By @0xAlec & @zizzamia #503 #518 ccb069e - fix: added tailwind utilities to exported styles.css. By @kyhyco #515
- feat: set
clsx
,tailwind-merge
,viem
andwagmi
as library dependency. By @zizzamia #512 39e4715 - feat: removd
TokenSelector
components and add refactoredTokenSelectDropdown
. By @kyhyco #508 - feat: added
SwapAmountInput
. By @abcrane123 #504 - feat: refactor CSS styles with a proper use of TailwindCSS. By @roushou #500
- fix: have API_KEY set correctly by
OnchainKitProvider
and avoid request CORS issue with theonchainkit_version
Header. By @zizzamia #501 a47b07f
- fix: added border transparent to Badge component. By @zizzamia #493 c54ec7b
- chore: continue migrating to Tailwind for CSS internals. By @zizzamia #492 477e1f5
- fix: reduce gap between
TokenSelector
andTokenSelectorDropdown
. By @kyhyco #489 - docs: add back
TokenSelectorDropdown
example. By @kyhyco #487
- feat: updated TokenKit styles. By @kyhyco #482 10d1fa9
- feat: added
getQuote
. by @0xAlec #479 fdab188 - feat: deprecated
LegacyTokenData
. By @0xAlec #478 - feat: added
TokenSelectorDropdown
to use withTokenSelector
. By @kyhyco #475
- feat: converted
Badge
to css. By @zizzamia #476 9b03393 - feat: converted
TokenRow
to css, add modifier state and add additinal display controls. By @kyhyco #473
- feat: for
getAvatar
now we useensName
instead ofname
. By @zizzamia #471 b6653f1
-
feat: standardized
getAvatar()
. By @roushou #464 029ba7d -
feat:
TokenImage
with no image renders partial token symbol and deterministic dark color. By @kyhyco#468 -
feat: converted
TokeSearch
to css and add modifier styles. By @kyhyco #460 -
docs: added contribution guide. By @kyhyco #459
Breaking changes
- Changed the definition of
getAvatar(...)
, fromgetAvatar(ensName: string)
togetAvatar(params: {ensName: string })
. - Changed
TokenImage
props from
export type TokenImageReact = {
src: string | null;
size?: number;
};
to
export type TokenImageReact = {
token: Token;
size?: number;
};
- feat: postcss integration + add modifier states TokenChip css. By @kyhyco #453 db2e1d9
- feat: added the
isWalletASmartWallet
utility which helps verify if a given sender address is a Smart Wallet proxy with the expected implementation before sponsoring a transaction. By @cpcramer & @zizzamia #420 #454 dd31024
- fix: style.css location. By @zizzamia 62be36a
- fix: style.css location. By @zizzamia #445 81ea439
- fix: moved
styles.css
at top level. By @zizzamia #443 afc7d2d
- feat: added taildwindcss. By @kyhyco #441 0c6420a
- feat: added
TokenImage
to render token image. By @kyhyco #438 - feat: added
TokenSelector
, a button component to render token info or placeholder text. By @kyhyco #438
- feat: TokenKit first version is ready to be used. By @zizzamia 361d5c6
- chore: revert TokenChip.css. By @kyhyco #426 fe340d7
- feat: add TokenSearch component that allows users to search on a given list of tokens by name, symbol and address. By @kyhyco #421 0f14362
- feat: added
onchainkit_version
header to API requests. By @zizzamia #423 04cda00 - feat: updated the
FrameTransactionResponse
type to accommodate aneth_personalSign
method needed for XMTP consent proofs. By @daria-github #413 - docs: update GetTokens to include capability to search by address. By @kyhyco
- chore: updated
TokenSelector
docs and addeduseFilteredTokens
toTokenSelector
. By @kyhyco #417 9576276 - feat: added
TokenSelector
to select a token from a list. By @kyhyco #410 350066e
- feat: added
isValidAAEntrypoint
wallet utility function. By @cpcramer #409 68d5c3d
- feat: Added
isBase
utility function. By @cpcramer #403 66b8309
- feat: added
TokenRow
component to render Token is a row format. By @kyhyco #399 7485234
- feat: added
formatAmount
utility function to assist in formatting token amounts. By @kyhyco #398 0265426
- feat: added
permissionless
as dependency for WalletKit. By @zizzamia #396 bf94ffd
- feat: added
getTokens
, which helps retrieve a list of tokens on Base. By @0xAlec #389 2922e75
- feat: polished
Token
Type. By @zizzamia #386 17a3d06 - feat: init
TokenChip
component. By @kyhyco #383 - feat: scaffold Swap API request and types. By @0xAlec #381
- feat: add CDP api key and rpc url to OnchainKitConfig and OnchainKitProvider. By @0xAlec #379
- feat: added
getOnchainKitConfig
andsetOnchainKitConfig
to access and edit the share OnchainKit config directly. By @zizzamia #376 9498586
Breaking Changes
Removed getFrameHtmlResponse
, getFrameMessage
, getMockFrameRequest
and Frames types from the root level exports. And you can find them going forward in @coinbase/onchainkit/frame
.
- feat: exported
ConnectAccountReact
type. c4a9f78
- fix: packemon. By @zizzamia 8b56121
- feat: keep polishing the
ConnectAccount
component. By @zizzamia #344 64b59f7
- feat: init
ConnectAccount
component, which will make even easier to use Smart Wallet. By @zizzamia #342 9f93913
Breaking Changes
Transition to exclusively using ESM and phase out CommonJS support.
- feat: renamed anything that says
EASAttestation
to justAttestation
. This should help better popularize the concept of attestation. By @zizzamia #332 7935116
Breaking Changes
The getEASAttestations
now is getAttestations
.
- feat: added missing CSS radius on
Avatar
component. By @zizzamia #329 78319ec
- chore: deprecated root level imports for
getFrameMetadata
,FrameMetadata
,Avatar
,Name
,useAvatar
,useName
utilities and components. By @zizzamia a83f9f0
- feat: added
showAddress
as an option to theName
component. By @zizzamia #322 249e1ac
Breaking Changes
- The
Name
component will useshowAddress
to override the default ENS behavior, andgetName
. It will have multiple options as input, which means to pass the address you have to dogetName({ address })
instead ofgetName(address)
. - Removed
getFrameMetadata
,FrameMetadata
,Avatar
,Name
,useAvatar
,useName
from the root level exports. And you can find them going forward in either@coinbase/onchainkit/frame
or@coinbase/onchainkit/identity
.
- feat: exported
BadgeReact
type. By @zizzamia #312 42ae354
- feat: keep polishing the
Badge
component props and how to customize it. By @zizzamia #310 f4e432f
- feat: added custom style to
Badge
component. By @zizzamia #307 7476951
- feat: defined three main props for
OnchainKitProvider
:address
,chain
andschemaId
. By @zizzamia #305 49c4233
- feat: added Ethereum Attestation
Badge
component to the Identity kit. By @kyhyco & @zizzamia #259 #289 75f309c
- feat: added missing
address
andtransaction
field forFrameValidationData
type. By @zizzamia & @SamuelLHuber #287 d61861f
- feat: init Open Frame spec support. By @zizzamia @daria-github @neekolas #285 b8aa317
- feat: exposed the
getName
andgetAvatar
utilities to assist in retrieving name and avatar identity information. These utilities come in handy when working with Next.js or any Node.js backend. By @zizzamia #265 #283 b795268
- feat: upgraded
@xmtp/frames-validator
package to 0.6.0. By @zizzamia #278 #277 695b4a0
- feat: include peer dependency for graphql@15 and graphql@16. By @benson-budiman-cb #270 2301e64
- feat: 100% unit-test coverage. By @zizzamia #256 d8c3349
- fix:
button.target
is not dependent onbutton.action
. By @cnasc #243 d0a2a35
- feat: added
post_url
optional metadata fortx
Frame. By @zizzamia, @cnasc, @spennyp #237 8028007
Note: this is the version with fully working Frame TX feature.
- feat: Replace internal
useOnchainActionWithCache
withtanstack/react-query
. This affectsuseName
anduseAvatar
hooks. The return type and the input parameters also changed for these 2 hooks. 4090f4f
BREAKING CHANGES
The input parameters as well as return types of useName
and useAvatar
hooks have changed. The return type of useName
and useAvatar
hooks changed.
- 7238d29: - fix: for
FrameTransactionEthSendParams.data
replacedAddress
withHex
. By @zizzamia #224
- 6763bb2: - fix: converted the
value
forFrameTransactionEthSendParams
to string. By @zizzamia 221
- 1c94437: - feat: added
transactionId
inFrameData
. By @zizzamia #218
- 3f76991: - feat: added
state
type support forFrameData
andFrameValidationData
. By @zizzamia #216- fix: update Neynar frame validation type. By @Flickque #212
- 3476d8a: - feat: exported
GetEASAttestationsOptions
type, and polished EAS docs. By @zizzamia #210
- 8a3138c: - feat: added
FrameTransactionResponse
andFrameTransactionEthSendParams
as initial version of Frame Transaction types. By @zizzamia #211- docs: polished introduction for Frame and Identity pages. By @zizzamia #211
- 75dc428: - feat: added
tx
as a Frame action option, enabling support for Frame Transactions. By @zizzamia #208
- 4410ad0: - chore: added Cross Site Scripting tests for
frame:state
. By @zizzamia #199- feat: added support for passing
state
to frame server. By @taycaldwell #197
- feat: added support for passing
- fix: in EAS did checksum address before querying GQL endpoint. By @dneilroth #182
- feat: added support for both ETH and SOL
verified_addresses
for getFrameMessage. By @cnasc #181 4c7fe48
- fix: EAS graphql types. By @dneilroth #177 606a717
- fix:
frame
module. By @zizzamia #174 0f7ef77
- feat: created
frame
module. By @zizzamia #172 605ce64
- feat: prep the identity
identity
module. By @zizzamia #171 311b027 - feat: added initial version of
getEASAttestations
, which helps getting the user attestations from the Ethereum Attetation Service (EAS). By @alvaroraminelli #126
- fix: make sure imports from
core
,farcaster
andxmtp
work. c30296d
- feat: Added
getXmtpFrameMessage
andisXmtpFrameRequest
so that Frames can receive interactions from apps outside of Farcaster, such as from XMTP conversations. By @neekolas #123 272082b
- feat:
getFrameMessage
can now handle mock frame messages. WhenallowFramegear
is passed as an option (defaults tofalse
), it will skip validating which facilitates testing locally running apps with future releases offramegear
. By @cnasc #149 ee72476
- feat: Updated
FrameMetadataType
to supporttarget
for buttonpost
andpost_redirect
actions. By @HashWarlock @zizzamia #130 #136 26f6fd5
Note:
In this release we update the FrameMetadataType
so that it supports the latest Handling Clicks Frames specification.
If the button clicked is a post
or post_redirect
, apps must:
- Construct a Frame Signature Packet.
- POST the packet to
fc:frame:button:$idx:target
if present - POST the packet to
fc:frame:post_url if target
was not present. - POST the packet to or the frame's embed URL if neither target nor action were present.
- Wait at least 5 seconds for a response from the frame server.
- docs: Init https://onchainkit.xyz . By @zizzamia #131 926bc30
- feat: Added
getFarcasterUserAddress
utility to extract the user's custody and/or verified addresses. By @Sneh1999 #114 #121 - feat: Updates the version of
@types/jest
package. By @Sneh1999 #114
- feat: automated the
og:image
andog:title
properties forgetFrameHtmlResponse
andFrameMetadata
. By @zizzamia #109 c5ee76d
- feat: better treeshaking support by using packemon. By @zizzamia & @wespickett #105 fc74af1
BREAKING CHANGES
For modern apps that utilize ES2020
or the latest version, breaking changes are not anticipated. However, if you encounter any building issues when using OnchainKit with older apps that rely on ES6
, please open an issue and provide details of the error you're experiencing. We will do our best to provide the necessary support.
- feat: exported
FrameButtonMetadata
,FrameInputMetadata
andFrameImageMetadata
types. By @zizzamia #111 bf014fd - feat: introduced support for image aspect ratio metadata, ensuring backward compatibility. Image metadata can now be defined either as a string (with a default aspect ratio of
1.91:1
) or as an object with a src URL string and an aspect ratio of either1.91:1
or1:1
. By @taycaldwell #110
- feat: all
FrameMetadataType
parameters have been updated to use consistent lowerCamelCase. It's important to note that we are not deprecating the old method, at least for a few weeks, to allow time for migration to the new approach. By @zizzamia #106 f2cf7b6 - feat: while there is no real issue in using either
property
orname
as the standard for a metadata element, it is fair to respect the Open Graph specification, which originally usesproperty
. By @zizzamia #106
- fix:
<FrameMetadata>
component when used with Helmet. To ensure smooth functionality when used with Helmet as a wrapper component, it is crucial to flatten the Buttons loop. By @zizzamia #99 cefcfa8 - feat: added
Avatar
component, to our Identity Kit. TheAvatar
component primarily focuses on showcasing ENS avatar for given Ethereum addresses, and defaults to a default SVG avatar when an ENS avatar isn't available. By @alvaroraminelli #69
- feat: added option for mint action on a Frame. By @zizzamia #93 f9f7652
- feat: added option for simple static links when creating a Frame. By @zizzamia #93
- feat: added
wrapper
prop to<FrameMetadata />
component, that defaults toReact.Fragment
when not passed (original behavior). By @syntag #90 #91 - feat: exported
FrameMetadataResponse
type which can be useful when usinggetFrameMetadata
in a TS project. By @syntag #90
- fix: ensured that the
<FrameMetadata>
component uses thename
property instead of theproperty
property to set the type of metadata. Both options are technically correct, but historically, usingname
is more accurate. dc6f33d - feat: renamed the component from
OnchainName
toName
in our Identity Kit. This is a breaking changes. The purpose of the rename is to simplify and enhance clarity. By @alvaroraminelli #86
BREAKING CHANGES
To enhance usability and intuitiveness, the component name has been simplified. OnchainName
is now renamed to Name
.
Before
import { OnchainName } from '@coinbase/onchainkit';
...
<OnchainName address="0x1234">
After
import { Name } from '@coinbase/onchainkit';
...
<Name address="0x1234">
- feat: exported
FrameMetadataType
. 6f9dd77
- fix: added missing
input
type onFrameValidationData
. d168475
- feat: added
textInput
toFrameData
. 4bd8ec8
- feat: added support for Text Input metadata for Farcaster Frames. By @taycaldwell #67 89e5210
- feat: added
FrameMetadata
component, to help support metadata elements with classic React apps. By @zizzamia #71 - feat: added
OnchainName
component, to our Identity Kit. TheOnchainName
component primarily focuses on showcasing ENS names for given Ethereum addresses, and defaults to displaying a sliced version of the address when an ENS name isn't available. By @alvaroraminelli #49
- feat: the
getFrameAccountAddress
function has been deprecated. Now, thegetFrameMessage
function also returns the Account Address. #60 0355c73 - feat: integrated with Neynars API to obtain validated messages and additional context, such as recast, follow-up, etc. By @robpolak #59
- fix: removed the Farcaster references due to build errors and compatibility issues. By @robpolak #59
BREAKING CHANGES
We received feedback regarding our initial approach with OnchainKit, which had excessive dependencies on Node.js-only libraries. This caused issues when integrating the library with React Native and the latest version of Node (e.g., v21).
In response to this feedback, we decided to utilize Neynar to simplify our approach and implementation of the getFrameMessage
method. By incorporating Neynar, you now have no dependencies for that particular method and will also receive additional data to enhance your Frame.
Therefore, as getFrameMessage
relies on Neynar, it is necessary to provide a Neynar API KEY when using the method in order to avoid rate limiting.
Before
import { getFrameMessage } from '@coinbase/onchainkit';
...
const { isValid, message} = await getFrameMessage(body);
After
import { getFrameMessage } from '@coinbase/onchainkit';
...
const { isValid, message } = await getFrameMessage(body , {
neynarApiKey: 'NEYNAR_ONCHAIN_KIT'
});
Additionally, the getFrameMessage
function now returns the Account Address. As a result, we no longer require the use of getFrameAccountAddress
.
This enhancement allows us to accomplish more with less code!
- feat: introducing
getFrameHtmlResponse
server-side helper method: generates HTML response with valid Frame, usesFrameMetadata
types for page metadata, eliminates manual creation of server-side HTML strings. 5d80499 - feat: the
FrameMetadata
type have been updated. Now,buttons
andpost_url
are considered optional, aligning with the Farcaster Frames API. - feat: going forward, we will utilize
NEYNAR_ONCHAIN_KIT
as the default free API key for Neynar.
-
feat have
getFrameAccountAddress
reading from the message instead of the body. By @zizzamia #46 0695eb9 -
feat update
getFrameMetadata
to the latest Frame APIs By @zizzamia #43
BREAKING CHANGES
getFrameAccountAddress
We have enhanced the getFrameAccountAddress
method by making it more composable with getFrameMessage
. Now, instead of directly retrieving the accountAddress
from the body
, you will utilize the validated message
to do so.
Before
import { getFrameAccountAddress } from '@coinbase/onchainkit';
...
const accountAddress = await getFrameAccountAddress(body);
After
import { getFrameAccountAddress } from '@coinbase/onchainkit';
...
const { isValid, message } = await getFrameMessage(body);
const accountAddress = await getFrameAccountAddress(message);
getFrameMetadata
We have improved the getFrameMetadata
method by making the buttons
extensible for new actions.
Before
import { getFrameMetadata } from '@coinbase/onchainkit';
...
const frameMetadata = getFrameMetadata({
buttons: ['boat'],
image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png',
post_url: 'https://build-onchain-apps.vercel.app/api/frame',
});
type FrameMetadata = {
buttons: string[];
image: string;
post_url: string;
};
After
import { frameMetadata } from '@coinbase/onchainkit';
...
const frameMetadata = getFrameMetadata({
buttons: [
{
label: 'We love BOAT',
},
],
image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png',
post_url: 'https://build-onchain-apps.vercel.app/api/frame',
});
type FrameMetadata = {
// A list of strings which are the label for the buttons in the frame (max 4 buttons).
buttons: [Button, ...Button[]];
// An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1
image: string;
// A valid POST URL to send the Signature Packet to.
post_url: string;
// A period in seconds at which the app should expect the image to update.
refresh_period?: number;
};
- feat: exported
FrameRequest
andFrameData
types. - docs: polished README for
getFrameMessage()
. By @zizzamia #38 218b65e - fix: refactor Farcaster typing to be explicit, and added a Farcaster message verification integration test. By @robpolak @cnasc @zizzamia #37
- feat: added a concept of integration tests where we can assert the actual values coming back from
neynar
. We decoupled these from unit tests as we should not commingle. By @robpolak #35 - feat: refactored
neynar
client out of the./src/core
code-path, for better composability and testability. By @robpolak #35
BREAKING CHANGES
We made the getFrameValidatedMessage
method more type-safe and renamed it to getFrameMessage
.
Before
import { getFrameValidatedMessage } from '@coinbase/onchainkit';
...
const validatedMessage = await getFrameValidatedMessage(body);
@Returns
type Promise<Message | undefined>
After
import { getFrameMessage } from '@coinbase/onchainkit';
...
const { isValid, message } = await getFrameMessage(body);
@Returns
type Promise<FrameValidationResponse>;
type FrameValidationResponse =
| { isValid: true; message: FrameData }
| { isValid: false; message: undefined };
interface FrameData {
fid: number;
url: string;
messageHash: string;
timestamp: number;
network: number;
buttonIndex: number;
castId: {
fid: number;
hash: string;
};
}
- feat: added initial version of
getFrameValidatedMessage
, which helps decode and validate a Frame message. d5de4e7
- fix: build d042114
- feat: added initial version of
getFrameAccountAddress
, which helps getting the Account Address from the Farcaster ID using the Frame. 398933b
- feat: renamed
generateFrameNextMetadata
togetFrameMetadata
c015b3e
- docs: kickoff docs for
generateFrameNextMetadata
core utility 30666be - fix: set correctly the
main
andtypes
file in thepackage.json
- feat: added
generateFrameNextMetadata
to help generates the metadata for a Farcaster Frame. a83b0f9
- feat: init (e44929f)