The best way to connect a wallet 🌈 🧰
MIT License
Published by markdalgleish over 2 years ago
670cbfc: Theme API changes
Theme object has been updated in the following way:
Renamed
colors.buttonBorder
-> colors.actionButtonBorder
colors.buttonSecondaryBackground
-> colors.actionButtonSecondaryBackground
colors.buttonText
-> colors.actionButtonText
colors.modalClose
-> colors.closeButton
colors.modalCloseBackground
-> colors.closeButtonBackground
Added
borders.modalBorderWidth
colors.actionButtonBorderMobile
colors.generalBorderDim
colors.modalTextDim
radii.actionButton
radii.modalMobile
shadows.profileDetailsAction
Removed
colors.menuBackground
colors.menuText
colors.menuTextAction
colors.menuTextDisconnect
colors.menuTextSecondary
shadows.menu
New theme type can be found in the Readme.
New Accent Colors
Developers can now choose between 7 accent colors ("blue" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"
).
06fb716: Inline built-in wallet icons as data URLs
d553141: Fix chainId
type error in strict mode
a696f2c: Add Hardhat chain (chainId: 31337) icon
e33d34b: Add support for custom “Learn more” URLs
learnMoreUrl
prop to RainbowKitProvider
.qrCode.instructions.learnMoreUrl
property.96e78b3: Add fontStack
option to built-in themes, supporting "rounded"
and "system"
variants.
You can now opt out of using SF Pro Rounded, using default system fonts instead.
Example usage
const theme = lightTheme({
fontStack: 'system',
});
5aef783: Prevent body from scrolling while modal is open.
8d0025a: Increase z-index of modal to 2147483646
(Coinbase modal z-index minus 1) to ensure RainbowKit renders on top of other elements.
136c6ea: Adds Argent & Trust to available wallets
6df9c50: Fix error when using a chain that doesn’t have an explorer URL defined
9f05ad7: Fix tablet styles
The sizing and positioning of modals have been fixed on tablet devices.
fe2066f: Highlight the most recently used wallets at the start of the wallet list.
c174e12: Render WalletConnect QR code within RainbowKit modal
The official WalletConnect modal is still available if needed, but the QR code is now rendered in the standard RainbowKit style when selecting WalletConnect from the wallet list.
baf998c: Update Wallet
API
Note that this only affects consumers that have created custom wallets. All built-in wallets have been updated to use the new API.
Wallet
type is now an object rather than a function. Static properties (id
, name
, etc.) have been left at the top level, while the connector
and connection method configuration has been moved to the wallet.getConnector()
function. This allows consumers to tell wallet instances apart without having to instantiate their connectors.
connector
has been moved to createConnector().connector
qrCode
has been moved to createConnector().qrCode
qrCode.logoUri
has been renamed to qrCode.iconUrl
for consistency.instructions
has been moved to createConnector().qrCode.instructions
and is now an object with a steps
array where each item has a step
property that is either "install"
, "create"
, or "scan"
.getMobileConnectionUri
has been moved to createConnector().mobile.getUri
ready
has been renamed to installed
to differentiate it from wagmi’s ready
concept.downloadUrls
has been restructured into an object with optional values android
, ios
, browserExtension
, qrCode
(link from scanning QR code on desktop).shortName
property which will be used on mobile.eaa5bf6: Support custom wallet groups
Custom wallets must now be defined using the WalletList
type to support grouping.
Example usage
import { wallet, WalletList } from '@rainbow-me/rainbowkit';
const wallets: WalletList = [
{
groupName: 'Suggested',
wallets: [wallet.rainbow({ chains, infuraId })],
},
];
Published by markdalgleish over 2 years ago