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 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()]
});

BIN
bun.lockb
View file

Binary file not shown.

9
package.json
View file

@ -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",

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 '@fontsource-variable/jetbrains-mono';
import '@rainbow-me/rainbowkit/styles.css';
---
<!DOCTYPE html>

14
src/layouts/Default.astro
View file

@ -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;
<Search />
</> }
<div class="end">
<span class="rate"> 0 / 5000 RQT </span>
<Button class="sign" />
<!-- <span class="rate"> 0 / 5000 RQT </span> -->
<div class="sign">
<RainbowProvider client:only="react" />
</div>
</div>
</header>
<main>
@ -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;
}