Skip to content

F
frontend
Commit df228d3f authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Remove "Back to" button (#2887) 

Fixes #2833
parent 54267a02
Show whitespace changes
Inline Side-by-side
Showing with 11 additions and 371 deletions
ui/pages/Address.tsx
View file @ df228d3f
......@@ -10,7 +10,6 @@ import getCheckedSummedAddress from 'lib/address/getCheckedSummedAddress';
import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
import useAddressMetadataInitUpdate from 'lib/address/useAddressMetadataInitUpdate';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import { useMultichainContext } from 'lib/contexts/multichain';
import useAddressProfileApiQuery from 'lib/hooks/useAddressProfileApiQuery';
import useIsSafeAddress from 'lib/hooks/useIsSafeAddress';
......@@ -70,7 +69,6 @@ const xScoreFeature = config.features.xStarScore;
const AddressPageContent = () => {
const router = useRouter();
const appProps = useAppContext();
const { chain } = useMultichainContext() || {};
const hash = getQueryParamString(router.query.hash);
......@@ -386,24 +384,6 @@ const AddressPageContent = () => {
/>
);
const backLink = React.useMemo(() => {
if (appProps.referrer && appProps.referrer.includes('/accounts')) {
return {
label: 'Back to top accounts list',
url: appProps.referrer,
};
}
if (appProps.referrer && appProps.referrer.includes('/mud-worlds')) {
return {
label: 'Back to MUD worlds list',
url: appProps.referrer,
};
}
return;
}, [ appProps.referrer ]);
// API always returns hash in check-summed format except for addresses that are not in the database
// In this case it returns 404 with empty payload, so we calculate check-summed hash on the client
const checkSummedHash = React.useMemo(() => {
......@@ -462,7 +442,6 @@ const AddressPageContent = () => {
<TextAd mb={ 6 }/>
<PageTitle
title={ `${ addressQuery.data?.is_contract && addressQuery.data?.proxy_type !== 'eip7702' ? 'Contract' : 'Address' } details${ chainText }` }
backLink={ backLink }
contentAfter={ titleContentAfter }
secondRow={ titleSecondRow }
isLoading={ isLoading }
......
ui/pages/ArbitrumL2TxnBatch.tsx
View file @ df228d3f
......@@ -3,7 +3,6 @@ import React from 'react';
import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
......@@ -31,7 +30,6 @@ const TABS_HEIGHT = 80;
const ArbitrumL2TxnBatch = () => {
const router = useRouter();
const appProps = useAppContext();
const number = getQueryParamString(router.query.number);
const height = getQueryParamString(router.query.height);
const commitment = getQueryParamString(router.query.commitment);
......@@ -94,25 +92,11 @@ const ArbitrumL2TxnBatch = () => {
},
].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to txn batches list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<TextAd mb={ 6 }/>
<PageTitle
title={ `Txn batch #${ batchQuery.data?.number }` }
backLink={ backLink }
isLoading={ batchQuery.isPlaceholderData }
/>
<RoutedTabs
......
ui/pages/Block.tsx
View file @ df228d3f
......@@ -7,7 +7,6 @@ import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import type { PaginationParams } from 'ui/shared/pagination/types';
import config from 'configs/app';
import { useAppContext } from 'lib/contexts/app';
import { useMultichainContext } from 'lib/contexts/multichain';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
......@@ -44,7 +43,6 @@ const TABS_HEIGHT = 88;
const BlockPageContent = () => {
const router = useRouter();
const isMobile = useIsMobile();
const appProps = useAppContext();
const heightOrHash = getQueryParamString(router.query.height_or_hash);
const tab = getQueryParamString(router.query.tab);
const { chain } = useMultichainContext() || {};
......@@ -122,19 +120,6 @@ const BlockPageContent = () => {
pagination = blockInternalTxsQuery.pagination;
}
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/blocks');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to blocks list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
throwOnAbsentParamError(heightOrHash);
if (blockQuery.isError) {
......@@ -191,7 +176,6 @@ const BlockPageContent = () => {
<TextAd mb={ 6 }/>
<PageTitle
title={ title }
backLink={ backLink }
contentAfter={ <BlockCeloEpochTag blockQuery={ blockQuery }/> }
secondRow={ titleSecondRow }
isLoading={ blockQuery.isPlaceholderData }
......
ui/pages/Chart.tsx
View file @ df228d3f
......@@ -8,7 +8,6 @@ import type { StatsIntervalIds } from 'types/client/stats';
import { StatsIntervalId } from 'types/client/stats';
import config from 'configs/app';
import { useAppContext } from 'lib/contexts/app';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
import * as metadata from 'lib/metadata';
......@@ -84,20 +83,6 @@ const Chart = () => {
const isMobile = useIsMobile();
const isInBrowser = isBrowser();
const appProps = useAppContext();
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/stats');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to charts list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const onIntervalChange = React.useCallback((interval: StatsIntervalIds) => {
setIntervalState(interval);
router.push(
......@@ -183,7 +168,6 @@ const Chart = () => {
title={ info?.title || lineQuery.data?.info?.title || '' }
mb={ 3 }
isLoading={ isInfoLoading }
backLink={ backLink }
secondRow={ info?.description || lineQuery.data?.info?.description }
withTextAd
/>
......
ui/pages/ContractVerificationForAddress.tsx
View file @ df228d3f
......@@ -5,7 +5,6 @@ import type { SmartContractVerificationMethodApi } from 'types/api/contract';
import type { SmartContractVerificationMethod } from 'types/client/contract';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getQueryParamString from 'lib/router/getQueryParamString';
import ContractVerificationForm from 'ui/contractVerification/ContractVerificationForm';
......@@ -16,7 +15,6 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import PageTitle from 'ui/shared/Page/PageTitle';
const ContractVerificationForAddress = () => {
const appProps = useAppContext();
const router = useRouter();
const hash = getQueryParamString(router.query.hash);
......@@ -67,24 +65,10 @@ const ContractVerificationForAddress = () => {
);
})();
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to contract',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<PageTitle
title="New smart contract verification"
backLink={ backLink }
/>
<AddressEntity
address={{ hash, is_contract: true }}
......
ui/pages/CsvExport.tsx
View file @ df228d3f
......@@ -7,7 +7,6 @@ import type { CsvExportParams } from 'types/client/address';
import type { ResourceName } from 'lib/api/resources';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
......@@ -70,7 +69,6 @@ const isCorrectExportType = (type: string): type is CsvExportParams['type'] => O
const CsvExport = () => {
const router = useRouter();
const appProps = useAppContext();
const isMobile = useIsMobile();
const addressHash = router.query.address?.toString() || '';
......@@ -101,19 +99,6 @@ const CsvExport = () => {
const isLoading = addressQuery.isPending || configQuery.isPending || (exportTypeParam === 'holders' && tokenQuery.isPending);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to address',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
throwOnAbsentParamError(addressHash);
throwOnAbsentParamError(exportType);
......@@ -200,10 +185,7 @@ const CsvExport = () => {
return (
<>
<PageTitle
title="Export data to CSV file"
backLink={ backLink }
/>
<PageTitle title="Export data to CSV file"/>
{ description }
{ content }
</>
......
ui/pages/Epoch.tsx
View file @ df228d3f
......@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
import getQueryParamString from 'lib/router/getQueryParamString';
......@@ -17,7 +16,6 @@ import PageTitle from 'ui/shared/Page/PageTitle';
const EpochPageContent = () => {
const isMobile = useIsMobile();
const appProps = useAppContext();
const router = useRouter();
const number = getQueryParamString(router.query.number);
......@@ -34,19 +32,6 @@ const EpochPageContent = () => {
const isLoading = epochQuery.isPlaceholderData;
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/epochs');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to epochs list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const titleContentAfter = (() => {
switch (epochQuery.data?.type) {
case 'L1':
......@@ -97,7 +82,6 @@ const EpochPageContent = () => {
<TextAd mb={ 6 }/>
<PageTitle
title={ `Epoch #${ number }` }
backLink={ backLink }
contentAfter={ titleContentAfter }
secondRow={ titleSecondRow }
isLoading={ isLoading }
......
ui/pages/OptimisticL2TxnBatch.tsx
View file @ df228d3f
......@@ -3,7 +3,6 @@ import React from 'react';
import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
......@@ -31,7 +30,6 @@ const TABS_HEIGHT = 80;
const OptimisticL2TxnBatch = () => {
const router = useRouter();
const appProps = useAppContext();
const number = getQueryParamString(router.query.number);
const height = getQueryParamString(router.query.height);
const commitment = getQueryParamString(router.query.commitment);
......@@ -92,25 +90,11 @@ const OptimisticL2TxnBatch = () => {
},
].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to txn batches list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<TextAd mb={ 6 }/>
<PageTitle
title={ `Batch #${ batchQuery.data?.number }` }
backLink={ backLink }
isLoading={ batchQuery.isPlaceholderData }
/>
<RoutedTabs
......
ui/pages/Pool.tsx
View file @ df228d3f
......@@ -4,7 +4,6 @@ import React from 'react';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getPoolLinks from 'lib/pools/getPoolLinks';
import { getPoolTitle } from 'lib/pools/getPoolTitle';
......@@ -28,7 +27,6 @@ import VerifyWith from 'ui/shared/VerifyWith';
const Pool = () => {
const router = useRouter();
const appProps = useAppContext();
const hash = getQueryParamString(router.query.hash);
const { data, isPlaceholderData, isError, error } = useApiQuery('contractInfo:pool', {
......@@ -119,26 +117,12 @@ const Pool = () => {
</Flex>
);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/pools');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to pools list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const poolTitle = data ? getPoolTitle(data) : '';
return (
<>
<PageTitle
title={ poolTitle }
backLink={ backLink }
beforeTitle={ data ? (
<PoolEntity.Icon
pool={ data }
......
ui/pages/ScrollL2TxnBatch.tsx
View file @ df228d3f
......@@ -4,7 +4,6 @@ import React from 'react';
import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
......@@ -32,7 +31,6 @@ const TABS_HEIGHT = 80;
const ScrollL2TxnBatch = () => {
const router = useRouter();
const appProps = useAppContext();
const number = getQueryParamString(router.query.number);
const tab = getQueryParamString(router.query.tab);
const isMobile = useIsMobile();
......@@ -99,25 +97,11 @@ const ScrollL2TxnBatch = () => {
},
].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to txn batches list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<TextAd mb={ 6 }/>
<PageTitle
title={ `Txn batch #${ number }` }
backLink={ backLink }
/>
<RoutedTabs
tabs={ tabs }
......
ui/pages/Sol2Uml.tsx
View file @ df228d3f
......@@ -2,36 +2,18 @@ import { Flex } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { useAppContext } from 'lib/contexts/app';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import PageTitle from 'ui/shared/Page/PageTitle';
import Sol2UmlDiagram from 'ui/sol2uml/Sol2UmlDiagram';
const Sol2Uml = () => {
const router = useRouter();
const appProps = useAppContext();
const addressHash = router.query.address?.toString() || '';
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to address',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<PageTitle
title="Solidity UML diagram"
backLink={ backLink }
/>
<PageTitle title="Solidity UML diagram"/>
<Flex mb={ 10 } flexWrap="wrap" columnGap={ 3 }>
<span>For contract</span>
<AddressEntity
......
ui/pages/TacOperation.tsx
View file @ df228d3f
......@@ -2,7 +2,6 @@ import { useRouter } from 'next/router';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getQueryParamString from 'lib/router/getQueryParamString';
import { TAC_OPERATION_DETAILS } from 'stubs/operations';
......@@ -13,7 +12,6 @@ import PageTitle from 'ui/shared/Page/PageTitle';
import TacOperationTag from 'ui/shared/TacOperationTag';
const TacOperation = () => {
const appProps = useAppContext();
const router = useRouter();
const id = getQueryParamString(router.query.id);
......@@ -26,19 +24,6 @@ const TacOperation = () => {
throwOnResourceLoadError(query);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/operations');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to operations list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const titleContentAfter = query.data ? (
<TacOperationTag type={ query.data.type } loading={ query.isPlaceholderData }/>
) : null;
......@@ -52,7 +37,6 @@ const TacOperation = () => {
<TextAd mb={ 6 }/>
<PageTitle
title="Operation details"
backLink={ backLink }
contentAfter={ titleContentAfter }
isLoading={ query.isPlaceholderData }
secondRow={ titleSecondRow }
......
ui/pages/Transaction.tsx
View file @ df228d3f
......@@ -6,7 +6,6 @@ import type { EntityTag as TEntityTag } from 'ui/shared/EntityTags/types';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import { useMultichainContext } from 'lib/contexts/multichain';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getQueryParamString from 'lib/router/getQueryParamString';
......@@ -38,7 +37,6 @@ const tacFeature = config.features.tac;
const TransactionPageContent = () => {
const router = useRouter();
const appProps = useAppContext();
const { chain } = useMultichainContext() || {};
const hash = getQueryParamString(router.query.hash);
......@@ -110,19 +108,6 @@ const TransactionPageContent = () => {
/>
);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/txs');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to transactions list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const titleSecondRow = <TxSubHeading hash={ hash } hasTag={ Boolean(data?.transaction_tag) } txQuery={ txQuery }/>;
if (isError && !showDegradedView) {
......@@ -136,7 +121,6 @@ const TransactionPageContent = () => {
<TextAd mb={ 6 }/>
<PageTitle
title={ chain ? `Transaction details on ${ chain.config.chain.name }` : 'Transaction details' }
backLink={ backLink }
contentAfter={ tags }
secondRow={ titleSecondRow }
/>
......
ui/pages/UserOp.tsx
View file @ df228d3f
......@@ -7,7 +7,6 @@ import type { Log } from 'types/api/log';
import type { TokenTransfer } from 'types/api/tokenTransfer';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getQueryParamString from 'lib/router/getQueryParamString';
......@@ -24,7 +23,6 @@ import UserOpSubHeading from 'ui/userOp/UserOpSubHeading';
const UserOp = () => {
const router = useRouter();
const appProps = useAppContext();
const hash = getQueryParamString(router.query.hash);
const userOpQuery = useApiQuery('general:user_op', {
......@@ -80,19 +78,6 @@ const UserOp = () => {
{ id: 'raw', title: 'Raw', component: <UserOpRaw rawData={ userOpQuery.data?.raw } isLoading={ userOpQuery.isPlaceholderData }/> },
]), [ userOpQuery, txQuery, filterTokenTransfersByLogIndex, filterLogsByLogIndex ]);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/ops');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to user operations list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
throwOnAbsentParamError(hash);
throwOnResourceLoadError(userOpQuery);
......@@ -103,7 +88,6 @@ const UserOp = () => {
<TextAd mb={ 6 }/>
<PageTitle
title="User operation details"
backLink={ backLink }
secondRow={ titleSecondRow }
/>
<RoutedTabs tabs={ tabs } isLoading={ userOpQuery.isPlaceholderData }/>
......
ui/pages/ValidatorZilliqa.tsx
View file @ df228d3f
......@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getQueryParamString from 'lib/router/getQueryParamString';
import { VALIDATOR_ZILLIQA } from 'stubs/validators';
......@@ -13,7 +12,6 @@ import PageTitle from 'ui/shared/Page/PageTitle';
import ValidatorDetails from 'ui/validators/zilliqa/ValidatorDetails';
const ValidatorZilliqa = () => {
const appProps = useAppContext();
const router = useRouter();
const blsPublicKey = getQueryParamString(router.query.id);
......@@ -28,19 +26,6 @@ const ValidatorZilliqa = () => {
const isLoading = query.isPlaceholderData;
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/validators');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to validators list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const titleSecondRow = (
<Flex
columnGap={ 3 }
......@@ -61,7 +46,7 @@ const ValidatorZilliqa = () => {
return (
<>
<TextAd mb={ 6 }/>
<PageTitle title="Validator details" secondRow={ titleSecondRow } backLink={ backLink }/>
<PageTitle title="Validator details" secondRow={ titleSecondRow }/>
{ query.data && <ValidatorDetails data={ query.data } isLoading={ isLoading }/> }
</>
);
......
ui/pages/VerifiedAddresses.tsx
View file @ df228d3f
......@@ -12,6 +12,7 @@ import getQueryParamString from 'lib/router/getQueryParamString';
import { TOKEN_INFO_APPLICATION, VERIFIED_ADDRESS } from 'stubs/account';
import { Button } from 'toolkit/chakra/button';
import { Link } from 'toolkit/chakra/link';
import { BackToButton } from 'toolkit/components/buttons/BackToButton';
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal';
import AccountPageDescription from 'ui/shared/AccountPageDescription';
......@@ -126,23 +127,14 @@ const VerifiedAddresses = () => {
);
})();
const backLink = React.useMemo(() => {
if (!selectedAddress) {
return;
}
return {
label: 'Back to my verified addresses',
onClick: handleGoBack,
};
}, [ handleGoBack, selectedAddress ]);
if (selectedAddress) {
const addressInfo = addressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress.toLowerCase() === selectedAddress.toLowerCase());
const tokenName = addressInfo ? `${ addressInfo.metadata.tokenName } (${ addressInfo.metadata.tokenSymbol })` : '';
const beforeTitle = <BackToButton onClick={ handleGoBack } hint="Back to my verified addresses" mr={ 3 }/>;
return (
<>
<PageTitle title="Token info application form" backLink={ backLink }/>
<PageTitle title="Token info application form" beforeTitle={ beforeTitle }/>
<TokenInfoForm
address={ selectedAddress }
tokenName={ tokenName }
......
ui/pages/ZkEvmL2TxnBatch.tsx
View file @ df228d3f
......@@ -4,7 +4,6 @@ import React from 'react';
import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getQueryParamString from 'lib/router/getQueryParamString';
......@@ -20,7 +19,6 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
const ZkEvmL2TxnBatch = () => {
const router = useRouter();
const appProps = useAppContext();
const number = getQueryParamString(router.query.number);
const tab = getQueryParamString(router.query.tab);
......@@ -50,26 +48,10 @@ const ZkEvmL2TxnBatch = () => {
{ id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ batchTxsQuery }/> },
].filter(Boolean)), [ batchQuery, batchTxsQuery ]);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/zkevm_l2_txn_batches');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to txn batches list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<TextAd mb={ 6 }/>
<PageTitle
title={ `Txn batch #${ number }` }
backLink={ backLink }
/>
<PageTitle title={ `Txn batch #${ number }` }/>
<RoutedTabs
tabs={ tabs }
isLoading={ batchQuery.isPlaceholderData }
......
ui/pages/ZkSyncL2TxnBatch.tsx
View file @ df228d3f
......@@ -4,7 +4,6 @@ import React from 'react';
import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import useIsMobile from 'lib/hooks/useIsMobile';
......@@ -30,7 +29,6 @@ const TABS_HEIGHT = 80;
const ZkSyncL2TxnBatch = () => {
const router = useRouter();
const appProps = useAppContext();
const number = getQueryParamString(router.query.number);
const tab = getQueryParamString(router.query.tab);
const isMobile = useIsMobile();
......@@ -71,26 +69,10 @@ const ZkSyncL2TxnBatch = () => {
},
].filter(Boolean)), [ batchQuery, batchTxsQuery, hasPagination ]);
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to txn batches list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return (
<>
<TextAd mb={ 6 }/>
<PageTitle
title={ `Txn batch #${ number }` }
backLink={ backLink }
/>
<PageTitle title={ `Txn batch #${ number }` }/>
<RoutedTabs
tabs={ tabs }
isLoading={ batchQuery.isPlaceholderData }
......
ui/shared/Page/PageTitle.tsx
View file @ df228d3f
import { Flex, chakra } from '@chakra-ui/react';
import { debounce } from 'es-toolkit';
import { useRouter } from 'next/router';
import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import * as mixpanel from 'lib/mixpanel/index';
import { Heading } from 'toolkit/chakra/heading';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Tooltip } from 'toolkit/chakra/tooltip';
import { BackToButton } from 'toolkit/components/buttons/BackToButton';
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
import TextAd from 'ui/shared/ad/TextAd';
type BackLinkProp = { label: string; url: string } | { label: string; onClick: () => void };
type Props = {
title: string;
className?: string;
backLink?: BackLinkProp;
beforeTitle?: React.ReactNode;
afterTitle?: React.ReactNode;
contentAfter?: React.ReactNode;
......@@ -28,15 +22,13 @@ type Props = {
const TEXT_MAX_LINES = 1;
const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoading = false, afterTitle, beforeTitle, secondRow }: Props) => {
const PageTitle = ({ title, contentAfter, withTextAd, className, isLoading = false, afterTitle, beforeTitle, secondRow }: Props) => {
const tooltip = useDisclosure();
const isMobile = useIsMobile();
const router = useRouter();
const [ isTextTruncated, setIsTextTruncated ] = React.useState(false);
const headingRef = React.useRef<HTMLHeadingElement>(null);
const textRef = React.useRef<HTMLSpanElement>(null);
const pageType = mixpanel.getPageType(router.pathname);
const updatedTruncateState = React.useCallback(() => {
if (!headingRef.current || !textRef.current) {
......@@ -75,11 +67,6 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
}
}, [ tooltip ]);
const handleBackToClick = React.useCallback(() => {
mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Back to', Source: pageType });
backLink && 'onClick' in backLink && backLink.onClick();
}, [ backLink, pageType ]);
return (
<Flex className={ className } flexDir="column" rowGap={ 3 } mb={ 6 }>
<Flex
......@@ -90,15 +77,6 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
alignItems="center"
>
<Flex h={{ base: 'auto', lg: isLoading ? 10 : 'auto' }} maxW="100%" alignItems="center">
{ backLink && (
<BackToButton
hint={ backLink.label }
href={ 'url' in backLink ? backLink.url : undefined }
onClick={ handleBackToClick }
loadingSkeleton={ isLoading }
mr={ 3 }
/>
) }
{ beforeTitle }
<Skeleton
loading={ isLoading }
......
ui/shared/Page/specs/DefaultView.tsx
View file @ df228d3f
......@@ -25,11 +25,6 @@ const DefaultView = () => {
icon_url: 'https://example.com/logo.png',
};
const backLink = {
label: 'Back to tokens list',
url: 'https://localhost:3000/tokens',
};
const contentAfter = (
<>
<IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer"/>
......@@ -61,7 +56,6 @@ const DefaultView = () => {
variant="heading"
/>
) }
backLink={ backLink }
contentAfter={ contentAfter }
secondRow={ secondRow }
/>
......
ui/shared/Page/specs/WithTextAd.tsx
View file @ df228d3f
......@@ -5,15 +5,9 @@ import { Badge } from 'toolkit/chakra/badge';
import PageTitle from '../PageTitle';
const WithTextAd = () => {
const backLink = {
label: 'Back to Home',
url: 'https://localhost:3000',
};
return (
<PageTitle
title="Block"
backLink={ backLink }
contentAfter={ <Badge key="custom" colorPalette="orange" variant="solid">Awesome</Badge> }
withTextAd
/>
......
ui/snippets/auth/AuthModal.tsx
View file @ df228d3f
......@@ -10,7 +10,6 @@ import { useRewardsContext } from 'lib/contexts/rewards';
import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
import * as mixpanel from 'lib/mixpanel';
import { DialogBody, DialogContent, DialogHeader, DialogRoot } from 'toolkit/chakra/dialog';
import { BackToButton } from 'toolkit/components/buttons/BackToButton';
import AuthModalScreenConnectWallet from './screens/AuthModalScreenConnectWallet';
import AuthModalScreenEmail from './screens/AuthModalScreenEmail';
......@@ -192,7 +191,7 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig, closeOnError }: Pro
>
<DialogContent>
<DialogHeader
startElement={ steps.length > 1 && !steps[steps.length - 1].type.startsWith('success') && <BackToButton onClick={ onPrevStep }/> }
onBackToClick={ steps.length > 1 && !steps[steps.length - 1].type.startsWith('success') ? onPrevStep : undefined }
>
{ header }
</DialogHeader>
......
ui/token/TokenPageTitle.tsx
View file @ df228d3f
......@@ -10,7 +10,6 @@ import config from 'configs/app';
import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
import type { ResourceError } from 'lib/api/resources';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import { getTokenTypeName } from 'lib/token/tokenTypes';
import { Tooltip } from 'toolkit/chakra/tooltip';
import AddressMetadataAlert from 'ui/address/details/AddressMetadataAlert';
......@@ -37,7 +36,6 @@ interface Props {
}
const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
const appProps = useAppContext();
const addressHash = !tokenQuery.isPlaceholderData ? (tokenQuery.data?.address_hash || '') : '';
const verifiedInfoQuery = useApiQuery('contractInfo:token_verified_info', {
......@@ -54,19 +52,6 @@ const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
const tokenSymbolText = tokenQuery.data?.symbol ? ` (${ tokenQuery.data.symbol })` : '';
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to tokens list',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
const [ bridgedTokenTagBgColor ] = useToken('colors', 'blue.500');
const [ bridgedTokenTagTextColor ] = useToken('colors', 'white');
......@@ -142,7 +127,6 @@ const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
<PageTitle
title={ `${ tokenQuery.data?.name || 'Unnamed token' }${ tokenSymbolText }` }
isLoading={ tokenQuery.isPlaceholderData }
backLink={ backLink }
beforeTitle={ tokenQuery.data ? (
<TokenEntity.Icon
token={ tokenQuery.data }
......
ui/tokenInstance/TokenInstancePageTitle.tsx
View file @ df228d3f
......@@ -3,7 +3,6 @@ import React from 'react';
import type { TokenInfo, TokenInstance } from 'types/api/token';
import { useAppContext } from 'lib/contexts/app';
import { getTokenTypeName } from 'lib/token/tokenTypes';
import { Link } from 'toolkit/chakra/link';
import { Tag } from 'toolkit/chakra/tag';
......@@ -22,8 +21,6 @@ interface Props {
}
const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) => {
const appProps = useAppContext();
const title = (() => {
if (typeof instance?.metadata?.name === 'string') {
return instance.metadata.name;
......@@ -40,19 +37,6 @@ const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) =>
return `ID ${ instance.id }`;
})();
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to token page',
url: appProps.referrer,
};
}, [ appProps.referrer, hash ]);
const tokenTag = token ? <Tag loading={ isLoading }>{ getTokenTypeName(token.type) }</Tag> : null;
const appLink = (() => {
......@@ -111,7 +95,6 @@ const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) =>
return (
<PageTitle
title={ title }
backLink={ backLink }
contentAfter={ tokenTag }
secondRow={ titleSecondRow }
isLoading={ isLoading }
......
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