Match defaultAltCurrency with Coinbase exchange rates

bitpay · Jul 12, 2022 · b9ba400 · b9ba400
1 parent 59d7954
commit b9ba400
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 38 deletions.
diff --git a/src/navigation/coinbase/components/CoinbaseBalanceCard.tsx b/src/navigation/coinbase/components/CoinbaseBalanceCard.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import HomeCard from '../../../components/home-card/HomeCard';
-import {formatFiatAmount} from '../../../utils/helper-methods';
+import {
+  formatFiatAmount,
+  formatFiatAmountObj,
+} from '../../../utils/helper-methods';
 import {useNavigation} from '@react-navigation/native';
 import CoinbaseSvg from '../../../../assets/img/logos/coinbase.svg';
 import styled, {useTheme} from 'styled-components/native';
@@ -9,7 +12,13 @@ import {useAppSelector} from '../../../utils/hooks';
 import {HomeCarouselLayoutType} from '../../../store/app/app.models';
 import {Balance, KeyName} from '../../wallet/components/KeyDropdownOption';
 import {BoxShadow} from '../../tabs/home/components/Styled';
-import {LightBlack, White} from '../../../styles/colors';
+import {BaseText} from '../../../components/styled/Text';
+import {
+  LightBlack,
+  White,
+  NeutralSlate,
+  SlateDark,
+} from '../../../styles/colors';
 import {
   ActiveOpacity,
   Column,
@@ -46,6 +55,16 @@ const HeaderImgList = styled.View`
   justify-content: center;
 `;
 
+const BalanceCode = styled(BaseText)`
+  font-size: 12px;
+  color: ${({theme: {dark}}) => (dark ? NeutralSlate : SlateDark)};
+  font-weight: 500;
+`;
+
+const BalanceCodeContainer = styled.View`
+  padding-left: 2px;
+`;
+
 const HeaderComponent = (
   <HeaderImg>
     <CoinbaseSvg width="22" height="22" />
@@ -68,14 +87,16 @@ const CoinbaseBalanceCard: React.FC<CoinbaseCardComponentProps> = ({
   };
   const balance =
     useAppSelector(({COINBASE}) => COINBASE.balance[COINBASE_ENV]) || 0.0;
-  const user = useAppSelector(({COINBASE}) => COINBASE.user[COINBASE_ENV]);
+  const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
+
+  const {amount, code} = formatFiatAmountObj(
+    balance,
+    defaultAltCurrency.isoCode,
+  );
 
   const body = {
     title: 'Coinbase',
-    value: formatFiatAmount(
-      balance,
-      user?.data?.native_currency?.toUpperCase(),
-    ),
+    value: formatFiatAmount(balance, defaultAltCurrency.isoCode),
   };
 
   if (layout === 'listView') {
@@ -90,7 +111,14 @@ const CoinbaseBalanceCard: React.FC<CoinbaseCardComponentProps> = ({
             <KeyName>Coinbase</KeyName>
           </Column>
           <Column style={{justifyContent: 'center', alignItems: 'flex-end'}}>
-            <Balance>{body.value}</Balance>
+            <Balance>
+              {amount}
+              {code ? (
+                <BalanceCodeContainer>
+                  <BalanceCode>{code}</BalanceCode>
+                </BalanceCodeContainer>
+              ) : null}
+            </Balance>
           </Column>
         </Row>
       </ListCard>

diff --git a/src/navigation/coinbase/components/CoinbaseDashboard.tsx b/src/navigation/coinbase/components/CoinbaseDashboard.tsx
@@ -77,12 +77,12 @@ const CoinbaseDashboard = () => {
     ({COINBASE}) => COINBASE.isApiLoading,
   );
   const exchangeRates = useAppSelector(({COINBASE}) => COINBASE.exchangeRates);
-  const user = useAppSelector(({COINBASE}) => COINBASE.user[COINBASE_ENV]);
   const accounts = useAppSelector(
     ({COINBASE}) => COINBASE.accounts[COINBASE_ENV],
   );
   const balance =
     useAppSelector(({COINBASE}) => COINBASE.balance[COINBASE_ENV]) || 0.0;
+  const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -120,7 +120,11 @@ const CoinbaseDashboard = () => {
 
   const renderItem = useCallback(
     ({item}: any) => {
-      const walletItem = coinbaseAccountToWalletRow(item, exchangeRates);
+      const walletItem = coinbaseAccountToWalletRow(
+        item,
+        exchangeRates,
+        defaultAltCurrency.isoCode,
+      );
       return (
         <WalletRow
           id={walletItem.id}
@@ -136,7 +140,7 @@ const CoinbaseDashboard = () => {
         />
       );
     },
-    [dispatch, navigation, exchangeRates],
+    [dispatch, navigation, exchangeRates, defaultAltCurrency.isoCode],
   );
 
   const showError = async (error: CoinbaseErrorsProps) => {
@@ -178,10 +182,7 @@ const CoinbaseDashboard = () => {
       <BalanceContainer>
         {balance ? (
           <Balance scale={shouldScale(balance)}>
-            {formatFiatAmount(
-              balance,
-              user?.data?.native_currency?.toUpperCase(),
-            )}
+            {formatFiatAmount(balance, defaultAltCurrency.isoCode)}
           </Balance>
         ) : (
           <SkeletonPlaceholder

diff --git a/src/navigation/coinbase/screens/CoinbaseAccount.tsx b/src/navigation/coinbase/screens/CoinbaseAccount.tsx
@@ -153,8 +153,8 @@ const CoinbaseAccount = ({
 
   const [selectedWallet, setSelectedWallet] = useState<Wallet>();
 
+  const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
   const exchangeRates = useAppSelector(({COINBASE}) => COINBASE.exchangeRates);
-  const user = useAppSelector(({COINBASE}) => COINBASE.user[COINBASE_ENV]);
   const transactions = useAppSelector(
     ({COINBASE}) => COINBASE.transactions[COINBASE_ENV],
   );
@@ -279,7 +279,6 @@ const CoinbaseAccount = ({
           exchangeRates,
         );
         setFiatAmount(fa);
-        console.log(fa);
         setCryptoAmount(account.balance.amount.toString());
       } else {
         setFiatAmount(0);
@@ -447,10 +446,7 @@ const CoinbaseAccount = ({
         <Row>
           <H5>
             {fiatAmount
-              ? formatFiatAmount(
-                  fiatAmount,
-                  user?.data?.native_currency?.toUpperCase(),
-                )
+              ? formatFiatAmount(fiatAmount, defaultAltCurrency.isoCode)
               : '0'}
           </H5>
           {account?.primary && <Type>Primary</Type>}

diff --git a/src/navigation/tabs/home/components/PortfolioBalance.tsx b/src/navigation/tabs/home/components/PortfolioBalance.tsx
@@ -50,9 +50,6 @@ const PercentageContainer = styled.View`
 
 const PortfolioBalance = () => {
   const {t} = useTranslation();
-  const coinbaseUser = useAppSelector(
-    ({COINBASE}) => COINBASE.user[COINBASE_ENV],
-  );
   const coinbaseBalance =
     useAppSelector(({COINBASE}) => COINBASE.balance[COINBASE_ENV]) || 0.0;
   const portfolioBalance = useSelector(
@@ -61,14 +58,7 @@ const PortfolioBalance = () => {
 
   const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
 
-  // Sum only if same currency
-  let totalBalance: number = portfolioBalance.current;
-  if (
-    coinbaseUser &&
-    coinbaseUser.data.native_currency === defaultAltCurrency.isoCode
-  ) {
-    totalBalance += coinbaseBalance;
-  }
+  const totalBalance: number = portfolioBalance.current + coinbaseBalance;
 
   const dispatch = useAppDispatch();
   const percentageDifference = calculatePercentageDifference(

diff --git a/src/navigation/tabs/settings/general/screens/AltCurrencySettings.tsx b/src/navigation/tabs/settings/general/screens/AltCurrencySettings.tsx
@@ -29,6 +29,7 @@ import {getPriceHistory} from '../../../../../store/wallet/effects';
 import {batch} from 'react-redux';
 import {useTranslation} from 'react-i18next';
 import {logSegmentEvent} from '../../../../../store/app/app.effects';
+import {coinbaseInitialize} from '../../../../../store/coinbase';
 
 const AltCurrencySettingsContainer = styled.SafeAreaView`
   margin-top: 20px;
@@ -125,6 +126,7 @@ const AltCurrencySettings = () => {
                   dispatch(setDefaultAltCurrency(item));
                   dispatch(FormatKeyBalances());
                   dispatch(updatePortfolioBalance());
+                  dispatch(coinbaseInitialize());
                   dispatch(getPriceHistory(item.isoCode));
                 });
               });
@@ -134,7 +136,7 @@ const AltCurrencySettings = () => {
         </>
       );
     },
-    [selectedAltCurrency],
+    [navigation, dispatch, selectedAltCurrency],
   );
 
   return (

diff --git a/src/store/coinbase/coinbase.effects.ts b/src/store/coinbase/coinbase.effects.ts
@@ -90,19 +90,20 @@ export const coinbaseInitialize =
     if (!COINBASE.token[COINBASE_ENV]) {
       return;
     }
-    await dispatch(coinbaseGetUser());
     await dispatch(coinbaseUpdateExchangeRate());
+    dispatch(coinbaseGetUser());
     dispatch(coinbaseGetAccountsAndBalance());
   };
 
 export const coinbaseUpdateExchangeRate =
   (): Effect<Promise<any>> => async (dispatch, getState) => {
-    const {COINBASE} = getState();
-    const nativeCurrency: string =
-      COINBASE.user[COINBASE_ENV]?.data.native_currency || 'USD';
+    const {APP} = getState();
+    const selectedCurrency: string = APP.defaultAltCurrency.isoCode || 'USD';
     try {
       dispatch(exchangeRatesPending());
-      const exchangeRates = await CoinbaseAPI.getExchangeRates(nativeCurrency);
+      const exchangeRates = await CoinbaseAPI.getExchangeRates(
+        selectedCurrency,
+      );
       dispatch(exchangeRatesSuccess(exchangeRates));
     } catch (error: CoinbaseErrorsProps | any) {
       dispatch(LogActions.warn(coinbaseParseErrorToString(error)));