Features
- Cross-chain token bridging
- Multi-wallet support (Ethereum + Solana)
- Responsive design
- Framework agnostic
- Type-safe with TypeScript
Installation
EVM Only
pnpm add viem wagmi @tanstack/react-query @metalayer/sdk @metalayer/widget
EVM + Solana (beta)
pnpm add viem wagmi @tanstack/react-query @solana/web3.js @solana/spl-token @metalayer/sdk @metalayer/widget
Solana support is currently in beta and not available in mainnet environments. Contact our team to enable Solana bridging for testnet.
API Key Setup
Contact our team to get your API key.
Basic Usage
import '@metalayer/widget/styles.css';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WidgetProvider, Widget } from '@metalayer/widget';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
const queryClient = new QueryClient();
const wagmiConfig = createConfig({
chains: [mainnet],
transports: { [mainnet.id]: http() },
});
function App() {
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<WidgetProvider
sdkConfig={{
apiKey: 'your-api-key',
environment: 'mainnet',
}}
onSupportedChainsLoad={(chains) => {
// Update your wagmi config with the widget's supported chains
}}
>
<Widget onConnectClick={() => openWalletModal()} />
</WidgetProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
Note: The widget requires a WagmiProvider from your application. Use
onSupportedChainsLoad to update your wagmi config with the chains the widget supports.
