Compare commits
1 commit
release
...
feat/licen
| Author | SHA1 | Date | |
|---|---|---|---|
dc7178a8e4
|
18 changed files with 30 additions and 367 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,39 +0,0 @@
|
|||
---
|
||||
import CarbonArrowRight from "@/icons/CarbonArrowUpRight.vue"
|
||||
const commit = "d9ea5cf7d6"
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div class="commit">
|
||||
build commit: <a href={`/${commit}`}> { commit } <CarbonArrowRight class="icon" /> </a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-self: end;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 14px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
footer div.commit {
|
||||
display: flex;
|
||||
justify-self: end;
|
||||
margin-right: 3rem;
|
||||
gap: 5px;
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
& .icon {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import CarbonArrowRight from '@/icons/CarbonArrowRight.vue'
|
||||
import CarbonRecentlyView from '@/icons/CarbonRecentlyViewed.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset class="search">
|
||||
<div class="search__context">
|
||||
<span class="search__context-title"> context: </span>
|
||||
<span class="search__context-item"> global </span>
|
||||
</div>
|
||||
<input type="search" />
|
||||
<div class="search__buttons">
|
||||
<CarbonRecentlyView class="icon" />
|
||||
<CarbonArrowRight class="icon" />
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
fieldset.search input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: calc( 1.3rem / 2) calc( 1.3rem / 2);
|
||||
color: var(--primary);
|
||||
background: none;
|
||||
}
|
||||
|
||||
fieldset.search .search__context {
|
||||
display: inline-grid;
|
||||
align-items: center;
|
||||
grid-auto-flow: column;
|
||||
justify-self: start;
|
||||
background: var(--black);
|
||||
margin: var(--size);
|
||||
padding: var(--size) 0;
|
||||
padding-left: 0.625rem;
|
||||
& .search__context-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
& .search__context-item {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus-visible, fieldset:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
fieldset.search .search__buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-self: end;
|
||||
gap: 15px;
|
||||
margin-right: 15px;
|
||||
& svg.icon {
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
justify-self: end;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z"/></svg>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6z"/></svg>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M20.59 22L15 16.41V7h2v8.58l5 5.01z"/><path fill="currentColor" d="M16 2A13.94 13.94 0 0 0 6 6.23V2H4v8h8V8H7.08A12 12 0 1 1 4 16H2A14 14 0 1 0 16 2"/></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,9 @@
|
|||
---
|
||||
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 />
|
||||
<slot />
|
||||
</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,33 @@
|
|||
---
|
||||
import Default from "@/layouts/Default.astro"
|
||||
import Search from "@/components/Search.vue"
|
||||
import Button from "@/components/Button.vue"
|
||||
---
|
||||
|
||||
<Default type="home">
|
||||
<Search />
|
||||
<Default>
|
||||
<header>
|
||||
<span class="rate"> 0 / 1000 RQT </span>
|
||||
<Button class="sign" />
|
||||
</header>
|
||||
<main>
|
||||
</main>
|
||||
</Default>
|
||||
|
||||
<style>
|
||||
:global(main) {
|
||||
place-items: center;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
:root {
|
||||
--green: #22c55e;
|
||||
--black: #171717;
|
||||
--darken: #1c1917;
|
||||
--neutral: #404040;
|
||||
--shadow: #262626;
|
||||
|
|
@ -14,4 +13,5 @@
|
|||
body {
|
||||
font-family: 'JetBrains Mono Variable', monospace;
|
||||
background: var(--secondary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue