Skip to content
This repository has been archived by the owner on Oct 13, 2023. It is now read-only.

Commit

Permalink
receive modal
Browse files Browse the repository at this point in the history
  • Loading branch information
Vadim committed Jun 22, 2023
1 parent 05c3f1c commit 853e286
Show file tree
Hide file tree
Showing 20 changed files with 652 additions and 239 deletions.
7 changes: 3 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
"version": "0.1.2",
"private": true,
"dependencies": {
"@buf/penumbra-zone_penumbra.bufbuild_connect-es": "^0.9.1-20230603014454-505eab5b1b04.1",
"@buf/penumbra-zone_penumbra.bufbuild_connect-web": "0.8.6-20230601200246-42039db63422.1",
"@buf/penumbra-zone_penumbra.bufbuild_es": "^1.2.1-20230603014454-505eab5b1b04.1",
"@bufbuild/connect": "^0.9.1",
"@buf/penumbra-zone_penumbra.bufbuild_connect-es": "0.10.1-20230621005337-ae9571fec685.1",
"@buf/penumbra-zone_penumbra.bufbuild_connect-web": "^0.8.6-20230601200246-42039db63422.1",
"@buf/penumbra-zone_penumbra.bufbuild_es": "1.2.1-20230621005337-ae9571fec685.1",
"@bufbuild/connect-web": "^0.8.6",
"axios": "^1.3.6",
"moment": "^2.29.4",
Expand Down
107 changes: 60 additions & 47 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,24 @@ import {
Outlet,
useNavigate,
} from 'react-router-dom'
import * as wasm from 'penumbra-wasm'
import { Button } from './components/Tab/Button'
import { UserData } from './Signer/types'
import { isPenumbraInstalled } from './utils/ProviderPenumbra'
import img from './assets/img/logo.png'
import { BalanceDetail, Home, SendTx, Validators } from './containers'
import {
BalanceDetail,
Home,
SendTx,
TransactionDetail,
Validators,
} from './containers'
import { routesPath } from './utils/constants'
import { BalanceContextProvider } from './context'
import { BalanceContextProvider, TransactionContextProvider } from './context'

export const getShortKey = (text: string) => {
if (!text) return ''
return text.slice(0, 10) + '..' + text.slice(-9)
return text.slice(0, 35) + '...'
}

export default function App() {
Expand All @@ -34,26 +41,30 @@ export default function App() {
path={routesPath.SEND}
element={
// <RequireAuth>
<SendTx />
<SendTx />
// </RequireAuth>
}
/>
<Route
path={routesPath.BALANCE_DETAIL}
element={
// <RequireAuth>
<BalanceDetail />
<BalanceDetail />
// </RequireAuth>
}
/>
<Route
path={routesPath.VALIDATORS}
element={
// <RequireAuth>
<Validators />
<Validators />
// </RequireAuth>
}
/>
<Route
path={routesPath.TRANSACTION}
element={<TransactionDetail />}
/>
</Route>
</Routes>
</AuthProvider>
Expand All @@ -78,49 +89,51 @@ function Layout() {

return (
<BalanceContextProvider>
<div className='flex item-center justify-center mx-[104px]'>
{!isPenumbra ? (
<Button
mode='gradient'
title={
<a
href='https://chrome.google.com/webstore/detail/penumbra-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe'
target='_blank'
rel='noreferrer'
>
Install Penumbra
</a>
}
className='w-[200px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px] mt-[300px]'
/>
) : (
<>
<div className='w-[100%] flex flex-col'>
<div className='w-[100%] flex justify-between items-center'>
<img
src={img}
alt='penumbra logo'
className='w-[192px] object-cover cursor-pointer'
onClick={handleClick}
/>
{auth.walletAddress ? (
<div>
<p className='h3'>{getShortKey(auth.walletAddress)}</p>
</div>
) : (
<Button
mode='gradient'
title='Connect'
className='w-[200px]'
onClick={auth.signin}
<TransactionContextProvider>
<div className='flex item-center justify-center mx-[104px]'>
{!isPenumbra ? (
<Button
mode='gradient'
title={
<a
href='https://chrome.google.com/webstore/detail/penumbra-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe'
target='_blank'
rel='noreferrer'
>
Install Penumbra
</a>
}
className='w-[200px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px] mt-[300px]'
/>
) : (
<>
<div className='w-[100%] flex flex-col'>
<div className='w-[100%] flex justify-between items-center'>
<img
src={img}
alt='penumbra logo'
className='w-[192px] object-cover cursor-pointer'
onClick={handleClick}
/>
)}
{auth.walletAddress ? (
<div>
<p className='h3'>{getShortKey(auth.walletAddress)}</p>
</div>
) : (
<Button
mode='gradient'
title='Connect'
className='w-[200px]'
onClick={auth.signin}
/>
)}
</div>
<Outlet />
</div>
<Outlet />
</div>
</>
)}
</div>
</>
)}
</div>
</TransactionContextProvider>
</BalanceContextProvider>
)
}
Expand Down
49 changes: 11 additions & 38 deletions src/components/ActivityList/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,21 @@
import { ArrowUpRightSvg, ChevronLeftIcon } from '../Svg'
import { useEffect, useState } from 'react'
import {
TransactionInfoRequest,
TransactionInfoResponse,
} from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1alpha1/view_pb'
import { TransactionInfoResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1alpha1/view_pb'
import { uint8ToBase64 } from '../../utils/uint8ToBase64'
import { TxDetailModal } from '../modals/TxDetailModal'
import { createPromiseClient } from '@bufbuild/connect'
import { ViewProtocolService } from '@buf/penumbra-zone_penumbra.bufbuild_connect-es/penumbra/view/v1alpha1/view_connect'
import { createWebExtTransport } from '../../utils/webExtTransport'
import { getTransactionType } from '../../utils/transactionType'
import { useNavigate } from 'react-router-dom'
import { routesPath } from '../../utils/constants'
import { useTransactions } from '../../context'

export const ActivityList = () => {
const [transactions, setTransactions] = useState<TransactionInfoResponse[]>(
[]
)
const [selectedTx, setSelectedTx] = useState<
undefined | TransactionInfoResponse
>()

useEffect(() => {
const getTxs = async () => {
const client = createPromiseClient(
ViewProtocolService,
createWebExtTransport(ViewProtocolService)
)

const txsRequest = new TransactionInfoRequest({})
const navigate = useNavigate()
const { transactions } = useTransactions()

for await (const tx of client.transactionInfo(txsRequest)) {
setTransactions(state => [tx, ...state])
}
}
getTxs()
}, [])
const handleSelect = (tx: TransactionInfoResponse) => () => {
if (!tx) return
const hash = uint8ToBase64(tx.txInfo?.id?.hash!)
navigate(routesPath.TRANSACTION.replace(':slug', hash))
}

const handleSelect = (tx?: TransactionInfoResponse) => () => setSelectedTx(tx)
return (
<>
<div className='w-[100%] flex flex-col items-center'>
Expand Down Expand Up @@ -73,13 +53,6 @@ export const ActivityList = () => {
})}
</div>
</div>
{selectedTx && (
<TxDetailModal
show={Boolean(selectedTx)}
onClose={handleSelect()}
transaction={selectedTx}
/>
)}
</>
)
}
112 changes: 61 additions & 51 deletions src/components/BalanceAction/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { routesPath } from '../../utils/constants'
import { ArrowUpRightSvg, CachedSvg, DowmloadSvg } from '../Svg'
import { Button } from '../Tab/Button'
import { useBalance } from '../../context'
import { useState } from 'react'
import { ReceiveModal } from '../modals/ReceiveModal'

interface IBalanceAction {
name?: string
Expand All @@ -12,61 +14,69 @@ export const BalanceAction: React.FC<IBalanceAction> = ({ name }) => {
const navigate = useNavigate()
const { balance } = useBalance()

const [isOpenModal, toogleModal] = useState<boolean>(false)

const handleReceive = () => toogleModal(true)
const onClose = () => toogleModal(false)

const handleNavigate = (url: string) => () => navigate(url)

return (
<div className='w-[100%] flex flex-col items-center'>
<div className="relative ext:w-[40px] ext:h-[40px] tablet:w-[51px] tablet:h-[51px] bg-brown rounded-[50%] li_gradient text_body before:content-['PNB'] before:absolute before:top-[0.5px] before:left-[0.5px] before:w-[calc(100%-1px)] before:h-[calc(100%-1px)] before:bg-brown before:rounded-[50%] before:flex before:items-center before:justify-center"></div>
<p className='pt-[16px] pb-[24px] text_numbers'>
{(
balance.find(i => i.display === 'penumbra')?.amount || 0
).toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 20,
})}{' '}
penumbra
</p>
<div className='flex ext:gap-x-[30px] tablet:gap-x-[69px] ext:mb-[24px] tablet:mb-[40px]'>
<div className='flex flex-col items-center'>
<Button
disabled
mode='gradient'
title={
<div className='flex items-center justify-center'>
<DowmloadSvg />
</div>
}
className='rounded-[50%] w-[51px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px]'
/>
<p className='text_button pt-[8px]'>Receive</p>
</div>
<div className='flex flex-col items-center'>
<Button
mode='gradient'
onClick={handleNavigate(routesPath.SEND)}
title={
<div className='flex items-center justify-center'>
<ArrowUpRightSvg />
</div>
}
className='rounded-[50%] w-[51px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px]'
/>
<p className='text_button pt-[8px]'>Send</p>
</div>
<div className='flex flex-col items-center'>
<Button
mode='gradient'
disabled
title={
<div className='flex items-center justify-center'>
<CachedSvg />
</div>
}
className='rounded-[50%] w-[51px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px]'
/>
<p className='text_button pt-[8px]'>Exchange</p>
<>
<div className='w-[100%] flex flex-col items-center'>
<div className="relative ext:w-[40px] ext:h-[40px] tablet:w-[51px] tablet:h-[51px] bg-brown rounded-[50%] li_gradient text_body before:content-['PNB'] before:absolute before:top-[0.5px] before:left-[0.5px] before:w-[calc(100%-1px)] before:h-[calc(100%-1px)] before:bg-brown before:rounded-[50%] before:flex before:items-center before:justify-center"></div>
<p className='pt-[16px] pb-[24px] text_numbers'>
{(
balance.find(i => i.display === 'penumbra')?.amount || 0
).toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 20,
})}{' '}
penumbra
</p>
<div className='flex ext:gap-x-[30px] tablet:gap-x-[69px] ext:mb-[24px] tablet:mb-[40px]'>
<div className='flex flex-col items-center'>
<Button
mode='gradient'
onClick={handleReceive}
title={
<div className='flex items-center justify-center'>
<DowmloadSvg />
</div>
}
className='rounded-[50%] w-[51px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px]'
/>
<p className='text_button pt-[8px]'>Receive</p>
</div>
<div className='flex flex-col items-center'>
<Button
mode='gradient'
onClick={handleNavigate(routesPath.SEND)}
title={
<div className='flex items-center justify-center'>
<ArrowUpRightSvg />
</div>
}
className='rounded-[50%] w-[51px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px]'
/>
<p className='text_button pt-[8px]'>Send</p>
</div>
<div className='flex flex-col items-center'>
<Button
mode='gradient'
disabled
title={
<div className='flex items-center justify-center'>
<CachedSvg />
</div>
}
className='rounded-[50%] w-[51px] ext:pt-[14px] tablet:pt-[14px] ext:pb-[14px] tablet:pb-[14px]'
/>
<p className='text_button pt-[8px]'>Exchange</p>
</div>
</div>
</div>
</div>
{isOpenModal && <ReceiveModal show onClose={onClose} />}
</>
)
}
Loading

0 comments on commit 853e286

Please sign in to comment.