Connect user wallets
Learn how to connect your marketplace to user wallets on Immutable zkEVM in order to enable transactions and facilitate trade.
Sections
In Web3, a user's digital wallet allows them to sign transactions, pay for items and store their NFTs and currencies. They are crucial for enabling users to transact in your marketplace.
Integrate Connect Widget
The Connect widget is a drop-in solution for web-based games and marketplaces that offers users a friendly wallet interface, simplifying the process of linking their wallets and integrating onto the Immutable zkEVM network.
💡Supported wallets
The Connect widget supports Metamask and Immutable Passport. However to support Passport as a wallet option you must integrate your application with Passport. Then follow our Passport integration docs.
- React
- JavaScript
import { useEffect } from 'react';
import { checkout } from '@imtbl/sdk';
// create Checkout SDK
const checkoutSDK = new checkout.Checkout();
export function App() {
// Initialise widgets, create connect widget and mount
useEffect(() => {
(async () => {
const widgets = await checkoutSDK.widgets({
config: { theme: checkout.WidgetTheme.DARK },
});
const connect = widgets.create(checkout.WidgetType.CONNECT)
connect.mount("connect");
})();
}, []);
return (<div id="connect" />);
}
<html>
<head>
<!-- Load the SDK from jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@imtbl/sdk/dist/browser/checkout/sdk.js"></script>
</head>
<body>
<div id="connect"></div>
<script>
// Initialize Checkout SDK
var checkout;
(async function () {
checkout = new ImmutableCheckout.Checkout();
const widgets = await checkout.widgets({
config: { theme: ImmutableCheckout.WidgetTheme.DARK },
});
const connect = widgets.create(ImmutableCheckout.WidgetType.CONNECT);
connect.mount('connect');
})();
</script>
</body>
</html>
To learn more about this widget explore the Connect Widget documentation.