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
29export const App: React.FC = () => {
30    const { wallets } = getDefaultWallets();
31    
32    const config = getDefaultConfig({
33      appName: 'RainbowKit demo',
34      projectId: 'YOUR_PROJECT_ID',
35      wallets: [
36        ...wallets,
37        {
38          groupName: 'Other',
39          wallets: [argentWallet, trustWallet, ledgerWallet],
40        }
41      ],
42      chains: [mainnet, sepolia],
43      ssr: true
44    });
45  
46    const justweb3Config: JustWeb3ProviderConfig = {
47  "config": {
48    "origin": "https://demo.justaname.id/",
49    "domain": "demo.justaname.id",
50    "signInTtl": 86400000
51  },
52  "networks": [
53    {
54      "chainId": 1,
55      "providerUrl": "<MAINNET_PROVIDER_URL>"
56    },
57    {
58      "chainId": 11155111,
59      "providerUrl": "<SEPOLIA_PROVIDER_URL>"
60    }
61  ],
62  "openOnWalletConnect": true,
63  "allowedEns": "all",
64  "color": {
65    "primary": "hsl(216, 90%, 58%)",
66    "background": "hsl(0, 0%, 100%)",
67    "destructive": "hsl(0, 100%, 50%)"
68  }
69};
70  
71    const queryClient = new QueryClient();
72  
73    return (
74      <WagmiProvider config={config}>
75        <QueryClientProvider client={queryClient}>
76          <RainbowKitProvider>
77            <JustWeb3Provider config={justweb3Config}>
78              <JustWeb3Button>
79                <ConnectButton />
80              </JustWeb3Button>
81            </JustWeb3Provider>
82          </RainbowKitProvider>
83        </QueryClientProvider>
84      </WagmiProvider>
85    );
86};
87
88export default App;