Live Demo

    loading

    Profile Examples:

    justhadi.eth

    justghadi.eth

    mely.eth

    nick.eth

    vitalik.eth

    brantly.eth

    dr3a.eth

    Code

    Dependencies

    yarn add @justweb3/widget viem wagmi @rainbow-me/rainbowkit @tanstack/react-query ethers

    Snippet

    1import '@rainbow-me/rainbowkit/styles.css';
    2import '@justweb3/widget/styles.css';
    3import React from 'react';
    4import {
    5 getDefaultConfig,
    6 getDefaultWallets,
    7 RainbowKitProvider
    8} from '@rainbow-me/rainbowkit';
    9import {
    10 argentWallet,
    11 ledgerWallet,
    12 trustWallet
    13} from '@rainbow-me/rainbowkit/wallets';
    14import {
    15 QueryClient,
    16 QueryClientProvider
    17} from '@tanstack/react-query';
    18import { WagmiProvider } from 'wagmi';
    19import { mainnet, sepolia } from 'wagmi/chains';
    20import {
    21 JustWeb3Provider,
    22 JustWeb3ProviderConfig,
    23 JustWeb3Button
    24} from '@justweb3/widget';
    25import { ConnectButton } from '@rainbow-me/rainbowkit';
    26
    27
    28
    29
    30
    31
    32export const App: React.FC = () => {
    33 const { wallets } = getDefaultWallets();
    34
    35 const config = getDefaultConfig({
    36 appName: 'RainbowKit demo',
    37 projectId: 'YOUR_PROJECT_ID',
    38 wallets: [
    39 ...wallets,
    40 {
    41 groupName: 'Other',
    42 wallets: [argentWallet, trustWallet, ledgerWallet],
    43 }
    44 ],
    45 chains: [mainnet, sepolia],
    46 ssr: true
    47 });
    48
    49 const justweb3Config: JustWeb3ProviderConfig = {
    50 "config": {
    51 "origin": "https://demo.justaname.id/",
    52 "domain": "demo.justaname.id",
    53 "signInTtl": 86400000
    54 },
    55 "networks": [
    56 {
    57 "chainId": 1,
    58 "providerUrl": "<MAINNET_PROVIDER_URL>"
    59 },
    60 {
    61 "chainId": 11155111,
    62 "providerUrl": "<SEPOLIA_PROVIDER_URL>"
    63 }
    64 ],
    65 "enableAuth": true,
    66 "openOnWalletConnect": true,
    67 "allowedEns": "all",
    68 "color": {
    69 "primary": "hsl(216, 90%, 58%)",
    70 "background": "hsl(0, 0%, 100%)",
    71 "destructive": "hsl(0, 100%, 50%)"
    72 }
    73};
    74
    75 const queryClient = new QueryClient();
    76
    77 return (
    78 <WagmiProvider config={config}>
    79 <QueryClientProvider client={queryClient}>
    80 <RainbowKitProvider>
    81 <JustWeb3Provider config={justweb3Config}>
    82 <JustWeb3Button>
    83 <ConnectButton />
    84 </JustWeb3Button>
    85 </JustWeb3Provider>
    86 </RainbowKitProvider>
    87 </QueryClientProvider>
    88 </WagmiProvider>
    89 );
    90};
    91
    92export default App;

    loading

    justhadi.eth

    justghadi.eth

    mely.eth

    nick.eth

    vitalik.eth

    brantly.eth

    dr3a.eth