[ENG-5252] [ENG-5253] [ENG-5497] Switching currency to BTC (#685)

* [ENG-5252] Switching currency to BTC

* Add btc balance view for token tile, account row, balance card

* Show balance in fiat for the btc token tile

* Add hovers, change interface -> type, remove unused imports

* Skip switching to btc mode on BTC details screen

* Skip show balance in btc on tokens pages without fiat value

* Update the fiat block on Dashboard to not look like like it is interactive

* Add `Total Balance BTC` copy, add `Show balance` button

* Hide ellipses for the hidden balances when tx has no value

* Add store migration for the `showBalanceInBtc` property

* Add `BtcAmountText` component

* Remove the export word

* Simplify the balance view rendering logic

* Remove undefined type option for the showBalanceInBtc redux property

* [ENG-5436][ENG-5437][ENG-5438][ENG-5439] Add wallet backup reminder (#770)

* [ENG-5436][ENG-5437][ENG-5438][ENG-5439] Add wallet backup reminder

* Add `has_backed_up_wallet` property to the `AnalyticsEvents.CreateNewWallet` event

* Make the backup reminder clickable and redirect to show seedphrase

* Use the SetWalletBackupStatus interface

src/app/components/accountRow/index.tsx

@@ -1,18 +1,20 @@
 import LedgerBadge from '@assets/img/ledger/ledger_badge.svg';
 import BarLoader from '@components/barLoader';
 import OptionsDialog from '@components/optionsDialog/optionsDialog';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useOptionsDialog from '@hooks/useOptionsDialog';
 import useWalletReducer from '@hooks/useWalletReducer';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { CaretDown, DotsThreeVertical } from '@phosphor-icons/react';
-import { currencySymbolMap, type Account } from '@secretkeylabs/xverse-core';
+import { currencySymbolMap, getFiatBtcEquivalent, type Account } from '@secretkeylabs/xverse-core';
 import { removeAccountAvatarAction } from '@stores/wallet/actions/actionCreators';
 import Button from '@ui-library/button';
 import Input from '@ui-library/input';
 import Sheet from '@ui-library/sheet';
 import Spinner from '@ui-library/spinner';
-import { EMPTY_LABEL, HIDDEN_BALANCE_LABEL, LoaderSize } from '@utils/constants';
+import { BTC_SYMBOL, EMPTY_LABEL, HIDDEN_BALANCE_LABEL, LoaderSize } from '@utils/constants';
 import { getAccountBalanceKey, isLedgerAccount, validateAccountName } from '@utils/helper';
+import BigNumber from 'bignumber.js';
 import { useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -66,6 +68,7 @@ function AccountRow({
     accountBalances,
     avatarIds,
     balanceHidden,
+    showBalanceInBtc,
   } = useWalletSelector();
   const accountAvatar = avatarIds[account?.btcAddresses.taproot.address ?? ''];
   // TODO: refactor this into a hook
@@ -78,6 +81,7 @@ function AccountRow({
   const [accountNameError, setAccountNameError] = useState<string | null>(null);
   const [isAccountNameChangeLoading, setIsAccountNameChangeLoading] = useState(false);
   const { removeLedgerAccount, renameSoftwareAccount, updateLedgerAccounts } = useWalletReducer();
+  const { btcFiatRate } = useSupportedCoinRates();
 
   useEffect(
     () => () => {
@@ -216,15 +220,32 @@ function AccountRow({
                   <CaretDown color={Theme.colors.white_0} weight="bold" size={16} />
                 )}
               </CurrentAccountTextContainer>
-              {isAccountListView && totalBalance && (
+              {showBalanceInBtc && isAccountListView && totalBalance && (
+                <NumericFormat
+                  value={getFiatBtcEquivalent(
+                    BigNumber(totalBalance),
+                    BigNumber(btcFiatRate),
+                  ).toString()}
+                  displayType="text"
+                  prefix={BTC_SYMBOL}
+                  thousandSeparator
+                  renderText={(value: string) => (
+                    <Balance data-testid="account-balance" $isSelected={isSelected}>
+                      {value}
+                    </Balance>
+                  )}
+                />
+              )}
+              {!showBalanceInBtc && isAccountListView && totalBalance && (
                 <NumericFormat
                   value={totalBalance}
                   displayType="text"
                   prefix={`${currencySymbolMap[fiatCurrency]}`}
                   thousandSeparator
                   renderText={(value: string) => (
                     <Balance data-testid="account-balance" $isSelected={isSelected}>
-                      {balanceHidden ? HIDDEN_BALANCE_LABEL : value}
+                      {!showBalanceInBtc && balanceHidden && HIDDEN_BALANCE_LABEL}
+                      {!showBalanceInBtc && !balanceHidden && value}
                     </Balance>
                   )}
                 />

src/app/components/btcAmountText/index.tsx

@@ -0,0 +1,39 @@
+import { BTC_SYMBOL } from '@utils/constants';
+import BigNumber from 'bignumber.js';
+import { NumericFormat } from 'react-number-format';
+import styled from 'styled-components';
+
+const AmountText = styled.div`
+  ${(props) => props.theme.typography.body_medium_m}
+  color: ${(props) => props.theme.colors.white_200};
+`;
+
+type Props = {
+  className?: string;
+  btcAmount?: string;
+};
+
+function BtcAmountText({ className, btcAmount }: Props) {
+  if (!btcAmount) {
+    return null;
+  }
+
+  if (BigNumber(btcAmount).isEqualTo(0)) {
+    return <AmountText className={className}>{`${BTC_SYMBOL}0.00`}</AmountText>;
+  }
+
+  if (BigNumber(btcAmount).lt(0.00000014)) {
+    return <AmountText className={className}>{`< ${BTC_SYMBOL}0.00000014`}</AmountText>;
+  }
+  return (
+    <NumericFormat
+      value={btcAmount}
+      displayType="text"
+      prefix={`~ ${BTC_SYMBOL}`}
+      thousandSeparator
+      renderText={(value: string) => <AmountText>{value}</AmountText>}
+    />
+  );
+}
+
+export default BtcAmountText;

src/app/components/confirmStxTransactionComponent/index.tsx

@@ -100,7 +100,7 @@ function ConfirmStxTransactionComponent({
   const { getSeed } = useSeedVault();
   const [showFeeSettings, setShowFeeSettings] = useState(false);
   const selectedAccount = useSelectedAccount();
-  const { feeMultipliers, fiatCurrency, network } = useWalletSelector();
+  const { feeMultipliers, fiatCurrency } = useWalletSelector();
   const [openTransactionSettingModal, setOpenTransactionSettingModal] = useState(false);
   const [buttonLoading, setButtonLoading] = useState(loading);
   const [isModalVisible, setIsModalVisible] = useState(false);

src/app/components/tokenTile/index.tsx

@@ -1,13 +1,17 @@
 import { BestBarLoader } from '@components/barLoader';
+import BtcAmountText from '@components/btcAmountText';
 import FiatAmountText from '@components/fiatAmountText';
 import PercentageChange from '@components/percentageChange';
 import TokenImage from '@components/tokenImage';
 import useSelectedAccountBtcBalance from '@hooks/queries/useSelectedAccountBtcBalance';
 import useStxWalletData from '@hooks/queries/useStxWalletData';
 import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { getFiatEquivalent, type FungibleToken } from '@secretkeylabs/xverse-core';
-import { StyledP } from '@ui-library/common.styled';
+import {
+  getFiatBtcEquivalent,
+  getFiatEquivalent,
+  type FungibleToken,
+} from '@secretkeylabs/xverse-core';
 import type { CurrencyTypes } from '@utils/constants';
 import { HIDDEN_BALANCE_LABEL } from '@utils/constants';
 import { getBalanceAmount, getFtTicker } from '@utils/tokens';
@@ -109,6 +113,11 @@ const StyledFiatAmountText = styled(FiatAmountText)`
   min-height: 20px;
 `;
 
+const FiatAmountContainer = styled.div`
+  ${(props) => props.theme.typography.body_medium_m}
+  color: ${(props) => props.theme.colors.white_200};
+`;
+
 type Props = {
   title: string;
   loading?: boolean;
@@ -132,7 +141,7 @@ function TokenTile({
   showProtocolIcon = true,
   hideSwapBalance = false,
 }: Props) {
-  const { fiatCurrency, balanceHidden } = useWalletSelector();
+  const { fiatCurrency, balanceHidden, showBalanceInBtc } = useWalletSelector();
   const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
   const { data: stxData } = useStxWalletData();
   const { confirmedPaymentBalance: btcBalance } = useSelectedAccountBtcBalance();
@@ -152,12 +161,12 @@ function TokenTile({
       BigNumber(btcFiatRate),
       fungibleToken,
     );
-    if (fiatAmount) {
-      return BigNumber(fiatAmount);
-    }
-    return undefined;
+
+    return fiatAmount ? BigNumber(fiatAmount) : undefined;
   };
 
+  const fiatAmount = getFiatAmount();
+
   return (
     <TileContainer onClick={handleTokenPressed} className={className} aria-label="Token Row">
       <TokenImageContainer>
@@ -196,14 +205,22 @@ function TokenTile({
           {loading && <StyledBarLoader width="20%" height={20} />}
           {!loading && !hideSwapBalance && (
             <AmountContainer aria-label="CurrencyBalance Container">
-              {balanceHidden ? (
-                <StyledP typography="body_medium_m" color="white_200">
-                  {HIDDEN_BALANCE_LABEL}
-                </StyledP>
-              ) : (
+              {showBalanceInBtc && currency !== 'BTC' && (
+                <BtcAmountText
+                  btcAmount={
+                    fiatAmount
+                      ? getFiatBtcEquivalent(fiatAmount, BigNumber(btcFiatRate)).toString()
+                      : undefined
+                  }
+                />
+              )}
+              {!showBalanceInBtc && balanceHidden && (
+                <FiatAmountContainer>{HIDDEN_BALANCE_LABEL}</FiatAmountContainer>
+              )}
+              {(!showBalanceInBtc || currency === 'BTC') && !balanceHidden && (
                 <FiatCurrencyRow>
                   <PercentageChange ftCurrencyPairs={[[fungibleToken, currency]]} />
-                  <StyledFiatAmountText fiatAmount={getFiatAmount()} fiatCurrency={fiatCurrency} />
+                  <StyledFiatAmountText fiatAmount={fiatAmount} fiatCurrency={fiatCurrency} />
                 </FiatCurrencyRow>
               )}
             </AmountContainer>

src/app/components/topRow/index.tsx

@@ -1,5 +1,9 @@
 import { ArrowLeft, DotsThreeVertical, FadersHorizontal, Star } from '@phosphor-icons/react';
+import { InputFeedback } from '@ui-library/inputFeedback';
+import RoutePaths from 'app/routes/paths';
 import type { MutableRefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import Theme from 'theme';
 
@@ -61,6 +65,7 @@ type Props = {
   settingsRef?: MutableRefObject<HTMLButtonElement | null>;
   onStarClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   isStarred?: boolean;
+  backupReminder?: boolean;
 };
 
 function TopRow({
@@ -73,14 +78,22 @@ function TopRow({
   settingsRef,
   onStarClick,
   isStarred,
+  backupReminder = false,
 }: Props) {
+  const { t } = useTranslation();
+
   return (
     <TopSectionContainer className={className}>
       {showBackButton && (
         <BackButton onClick={onClick} data-testid="back-button">
           <ArrowLeft size={20} color={Theme.colors.white_0} alt="back button" />
         </BackButton>
       )}
+      {backupReminder && (
+        <Link to={RoutePaths.BackupWallet}>
+          <InputFeedback message={t('INFORMATION.WALLET_NOT_BACKED_UP')} variant="warning" />
+        </Link>
+      )}
       {title && <HeaderText>{title}</HeaderText>}
       {onStarClick && (
         <StyledMenuButton onClick={onStarClick} $marginRight={Boolean(onMenuClick)}>

src/app/components/transactions/transactionAmount.tsx

@@ -17,7 +17,12 @@ import BigNumber from 'bignumber.js';
 import { NumericFormat } from 'react-number-format';
 import styled from 'styled-components';
 
-interface TransactionAmountProps {
+const TransactionValue = styled.p((props) => ({
+  ...props.theme.typography.body_medium_m,
+  color: props.theme.colors.white_0,
+}));
+
+type Props = {
   transaction:
     | StxTransactionData
     | BtcTransactionData
@@ -26,22 +31,22 @@ interface TransactionAmountProps {
   currency: CurrencyTypes;
   protocol?: FungibleTokenProtocol;
   tokenSymbol?: string;
-}
+};
 
-const TransactionValue = styled.p((props) => ({
-  ...props.theme.typography.body_medium_m,
-  color: props.theme.colors.white_0,
-}));
-
-export default function TransactionAmount(props: TransactionAmountProps): JSX.Element | null {
-  const { transaction, currency, protocol, tokenSymbol } = props;
+export default function TransactionAmount({
+  transaction,
+  currency,
+  protocol,
+  tokenSymbol,
+}: Props): JSX.Element | null {
   const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();
   const { balanceHidden } = useWalletSelector();
-  if (balanceHidden) {
-    return <TransactionValue>{HIDDEN_BALANCE_LABEL}</TransactionValue>;
-  }
+
   if (currency === 'STX' || (currency === 'FT' && protocol === 'stacks')) {
     const stxTransaction = transaction as StxTransactionData;
+    if (stxTransaction.amount.gt(0) && balanceHidden) {
+      return <TransactionValue>{HIDDEN_BALANCE_LABEL}</TransactionValue>;
+    }
     if (stxTransaction.txType === 'token_transfer') {
       const prefix = stxTransaction.incoming ? '' : '-';
       return (
@@ -82,6 +87,9 @@ export default function TransactionAmount(props: TransactionAmountProps): JSX.El
   } else if (currency === 'BTC') {
     const btcTransaction = transaction as BtcTransactionData;
     const prefix = btcTransaction.incoming ? '' : '-';
+    if (balanceHidden) {
+      return <TransactionValue>{HIDDEN_BALANCE_LABEL}</TransactionValue>;
+    }
     if (btcTransaction.isOrdinal && btcTransaction.txStatus === 'pending') {
       return null;
     }
@@ -100,6 +108,9 @@ export default function TransactionAmount(props: TransactionAmountProps): JSX.El
   } else if (currency === 'FT' && protocol === 'brc-20') {
     const brc20Transaction = transaction as Brc20HistoryTransactionData;
     const prefix = brc20Transaction.incoming ? '' : '-';
+    if (balanceHidden) {
+      return <TransactionValue>{HIDDEN_BALANCE_LABEL}</TransactionValue>;
+    }
     if (!new BigNumber(brc20Transaction.amount).isEqualTo(0)) {
       return (
         <NumericFormat
@@ -116,6 +127,9 @@ export default function TransactionAmount(props: TransactionAmountProps): JSX.El
     }
   } else if (currency === 'FT' && protocol === 'runes') {
     const runeTransaction = transaction as GetRunesActivityForAddressEvent;
+    if (balanceHidden) {
+      return <TransactionValue>{HIDDEN_BALANCE_LABEL}</TransactionValue>;
+    }
     return (
       <NumericFormat
         value={BigNumber(runeTransaction.amount).toString()}

src/app/components/transactions/transactionTitle.tsx

@@ -12,22 +12,21 @@ import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-interface TransactionTitleProps {
-  transaction:
-    | StxTransactionData
-    | BtcTransactionData
-    | Brc20HistoryTransactionData
-    | GetRunesActivityForAddressEvent;
-}
-
 const TransactionTitleText = styled.p((props) => ({
   ...props.theme.typography.body_bold_m,
   color: props.theme.colors.white_0,
   textAlign: 'left',
 }));
 
-export default function TransactionTitle(props: TransactionTitleProps) {
-  const { transaction } = props;
+type Props = {
+  transaction:
+    | StxTransactionData
+    | BtcTransactionData
+    | Brc20HistoryTransactionData
+    | GetRunesActivityForAddressEvent;
+};
+
+export default function TransactionTitle({ transaction }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();