From c4d973a0fd29cd7f3d6effb654eec9ef603f96f4 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Tue, 15 Oct 2024 18:15:13 +0200 Subject: [PATCH] Remove eth/oasis address toggle --- .changelog/1571.bugfix.md | 1 + .../Account/AccountLinkWithAddressSwitch.tsx | 4 - .../components/Account/withAddressSwitch.tsx | 32 ------- .../components/AddressSwitch/images/eth.svg | 19 ---- .../components/AddressSwitch/images/oasis.svg | 3 - src/app/components/AddressSwitch/index.tsx | 95 ------------------- src/app/components/CopyToClipboard/index.tsx | 1 + .../RuntimeEvents/RuntimeEventDetails.tsx | 85 +++-------------- .../RuntimeEventsDetailedList.tsx | 11 +-- .../Transactions/RuntimeTransactionEvents.tsx | 5 +- .../AccountEventsCard.tsx | 2 - .../RuntimeBlockEventsCard.tsx | 2 - .../RuntimeTransactionDetailPage/index.tsx | 79 ++------------- src/locales/en/translation.json | 11 +-- 14 files changed, 31 insertions(+), 319 deletions(-) create mode 100644 .changelog/1571.bugfix.md delete mode 100644 src/app/components/Account/AccountLinkWithAddressSwitch.tsx delete mode 100644 src/app/components/Account/withAddressSwitch.tsx delete mode 100644 src/app/components/AddressSwitch/images/eth.svg delete mode 100644 src/app/components/AddressSwitch/images/oasis.svg delete mode 100644 src/app/components/AddressSwitch/index.tsx diff --git a/.changelog/1571.bugfix.md b/.changelog/1571.bugfix.md new file mode 100644 index 000000000..37fb47167 --- /dev/null +++ b/.changelog/1571.bugfix.md @@ -0,0 +1 @@ +Remove eth/oasis address toggle diff --git a/src/app/components/Account/AccountLinkWithAddressSwitch.tsx b/src/app/components/Account/AccountLinkWithAddressSwitch.tsx deleted file mode 100644 index 91c7ece86..000000000 --- a/src/app/components/Account/AccountLinkWithAddressSwitch.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { AccountLink } from './AccountLink' -import { withAddressSwitch } from './withAddressSwitch' - -export const AccountLinkWithAddressSwitch = withAddressSwitch(AccountLink) diff --git a/src/app/components/Account/withAddressSwitch.tsx b/src/app/components/Account/withAddressSwitch.tsx deleted file mode 100644 index c1b29b1c6..000000000 --- a/src/app/components/Account/withAddressSwitch.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { FC } from 'react' -import { AddressSwitchOption } from '../AddressSwitch' -import { CopyToClipboard } from '../CopyToClipboard' - -interface WithAddressSwitchProps { - addressSwitchOption: AddressSwitchOption - ethAddress?: string - oasisAddress?: string -} - -interface WrappedComponentBaseProps { - address?: string -} - -export const withAddressSwitch = - (Component: FC) => - (props: Omit & WithAddressSwitchProps) => { - const { addressSwitchOption, ethAddress, oasisAddress, ...restProps } = props - - const addressesByType = { - [AddressSwitchOption.Oasis]: oasisAddress, - [AddressSwitchOption.ETH]: ethAddress, - } - const displayedAddress = addressesByType[addressSwitchOption] ?? ethAddress ?? oasisAddress - - return ( - <> - - {displayedAddress && } - - ) - } diff --git a/src/app/components/AddressSwitch/images/eth.svg b/src/app/components/AddressSwitch/images/eth.svg deleted file mode 100644 index 061c3293d..000000000 --- a/src/app/components/AddressSwitch/images/eth.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/app/components/AddressSwitch/images/oasis.svg b/src/app/components/AddressSwitch/images/oasis.svg deleted file mode 100644 index ffd349d8e..000000000 --- a/src/app/components/AddressSwitch/images/oasis.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/app/components/AddressSwitch/index.tsx b/src/app/components/AddressSwitch/index.tsx deleted file mode 100644 index b74ccea97..000000000 --- a/src/app/components/AddressSwitch/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import Switch, { switchClasses } from '@mui/material/Switch' -import { styled } from '@mui/material/styles' -import oasisLogo from './images/oasis.svg' -import ethLogo from './images/eth.svg' -import { COLORS } from '../../../styles/theme/colors' -import Typography from '@mui/material/Typography' -import Box from '@mui/material/Box' -import { ChangeEvent, FC } from 'react' -import { useTranslation } from 'react-i18next' -import { useScreenSize } from '../../hooks/useScreensize' - -const StyledAddressSwitch = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: theme.spacing(3), -})) - -const StyledSwitch = styled(Switch)(() => ({ - zoom: 2, - margin: '-8px', // Reduce padding - [`.${switchClasses.switchBase} .${switchClasses.thumb}`]: { - backgroundColor: COLORS.brandMedium, - backgroundImage: `url("${oasisLogo}")`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: '15px', - }, - [`.${switchClasses.switchBase}.${switchClasses.checked} .${switchClasses.thumb}`]: { - backgroundColor: COLORS.lightSilver, - backgroundImage: `url("${ethLogo}")`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: '10px', - }, - [`&&&& .${switchClasses.track}`]: { - opacity: 1, - backgroundColor: COLORS.grayMedium2, - }, -})) - -export enum AddressSwitchOption { - Oasis = 'oasis', - ETH = 'eth', -} - -interface AddressSwitchProps { - selected?: AddressSwitchOption.Oasis | AddressSwitchOption.ETH - onSelectionChange: (selection: AddressSwitchOption.Oasis | AddressSwitchOption.ETH) => void -} - -export const AddressSwitch: FC = ({ - selected = AddressSwitchOption.ETH, - onSelectionChange, -}) => { - const { t } = useTranslation() - const { isMobile } = useScreenSize() - - const checked = selected === AddressSwitchOption.ETH - - const onChange = (event: ChangeEvent, checked: boolean) => { - onSelectionChange(checked ? AddressSwitchOption.ETH : AddressSwitchOption.Oasis) - } - - return ( - - - {t('common.oasis')} - - - - {t('common.eth')} - - - ) -} diff --git a/src/app/components/CopyToClipboard/index.tsx b/src/app/components/CopyToClipboard/index.tsx index c1a3ce6ad..563aa8913 100644 --- a/src/app/components/CopyToClipboard/index.tsx +++ b/src/app/components/CopyToClipboard/index.tsx @@ -31,6 +31,7 @@ export const CopyToClipboard: FC = ({ value, label }) => { const timeout = useRef(undefined) const ariaLabel = t('clipboard.label') const [isCopied, setIsCopied] = useState(false) + const handleCopyToClipboard = useCallback(() => { if (isCopied) { return diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx index 72ad14454..d0358437e 100644 --- a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx +++ b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx @@ -12,7 +12,6 @@ import TableBody from '@mui/material/TableBody' import { AccountLink } from '../Account/AccountLink' import { CopyToClipboard } from '../CopyToClipboard' import { SearchScope } from '../../../types/searchScope' -import { AddressSwitchOption } from '../AddressSwitch' import { getOasisAddress } from '../../utils/helpers' import { exhaustedTypeWarning } from '../../../types/errors' import { LongDataDisplay } from '../LongDataDisplay' @@ -24,7 +23,6 @@ import StreamIcon from '@mui/icons-material/Stream' import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment' import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat' import { MaybeEventErrorLine } from './EventError' -import { AccountLinkWithAddressSwitch } from '../Account/AccountLinkWithAddressSwitch' import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward' @@ -130,11 +128,10 @@ const EvmEventParamData: FC<{ const EvmLogRow: FC<{ scope: SearchScope param: EvmAbiParam - addressSwitchOption: AddressSwitchOption -}> = ({ scope, param, addressSwitchOption }) => { +}> = ({ scope, param }) => { const evmAddress = param.evm_type === 'address' ? (param.value as string) : undefined const oasisAddress = evmAddress ? getOasisAddress(evmAddress) : undefined - const address = addressSwitchOption === AddressSwitchOption.Oasis ? oasisAddress : evmAddress + const address = evmAddress || oasisAddress const getCopyToClipboardValue = () => { if (address) { @@ -161,8 +158,7 @@ const EvmLogRow: FC<{ const RuntimeEventDetailsInner: FC<{ scope: SearchScope event: RuntimeEvent - addressSwitchOption: AddressSwitchOption -}> = ({ scope, event, addressSwitchOption }) => { +}> = ({ scope, event }) => { const { isMobile } = useScreenSize() const { t } = useTranslation() const eventName = getRuntimeEventMethodLabel(t, event.type) @@ -231,12 +227,7 @@ const RuntimeEventDetailsInner: FC<{ {event.evm_log_params.map((param, index) => ( - + ))} @@ -256,12 +247,7 @@ const RuntimeEventDetailsInner: FC<{
{t('runtimeEvent.fields.owner')}
- +
{t('runtimeEvent.fields.amount')}
@@ -283,21 +269,11 @@ const RuntimeEventDetailsInner: FC<{
{t('common.from')}
- +
{t('common.to')}
- +
{t('runtimeEvent.fields.amount')}
@@ -317,21 +293,11 @@ const RuntimeEventDetailsInner: FC<{
{t('common.from')}
- +
{t('common.to')}
- +
{t('runtimeEvent.fields.amount')}
@@ -351,21 +317,11 @@ const RuntimeEventDetailsInner: FC<{
{t('common.from')}
- +
{t('common.to')}
- +
{t('runtimeEvent.fields.activeShares')}
@@ -384,21 +340,11 @@ const RuntimeEventDetailsInner: FC<{
{t('common.from')}
- +
{t('common.to')}
- +
{t('runtimeEvent.fields.amount')}
@@ -431,13 +377,12 @@ const RuntimeEventDetailsInner: FC<{ export const RuntimeEventDetails: FC<{ scope: SearchScope event: RuntimeEvent - addressSwitchOption: AddressSwitchOption showTxHash: boolean -}> = ({ scope, event, addressSwitchOption, showTxHash }) => { +}> = ({ scope, event, showTxHash }) => { const { t } = useTranslation() return (
- + {showTxHash && event.tx_hash && (

{t('event.fields.emittingTransaction')}:{' '} diff --git a/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx b/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx index 20a95c06a..3b952da7c 100644 --- a/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx +++ b/src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx @@ -2,7 +2,6 @@ import { FC } from 'react' import { SearchScope } from '../../../types/searchScope' import { RuntimeEvent } from '../../../oasis-nexus/api' import { TablePagination, TablePaginationProps } from '../Table/TablePagination' -import { AddressSwitchOption } from '../AddressSwitch' import { useTranslation } from 'react-i18next' import { CardEmptyState } from '../CardEmptyState' import { TextSkeleton } from '../Skeleton' @@ -15,10 +14,9 @@ export const RuntimeEventsDetailedList: FC<{ events: RuntimeEvent[] | undefined isLoading: boolean isError: boolean - addressSwitchOption: AddressSwitchOption pagination: false | TablePaginationProps showTxHash: boolean -}> = ({ scope, events, isLoading, isError, addressSwitchOption, pagination, showTxHash }) => { +}> = ({ scope, events, isLoading, isError, pagination, showTxHash }) => { const { t } = useTranslation() return ( <> @@ -28,12 +26,7 @@ export const RuntimeEventsDetailedList: FC<{ events.map((event, index) => (

{index > 0 && } - +
))} {pagination && ( diff --git a/src/app/components/Transactions/RuntimeTransactionEvents.tsx b/src/app/components/Transactions/RuntimeTransactionEvents.tsx index d5b3d94de..e9eee950d 100644 --- a/src/app/components/Transactions/RuntimeTransactionEvents.tsx +++ b/src/app/components/Transactions/RuntimeTransactionEvents.tsx @@ -3,13 +3,11 @@ import { Layer, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-n import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config' import { useSearchParamsPagination } from '../Table/useSearchParamsPagination' import { AppErrors } from '../../../types/errors' -import { AddressSwitchOption } from '../AddressSwitch' import { RuntimeEventsDetailedList } from '../RuntimeEvents/RuntimeEventsDetailedList' export const RuntimeTransactionEvents: FC<{ transaction: RuntimeTransaction - addressSwitchOption: AddressSwitchOption -}> = ({ transaction, addressSwitchOption }) => { +}> = ({ transaction }) => { const { network, layer } = transaction const pagination = useSearchParamsPagination('page') const offset = (pagination.selectedPage - 1) * limit @@ -33,7 +31,6 @@ export const RuntimeTransactionEvents: FC<{ events={events} isLoading={isLoading} isError={isError} - addressSwitchOption={addressSwitchOption} pagination={{ selectedPage: pagination.selectedPage, linkToPage: pagination.linkToPage, diff --git a/src/app/pages/RuntimeAccountDetailsPage/AccountEventsCard.tsx b/src/app/pages/RuntimeAccountDetailsPage/AccountEventsCard.tsx index 04afcbfa7..55d9ed07c 100644 --- a/src/app/pages/RuntimeAccountDetailsPage/AccountEventsCard.tsx +++ b/src/app/pages/RuntimeAccountDetailsPage/AccountEventsCard.tsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next' import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config' import { LinkableCardLayout } from '../../components/LinkableCardLayout' import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList' -import { AddressSwitchOption } from '../../components/AddressSwitch' import { useAccountEvents } from './hook' import { RuntimeAccountDetailsContext } from '.' @@ -23,7 +22,6 @@ export const AccountEventsCard: FC = ({ scope, add events={events} isLoading={isLoading} isError={isError} - addressSwitchOption={AddressSwitchOption.ETH} // TODO pagination={{ selectedPage: pagination.selectedPage, linkToPage: pagination.linkToPage, diff --git a/src/app/pages/RuntimeBlockDetailPage/RuntimeBlockEventsCard.tsx b/src/app/pages/RuntimeBlockDetailPage/RuntimeBlockEventsCard.tsx index febc5764c..133b74d20 100644 --- a/src/app/pages/RuntimeBlockDetailPage/RuntimeBlockEventsCard.tsx +++ b/src/app/pages/RuntimeBlockDetailPage/RuntimeBlockEventsCard.tsx @@ -6,7 +6,6 @@ import { LinkableCardLayout } from '../../components/LinkableCardLayout' import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination' import { AppErrors } from '../../../types/errors' import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList' -import { AddressSwitchOption } from '../../components/AddressSwitch' import { EmptyState } from '../../components/EmptyState' import { RuntimeBlockDetailsContext } from '.' @@ -44,7 +43,6 @@ const EventsList: FC = ({ scope, blockHeight }) => { events={events} isLoading={isLoading} isError={isError} - addressSwitchOption={AddressSwitchOption.ETH} pagination={{ selectedPage: pagination.selectedPage, linkToPage: pagination.linkToPage, diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx index e7fe55c32..785ed5884 100644 --- a/src/app/pages/RuntimeTransactionDetailPage/index.tsx +++ b/src/app/pages/RuntimeTransactionDetailPage/index.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react' +import { FC } from 'react' import { useParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { Layer, RuntimeTransaction, useGetRuntimeTransactionsTxHash } from '../../../oasis-nexus/api' @@ -20,7 +20,6 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam' import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink' import { AllTokenPrices, useAllTokenPrices } from '../../../coin-gecko/api' import { CurrentFiatValue } from '../../components/CurrentFiatValue' -import { AddressSwitch, AddressSwitchOption } from '../../components/AddressSwitch' import { TransactionEncryptionStatus } from '../../components/TransactionEncryptionStatus' import Typography from '@mui/material/Typography' import { LongDataDisplay } from '../../components/LongDataDisplay' @@ -45,10 +44,6 @@ export const RuntimeTransactionDetailPage: FC = () => { const hash = useParams().hash! - const [addressSwitchOption, setAddressSwitchOption] = useState< - AddressSwitchOption.Oasis | AddressSwitchOption.ETH - >(AddressSwitchOption.ETH) - const { isLoading, data } = useGetRuntimeTransactionsTxHash( scope.network, scope.layer, // This is OK since consensus has been handled separately @@ -67,29 +62,18 @@ export const RuntimeTransactionDetailPage: FC = () => { return ( - setAddressSwitchOption(addressSwitch)} - /> - } - mainTitle - > + {transaction && ( - + )} @@ -106,28 +90,12 @@ export const RuntimeTransactionDetailView: FC<{ showLayer?: boolean standalone?: boolean tokenPrices: AllTokenPrices - addressSwitchOption?: AddressSwitchOption -}> = ({ - isLoading, - transaction, - showLayer, - standalone = false, - tokenPrices, - addressSwitchOption = AddressSwitchOption.ETH, -}) => { +}> = ({ isLoading, transaction, showLayer, standalone = false, tokenPrices }) => { const { t } = useTranslation() const { isMobile } = useScreenSize() - const formattedTimestamp = useFormattedTimestampStringWithDistance(transaction?.timestamp) - - const isOasisAddressFormat = addressSwitchOption === AddressSwitchOption.Oasis - const hash = isOasisAddressFormat ? transaction?.hash : transaction?.eth_hash - const from = isOasisAddressFormat ? transaction?.sender_0 : transaction?.sender_0_eth - const to = isOasisAddressFormat ? transaction?.to : transaction?.to_eth - // @ts-expect-error Ignore index type error const amountSymbolPriceInfo = tokenPrices[transaction?.amount_symbol] - const gasPrice = getGasPrice({ fee: transaction?.charged_fee, gasUsed: transaction?.gas_used.toString() }) return ( @@ -154,19 +122,9 @@ export const RuntimeTransactionDetailView: FC<{
- - {hash && } +
)} @@ -200,19 +158,9 @@ export const RuntimeTransactionDetailView: FC<{
- {from && } +
)} @@ -223,16 +171,9 @@ export const RuntimeTransactionDetailView: FC<{
- {to && } +
)} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index ea15c9a49..17b6616a4 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -448,17 +448,8 @@ "warningMultipleTransactionsSameHash": "Please make sure you're looking at the right transaction. There is more than one transaction with this hash, which is extremely rare. We are showing the most recent successful one.", "rawData": "Raw Data", "tooltips": { - "txTooltipEth": "Ethereum hash for the transaction", - "senderTooltipEth": "Ethereum address for the sender", - "recipientTooltipEth": "Ethereum address for the recipient", - "txTooltipOasis": "Oasis hash for the transaction", - "senderTooltipOasis": "Oasis address for the sender", - "recipientTooltipOasis": "Oasis address for the recipient", - "txTooltipHashUnavailable": "Hash not available in selected address format", "txEncrypted": "This transaction is encrypted.", - "txNotEncrypted": "This transaction is not encrypted.", - "senderTooltipUnavailable": "Sender not available in selected address format", - "recipientTooltipUnavailable": "Recipient not available in selected address format" + "txNotEncrypted": "This transaction is not encrypted." } }, "event": {