Compare commits
3 commits
Author | SHA1 | Date | |
---|---|---|---|
7326beb23a | |||
0d027446a2 | |||
81f7051581 |
13 changed files with 41 additions and 248 deletions
|
@ -1,10 +1,9 @@
|
|||
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(), react()]
|
||||
integrations: [sitemap(),vue()]
|
||||
});
|
||||
|
|
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
@ -6,18 +6,11 @@
|
|||
"dependencies": {
|
||||
"@astrojs/vue": "^4.4.0",
|
||||
"@fontsource-variable/jetbrains-mono": "^5.1.1",
|
||||
"@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"
|
||||
"astro": "^4.16.8"
|
||||
},
|
||||
"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",
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
button.primary {
|
||||
display: grid;
|
||||
color: var(--primary);
|
||||
padding: 0.45rem 15px;
|
||||
padding: 3px 15px;
|
||||
font-size: 16px;
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--darken);
|
||||
|
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
display: grid;
|
||||
width: 220px;
|
||||
height: 150px;
|
||||
padding: 15px;
|
||||
background: var(--darken);
|
||||
border: 0.5px solid var(--green);
|
||||
}
|
||||
</style>
|
|
@ -1,52 +0,0 @@
|
|||
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>
|
||||
)
|
||||
}
|
|
@ -19,13 +19,10 @@
|
|||
|
||||
<style scoped>
|
||||
fieldset.search {
|
||||
--size: 10px;
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--darken);
|
||||
min-width: 50%;
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
grid-template-columns: 0.2fr 0.5fr 0.3fr;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
|
@ -34,7 +31,7 @@ fieldset.search {
|
|||
fieldset.search input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: calc( 1.3rem / 2) calc( 1.3rem / 2);
|
||||
padding: 10px 10px;
|
||||
color: var(--primary);
|
||||
background: none;
|
||||
}
|
||||
|
@ -45,8 +42,8 @@ fieldset.search .search__context {
|
|||
grid-auto-flow: column;
|
||||
justify-self: start;
|
||||
background: var(--black);
|
||||
margin: var(--size);
|
||||
padding: var(--size) 0;
|
||||
margin: 10px;
|
||||
padding: 10px 0;
|
||||
padding-left: 0.625rem;
|
||||
& .search__context-title {
|
||||
color: var(--accent);
|
||||
|
@ -67,8 +64,8 @@ fieldset.search .search__buttons {
|
|||
gap: 15px;
|
||||
margin-right: 15px;
|
||||
& svg.icon {
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
justify-self: end;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M17 15V5h-2v10H5v2h10v10h2V17h10v-2z"/></svg>
|
||||
</template>
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9"/></svg>
|
||||
</template>
|
|
@ -1,9 +1,6 @@
|
|||
---
|
||||
import "@/styles/app.css"
|
||||
import '@fontsource-variable/jetbrains-mono';
|
||||
|
||||
import '@rainbow-me/rainbowkit/styles.css';
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
|
@ -1,66 +1,8 @@
|
|||
---
|
||||
import Base from "@/layouts/Base.astro"
|
||||
|
||||
import Footer from "@/components/Footer.astro"
|
||||
import Search from "@/components/Search.vue"
|
||||
|
||||
import RainbowProvider from "@/components/RainbowProvider.tsx"
|
||||
|
||||
const { type } = Astro.props;
|
||||
---
|
||||
|
||||
<Base>
|
||||
<header>
|
||||
{ type !== 'home' && <>
|
||||
<div />
|
||||
<Search />
|
||||
</> }
|
||||
<div class="end">
|
||||
<!-- <span class="rate"> 0 / 5000 RQT </span> -->
|
||||
<div class="sign">
|
||||
<RainbowProvider client:only="react" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
header fieldset.search {
|
||||
justify-self: center;
|
||||
--size: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
header .end {
|
||||
display: inline-flex;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
header > .end span.rate {
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
header > .end div.sign {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
min-height: calc(100vh - 55px - 2.5rem);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,90 +0,0 @@
|
|||
---
|
||||
import Default from "@/layouts/Default.astro"
|
||||
import Card from "@/components/Card.vue"
|
||||
import CarbonAddLarge from "@/icons/CarbonAddLarge.vue"
|
||||
import CarbonSearch from "@/icons/CarbonSearch.vue"
|
||||
---
|
||||
|
||||
<Default>
|
||||
<Card class="card__content">
|
||||
<div class="content__heading">
|
||||
<h3> Coins </h3>
|
||||
<div class="content__search-score">
|
||||
<CarbonSearch />
|
||||
<span> 10K </span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Search coins of evm networks
|
||||
</p>
|
||||
<span class="badge"> Free </span>
|
||||
</Card>
|
||||
|
||||
<Card class="card__add">
|
||||
<CarbonAddLarge class="add__icon" />
|
||||
</Card>
|
||||
</Default>
|
||||
|
||||
<style>
|
||||
:global(main) {
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card__add {
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.card__content {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
color: var(--primary);
|
||||
& h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
& p {
|
||||
font-size: 14px;
|
||||
}
|
||||
& .badge {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
.card__content .content__heading {
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.card__content .content__heading .content__search-score {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
justify-self: end;
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: var(--primary);
|
||||
padding: 0 10px;
|
||||
display: inline-grid;
|
||||
grid-column: 1;
|
||||
place-items: center;
|
||||
font-size: 12px;
|
||||
background: var(--darken);
|
||||
border: 0.5px solid var(--green);
|
||||
}
|
||||
|
||||
.card__add .add__icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
|
@ -1,14 +1,43 @@
|
|||
---
|
||||
import Default from "@/layouts/Default.astro"
|
||||
import Button from "@/components/Button.vue"
|
||||
import Search from "@/components/Search.vue"
|
||||
import Footer from "@/components/Footer.astro"
|
||||
---
|
||||
|
||||
<Default type="home">
|
||||
<Default>
|
||||
<header>
|
||||
<span class="rate"> 0 / 5000 RQT </span>
|
||||
<Button class="sign" />
|
||||
</header>
|
||||
<main>
|
||||
<Search />
|
||||
</main>
|
||||
<Footer />
|
||||
</Default>
|
||||
|
||||
<style>
|
||||
:global(main) {
|
||||
header {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
margin-top: 10px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
span.rate {
|
||||
color: var(--primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button.sign {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: calc(100vh - 55px - 2.5rem);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue