Skip to content

Commit

Permalink
Initial search
Browse files Browse the repository at this point in the history
  • Loading branch information
adairrr committed Nov 28, 2023
1 parent 1eb7419 commit 1f13788
Show file tree
Hide file tree
Showing 20 changed files with 191 additions and 21 deletions.
12 changes: 6 additions & 6 deletions packages/webapp/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<img src="https://og.sznm.dev/api/generate?heading=vite-react-chakra-starter&text=React+vite+template+with+Chakra-UI+and+TypeScript+setup.&template=color&center=true&height=330" />
<img src="https://og.sznm.dev/api/generate?heading=abstract-app-template&text=React+vite+template+with+Chakra-UI+and+TypeScript+setup.&template=color&center=true&height=330" />

This is a project bootstrapped with [`@vitejs/app`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) (`react-ts`), added with [Chakra UI](https://chakra-ui.com) and [TypeScript](https://www.typescriptlang.org) setup.

- ⚡ blazing fast dev server and build
- 🔗 route management added (`react-router-dom` configured)

[**Live Demo**](https://vite-react-chakra-starter.sznm.dev/)
[**Live Demo**](https://abstract-app-template.sznm.dev/)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/sozonome/vite-react-chakra-starter) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/sozonome/vite-react-chakra-starter)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/sozonome/abstract-app-template) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/sozonome/abstract-app-template)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/sozonome/vite-react-chakra-starter)
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/sozonome/abstract-app-template)

## Getting Started

You can either click [`Use this template`](https://github.com/sozonome/vite-react-chakra-starter/generate) button on this repository and clone the repo or use npx degit like so:
You can either click [`Use this template`](https://github.com/sozonome/abstract-app-template/generate) button on this repository and clone the repo or use npx degit like so:

```bash
npx degit sozonome/vite-react-chakra-starter <app_name>
npx degit sozonome/abstract-app-template <app_name>
```

Then, run the development server:
Expand Down
2 changes: 1 addition & 1 deletion packages/webapp/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite-react-chakra-starter</title>
<title>abstract-app-template</title>
</head>
<body>
<div id="root"></div>
Expand Down
3 changes: 2 additions & 1 deletion packages/webapp/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "vite-react-chakra-starter",
"name": "abstract-app-template",
"version": "0.1.0",
"private": true,
"author": "sozonome",
Expand Down Expand Up @@ -30,6 +30,7 @@
"@fontsource/plus-jakarta-sans": "^5.0.17",
"@interchain-ui/react": "^1.14.1",
"@tanstack/react-query": "^4.36.1",
"@tanstack/react-query-devtools": "^5.8.9",
"chain-registry": "^1.20.0",
"framer-motion": "^10.16.5",
"million": "2.6.4",
Expand Down
20 changes: 20 additions & 0 deletions packages/webapp/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/webapp/public/manifest.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"short_name": "vite-react-chakra-starter",
"short_name": "abstract-app-template",
"name": "Vite React App Template",
"lang": "en",
"start_url": "/",
Expand Down
2 changes: 1 addition & 1 deletion packages/webapp/public/robots.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ User-agent: *
Allow: /

# Host
Host: https://vite-react-chakra-starter.sznm.dev
Host: https://abstract-app-template.sznm.dev
2 changes: 2 additions & 0 deletions packages/webapp/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { AbstractProvider } from '@abstract-money/abstract.js-react'
import { ChakraProvider } from '@chakra-ui/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { BrowserRouter as Router } from 'react-router-dom'

import ChainProvider from '~/lib/contexts/ChainProvider'
Expand All @@ -21,6 +22,7 @@ const App = () => (
</Layout>
</Router>
</ChainProvider>
<ReactQueryDevtools />
</AbstractProvider>
</QueryClientProvider>
</ChakraProvider>
Expand Down
2 changes: 1 addition & 1 deletion packages/webapp/src/env.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/// <reference types="vite/client" />

type ImportMetaEnvAugmented =
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
import('@julr/vite-plugin-validate-env').ImportMetaEnvAugmented<
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
typeof import('../env').default
Expand Down
27 changes: 27 additions & 0 deletions packages/webapp/src/lib/layout/AccountLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {
AbstractAccountId,
AccountProvider,
} from '@abstract-money/abstract.js-react'
import type { FC } from 'react'
import { Outlet, useParams } from 'react-router-dom'
import Page404 from '~/lib/pages/404'
import { type AccountIdParams } from '~/lib/router/routeParams'

interface AccountLayoutProps {}

/**
* Provide the account to the nested routes.
*/
export const AccountLayout: FC<AccountLayoutProps> = () => {
const { accountId } = useParams<AccountIdParams>()

if (!accountId) {
return <Page404 what={`Account ${accountId}`} />
}

return (
<AccountProvider accountId={AbstractAccountId.fromStringId(accountId)}>
<Outlet />
</AccountProvider>
)
}
2 changes: 1 addition & 1 deletion packages/webapp/src/lib/layout/Meta.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Helmet } from 'react-helmet'

const APP_NAME = 'vite-react-chakra-starter'
const APP_NAME = 'abstract-app-template'

const Meta = () => {
return (
Expand Down
5 changes: 3 additions & 2 deletions packages/webapp/src/lib/pages/404/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { Box, Button, Grid, Heading, Image, Link, Text } from '@chakra-ui/react'
import { useNavigate } from 'react-router-dom'
import { FC } from 'react'

const Page404 = () => {
const Page404: FC<{ what?: string }> = ({ what = 'Page' }) => {
const navigate = useNavigate()

const handleBackToHome = () => navigate('/')

return (
<Grid gap={4} textAlign="center">
<Heading>Page not Found</Heading>
<Heading>{what} not Found</Heading>

<Box maxWidth={[280, 400]} marginX="auto">
<Image width={400} src="/assets/404 Error-rafiki.svg" />
Expand Down
34 changes: 34 additions & 0 deletions packages/webapp/src/lib/pages/account/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
useAccount,
useManagerInfoQuery,
} from '@abstract-money/abstract.js-react'
import { useAbstractQueryClient } from '@abstract-money/abstract.js-react/lib/hooks'
import { Flex, Heading, Skeleton, Text } from '@chakra-ui/react'

const AccountHome = () => {
const { accountQueryClient, accountId } = useAccount()
const { data: test } = useAbstractQueryClient({ chainName: 'junotestnet' })

console.log(accountQueryClient, test)

// Use a raw query on the account
const { data: accountInfo } = useManagerInfoQuery({
client: accountQueryClient?.managerQueryClient,
options: {
select: ({ info }) => info,
},
})

return (
<Flex>
<Heading>{accountId.toStringId()}</Heading>
<Text>{JSON.stringify(accountInfo || {})}</Text>

<Skeleton isLoaded={!!accountInfo}>
<Text>{accountInfo?.name}</Text>
</Skeleton>
</Flex>
)
}

export default AccountHome
55 changes: 55 additions & 0 deletions packages/webapp/src/lib/pages/home/components/AccountInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { AbstractAccountId } from '@abstract-money/abstract.js-react'
import {
Button,
Input,
InputGroup,
InputRightElement,
useToast,
} from '@chakra-ui/react'
import type React from 'react'
import { useCallback, useState } from 'react'
import { useNavigate } from 'react-router-dom'

export const AccountInput = () => {
const [accountId, setAccountId] = useState('')
const navigate = useNavigate()
const toast = useToast()

const validate = useCallback(() => {
try {
AbstractAccountId.fromStringId(accountId)
return true
} catch {
return false
}
}, [accountId, toast])

const handleInputChange = useCallback(
(e: { target: { value: React.SetStateAction<string> } }) => {
setAccountId(e.target.value)
},
[]
)

const handleClick = useCallback(() => {
if (validate()) {
navigate(`/account/${accountId}`)
}
}, [accountId, navigate, validate])

return (
<InputGroup size="md">
<Input
aria-label="Account ID"
placeholder="Account Id"
value={accountId}
onChange={handleInputChange}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
Search
</Button>
</InputRightElement>
</InputGroup>
)
}
6 changes: 3 additions & 3 deletions packages/webapp/src/lib/pages/home/components/CTASection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const CTASection = () => (
<Box textAlign="center">
<Link
_hover={undefined}
href="https://github.com/sozonome/vite-react-chakra-starter"
href="https://github.com/sozonome/abstract-app-template"
>
<Button leftIcon={<AiFillGithub />} size="sm">
Open in Github
Expand All @@ -15,7 +15,7 @@ const CTASection = () => (
<Link
aria-label="Deploy to Vercel"
isExternal
href="https://vercel.com/import/git?s=https://github.com/sozonome/vite-react-chakra-starter"
href="https://vercel.com/import/git?s=https://github.com/sozonome/abstract-app-template"
>
<Image
src="https://vercel.com/button"
Expand All @@ -26,7 +26,7 @@ const CTASection = () => (
<Link
aria-label="Deploy to Netlify"
isExternal
href="https://app.netlify.com/start/deploy?repository=https://github.com/sozonome/vite-react-chakra-starter"
href="https://app.netlify.com/start/deploy?repository=https://github.com/sozonome/abstract-app-template"
>
<Image
src="https://www.netlify.com/img/deploy/button.svg"
Expand Down
2 changes: 1 addition & 1 deletion packages/webapp/src/lib/pages/home/components/SomeText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const SomeText = () => {
return (
<Grid textAlign="center" gap={2}>
<Heading fontSize="2xl" fontWeight="extrabold">
vite-react-chakra-starter
abstract-app-template
</Heading>
<Text fontSize="sm">
This is a vite react template with Chakra-UI and TypeScript setup.
Expand Down
2 changes: 2 additions & 0 deletions packages/webapp/src/lib/pages/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import { Grid } from '@chakra-ui/react'
import CTASection from './components/CTASection'
import SomeImage from './components/SomeImage'
import SomeText from './components/SomeText'
import { AccountInput } from '~/lib/pages/home/components/AccountInput'

const Home = () => {
return (
<Grid gap={4}>
<SomeText />
<AccountInput />
<SomeImage />
<CTASection />
</Grid>
Expand Down
21 changes: 19 additions & 2 deletions packages/webapp/src/lib/router/Routings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,20 @@
* - https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-link-to-values
*/

import { Suspense } from 'react'
import React, { Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

import RequireAuth from '~/lib/components/auth/RequireAuth'
import { AccountLayout } from '~/lib/layout/AccountLayout'
import Page404 from '~/lib/pages/404'

import { routes, privateRoutes } from './routes'
import { routes, privateRoutes, accountRoutes } from './routes'
import { useAbstractQueryClient } from '@abstract-money/abstract.js-react/lib/hooks'

const Routings = () => {
const { data: test } = useAbstractQueryClient({ chainName: 'junotestnet' })

console.log(test)
return (
<Suspense>
<Routes>
Expand All @@ -36,6 +41,18 @@ const Routings = () => {
key={`privateRoute-${privateRouteProps.path}`}
/>
))}
<Route path="account/*" element={<AccountLayout />}>
<Route
path=":accountId/*"
element={
<Routes>
{accountRoutes.map((routeProps) => (
<Route {...routeProps} key={routeProps.path as string} />
))}
</Routes>
}
/>
</Route>
<Route path="*" element={<Page404 />} />
</Routes>
</Suspense>
Expand Down
3 changes: 3 additions & 0 deletions packages/webapp/src/lib/router/routeParams.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export type AccountIdParams = {
accountId: string
}
8 changes: 8 additions & 0 deletions packages/webapp/src/lib/router/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import type { PathRouteProps } from 'react-router-dom'

const Home = React.lazy(() => import('~/lib/pages/home'))
const AccountHome = React.lazy(() => import('~/lib/pages/account'))

export const routes: Array<PathRouteProps> = [
{
Expand All @@ -10,4 +11,11 @@ export const routes: Array<PathRouteProps> = [
},
]

export const accountRoutes: Array<PathRouteProps> = [
{
path: '/',
element: <AccountHome />,
},
]

export const privateRoutes: Array<PathRouteProps> = []
2 changes: 1 addition & 1 deletion packages/webapp/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type { PluginOption } from 'vite';
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
import tsconfigPaths from 'vite-tsconfig-paths';
import { Schema, ValidateEnv } from "@julr/vite-plugin-validate-env";
import { ValidateEnv } from "@julr/vite-plugin-validate-env";

// https://vitejs.dev/config/
export default defineConfig({
Expand Down

0 comments on commit 1f13788

Please sign in to comment.