DEX - update UI (#939)

* feat: add viewBox to token svg

* feat: add label option to IconButton

* test: update snapshot

* feat: update dex screen UI

Fixes #928

* translation: add entries

* translation: update entries

* feat: update your pool pair symbol title

* test: update string used in e2e

* test: update testID

* feat: overflow action button

* test: update testID

* feat: revert accidental icon label's flex-wrap

* feat(ui): fine tune APR vertical alignment

* revert: keep poolpair token naming consistent

With defiscan

* revert: testID of token naming

* test: narrow string check to just amount

* test: remove token suffix

mobile-app/app/components/IconButton.tsx

@@ -2,14 +2,15 @@ import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'
 import * as React from 'react'
 import { TouchableOpacityProps } from 'react-native'
 import { tailwind } from '@tailwind'
-import { ThemedIcon, ThemedTouchableOpacity } from './themed'
+import { ThemedIcon, ThemedText, ThemedTouchableOpacity } from './themed'
 
 type IconType = 'MaterialCommunityIcons' | 'MaterialIcons'
 
 interface IconButtonProps extends TouchableOpacityProps {
   iconName: React.ComponentProps<typeof MaterialIcons>['name'] | React.ComponentProps<typeof MaterialCommunityIcons>['name']
   iconType: IconType
   iconSize: number
+  iconLabel?: string
 }
 
 export function IconButton (props: IconButtonProps): JSX.Element {
@@ -18,7 +19,7 @@ export function IconButton (props: IconButtonProps): JSX.Element {
       dark={tailwind('border border-gray-400 rounded bg-gray-900')}
       light={tailwind('border border-gray-300 rounded bg-white')}
       onPress={props.onPress}
-      style={[tailwind('p-1'), props.style]}
+      style={[tailwind('p-1 flex-row items-center'), props.style]}
       testID={props.testID}
     >
       <ThemedIcon
@@ -28,6 +29,14 @@ export function IconButton (props: IconButtonProps): JSX.Element {
         name={props.iconName}
         size={props.iconSize}
       />
+      {props.iconLabel !== undefined &&
+        <ThemedText
+          light={tailwind('text-primary-500')}
+          dark={tailwind('text-darkprimary-500')}
+          style={tailwind('px-1 text-sm font-medium')}
+        >
+          {props.iconLabel}
+        </ThemedText>}
     </ThemedTouchableOpacity>
   )
 }

mobile-app/app/components/icons/assets/BTC.tsx

@@ -6,6 +6,7 @@ export function BTC (props: SvgProps): JSX.Element {
     <Svg
       height={32}
       width={32}
+      viewBox='0 0 32 32'
       {...props}
     >
       <Path

mobile-app/app/components/icons/assets/DFI.tsx

@@ -6,6 +6,7 @@ export function DFI (props: SvgProps): JSX.Element {
     <Svg
       height={32}
       width={32}
+      viewBox='0 0 32 32'
       {...props}
     >
       <Circle