Skip to content

F
frontend
Commit d045fdc5 authored by isstuev's avatar isstuev
Browse files
Options

tmp

parent 42149143
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 788 additions and 1 deletion
.env.template
View file @ d045fdc5
......@@ -62,3 +62,4 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_GOOGLE_AN
# l2 config
NEXT_PUBLIC_IS_L2_NETWORK=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_L2_NETWORKL__
NEXT_PUBLIC_L1_BASE_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_L1_BASE_URL__
NEXT_PUBLIC_L2_WITHDRAWAL_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_L2_WITHDRAWAL_URL__
README.md
View file @ d045fdc5
......@@ -139,6 +139,7 @@ The app instance could be customized by passing following variables to NodeJS en
| --- | --- | --- | --- |
| NEXT_PUBLIC_IS_L2_NETWORK | `boolean` *(optional)* | Set to true for L2 solutions (Optimism Bedrock based) | false |
| NEXT_PUBLIC_L1_BASE_URL | `string` *(optional)* | Base Blockscout URL for L1 network | `'http://eth-goerli.blockscout.com'` |
| NEXT_PUBLIC_L2_WITHDRAWAL_URL | `string` *(optional)* | URL for L2 -> L1 withdrawals | `https://app.optimism.io/bridge/withdraw` |
### Marketplace app configuration properties
......
configs/app/config.ts
View file @ d045fdc5
......@@ -110,6 +110,7 @@ const config = Object.freeze({
L2: {
isL2Network: getEnvValue(process.env.NEXT_PUBLIC_IS_L2_NETWORK) === 'true',
L1BaseUrl: getEnvValue(process.env.NEXT_PUBLIC_L1_BASE_URL),
withdrawalUrl: getEnvValue(process.env.NEXT_PUBLIC_L2_WITHDRAWAL_URL) || '',
},
statsApi: {
endpoint: getEnvValue(process.env.NEXT_PUBLIC_STATS_API_HOST),
......
data/withdrawals.ts 0 → 100644
View file @ d045fdc5
This diff is collapsed.
pages/withdrawals.tsx 0 → 100644
View file @ d045fdc5
import type { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
import Withdrawals from 'ui/pages/Withdrawals';
const WithdrawalsPage: NextPage = () => {
const title = getNetworkTitle();
return (
<>
<Head>
<title>{ title }</title>
</Head>
<Withdrawals/>
</>
);
};
export default WithdrawalsPage;
export { getServerSideProps } from 'lib/next/getServerSidePropsL2';
types/api/withdrawals.ts 0 → 100644
View file @ d045fdc5
export type WithdrawalsItem = {
'challenge_period_end': string | null;
'from': string | null;
'l1_tx_hash': string | null;
'l2_timestamp': string | null;
'l2_tx_hash': string;
'msg_nonce': number;
'msg_nonce_version': number;
'status': string;
}
export type WithdrawalStatus =
'In challenge period' |
'Ready for Relay' |
'Relayed' |
'Waiting for state root' |
'Ready to prove';
export type WithdrawalsResponse = {
items: Array<WithdrawalsItem>;
'next_page_params': {
'items_count': number;
'nonce': string;
};
total: number;
}
types/nextjs-routes.d.ts
View file @ d045fdc5
......@@ -38,7 +38,8 @@ declare module "nextjs-routes" {
| DynamicRoute<"/tx/[hash]", { "hash": string }>
| StaticRoute<"/txs">
| StaticRoute<"/verified-contracts">
| StaticRoute<"/visualize/sol2uml">;
| StaticRoute<"/visualize/sol2uml">
| StaticRoute<"/withdrawals">;
interface StaticRoute<Pathname> {
pathname: Pathname;
......
ui/pages/Withdrawals.tsx 0 → 100644
View file @ d045fdc5
import { Flex, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import React from 'react';
import { data as dataMock } from 'data/withdrawals';
import { rightLineArrow } from 'lib/html-entities';
import isBrowser from 'lib/isBrowser';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle';
import SkeletonList from 'ui/shared/skeletons/SkeletonList';
import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
const Withdrawals = () => {
// request!!
const [ isLoading, setIsLoading ] = React.useState(true);
React.useEffect(() => {
if (isBrowser()) {
setTimeout(() => setIsLoading(false), 2000);
}
}, []);
const data = dataMock;
const isPaginationVisible = false;
const content = (() => {
if (isLoading) {
return (
<>
<SkeletonList display={{ base: 'block', lg: 'none' }}/>
{ /* !!! */ }
<SkeletonTable display={{ base: 'none', lg: 'block' }} columns={ [ '130px', '120px', '15%', '45%', '35%' ] }/>
</>
);
}
return (
<>
<Show below="lg" ssr={ false }>{ data.items.map((item => <WithdrawalsListItem key={ item.l2_tx_hash } { ...item }/>)) }</Show>
<Hide below="lg" ssr={ false }><WithdrawalsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 }/></Hide>
</>
);
})();
return (
<Page>
<PageTitle text={ `Withdrawals (L2 ${ rightLineArrow } L1)` } withTextAd/>
{ isLoading ? <Skeleton w="400px" h="26px" mb={ 7 }/> : <Text>A total of { data.total } withdrawals found</Text> }
{ /* Pagination */ }
{ content }
</Page>
);
};
export default Withdrawals;
ui/withdrawals/WithdrawalsListItem.tsx 0 → 100644
View file @ d045fdc5
import React from "react";
const WithdrawalsListItem = () => {
return null;
}
export default WithdrawalsListItem;
\ No newline at end of file
ui/withdrawals/WithdrawalsTable.tsx 0 → 100644
View file @ d045fdc5
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react';
import type { WithdrawalsItem } from 'types/api/withdrawals';
import { default as Thead } from 'ui/shared/TheadSticky';
import WithdrawalsTableItem from './WithdrawalsTableItem';
type Props = {
items: Array<WithdrawalsItem>;
top: number;
}
const WithdrawalsTable = ({ items, top }: Props) => {
return (
<Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
<Thead top={ top }>
<Tr>
<Th>Msg nonce</Th>
<Th>From</Th>
<Th>L2 txn hash</Th>
<Th>Age</Th>
<Th>Status</Th>
<Th>L1 txn hash</Th>
<Th>Time left</Th>
</Tr>
</Thead>
<Tbody>
{ items.map((item) => (
<WithdrawalsTableItem key={ item.l2_tx_hash } { ...item }/>
)) }
</Tbody>
</Table>
);
};
export default WithdrawalsTable;
ui/withdrawals/WithdrawalsTableItem.tsx 0 → 100644
View file @ d045fdc5
/* eslint-disable @typescript-eslint/naming-convention */
import { Box, Flex, Td, Tr, Text, Icon } from '@chakra-ui/react';
import { route } from 'nextjs-routes';
import React from 'react';
import type { WithdrawalsItem } from 'types/api/withdrawals';
import appConfig from 'configs/app/config';
import txIcon from 'icons/transactions.svg';
import txBatchIcon from 'icons/txBatch.svg';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import HashStringShorten from 'ui/shared/HashStringShorten';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal';
type Props = WithdrawalsItem;
const OutputRootsTableItem = ({
msg_nonce,
msg_nonce_version,
l1_tx_hash,
l2_timestamp,
l2_tx_hash,
from,
status,
challenge_period_end,
}: Props) => {
const timeAgo = l2_timestamp ? useTimeAgoIncrement(l2_timestamp, false) : 'N/A';
return (
<Tr>
<Td verticalAlign="middle" fontWeight={ 600 }>
<Text>{ msg_nonce_version + '-' + msg_nonce }</Text>
</Td>
<Td verticalAlign="middle">
{ from ? (
<Address>
{ /* address info?? */ }
<AddressIcon address={{ hash: from, is_contract: false, implementation_name: null }}/>
<AddressLink hash={ from } type="address" truncation="constant" ml={ 2 }/>
</Address>
) : 'N/A' }
</Td>
<Td verticalAlign="middle">
<LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: l2_tx_hash } }) } display="flex" alignItems="center">
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ l2_tx_hash }/></Box>
</LinkInternal>
</Td>
<Td verticalAlign="middle" pr={ 12 }>
<Text variant="secondary">{ timeAgo }</Text>
</Td>
<Td verticalAlign="middle">
{ status === 'Ready for Relay' ?
<LinkExternal title={ status } href={ appConfig.l2.withdrawalUrl }/> :
<Text>{ status }</Text>
}
</Td>
<Td verticalAlign="middle">
{ l1_tx_hash ?
//!!!
<LinkExternal title='aaa' href={ appConfig.l2.withdrawalUrl }/> :
'N/A'
}
</Td>
<Td verticalAlign="middle">
{ challenge_period_end ? challenge_period_end : '-'}
</Td>
</Tr>
);
};
export default OutputRootsTableItem;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment