Feat: Buy/Sell updates

src/Root.tsx

@@ -69,12 +69,9 @@ import SecurityGroup, {
   SecurityGroupParamList,
 } from './navigation/tabs/settings/security/SecurityGroup';
 import AuthGroup, {AuthGroupParamList} from './navigation/auth/AuthGroup';
-import BuyCryptoGroup, {
-  BuyCryptoGroupParamList,
-} from './navigation/services/buy-crypto/BuyCryptoGroup';
-import SellCryptoGroup, {
-  SellCryptoGroupParamList,
-} from './navigation/services/sell-crypto/SellCryptoGroup';
+import ExternalServicesGroup, {
+  ExternalServicesGroupParamList,
+} from './navigation/services/ExternalServicesGroup';
 import SwapCryptoGroup, {
   SwapCryptoGroupParamList,
 } from './navigation/services/swap-crypto/SwapCryptoGroup';
@@ -174,8 +171,7 @@ export type RootStackParamList = {
   BitpayIdGroupParamList &
   ScanGroupParamList &
   CoinbaseGroupParamList &
-  BuyCryptoGroupParamList &
-  SellCryptoGroupParamList &
+  ExternalServicesGroupParamList &
   SwapCryptoGroupParamList &
   CardActivationGroupParamList &
   OnboardingGroupParamList &
@@ -216,8 +212,7 @@ export type NavScreenParams = NavigatorScreenParams<
     ExternalServicesSettingsGroupParamList &
     AboutGroupParamList &
     CoinbaseGroupParamList &
-    BuyCryptoGroupParamList &
-    SellCryptoGroupParamList &
+    ExternalServicesGroupParamList &
     SwapCryptoGroupParamList &
     ScanGroupParamList &
     WalletConnectGroupParamList &
@@ -1011,8 +1006,7 @@ export default () => {
             })}
             {AboutGroup({About: Root, theme})}
             {CoinbaseGroup({Coinbase: Root, theme})}
-            {BuyCryptoGroup({BuyCrypto: Root, theme})}
-            {SellCryptoGroup({SellCrypto: Root, theme})}
+            {ExternalServicesGroup({ExternalServices: Root, theme})}
             {SwapCryptoGroup({SwapCrypto: Root, theme})}
             {WalletConnectGroup({WalletConnect: Root, theme})}
             {ZenLedgerGroup({ZenLedger: Root, theme})}

src/components/amount/Amount.tsx

@@ -27,6 +27,7 @@ import {getBuyCryptoFiatLimits} from '../../store/buy-crypto/buy-crypto.effects'
 import KeyEvent from 'react-native-keyevent';
 import ArchaxFooter from '../archax/archax-footer';
 import {View} from 'react-native';
+import {AltCurrenciesRowProps} from '../list/AltCurrenciesRow';
 
 const AmountContainer = styled.SafeAreaView`
   flex: 1;
@@ -118,12 +119,14 @@ export interface LimitsOpts {
   };
 }
 
+export type AmountContext = 'buyCrypto' | 'sellCrypto' | 'swapCrypto';
+
 export interface AmountProps {
   cryptoCurrencyAbbreviation?: string;
   fiatCurrencyAbbreviation?: string;
   tokenAddress?: string;
   chain?: string;
-  context?: string;
+  context?: AmountContext;
   reduceTopGap?: boolean;
   buttonState?: ButtonState;
   limitsOpts?: LimitsOpts;
@@ -154,13 +157,15 @@ const Amount: React.FC<AmountProps> = ({
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
   const logger = useLogger();
-  const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
+  const defaultAltCurrency: AltCurrenciesRowProps = useAppSelector(
+    ({APP}) => APP.defaultAltCurrency,
+  );
   const allRates = useAppSelector(({RATE}) => RATE.rates);
   const curValRef = useRef('');
   const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
   const _isSmallScreen = showArchaxBanner ? true : isNarrowHeight;
 
-  const fiatCurrency = useMemo(() => {
+  const fiatCurrency = useMemo<string>(() => {
     if (fiatCurrencyAbbreviation) {
       return fiatCurrencyAbbreviation;
     }
@@ -351,7 +356,7 @@ const Amount: React.FC<AmountProps> = ({
     limitsOpts?.maxWalletAmount,
   ]);
 
-  const getWarnMsg = useMemo<JSX.Element>(() => {
+  const getWarnMsg = useMemo<React.ReactNode>(() => {
     let msg: string | undefined;
     if (+amount > 0) {
       if (limits.min && +amount < limits.min) {

src/components/amount/AmountModal.tsx

@@ -52,15 +52,17 @@ type AmountModalProps = AmountProps & {
   onSendMaxPressed?: () => any;
 };
 
-const AmountModalContainerHOC = gestureHandlerRootHOC(props => {
-  return (
-    <StyledAmountModalContainer platform={Platform.OS}>
-      {props.children}
-    </StyledAmountModalContainer>
-  );
-});
+const AmountModalContainerHOC = gestureHandlerRootHOC(
+  (props: React.PropsWithChildren) => {
+    return (
+      <StyledAmountModalContainer platform={Platform.OS}>
+        {props.children}
+      </StyledAmountModalContainer>
+    );
+  },
+);
 
-const AmountModal: React.VFC<AmountModalProps> = props => {
+const AmountModal: React.FC<AmountModalProps> = props => {
   const {
     onClose,
     onSendMaxPressed,

src/components/icons/external-services/ramp/ramp-logo.tsx

@@ -10,7 +10,7 @@ const RampLogoSvg: React.FC<{
   height: number;
 }> = ({isDark, iconOnly, width, height}) => {
   return iconOnly ? (
-    <Svg width={width} height={height} viewBox={'0 0 708.66 708.66'}>
+    <Svg width={width} height={height} viewBox={'50 50 608.66 608.66'}>
       <G>
         <Path
           id="ramp-path-icon1"

src/components/icons/external-services/transak/transak-logo.tsx

@@ -22,7 +22,7 @@ const TransakLogoSvg: React.FC<{
     <Svg
       width={width}
       height={height}
-      viewBox={iconOnly ? '180 325 570 450' : '269 325 1347 430'}>
+      viewBox={iconOnly ? '240 300 500 450' : '269 325 1347 430'}>
       <Defs>
         <LinearGradient
           id="linear-gradient"