filipe/zep
Archived
1
0
Fork 0
Code Issues Pull requests Activity

feat: ui improvements

Browse source
This commit is contained in:
Filipe Medeiros 2021-11-23 20:15:43 +00:00
parent d803d41bd2
commit b1d38185df
3 changed files with 55 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/Balance.tsx
View file

@ -1,6 +1,6 @@
import clsx from 'clsx'
import { Unit, convert } from 'nanocurrency'
import { FC } from 'react'
import { FC, useMemo } from 'react'
import useSWR from 'swr'
import { useAddress } from '../lib/context/addressContext'
@ -21,20 +21,22 @@ const Balance: FC<Props> = ({ className }) => {
const { address } = useAddress()
const params = useMemo(
() => ({
method: 'POST',
headers: [['Content-Type', 'application/json']],
body: JSON.stringify({
action: 'account_balance',
account: address,
}),
}),
[address]
)
const { data: account } = useSWR<{
balance: string
pending: string
}>(address !== undefined ? 'https://mynano.ninja/api/node' : null, {
fetcher: input =>
fetcher(input, {
method: 'POST',
headers: [['Content-Type', 'application/json']],
body: JSON.stringify({
action: 'account_balance',
account: address,
}),
}),
})
}>(address !== undefined ? ['https://mynano.ninja/api/node', params] : null)
const {
preferences: { showCurrencyDash },

53
components/BottomMenu.tsx
View file

@ -3,10 +3,12 @@ import {
CameraIcon,
CheckIcon,
ClipboardCopyIcon,
DocumentDuplicateIcon,
DownloadIcon,
HomeIcon,
LibraryIcon,
QrcodeIcon,
RssIcon,
UploadIcon,
} from '@heroicons/react/solid'
import clsx from 'clsx'
@ -48,21 +50,20 @@ const BottomMenu: FC<Props> = ({ className }) => {
<div>
<div
className={clsx(
'flex gap-5 items-end',
'flex gap-8 items-end',
leftHanded ? 'flex-row-reverse' : 'flex-row'
)}
>
<button className="bg-purple-500 p-1 h-7 rounded hover:bg-purple-400 shadow-lg">
<LibraryIcon className="h-full text-white" />
</button>
<div
className={clsx(
'flex gap-2',
'flex gap-6 items-end',
leftHanded ? 'flex-row-reverse' : null
)}
>
<div className="flex flex-col justify-between">
<button className="bg-purple-500 p-1 h-7 rounded hover:bg-purple-400 shadow-lg">
<LibraryIcon className="h-full text-white" />
</button>
<div className="flex flex-col h-16 justify-between">
<button
className={clsx(
'p-1 h-7 rounded shadow-lg',
@ -73,35 +74,41 @@ const BottomMenu: FC<Props> = ({ className }) => {
{confirmCopy ? (
<CheckIcon className="h-full text-purple-500" />
) : (
<ClipboardCopyIcon className="h-full text-white" />
<DocumentDuplicateIcon className="h-full text-white" />
)}
</button>
<button className="bg-purple-500 p-1 h-7 rounded hover:bg-purple-400 shadow-lg">
<DownloadIcon className="h-full text-white" />
</button>
</div>
</div>
<div className="relative h-16">
<button
className="bg-purple-500 p-1 h-16 rounded hover:bg-purple-400 shadow-lg"
className="bg-purple-500 absolute top-0 right-0 p-1 h-16 w-7 rounded-r hover:bg-purple-400 shadow-md translate-x-2/3"
onClick={() => push('/readQrCode')}
>
<UploadIcon className="h-full text-white w-full" />
</button>
<div className="border-purple-500 border-t-2 border-b-2 py-1 px-3 h-16 hover:bg-purple-400 shadow-lg">
<QrcodeIcon className="h-full text-white" />
</div>
<button
className="bg-purple-500 absolute bottom-0 left-0 p-1 h-16 w-7 rounded-l hover:bg-purple-400 shadow-md -translate-x-2/3"
onClick={() => push('/myQrCode')}
>
<QrcodeIcon className="h-full text-white" />
<DownloadIcon className="h-full text-white w-full" />
</button>
</div>
<div
className={clsx(
'flex gap-2 items-end',
leftHanded ? 'flex-row-reverse' : null
)}
>
<button
className="bg-purple-500 p-1 h-16 rounded hover:bg-purple-400 shadow-lg"
onClick={() => push('/readQrCode')}
>
<CameraIcon className="h-full text-white" />
<div className="flex flex-col h-16 justify-between">
<button className="bg-purple-500 p-1 h-7 rounded hover:bg-purple-400 shadow-md">
<UploadIcon className="h-full text-white" />
</button>
<button className="bg-purple-500 p-1 h-16 w-8 rounded hover:bg-purple-400 shadow-lg">
<UploadIcon className="w-full text-white" />
<button className="bg-purple-500 p-1 h-7 rounded hover:bg-purple-400 shadow-lg">
<RssIcon className="h-full text-white" />
</button>
</div>
</div>

18
pages/_app.tsx
View file

@ -1,21 +1,25 @@
import type { AppProps } from 'next/app'
import { FC } from 'react'
import { SWRConfig } from 'swr'
import 'tailwindcss/tailwind.css'
import Layout from '../components/Layout'
import { AddressProvider } from '../lib/context/addressContext'
import { PreferencesProvider } from '../lib/context/preferencesContext'
import fetcher from '../lib/fetcher'
import '../styles/global.css'
const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
return (
<AddressProvider address="nano_1nndpwon4wtxk3ay67mwirdjnk3iuffznfgqkcchammtk63yqamotiqfybnp">
<PreferencesProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</PreferencesProvider>
</AddressProvider>
<SWRConfig value={{ fetcher, provider: () => new Map() }}>
<AddressProvider address="nano_1nndpwon4wtxk3ay67mwirdjnk3iuffznfgqkcchammtk63yqamotiqfybnp">
<PreferencesProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</PreferencesProvider>
</AddressProvider>
</SWRConfig>
)
}