diff --git a/astro.config.mjs b/astro.config.mjs
index 80c24f8..e353217 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,9 +1,10 @@
import { defineConfig } from 'astro/config'
import sitemap from "@astrojs/sitemap"
import vue from "@astrojs/vue"
+import react from "@astrojs/react"
// https://astro.build/config
export default defineConfig({
output: "static",
- integrations: [sitemap(),vue()]
+ integrations: [sitemap(),vue(), react()]
});
diff --git a/bun.lockb b/bun.lockb
index 0f7ee12..0b11a98 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 3a551ec..ad5df25 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,18 @@
"dependencies": {
"@astrojs/vue": "^4.4.0",
"@fontsource-variable/jetbrains-mono": "^5.1.1",
- "astro": "^4.16.8"
+ "@rainbow-me/rainbowkit": "^2.2.1",
+ "@tanstack/react-query": "^5.62.3",
+ "astro": "^4.16.8",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "viem": "2",
+ "wagmi": "^2.13.4"
},
"devDependencies": {
"@antfu/eslint-config": "^2.16.2",
"@astrojs/check": "^0.9.4",
+ "@astrojs/react": "^4.0.0",
"@astrojs/sitemap": "^3.2.1",
"@iconify-json/carbon": "^1.2.4",
"@lhci/cli": "0.13.x",
diff --git a/src/components/RainbowProvider.tsx b/src/components/RainbowProvider.tsx
new file mode 100644
index 0000000..093987b
--- /dev/null
+++ b/src/components/RainbowProvider.tsx
@@ -0,0 +1,52 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ConnectButton, RainbowKitProvider, connectorsForWallets, darkTheme, getDefaultConfig } from "@rainbow-me/rainbowkit"
+import { WagmiProvider } from "wagmi"
+import {
+ metaMaskWallet,
+ rainbowWallet,
+ walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets"
+
+import { polygon, polygonAmoy } from "wagmi/chains"
+
+const queryClient = new QueryClient()
+
+const walletConnectConfig = {
+ appName: "OFS",
+ projectId: "ee36add632123be041b70f8b037f0585",
+}
+
+const connectors = connectorsForWallets([
+ {
+ groupName: "Recommended",
+ wallets: [rainbowWallet, walletConnectWallet],
+ },
+ {
+ groupName: "Other",
+ wallets: [metaMaskWallet],
+ },
+], walletConnectConfig)
+
+const config = getDefaultConfig({
+ connectors,
+ ...walletConnectConfig,
+ chains: [polygonAmoy, polygon],
+ ssr: false,
+})
+
+export default function RainbowProvider() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index f65cabb..cb8f06c 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,6 +1,9 @@
---
import "@/styles/app.css"
import '@fontsource-variable/jetbrains-mono';
+
+import '@rainbow-me/rainbowkit/styles.css';
+
---
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 850b5af..3a2d216 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -1,9 +1,11 @@
---
import Base from "@/layouts/Base.astro"
-import Button from "@/components/Button.vue"
+
import Footer from "@/components/Footer.astro"
import Search from "@/components/Search.vue"
+import RainbowProvider from "@/components/RainbowProvider.tsx"
+
const { type } = Astro.props;
---
@@ -14,8 +16,10 @@ const { type } = Astro.props;
}
@@ -46,12 +50,12 @@ header .end {
justify-self: end;
}
-span.rate {
+header > .end span.rate {
color: var(--primary);
font-size: 16px;
}
-button.sign {
+header > .end div.sign {
margin-right: 15px;
}