GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout updates

Browse Source
This commit is contained in:
fmtabbara
2021-09-03 16:25:15 +01:00
parent 2b792945cc
commit 15048524a7
18 changed files with 156 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tauri-wallet/src/components/Nav.tsx
+2 -1
View File
@@ -1,5 +1,5 @@
import React, { useContext } from 'react'
import { Link } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
import {
List,
ListItem,
@@ -81,6 +81,7 @@ const useStyles = makeStyles((theme: Theme) => ({
export const Nav = () => {
const classes = useStyles()
const { logOut } = useContext(ClientContext)
const location = useLocation()
return (
<div
tauri-wallet/src/components/NavigationCards.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react'
import React, { useContext, useState } from 'react'
import {
CardContent,
CircularProgress,
tauri-wallet/src/components/index.ts
+1 -2
View File
@@ -1,5 +1,4 @@
export * from './Layout'
export * from './NymCard'
export * from './CopyToClipboard'
export * from './Page'
export * from './Nav'
export * from './NavigationCards'
tauri-wallet/src/index.tsx
+25 -8
View File
@@ -1,21 +1,38 @@
import React from 'react'
import React, { useContext } from 'react'
import ReactDOM from 'react-dom'
import { CssBaseline, ThemeProvider } from '@material-ui/core'
import { BrowserRouter as Router } from 'react-router-dom'
import { Routes } from './routes'
import { theme } from './theme'
import { ClientContextProvider } from './context/main'
import { ClientContext, ClientContextProvider } from './context/main'
import { ApplicationLayout } from './layouts'
import { SignIn } from './routes/sign-in'
const App = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
const AppWrapper = () => {
const { clientDetails } = useContext(ClientContext)
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{!clientDetails ? (
<SignIn />
) : (
<ApplicationLayout>
<Routes />
</ApplicationLayout>
)}
</ThemeProvider>
)
}
const App = () => {
return (
<Router>
<ClientContextProvider>
<Routes />
<AppWrapper />
</ClientContextProvider>
</Router>
</ThemeProvider>
)
)
}
const root = document.getElementById('root')
tauri-wallet/src/components/Page.tsx → tauri-wallet/src/layouts/AppLayout.tsx
+7 -3
View File
@@ -1,11 +1,14 @@
import React from 'react'
import { Divider } from '@material-ui/core'
import { AddressCard, BalanceCard } from './NavigationCards'
import { Nav } from './Nav'
import { AddressCard, BalanceCard, Nav } from '../components'
import Logo from '../images/logo.png'
import { theme } from '../theme'
export const Page = ({ children }: { children: React.ReactElement }) => {
export const ApplicationLayout = ({
children,
}: {
children: React.ReactElement
}) => {
return (
<div
style={{
@@ -16,6 +19,7 @@ export const Page = ({ children }: { children: React.ReactElement }) => {
gridTemplateRows: '100%',
gridColumnGap: '8px',
gridRowGap: '0px',
overflow: 'hidden',
}}
>
<div
tauri-wallet/src/components/Layout.tsx → tauri-wallet/src/layouts/ContentLayout.tsx
+2 -1
View File
@@ -13,9 +13,10 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'auto',
}}
>
<Grid container justifyContent="center">
<Grid container justifyContent="center" style={{ margin: 'auto' }}>
<Grid item xs={12} md={8} xl={6}>
{children}
</Grid>
tauri-wallet/src/layouts/index.tsx
+2
View File
@@ -0,0 +1,2 @@
export * from './AppLayout'
export * from './ContentLayout'
tauri-wallet/src/routes/404.tsx
+6 -8
View File
@@ -1,14 +1,12 @@
import React, { useState } from 'react'
import { Layout, Page } from '../components'
import { Layout } from '../layouts'
export const NotFound = () => {
return (
<Page>
<Layout>
<>
<h1>404</h1>
</>
</Layout>
</Page>
<Layout>
<>
<h1>404</h1>
</>
</Layout>
)
}
tauri-wallet/src/routes/balance.tsx
+25 -26
View File
@@ -1,9 +1,10 @@
import React, { useContext } from 'react'
import { Button, Grid } from '@material-ui/core'
import { Refresh } from '@material-ui/icons'
import { Layout, NymCard, Page } from '../components'
import { ClientContext } from '../context/main'
import { Alert } from '@material-ui/lab'
import { Refresh } from '@material-ui/icons'
import { NymCard } from '../components'
import { Layout } from '../layouts'
import { ClientContext } from '../context/main'
import { theme } from '../theme'
export const Balance = () => {
@@ -25,29 +26,27 @@ export const Balance = () => {
)
return (
<Page>
<Layout>
<NymCard title="Check Balance">
<Grid container direction="column" spacing={2}>
<Grid item>
{balanceError && (
<Alert severity="error" action={<RefreshAction />}>
{balanceError}
</Alert>
)}
{!balanceError && (
<Alert
severity="success"
style={{ padding: theme.spacing(2, 3) }}
action={<RefreshAction />}
>
{'The current balance is ' + balance?.amount}
</Alert>
)}
</Grid>
<Layout>
<NymCard title="Check Balance">
<Grid container direction="column" spacing={2}>
<Grid item>
{balanceError && (
<Alert severity="error" action={<RefreshAction />}>
{balanceError}
</Alert>
)}
{!balanceError && (
<Alert
severity="success"
style={{ padding: theme.spacing(2, 3) }}
action={<RefreshAction />}
>
{'The current balance is ' + balance?.printable_balance}
</Alert>
)}
</Grid>
</NymCard>
</Layout>
</Page>
</Grid>
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/bond/index.tsx
+7 -8
View File
@@ -1,15 +1,14 @@
import React from 'react'
import { Layout, NymCard, Page } from '../../components'
import { NymCard } from '../../components'
import { Layout } from '../../layouts'
import { BondForm } from './BondForm'
export const Bond = () => {
return (
<Page>
<Layout>
<NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
<BondForm />
</NymCard>
</Layout>
</Page>
<Layout>
<NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
<BondForm />
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/delegate/index.tsx
+11 -12
View File
@@ -1,19 +1,18 @@
import React from 'react'
import { DelegateForm } from './DelegateForm'
import { Layout, NymCard, Page } from '../../components'
import { NymCard } from '../../components'
import { Layout } from '../../layouts'
export const Delegate = () => {
return (
<Page>
<Layout>
<NymCard
title="Delegate"
subheader="Delegate to mixnode or gateway"
noPadding
>
<DelegateForm />
</NymCard>
</Layout>
</Page>
<Layout>
<NymCard
title="Delegate"
subheader="Delegate to mixnode or gateway"
noPadding
>
<DelegateForm />
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/internal-docs/index.tsx
+7 -8
View File
@@ -1,17 +1,16 @@
import React, { useState } from 'react'
import { Layout, Page, NymCard } from '../../components'
import { NymCard } from '../../components'
import { ApiList } from './ApiList'
import { Layout } from '../../layouts'
export const InternalDocs = () => {
if (process.env.NODE_ENV == 'development') {
return (
<Page>
<Layout>
<NymCard title="Docs" subheader="Internal API docs">
<ApiList />
</NymCard>
</Layout>
</Page>
<Layout>
<NymCard title="Docs" subheader="Internal API docs">
<ApiList />
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/receive.tsx
+33 -34
View File
@@ -1,8 +1,9 @@
import React, { useContext } from 'react'
import { Card, CardContent, Grid, Typography } from '@material-ui/core'
import { Card, Grid, Typography } from '@material-ui/core'
import { Alert } from '@material-ui/lab'
import { CopyToClipboard, Layout, NymCard, Page } from '../components'
import { useMediaQuery } from '@material-ui/core'
import { CopyToClipboard, NymCard } from '../components'
import { Layout } from '../layouts'
import { theme } from '../theme'
import { ClientContext } from '../context/main'
@@ -11,38 +12,36 @@ export const Receive = () => {
const matches = useMediaQuery('(min-width:769px)')
return (
<Page>
<Layout>
<NymCard title="Receive Nym">
<Grid container direction="column" spacing={1}>
<Grid item>
<Alert severity="info">
You can receive tokens by providing this address to the sender
</Alert>
</Grid>
<Grid item>
<Card
style={{
margin: theme.spacing(1, 0),
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
padding: theme.spacing(3),
}}
variant="outlined"
>
<Typography
variant={matches ? 'h5' : 'subtitle1'}
style={{ wordBreak: 'break-word' }}
>
{clientDetails?.client_address}
</Typography>
<CopyToClipboard text={clientDetails?.client_address || ''} />
</Card>
</Grid>
<Layout>
<NymCard title="Receive Nym">
<Grid container direction="column" spacing={1}>
<Grid item>
<Alert severity="info">
You can receive tokens by providing this address to the sender
</Alert>
</Grid>
</NymCard>
</Layout>
</Page>
<Grid item>
<Card
style={{
margin: theme.spacing(1, 0),
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
padding: theme.spacing(3),
}}
variant="outlined"
>
<Typography
variant={matches ? 'h5' : 'subtitle1'}
style={{ wordBreak: 'break-word' }}
>
{clientDetails?.client_address}
</Typography>
<CopyToClipboard text={clientDetails?.client_address || ''} />
</Card>
</Grid>
</Grid>
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/send/index.tsx
+7 -8
View File
@@ -1,15 +1,14 @@
import React from 'react'
import { Layout, NymCard, Page } from '../../components'
import { NymCard } from '../../components'
import { SendWizard } from './SendWizard'
import { Layout } from '../../layouts'
export const Send = () => {
return (
<Page>
<Layout>
<NymCard title="Send tokens" noPadding>
<SendWizard />
</NymCard>
</Layout>
</Page>
<Layout>
<NymCard title="Send tokens" noPadding>
<SendWizard />
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/sign-in.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const SignIn = () => {
setIsLoading(true)
setInputError(undefined)
invoke('connect_with_mnemonic', { mnemonic })
await invoke('connect_with_mnemonic', { mnemonic })
.then((res) => {
logIn(res as TClientDetails)
})
tauri-wallet/src/routes/unbond/index.tsx
+7 -12
View File
@@ -1,19 +1,14 @@
import React from 'react'
import { Layout, NymCard, Page } from '../../components'
import { NymCard } from '../../components'
import { UnbondForm } from './UnbondForm'
import { Layout } from '../../layouts'
export const Unbond = () => {
return (
<Page>
<Layout>
<NymCard
title="Unbond"
subheader="Unbond a mixnode or gateway"
noPadding
>
<UnbondForm />
</NymCard>
</Layout>
</Page>
<Layout>
<NymCard title="Unbond" subheader="Unbond a mixnode or gateway" noPadding>
<UnbondForm />
</NymCard>
</Layout>
)
}
tauri-wallet/src/routes/undelegate/index.tsx
+11 -12
View File
@@ -1,19 +1,18 @@
import React from 'react'
import { Layout, NymCard, Page } from '../../components'
import { NymCard } from '../../components'
import { UndelegateForm } from './UndelegateForm'
import { Layout } from '../../layouts'
export const Undelegate = () => {
return (
<Page>
<Layout>
<NymCard
title="Undelegate"
subheader="Undelegate from a mixnode or gateway"
noPadding
>
<UndelegateForm />
</NymCard>
</Layout>
</Page>
<Layout>
<NymCard
title="Undelegate"
subheader="Undelegate from a mixnode or gateway"
noPadding
>
<UndelegateForm />
</NymCard>
</Layout>
)
}
tauri-wallet/tsconfig.json
+1 -1
View File
@@ -47,7 +47,7 @@
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": [
"node_modules/@types",
"../node_modules/@types",
"src/types",
"./"
] /* List of folders to include type definitions from. */,