Merge pull request #1184 from alephium/mw-ui-230125

Tweaks and fixes

apps/mobile-wallet/locales/en-US/translation.json

@@ -447,5 +447,7 @@
   "Select address": "Select address",
   "Creating contacts helps you avoid making mistakes and manage your funds with ease.": "Creating contacts helps you avoid making mistakes and manage your funds with ease.",
   "nfts_in_addresses_one": "{{ count }} NFT",
-  "nfts_in_addresses_other": "{{ count }} NFTs"
+  "nfts_in_addresses_other": "{{ count }} NFTs",
+  "Did you know?": "Did you know?",
+  "Splitting your funds into multiple addresses can help you stay organized and increase privacy.": "Splitting your funds into multiple addresses can help you stay organized and increase privacy."
 }

apps/mobile-wallet/src/components/AddressesTokensList.tsx

@@ -36,15 +36,15 @@ const AddressesTokensList = () => {
   if (addressesBalancesStatus === 'uninitialized')
     return (
       <EmptyPlaceholder>
-        <AppText size={28}>⏳</AppText>
+        <AppText size={32}>⏳</AppText>
         <AppText>{t('Loading your balances...')}</AppText>
       </EmptyPlaceholder>
     )
 
   if (knownFungibleTokens.length === 0 && !hasUnknownTokens && !hasHiddenTokens)
     return (
       <EmptyPlaceholder>
-        <AppText size={28}>👀</AppText>
+        <AppText size={32}>👀</AppText>
         <AppText>{t('No assets here, yet.')}</AppText>
       </EmptyPlaceholder>
     )

apps/mobile-wallet/src/components/EmptyPlaceholder.tsx

@@ -3,16 +3,18 @@ import styled from 'styled-components/native'
 
 import { VERTICAL_GAP } from '~/style/globalStyle'
 
-const EmptyPlaceholder = ({ children, ...props }: ViewProps) => (
+type EmptyPlaceholderProps = ViewProps & { noMargin?: boolean }
+
+const EmptyPlaceholder = ({ children, ...props }: EmptyPlaceholderProps) => (
   <EmptyPlaceholderStyled {...props}>
     <Content>{children}</Content>
   </EmptyPlaceholderStyled>
 )
 
-const EmptyPlaceholderStyled = styled.View`
+const EmptyPlaceholderStyled = styled.View<EmptyPlaceholderProps>`
   flex: 1;
   justify-content: center;
-  margin: ${VERTICAL_GAP / 2}px 0;
+  margin: ${({ noMargin }) => (noMargin ? 0 : `${VERTICAL_GAP / 2}px 0`)};
   border-radius: 22px;
   border: 1px solid ${({ theme }) => theme.border.secondary};
 `

apps/mobile-wallet/src/components/NFTsGrid.tsx

@@ -59,7 +59,7 @@ const NFTsGrid = forwardRef(
             </EmptyPlaceholder>
           ) : (
             <EmptyPlaceholder>
-              <AppText size={28}>👻</AppText>
+              <AppText size={32}>👻</AppText>
               <AppText color={theme.font.secondary}>{t('No NFTs yet')}</AppText>
             </EmptyPlaceholder>
           )

apps/mobile-wallet/src/components/TokenListItem.tsx

@@ -49,7 +49,7 @@ const TokenListItem = ({ asset, addressHash, parentModalId, ...props }: TokenLis
           </UnverifiedBadge>
         )
       }
-      icon={<AssetLogo assetId={asset.id} size={38} />}
+      icon={<AssetLogo assetId={asset.id} size={32} />}
       rightSideContent={
         <Amounts>
           <AmountStyled

apps/mobile-wallet/src/components/buttons/QuickActionButton.tsx

@@ -1,14 +1,9 @@
 import styled from 'styled-components/native'
 
 import Button, { ButtonProps } from '~/components/buttons/Button'
+import { BORDER_RADIUS_BIG } from '~/style/globalStyle'
 
-interface QuickActionButtonProps extends ButtonProps {
-  isLast?: boolean
-}
-
-export default styled(Button)<QuickActionButtonProps>`
-  background-color: transparent;
-  border-bottom-width: ${({ isLast }) => (!isLast ? '1px' : 0)};
-  border-color: ${({ theme }) => theme.border.secondary};
-  border-radius: 0;
+export default styled(Button)<ButtonProps>`
+  border-radius: ${BORDER_RADIUS_BIG}px;
+  background-color: ${({ theme }) => theme.button.secondary};
 `

apps/mobile-wallet/src/components/layout/TransactionsFlashList.tsx

@@ -100,7 +100,7 @@ const TransactionsFlashList = forwardRef(
         ListEmptyComponent={
           !isLoading ? (
             <EmptyPlaceholder>
-              <AppText size={28}>🤷‍♂️</AppText>
+              <AppText size={32}>🤷‍♂️</AppText>
               <AppText color="secondary">{t('No transactions yet')}</AppText>
             </EmptyPlaceholder>
           ) : null

apps/mobile-wallet/src/features/addressesManagement/AddressDetailsModal.tsx

@@ -70,15 +70,15 @@ const AddressesTokensListEmpty = ({ addressHash }: { addressHash: AddressHash })
   if (addressesBalancesStatus === 'uninitialized')
     return (
       <EmptyPlaceholder>
-        <AppText size={28}>⏳</AppText>
+        <AppText size={32}>⏳</AppText>
         <AppText>{t('Loading your balances...')}</AppText>
       </EmptyPlaceholder>
     )
 
   if (knownFungibleTokens.length === 0 && !hasUnknownTokens && !hasHiddenTokens)
     return (
       <EmptyPlaceholder>
-        <AppText size={28}>👀</AppText>
+        <AppText size={32}>👀</AppText>
         <AppText>{t('No assets here, yet.')}</AppText>
       </EmptyPlaceholder>
     )

apps/mobile-wallet/src/features/addressesManagement/AddressQuickActionsModal.tsx

@@ -6,18 +6,21 @@ import styled from 'styled-components/native'
 
 import { sendAnalytics } from '~/analytics'
 import AddressBadge from '~/components/AddressBadge'
+import AppText from '~/components/AppText'
 import QuickActionButton from '~/components/buttons/QuickActionButton'
+import EmptyPlaceholder from '~/components/EmptyPlaceholder'
 import { ScreenSection } from '~/components/layout/Screen'
 import useCanDeleteAddress from '~/features/addressesManagement/useCanDeleteAddress'
 import useForgetAddress from '~/features/addressesManagement/useForgetAddress'
 import BottomModal from '~/features/modals/BottomModal'
-import { closeModal } from '~/features/modals/modalActions'
+import { closeModal, openModal } from '~/features/modals/modalActions'
 import withModal from '~/features/modals/withModal'
 import usePersistAddressSettings from '~/hooks/layout/usePersistAddressSettings'
 import { useAppDispatch, useAppSelector } from '~/hooks/redux'
 import { selectAddressByHash } from '~/store/addresses/addressesSelectors'
 import { addressSettingsSaved } from '~/store/addressesSlice'
 import { VERTICAL_GAP } from '~/style/globalStyle'
+import { copyAddressToClipboard } from '~/utils/addresses'
 import { showToast, ToastDuration } from '~/utils/layout'
 
 interface AddressQuickActionsModalProps {
@@ -33,8 +36,10 @@ const AddressQuickActionsModal = withModal<AddressQuickActionsModalProps>(({ id,
     <BottomModal modalId={id} noPadding title={<AddressBadge addressHash={addressHash} fontSize={16} />}>
       <ScreenSection>
         <ActionButtons>
-          <DeleteAddressButton addressHash={addressHash} onPress={handleClose} />
-          <SetDefaultAddressButton addressHash={addressHash} onPress={handleClose} />
+          <SetDefaultAddressButton addressHash={addressHash} />
+          <CopyAddressHashButton addressHash={addressHash} />
+          <AddressSettingsButton addressHash={addressHash} onActionCompleted={handleClose} />
+          <DeleteAddressButton addressHash={addressHash} onActionCompleted={handleClose} />
         </ActionButtons>
       </ScreenSection>
     </BottomModal>
@@ -44,26 +49,50 @@ const AddressQuickActionsModal = withModal<AddressQuickActionsModalProps>(({ id,
 export default AddressQuickActionsModal
 
 interface ActionButtonProps extends AddressQuickActionsModalProps {
-  onPress: () => void
+  onActionCompleted: () => void
 }
 
-const DeleteAddressButton = ({ addressHash, onPress }: ActionButtonProps) => {
+const DeleteAddressButton = ({ addressHash, onActionCompleted }: ActionButtonProps) => {
   const address = useAppSelector((s) => selectAddressByHash(s, addressHash))
   const { t } = useTranslation()
-  const forgetAddress = useForgetAddress({ addressHash, origin: 'quickActions', onConfirm: onPress })
+  const forgetAddress = useForgetAddress({ addressHash, origin: 'quickActions', onConfirm: onActionCompleted })
   const canDeleteAddress = useCanDeleteAddress(addressHash)
 
   if (!address) return
 
   const handlePress = () => {
-    if (!canDeleteAddress) Alert.alert(t('You cannot forget your default address. Set another one as default first.'))
+    if (!canDeleteAddress)
+      Alert.alert(
+        t('forgetAddress_one'),
+        t('You cannot forget your default address. Set another one as default first.')
+      )
     else forgetAddress()
   }
 
   return <QuickActionButton title={t('Forget')} onPress={handlePress} iconProps={{ name: 'trash-2' }} variant="alert" />
 }
 
-const SetDefaultAddressButton = ({ addressHash }: ActionButtonProps) => {
+const AddressSettingsButton = ({ addressHash, onActionCompleted }: ActionButtonProps) => {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+
+  const handlePress = () => {
+    dispatch(openModal({ name: 'AddressSettingsModal', props: { addressHash } }))
+    onActionCompleted()
+  }
+
+  return <QuickActionButton title={t('Address settings')} onPress={handlePress} iconProps={{ name: 'settings' }} />
+}
+
+const CopyAddressHashButton = ({ addressHash }: Omit<ActionButtonProps, 'onActionCompleted'>) => {
+  const { t } = useTranslation()
+
+  const handlePress = () => copyAddressToClipboard(addressHash)
+
+  return <QuickActionButton title={t('Copy address')} onPress={handlePress} iconProps={{ name: 'copy' }} />
+}
+
+const SetDefaultAddressButton = ({ addressHash }: Omit<ActionButtonProps, 'onActionCompleted'>) => {
   const address = useAppSelector((s) => selectAddressByHash(s, addressHash))
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
@@ -96,15 +125,18 @@ const SetDefaultAddressButton = ({ addressHash }: ActionButtonProps) => {
     }
   }
 
-  return (
+  return isDefaultAddress ? (
+    <EmptyPlaceholder noMargin>
+      <AppText>{t('Default address')}</AppText>
+    </EmptyPlaceholder>
+  ) : (
     <QuickActionButton
-      title={t(isDefaultAddress ? 'Default address' : 'Set as default')}
+      title={t('Set as default')}
       onPress={handleDefaultPress}
       iconProps={{ name: 'star' }}
       loading={defaultAddressIsChanging}
       color={address?.settings.isDefault ? address.settings.color : undefined}
       disabled={isDefaultAddress}
-      isLast
     />
   )
 }

apps/mobile-wallet/src/features/assetsDisplay/hideAssets/HiddenAssetsScreen.tsx

@@ -47,7 +47,7 @@ const HiddenAssetsScreen = ({ navigation, ...props }: HiddenAssetsScreenProps) =
       <ScreenSection fill>
         {hiddenFungibleTokens.length === 0 ? (
           <EmptyPlaceholder style={{ flexGrow: 0 }}>
-            <AppText size={28}>✨</AppText>
+            <AppText size={32}>✨</AppText>
             <AppText>{t('No assets are hidden')}</AppText>
           </EmptyPlaceholder>
         ) : (
@@ -90,7 +90,7 @@ const FungibleTokensListItem = ({ tokenId, isLast }: FungibleTokensListItemProps
 
   return (
     <ListItem
-      icon={<AssetLogo assetId={token.id} size={38} />}
+      icon={<AssetLogo assetId={token.id} size={32} />}
       title={token.name}
       rightSideContent={<Button iconProps={{ name: 'x' }} squared compact onPress={handleAssetUnhide} />}
       isLast={isLast}

apps/mobile-wallet/src/features/assetsDisplay/hideAssets/SelectAssetToHideModal.tsx

@@ -29,7 +29,7 @@ const SelectAssetToHideModal = withModal(({ id }) => {
             <ListItem
               key={id}
               title={name}
-              icon={<AssetLogo assetId={id} size={38} />}
+              icon={<AssetLogo assetId={id} size={32} />}
               onPress={() => handleAssetSelection(id)}
             />
           )}

apps/mobile-wallet/src/features/assetsDisplay/tokenDisplay/TokenQuickActionsModal.tsx

@@ -59,7 +59,6 @@ const TokenQuickActionsModal = withModal<TokenQuickActionsModalProps>(({ id, tok
         title={t('Show details')}
         onPress={openTokenDetailsModal}
         iconProps={{ name: 'more-horizontal' }}
-        isLast
       />
     </BottomModal>
   )

apps/mobile-wallet/src/features/ecosystem/DAppsList.tsx

@@ -29,7 +29,7 @@ const DAppsList = ({ selectedTag }: DAppsListProps) => {
     return (
       <DAppsListStyled>
         <EmptyPlaceholder>
-          <AppText size={28}>⏳</AppText>
+          <AppText size={32}>⏳</AppText>
           <AppText>{t('Loading dApps...')}</AppText>
         </EmptyPlaceholder>
       </DAppsListStyled>
@@ -39,7 +39,7 @@ const DAppsList = ({ selectedTag }: DAppsListProps) => {
     return (
       <DAppsListStyled>
         <EmptyPlaceholder>
-          <AppText size={28}>🥺</AppText>
+          <AppText size={32}>🥺</AppText>
           <AppText>{t('Could not load dApps')}</AppText>
           <AppText>{getHumanReadableError(error, '')}</AppText>
         </EmptyPlaceholder>
@@ -50,7 +50,7 @@ const DAppsList = ({ selectedTag }: DAppsListProps) => {
     return (
       <DAppsListStyled>
         <EmptyPlaceholder>
-          <AppText size={28}>⭐️</AppText>
+          <AppText size={32}>⭐️</AppText>
           <AppText>{t('No dApps added to your favorites yet')}</AppText>
         </EmptyPlaceholder>
       </DAppsListStyled>

apps/mobile-wallet/src/features/ecosystem/EcosystemScreen.tsx

@@ -28,7 +28,7 @@ const EcosystemScreen = () => {
       {showComingSoon ? (
         <ScreenSection>
           <EmptyPlaceholder>
-            <AppText size={28}>📣👀</AppText>
+            <AppText size={32}>📣👀</AppText>
             <AppText>{t('Coming soon!')}</AppText>
           </EmptyPlaceholder>
         </ScreenSection>

apps/mobile-wallet/src/features/send/screens/AssetsScreen/AssetRow.tsx

@@ -107,7 +107,7 @@ const AssetRow = ({ asset, ...props }: AssetRowProps) => {
           />
         ) : undefined
       }
-      icon={assetIsNft ? <NFTThumbnail nftId={asset.id} size={38} /> : <AssetLogo assetId={asset.id} size={38} />}
+      icon={assetIsNft ? <NFTThumbnail nftId={asset.id} size={32} /> : <AssetLogo assetId={asset.id} size={32} />}
     />
   )
 }

apps/mobile-wallet/src/modals/AddressPickerQuickActionsModal.tsx

@@ -45,7 +45,6 @@ const AddressPickerQuickActionsModal = withModal<AddressPickerQuickActionsModalP
               title={t('Select address')}
               onPress={handleSelectAddress}
               iconProps={{ name: 'check' }}
-              isLast
             />
           </ActionButtons>
         </ScreenSection>

apps/mobile-wallet/src/navigation/InWalletNavigation.tsx

@@ -40,7 +40,7 @@ const InWalletTabsNavigation = () => {
           options={{
             title: t('Overview'),
             tabBarIcon: ({ color, size, focused }) => (
-              <Ionicons name={focused ? 'stats-chart' : 'stats-chart-outline'} color={color} size={size} />
+              <Ionicons name={focused ? 'home' : 'home-outline'} color={color} size={size} />
             )
           }}
         />
@@ -60,7 +60,7 @@ const InWalletTabsNavigation = () => {
           options={{
             title: t('Activity'),
             tabBarIcon: ({ color, size, focused }) => (
-              <Ionicons name={focused ? 'list' : 'list-outline'} color={color} size={size} />
+              <Ionicons name={focused ? 'time' : 'time-outline'} color={color} size={size} />
             )
           }}
         />

apps/mobile-wallet/src/screens/Addresses/AddressesScreen.tsx

@@ -1,7 +1,10 @@
 import { AddressHash } from '@alephium/shared'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components/native'
 
 import AddressBox from '~/components/AddressBox'
+import AppText from '~/components/AppText'
+import EmptyPlaceholder from '~/components/EmptyPlaceholder'
 import BottomBarScrollScreen from '~/components/layout/BottomBarScrollScreen'
 import { ScreenSection } from '~/components/layout/Screen'
 import { TabBarPageScreenProps } from '~/components/layout/TabBarPager'
@@ -13,6 +16,7 @@ import { VERTICAL_GAP } from '~/style/globalStyle'
 
 const AddressesScreen = ({ contentStyle, ...props }: TabBarPageScreenProps) => {
   const dispatch = useAppDispatch()
+  const { t } = useTranslation()
 
   const addresses = useAppSelector(selectAllAddresses)
 
@@ -37,6 +41,16 @@ const AddressesScreen = ({ contentStyle, ...props }: TabBarPageScreenProps) => {
             origin="addressesScreen"
           />
         ))}
+        {addresses.length === 1 && (
+          <EmptyPlaceholder>
+            <AppText style={{ textAlign: 'center' }} color="secondary" semiBold>
+              {t('Did you know?')}
+            </AppText>
+            <AppText style={{ textAlign: 'center' }} color="tertiary">
+              {t('Splitting your funds into multiple addresses can help you stay organized and increase privacy.')}
+            </AppText>
+          </EmptyPlaceholder>
+        )}
       </Content>
     </BottomBarScrollScreen>
   )

apps/mobile-wallet/src/screens/Addresses/Contact/ContactScreen.tsx

@@ -89,7 +89,7 @@ const ContactScreen = ({ navigation, route: { params } }: ContactScreenProps) =>
                   {contact.name[0].toUpperCase()}
                 </AppText>
               </ContactIcon>
-              <ContactName semiBold size={28}>
+              <ContactName semiBold size={32}>
                 {contact.name}
               </ContactName>
               <ContactAddress truncate medium size={16} color="secondary" ellipsizeMode="middle">