kglt/fensir
1
0
Fork 0
forked from ofs/fensir
Code Activity

Feature: Integrate rainbow wallet (#7)

Browse source 
Reviewed-on: ofs/fensir#7
Complete: #6
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>
This commit is contained in:
Konrad Geletey 2024-12-08 12:42:37 +03:00 committed by Konrad Geletey
parent 8420434edb
commit 63da0cd18e
Signed by: git
GPG key ID: 0CB1190D5D313992
6 changed files with 74 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
astro.config.mjs
View file

@ -1,9 +1,10 @@
import { defineConfig } from 'astro/config' import { defineConfig } from 'astro/config'
import sitemap from "@astrojs/sitemap" import sitemap from "@astrojs/sitemap"
import vue from "@astrojs/vue" import vue from "@astrojs/vue"
import react from "@astrojs/react"
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
output: "static", output: "static",
integrations: [sitemap(),vue()] integrations: [sitemap(),vue(), react()]
}); });

BIN
bun.lockb
View file

Binary file not shown.

9
package.json
View file

@ -6,11 +6,18 @@
"dependencies": { "dependencies": {
"@astrojs/vue": "^4.4.0", "@astrojs/vue": "^4.4.0",
"@fontsource-variable/jetbrains-mono": "^5.1.1", "@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": { "devDependencies": {
"@antfu/eslint-config": "^2.16.2", "@antfu/eslint-config": "^2.16.2",
"@astrojs/check": "^0.9.4", "@astrojs/check": "^0.9.4",
"@astrojs/react": "^4.0.0",
"@astrojs/sitemap": "^3.2.1", "@astrojs/sitemap": "^3.2.1",
"@iconify-json/carbon": "^1.2.4", "@iconify-json/carbon": "^1.2.4",
"@lhci/cli": "0.13.x", "@lhci/cli": "0.13.x",

52
src/components/RainbowProvider.tsx Normal file
View file

@ -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 (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider theme={darkTheme({
accentColor: "var(--accent)",
accentColorForeground: "var(--primary)",
borderRadius: "none",
})}
>
<ConnectButton />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}

3
src/layouts/Base.astro
View file

@ -1,6 +1,9 @@
--- ---
import "@/styles/app.css" import "@/styles/app.css"
import '@fontsource-variable/jetbrains-mono'; import '@fontsource-variable/jetbrains-mono';
import '@rainbow-me/rainbowkit/styles.css';
--- ---
<!DOCTYPE html> <!DOCTYPE html>

14
src/layouts/Default.astro
View file

@ -1,9 +1,11 @@
--- ---
import Base from "@/layouts/Base.astro" import Base from "@/layouts/Base.astro"
import Button from "@/components/Button.vue"
import Footer from "@/components/Footer.astro" import Footer from "@/components/Footer.astro"
import Search from "@/components/Search.vue" import Search from "@/components/Search.vue"
import RainbowProvider from "@/components/RainbowProvider.tsx"
const { type } = Astro.props; const { type } = Astro.props;
--- ---
@ -14,8 +16,10 @@ const { type } = Astro.props;
<Search /> <Search />
</> } </> }
<div class="end"> <div class="end">
<span class="rate"> 0 / 5000 RQT </span> <!-- <span class="rate"> 0 / 5000 RQT </span> -->
<Button class="sign" /> <div class="sign">
<RainbowProvider client:only="react" />
</div>
</div> </div>
</header> </header>
<main> <main>
@ -46,12 +50,12 @@ header .end {
justify-self: end; justify-self: end;
} }
span.rate { header > .end span.rate {
color: var(--primary); color: var(--primary);
font-size: 16px; font-size: 16px;
} }
button.sign { header > .end div.sign {
margin-right: 15px; margin-right: 15px;
} }