Unified Wallet Kit MUI is a Material UI (v6) implementation of @jup-ag/wallet-adapter with MUI styles over tailwind.
NPM: https://www.npmjs.com/package/@harkl/unified-wallet-adapter-mui
- Material UI v6 (necessary for fixed esm modules)
- React 18+
@jup-ag/wallet-adapterprovides a great user experience- not everyone loves tailwind
- legendsofsol.com uses MUI under the hood and needed a good wallet adapter
- Built-in Wallet Standard, Mobile Wallet Adapter support
- Abstracted wallet adapter, with a BYOW (Bring your own wallets) approach
- Mobile responsive design
- MUI core notification system integration
- Internationalization (i18n) with translation support
- Theming - Light and Dark modes using native MUI theming
- Install the package and required dependencies:
npm i @harkl/unified-wallet-adapter-mui @mui/material@6 @emotion/react @emotion/styled- Set up your wallet context:
First, create a wallet context provider that wraps your application:
import { ConnectionProvider } from "@solana/wallet-adapter-react";
import { UnifiedWalletProvider } from "@harkl/unified-wallet-adapter-mui";
import theme from "./theme";
export const WalletContext = ({ children }) => {
const endpoint = process.env.NEXT_PUBLIC_SOLANA_NETWORK;
return (
<ConnectionProvider endpoint={endpoint}>
<UnifiedWalletProvider
wallets={[]}
config={{
autoConnect: true,
env: process.env.NODE_ENV === "production" ? "mainnet-beta" : "devnet",
metadata: {
name: "Your App Name",
description: "Your App Description",
url: "https://yourapp.com",
iconUrls: ["/favicon.png"],
},
theme,
lang: "en",
}}
>
{children}
</UnifiedWalletProvider>
</ConnectionProvider>
);
};- Wrap your app with the providers:
import { ThemeProvider, CssBaseline } from "@mui/material";
import { WalletContext } from "./WalletContext";
function App({ Component, pageProps }) {
return (
<WalletContext>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</WalletContext>
);
}- Use the wallet components in your app:
import { UnifiedWalletButton } from "@harkl/unified-wallet-adapter-mui";
const YourComponent = () => {
return (
<div>
<UnifiedWalletButton />
</div>
);
};The UnifiedWalletProvider accepts the following configuration:
wallets: Array of wallet adapters you want to supportconfig:autoConnect: Boolean to enable automatic wallet connectionenv: Solana network environment ('mainnet-beta' or 'devnet')metadata: Your application metadatatheme: MUI theme objectlang: Language setting for i18n support
UnifiedWalletProvider- Main context provider that manages wallet stateUnifiedWalletButton- Button component to connect/disconnect walletCurrentUserBadge- Display currently connected wallet with addressPreviewFunctionality- Component to preview wallet functionality
All other features and philosophies are inline with the parent repo at @jup-ag/wallet-adapter.
Support @harkl by getting an upgradable Legends of SOL NFT with its own custom traits at Tensor or buying some $LEGEND. All Legends NFTs can be customised at legendsofsol.com.