Add new images to harmony for Wallet UI (#11925)

Author: faridsalau

packages/harmony/src/assets/icons/AudiusLogoWhiteBg.png

@@ -7,6 +7,7 @@ import IconAudiusLogoHorizontalColorSVG from '../assets/icons/AudiusLogoHorizont
 import IconAudiusLogoHorizontalColorNewSVG from '../assets/icons/AudiusLogoHorizontalColorNew.svg'
 import IconAudiusLogoHorizontalNewSVG from '../assets/icons/AudiusLogoHorizontalNew.svg'
 import IconAudiusLogoVerticalSVG from '../assets/icons/AudiusLogoVertical.svg'
+import IconLogoWhiteBackgroundPng from '../assets/icons/AudiusLogoWhiteBg.png'
 import IconLogoCoinbaseSVG from '../assets/icons/Coinbase.svg'
 import IconLogoCoinbasePaySVG from '../assets/icons/CoinbasePay.svg'
 import IconDiscordSVG from '../assets/icons/Discord.svg'
@@ -57,6 +58,9 @@ export const IconLogoCircleSTR = IconLogoCircleSTRSVG as IconComponent
 export const IconLogoCircleUSD = IconLogoCircleUSDSVG as IconComponent
 export const IconLogoCircleUSDC = IconLogoCircleUSDCSVG as IconComponent
 export const IconLogoCircleUSDCPng = createImageIcon(LogoCircleUSDCPng)
+export const IconLogoWhiteBackground = createImageIcon(
+  IconLogoWhiteBackgroundPng
+)
 export const IconPhantom = IconPhantomSVG as IconComponent
 export const IconPhantomPlain = IconPhantomPlainSVG as IconComponent
 export const IconSolana = IconSolanaSVG as IconComponent

packages/harmony/src/assets/icons/TokenAUDIO.png

@@ -6,6 +6,7 @@ import IconCosignSVG from '../assets/icons/Cosign.svg'
 import IconMultiselectAddSVG from '../assets/icons/MultiselectAdd.svg'
 import IconMultiselectRemoveSVG from '../assets/icons/MultiselectRemove.svg'
 // Token Tier Badges
+import TokenAUDIOPng from '../assets/icons/TokenAUDIO.png'
 import TokenBronzePng from '../assets/icons/TokenBronze.png'
 import TokenGoldPng from '../assets/icons/TokenGold.png'
 import TokenNoTierPng from '../assets/icons/TokenNoTier.png'
@@ -148,3 +149,6 @@ export const IconPlaybackRate1_5x = IconPlaybackRate1_5xSVG as IconComponent
 export const IconPlaybackRate2x = IconPlaybackRate2xSVG as IconComponent
 export const IconPlaybackRate2_5x = IconPlaybackRate2_5xSVG as IconComponent
 export const IconPlaybackRate3x = IconPlaybackRate3xSVG as IconComponent
+
+// Token Icons
+export const IconTokenAUDIO = createImageIcon(TokenAUDIOPng)

packages/harmony/src/assets/icons/Verified.svg

@@ -0,0 +1,23 @@
+import IconTokenAUDIOPng from '@audius/harmony/src/assets/icons/TokenAUDIO.png'
+import type { ImageProps } from 'react-native'
+import { Image } from 'react-native'
+
+import { iconSizes, type IconSize } from '../foundations'
+
+type Props = Omit<ImageProps, 'source'> & {
+  size?: IconSize
+}
+
+export const IconTokenAUDIO = ({ size = 'm', style, ...props }: Props) => (
+  <Image
+    source={IconTokenAUDIOPng}
+    style={[
+      {
+        width: iconSizes[size],
+        height: iconSizes[size]
+      },
+      style
+    ]}
+    {...props}
+  />
+)

packages/harmony/src/icons/logos.ts

@@ -176,6 +176,7 @@ export { IconTokenPlatinum } from './components/IconTokenPlatinum'
 export { IconTokenSilver } from './components/IconTokenSilver'
 export { IconTokenGold } from './components/IconTokenGold'
 export { IconTokenNoTier } from './components/IconTokenNoTier'
+export { IconTokenAUDIO } from './components/IconTokenAUDIO'
 
 // File Types
 export { default as IconFile3GA } from '@audius/harmony/src/assets/icons/file3GA.svg'

packages/harmony/src/icons/specialIcons.ts

@@ -6,9 +6,10 @@ import { walletMessages } from '@audius/common/messages'
 import {
   Flex,
   IconCaretRight,
-  IconLogoCircle,
+  IconTokenAUDIO,
   Paper,
-  Text
+  Text,
+  cornerRadius
 } from '@audius/harmony-native'
 import { useNavigation } from 'app/hooks/useNavigation'
 
@@ -39,7 +40,7 @@ export const YourCoins = () => {
         alignItems='center'
       >
         <Flex direction='row' alignItems='center' gap='m'>
-          <IconLogoCircle size='4xl' />
+          <IconTokenAUDIO size='4xl' borderRadius={cornerRadius.circle} />
           <Flex direction='column' gap='xs'>
             <Flex direction='row' alignItems='center' gap='xs'>
               <Text variant='heading' size='l' color='default'>

packages/mobile/src/harmony-native/components/IconTokenAUDIO.tsx

@@ -3,8 +3,8 @@ import { accountSelectors } from '@audius/common/store'
 import { shortenSPLAddress } from '@audius/common/utils'
 import {
   Flex,
-  IconLogoCircle,
   IconLogoCircleSOL,
+  IconLogoWhiteBackground,
   Skeleton,
   Text
 } from '@audius/harmony'
@@ -50,7 +50,10 @@ export const PayoutWalletDisplay = () => {
 
   const isExternalWallet = !!payoutWallet
 
-  const IconComponent = isExternalWallet ? IconLogoCircleSOL : IconLogoCircle
+  const IconComponent = isExternalWallet
+    ? IconLogoCircleSOL
+    : IconLogoWhiteBackground
+
   const displayText = isExternalWallet
     ? shortenSPLAddress(displayAddress ?? '') // shorten the owner address or the stored address
     : messages.builtInWallet

packages/mobile/src/harmony-native/icons.ts

@@ -6,10 +6,11 @@ import { route } from '@audius/common/utils'
 import {
   Flex,
   IconCaretRight,
-  IconLogoCircle,
+  IconTokenAUDIO,
   Paper,
   Text,
-  useTheme
+  useTheme,
+  useMedia
 } from '@audius/harmony'
 import { useDispatch } from 'react-redux'
 import { push } from 'redux-first-history'
@@ -19,7 +20,8 @@ const { WALLET_AUDIO_PAGE } = route
 
 export const YourCoins = () => {
   const dispatch = useDispatch()
-  const { color, spacing } = useTheme()
+  const { color, spacing, cornerRadius } = useTheme()
+  const { isMobile, isExtraSmall } = useMedia()
 
   const {
     audioBalanceFormatted,
@@ -46,48 +48,26 @@ export const YourCoins = () => {
       <Flex
         alignItems='center'
         justifyContent='space-between'
-        p='xl'
+        p={isMobile ? spacing.l : spacing.xl}
         alignSelf='stretch'
         onClick={handleTokenClick}
         css={{
           cursor: 'pointer',
           '&:hover': {
             backgroundColor: color.background.surface2
-          },
-          '@media (max-width: 768px)': {
-            padding: spacing.l
           }
         }}
       >
-        <Flex
-          alignItems='center'
-          gap='l'
-          css={{
-            '@media (max-width: 480px)': {
-              gap: spacing.m
-            }
-          }}
-        >
-          <IconLogoCircle
+        <Flex alignItems='center' gap={isExtraSmall ? 'm' : 'l'}>
+          <IconTokenAUDIO
             width={DIMENSIONS}
             height={DIMENSIONS}
             css={{
-              '@media (max-width: 480px)': {
-                width: '48px',
-                height: '48px'
-              }
+              borderRadius: cornerRadius.circle
             }}
           />
           <Flex direction='column' gap='xs'>
-            <Flex
-              gap='xs'
-              css={{
-                '@media (max-width: 480px)': {
-                  flexDirection: 'column',
-                  gap: '0'
-                }
-              }}
-            >
+            <Flex gap='xs'>
               <Text variant='heading' size='l' color='default'>
                 {displayAmount}
               </Text>