1
src/
2
├── main.tsx          # Main application file (everything in one file)
3
├── components/
4
│   └── wagmi.ts      # Wagmi configuration
5
└── index.css         # Global styles

1
import { createRoot } from 'react-dom/client'
2
import { OpenOceanWidget } from "@openocean.finance/widget";
3
import { useConnectModal, RainbowKitProvider } from '@rainbow-me/rainbowkit'
4
import { http, createConfig, useAccount, WagmiProvider, useDisconnect } from 'wagmi'
5
import { mainnet } from 'wagmi/chains'
6
import { injected } from 'wagmi/connectors'
7
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
8
import '@rainbow-me/rainbowkit/styles.css'
9

10
// Wagmi Configuration
11
export const config = createConfig({
12
  chains: [mainnet],
13
  connectors: [
14
    injected({
15
      shimDisconnect: true,
16
    }),
17
  ],
18
  transports: {
19
    [mainnet.id]: http(),
20
  },
21
})
22

23
const queryClient = new QueryClient()
24

25
function App() {
26
  const { openConnectModal } = useConnectModal()
27
  const { isConnected } = useAccount()
28
  const { disconnect } = useDisconnect()
29
  
30
  const handleDisconnectWallet = () => {
31
    try {
32
      console.log("Attempting to disconnect wallet")
33
      disconnect()
34
      console.log("Wallet disconnected")
35
    } catch (error) {
36
      console.error("Disconnect failed:", error)
37
    }
38
  }
39
  
40
  const widgetConfig = {
41
    variant: "compact" as const,
42
    appearance: "dark" as const,
43
    subvariant: "split" as const,
44
    theme: {
45
      palette: {
46
        primary: {
47
          main: "#fb534f"
48
        },
49
        secondary: {
50
          main: "#FFC800"
51
        },
52
        background: {
53
          default: "#222037",
54
          paper: "#29273D"
55
        },
56
        text: {
57
          primary: "#ffffff",
58
          secondary: "#8C7F8C"
59
        },
60
        grey: {
61
          200: "#EEEFF2",
62
          300: "#D5DAE1",
63
          700: "#555B62",
64
          800: "#373F48"
65
        }
66
      },
67
      shape: {
68
        borderRadius: 12,
69
        borderRadiusSecondary: 12,
70
        borderRadiusTertiary: 24
71
      },
72
      typography: {
73
        fontFamily: "Inter, sans-serif"
74
      },
75
      container: {
76
        boxShadow: "0px 8px 32px rgba(0, 0, 0, 0.08)",
77
        borderRadius: "16px"
78
      },
79
      components: {
80
        MuiCard: {
81
          defaultProps: {
82
            variant: "filled"
83
          }
84
        },
85
        MuiTabs: {
86
          styleOverrides: {
87
            root: {
88
              backgroundColor: "#29273D",
89
              ".MuiTabs-indicator": {
90
                backgroundColor: "#17122b"
91
              }
92
            }
93
          }
94
        }
95
      }
96
    },
97
    walletConfig: {
98
      onConnect: ()=> {
99
        openConnectModal?.()
100
      }
101
    }
102
  }
103

104
  return (
105
    <div style={{ background: "#0a0a0a", minHeight: "100vh" }}>
106
      <nav style={{
107
        background: "#1a1a1a",
108
        padding: "15px 20px",
109
        borderBottom: "1px solid #333",
110
        display: "flex",
111
        gap: "20px",
112
        alignItems: "center"
113
      }}>
114
        <h2 style={{ color: "#ffffff", margin: 0 }}>OpenOcean Widget Demo</h2>
115
      </nav>
116
      
117
      <div style={{ padding: "20px" }}>
118
        <div style={{ 
119
          background: "#1a1a1a", 
120
          padding: "10px", 
121
          marginBottom: "20px", 
122
          borderRadius: "8px",
123
          color: "#ffffff",
124
          fontSize: "12px"
125
        }}>
126
          {!isConnected && <button 
127
            onClick={openConnectModal}
128
            style={{
129
              background: "#2196F3",
130
              color: "#ffffff",
131
              border: "none",
132
              padding: "8px 16px",
133
              borderRadius: "4px",
134
              cursor: "pointer",
135
              marginRight: "10px"
136
            }}
137
          >
138
            Open Connect Modal
139
          </button>}
140
          
141
          {isConnected && (
142
            <button 
143
              onClick={handleDisconnectWallet}
144
              style={{
145
                background: "#f44336",
146
                color: "#ffffff",
147
                border: "none",
148
                padding: "8px 16px",
149
                borderRadius: "4px",
150
                cursor: "pointer"
151
              }}
152
            >
153
              Disconnect
154
            </button>
155
          )}
156
        </div>
157
        
158
        <div style={{
159
          width: "100%",
160
          height: "600px",
161
          border: "1px solid #333",
162
          borderRadius: "12px",
163
          overflow: "hidden"
164
        }}>
165
          <OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
166
        </div>
167
      </div>
168
    </div>
169
  );
170
}
171

172
// Render the application
173
createRoot(document.getElementById('root')!).render(
174
  <WagmiProvider config={config}>
175
    <QueryClientProvider client={queryClient}>
176
      <RainbowKitProvider>
177
        <App />
178
      </RainbowKitProvider>
179
    </QueryClientProvider>
180
  </WagmiProvider>
181
)