Remove address prop from AccountLinkWithAddressSwitch

- refactor address variables in withAddressSwitch
oasisprotocol · Apr 5, 2024 · 8ff6e0c · 8ff6e0c
1 parent 41492be
commit 8ff6e0c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/src/app/components/Account/AccountLink.tsx b/src/app/components/Account/AccountLink.tsx
@@ -7,7 +7,7 @@ import { RouteUtils } from '../../utils/route-utils'
 import Typography from '@mui/material/Typography'
 import { SearchScope } from '../../../types/searchScope'
 
-interface AccountLinkProps {
+export interface AccountLinkProps {
   scope: SearchScope
   address: string
   alwaysTrim?: boolean

diff --git a/src/app/components/Account/withAddressSwitch.tsx b/src/app/components/Account/withAddressSwitch.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import { AddressSwitchOption } from '../AddressSwitch'
 import { CopyToClipboard } from '../CopyToClipboard'
 import Tooltip from '@mui/material/Tooltip'
@@ -16,15 +16,16 @@ interface WrappedComponentBaseProps {
 }
 
 export const withAddressSwitch =
-  <T extends WrappedComponentBaseProps>(
-    Component: FunctionComponent<T>,
-  ): FunctionComponent<T & WithAddressSwitchProps> =>
-  (props: T & WithAddressSwitchProps) => {
-    const { addressSwitchOption, address, ethAddress, oasisAddress, ...restProps } = props
+  <T extends WrappedComponentBaseProps>(Component: FC<T>) =>
+  (props: Omit<T, 'address'> & WithAddressSwitchProps) => {
+    const { addressSwitchOption, ethAddress, oasisAddress, ...restProps } = props
 
-    const isOasisAddressFormat = addressSwitchOption === AddressSwitchOption.Oasis
-    const addressMatchingType = isOasisAddressFormat ? oasisAddress : ethAddress
-    const defaultAddress = addressMatchingType ?? address
+    const addressesByType = {
+      [AddressSwitchOption.Oasis]: oasisAddress,
+      [AddressSwitchOption.ETH]: ethAddress,
+    }
+    const hasAddressOfExpectedType = !!addressesByType[addressSwitchOption]
+    const displayedAddress = addressesByType[addressSwitchOption] ?? ethAddress ?? oasisAddress
 
     return (
       <>
@@ -35,19 +36,19 @@ export const withAddressSwitch =
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
               <InfoIcon />
               {/* TODO: Replace with translations, text to be decided?, should be probably an input to this generic withAddressSwitch */}
-              {addressMatchingType
-                ? isOasisAddressFormat
+              {hasAddressOfExpectedType
+                ? oasisAddress
                   ? 'Oasis address'
                   : 'Ethereum address'
                 : 'Address not available in the expected type'}
             </Box>
           }
         >
           <Box>
-            <Component {...(restProps as T & WithAddressSwitchProps)} address={defaultAddress} />
+            <Component {...(restProps as unknown as T)} address={displayedAddress} />
           </Box>
         </Tooltip>
-        {defaultAddress && <CopyToClipboard value={defaultAddress} />}
+        {displayedAddress && <CopyToClipboard value={displayedAddress} />}
       </>
     )
   }
diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
@@ -205,7 +205,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('runtimeEvent.fields.owner')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.owner_eth ?? event.body.owner}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.owner_eth}
@@ -233,7 +232,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.from_eth ?? event.body.from}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.from_eth}
@@ -243,7 +241,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.to')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.to_eth ?? event.body.to}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.to_eth}
@@ -269,7 +266,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.from_eth ?? event.body.from}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.from_eth}
@@ -279,7 +275,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.to')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.to_eth ?? event.body.to}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.to_eth}
@@ -305,7 +300,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.from_eth ?? event.body.from}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.from_eth}
@@ -315,7 +309,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.to')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.to_eth ?? event.body.to}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.to_eth}
@@ -340,7 +333,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.from')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.from_eth ?? event.body.from}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.from_eth}
@@ -350,7 +342,6 @@ export const RuntimeEventDetails: FC<{
             <dt>{t('common.to')}</dt>
             <dd>
               <AccountLinkWithAddressSwitch
-                address={event.body.to_eth ?? event.body.to}
                 scope={scope}
                 addressSwitchOption={addressSwitchOption}
                 ethAddress={event.body.to_eth}