Beta Release: The Metalayer Widget v1.x is currently in beta. To install the latest beta version, use @metalayer/widget@beta.
Features
- Cross-chain token bridging
- Multi-wallet support (Ethereum + Solana)
- Responsive design
- Framework agnostic
- Type-safe with TypeScript
Installation
pnpm add viem wagmi @tanstack/react-query @solana/web3.js @solana/spl-token @metalayer/sdk@beta @metalayer/widget@beta
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.
