bug: select active account and remove fiat currency (namada-net#632)

mateuszjasiuk · web-flow · commit a1e5f18d2f08 · 2024-02-19T08:55:43.000+01:00
* fix: select account with balance

* feat: remove fiat currency info

* fix: code review
diff --git a/apps/namada-interface/src/App/AccountOverview/AccountOverview.tsx b/apps/namada-interface/src/App/AccountOverview/AccountOverview.tsx
@@ -1,4 +1,3 @@
-import BigNumber from "bignumber.js";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -8,8 +7,7 @@ import {
   useIntegrationConnection,
   useUntilIntegrationAttached,
 } from "@namada/integrations";
-import { Account, Chain, ExtensionKey, Extensions } from "@namada/types";
-import { formatCurrency } from "@namada/utils";
+import { Account, Chain, ExtensionKey, Extensions, TokenType, Tokens } from "@namada/types";
 import { TopLevelRoute } from "App/types";
 import { AccountsState, addAccounts, fetchBalances } from "slices/accounts";
 import { setIsConnected } from "slices/settings";
@@ -27,34 +25,15 @@ import {
 } from "./AccountOverview.components";
 import { DerivedAccounts } from "./DerivedAccounts";
 
-import { atom, useAtomValue, useSetAtom } from "jotai";
-import { loadable } from "jotai/utils";
+import { useAtomValue, useSetAtom } from "jotai";
 import { accountsAtom, balancesAtom } from "slices/accounts";
-import { balanceToFiatAtom } from "slices/coins";
-import { fiatCurrencyAtom } from "slices/settings";
+import BigNumber from "bignumber.js";
 
 //TODO: move to utils when we have one
 const isEmptyObject = (object: Record<string, unknown>): boolean => {
   return object ? Object.keys(object).length === 0 : true;
 };
 
-const totalBalanceAtom = atom(async (get) => {
-  const accounts = await get(accountsAtom);
-  const balances = get(balancesAtom);
-  const balanceToFiat = await get(balanceToFiatAtom);
-  const fiatCurrency = get(fiatCurrencyAtom);
-
-  return accounts.reduce((acc, account) => {
-    const balance = balances[account.address];
-
-    if (typeof balance === "undefined") {
-      return acc;
-    } else {
-      return acc.plus(balanceToFiat(balance, fiatCurrency));
-    }
-  }, new BigNumber(0));
-});
-
 export const AccountOverview = (): JSX.Element => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -72,8 +51,6 @@ export const AccountOverview = (): JSX.Element => {
 
   const { derived } = useAppSelector<AccountsState>((state) => state.accounts);
 
-  const fiatCurrency = useAtomValue(fiatCurrencyAtom);
-
   const [integration, isConnectingToExtension, withConnection] =
     useIntegrationConnection(chains.namada.id);
   const extensionAlias = Extensions[chain.extension.id].alias;
@@ -82,17 +59,15 @@ export const AccountOverview = (): JSX.Element => {
   const currentExtensionAttachStatus =
     extensionAttachStatus[chain.extension.id];
 
-  const total = useAtomValue(loadable(totalBalanceAtom));
-
-  const totalDisplayString = formatCurrency(
-    fiatCurrency,
-    total.state === "hasData" ? total.data : new BigNumber(0)
-  );
-
   const handleDownloadExtension = (url: string): void => {
     window.open(url, "_blank", "noopener,noreferrer");
   };
 
+  const balances = useAtomValue(balancesAtom);
+  const totalNativeBalance = Object.values(balances).reduce((acc, balance) => {
+    return acc.plus(balance[chain.currency.symbol as TokenType] || BigNumber(0));
+  }, BigNumber(0));
+
   const handleConnectExtension = async (): Promise<void> => {
     withConnection(
       async () => {
@@ -133,8 +108,8 @@ export const AccountOverview = (): JSX.Element => {
           <TotalContainer>
             {!isEmptyObject(derived[chain.id]) && (
               <TotalAmount>
-                <TotalAmountFiat>{fiatCurrency}</TotalAmountFiat>
-                <TotalAmountValue>{totalDisplayString}</TotalAmountValue>
+                <TotalAmountFiat>{Tokens[chain.currency.symbol as TokenType].symbol}</TotalAmountFiat>
+                <TotalAmountValue>{totalNativeBalance.toString()}</TotalAmountValue>
               </TotalAmount>
             )}
           </TotalContainer>
diff --git a/apps/namada-interface/src/App/AccountOverview/DerivedAccounts/DerivedAccounts.tsx b/apps/namada-interface/src/App/AccountOverview/DerivedAccounts/DerivedAccounts.tsx
@@ -3,11 +3,9 @@ import { ThemeContext } from "styled-components";
 
 import { chains } from "@namada/chains";
 import { TokenType, Tokens } from "@namada/types";
-import { formatCurrency } from "@namada/utils";
 
 import {
   DerivedAccountAlias,
-  DerivedAccountBalance,
   DerivedAccountContainer,
   DerivedAccountInfo,
   DerivedAccountItem,
@@ -30,12 +28,7 @@ import AssetNamadaNamDark from "./assets/asset-namada-nam-dark.png";
 import AssetNamadaNamLight from "./assets/asset-namada-nam-light.png";
 import AssetPolkadot from "./assets/asset-polkadot-dot.png";
 
-import { Balance } from "slices/accounts";
-import { balanceToFiatAtom, coinsAtom } from "slices/coins";
-import { SettingsState } from "slices/settings";
-import { useAppSelector } from "store";
-
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { loadable } from "jotai/utils";
 import { accountsAtom, balancesAtom } from "slices/accounts";
 
@@ -70,23 +63,6 @@ const assetIconByToken: Record<TokenType, { light: string; dark: string }> = {
   },
 };
 
-const FiatBalanceDisplay: React.FC<{
-  balance?: Balance;
-}> = ({ balance }) => {
-  const { fiatCurrency } = useAppSelector<SettingsState>(
-    (state) => state.settings
-  );
-
-  const balanceToFiat = useAtomValue(loadable(balanceToFiatAtom));
-
-  const displayString =
-    typeof balance !== "undefined" && balanceToFiat.state === "hasData"
-      ? formatCurrency(fiatCurrency, balanceToFiat.data(balance, fiatCurrency))
-      : `${fiatCurrency} -`;
-
-  return <DerivedAccountBalance>{displayString}</DerivedAccountBalance>;
-};
-
 const DerivedAccounts = (): JSX.Element => {
   const accountsLoadable = useAtomValue(loadable(accountsAtom));
   const accounts =
@@ -97,8 +73,6 @@ const DerivedAccounts = (): JSX.Element => {
   const themeContext = useContext(ThemeContext);
   const [activeAccountAddress, setActiveAccountAddress] = useState("");
 
-  const fetchConversionRates = useSetAtom(coinsAtom);
-
   const chain = chains.namada;
   const { alias } = chain || {};
 
@@ -118,9 +92,7 @@ const DerivedAccounts = (): JSX.Element => {
     setActiveAccountAddress(accounts[0]?.address);
   }, [accounts]);
 
-  useEffect(() => {
-    fetchConversionRates();
-  }, []);
+  const symbol = chain.currency.symbol as TokenType;
 
   return (
     <DerivedAccountsContainer>
@@ -135,6 +107,7 @@ const DerivedAccounts = (): JSX.Element => {
           .map((account) => {
             const { alias, address, isShielded } = account;
             const balance = balances[address];
+            const nativeBalance = typeof balance === "undefined" ? "-" : (balance[symbol]?.toString() || "0");
 
             return (
               <DerivedAccountItem key={address}>
@@ -151,7 +124,11 @@ const DerivedAccounts = (): JSX.Element => {
                       )}
                     </DerivedAccountType>
                   </DerivedAccountInfo>
-                  <FiatBalanceDisplay balance={balance} />
+                  <div className="flex items-center">
+                    <span className="text-white">
+                      {Tokens[symbol].symbol} {nativeBalance} 
+                    </span>
+                  </div>
                 </DerivedAccountContainer>
                 {balance && (
                   <TokenTotals
diff --git a/apps/namada-interface/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx b/apps/namada-interface/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx
@@ -1,66 +1,20 @@
-import { Currencies } from "currencies";
 import { useNavigate } from "react-router-dom";
-import { setFiatCurrency } from "slices/settings";
-import { useAppDispatch, useAppSelector } from "store";
 
-import {
-  Heading,
-  Icon,
-  NavigationContainer,
-  Option,
-  Select,
-  Tooltip,
-} from "@namada/components";
-import { InputContainer } from "App/AccountOverview/AccountOverview.components";
+import { Heading, Icon, NavigationContainer } from "@namada/components";
 import { BackButton } from "App/Token/TokenSend/TokenSendForm.components";
 import { ButtonsContainer, SettingsContent } from "../Settings.components";
 import { SettingsWalletSettingsContainer } from "./SettingsWalletSettings.components";
 
 export const SettingsWalletSettings = (): JSX.Element => {
-  const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  const currencies: Option<string>[] = Currencies.map((currency) => ({
-    value: currency.currency,
-    label: `${currency.currency} - ${currency.label}`,
-  }));
-
-  const currentCurrency = useAppSelector(
-    (state) => state.settings.fiatCurrency
-  );
-
-  const handleCurrencySelect = (
-    e: React.ChangeEvent<HTMLSelectElement>
-  ): void => {
-    const { value } = e.target;
-
-    dispatch(setFiatCurrency(value));
-  };
-
   return (
     <SettingsWalletSettingsContainer>
       <NavigationContainer>
         <Heading level="h1">Wallet Settings</Heading>
       </NavigationContainer>
 
-      <SettingsContent>
-        <InputContainer>
-          <Select
-            data={currencies}
-            label={
-              <div>
-                Fiat Currency
-                <Tooltip
-                  anchor={<Icon name="Info" />}
-                  tooltipText="Fiat currency in which balances may be displayed."
-                />
-              </div>
-            }
-            value={currentCurrency}
-            onChange={handleCurrencySelect}
-          ></Select>
-        </InputContainer>
-      </SettingsContent>
+      <SettingsContent></SettingsContent>
       <ButtonsContainer>
         <BackButton
           onClick={() => {
diff --git a/apps/namada-interface/src/App/Token/TokenSend/TokenSend.tsx b/apps/namada-interface/src/App/Token/TokenSend/TokenSend.tsx
@@ -53,10 +53,6 @@ const accountsWithBalanceIntoSelectData = (
 ): Option<string>[] =>
   accountsWithBalance.flatMap(({ details, balance }) =>
     Object.entries(balance)
-      .filter(
-        ([tokenType, balance]) =>
-          !Tokens[tokenType as TokenType].isNut && balance.isGreaterThan(0)
-      )
       .map(([tokenType, amount]) => ({
         value: `${details.address}|${tokenType}`,
         label: `${details.alias} ${amount} (${Tokens[tokenType as TokenType].symbol})`,
@@ -72,10 +68,11 @@ const TokenSend = (): JSX.Element => {
 
   const shieldedAccountsWithBalance = accounts.filter(
     ({ details }) => details.isShielded
-  );
+  ).filter(({ balance }) => Object.values(balance).some((amount) => amount.isGreaterThan(0)));
+
   const transparentAccountsWithBalance = accounts.filter(
     ({ details }) => !details.isShielded
-  );
+  ).filter(({ balance }) => Object.values(balance).some((amount) => amount.isGreaterThan(0)));
 
   const shieldedTokenData = accountsWithBalanceIntoSelectData(
     shieldedAccountsWithBalance
diff --git a/apps/namada-interface/src/slices/StakingAndGovernance/fakeData.ts b/apps/namada-interface/src/slices/StakingAndGovernance/fakeData.ts
@@ -1,30 +1,26 @@
 import BigNumber from "bignumber.js";
 
-import { Validator, StakingPosition, MyBalanceEntry } from "./types";
+import { MyBalanceEntry, StakingPosition, Validator } from "./types";
 export const myBalancesData: MyBalanceEntry[] = [
   {
     uuid: "1",
     key: "Total Balance",
     baseCurrency: "NAM 33.00",
-    fiatCurrency: "EUR 33.00",
   },
   {
     uuid: "2",
     key: "Total Bonded",
     baseCurrency: "NAM 10.00",
-    fiatCurrency: "EUR 10.00",
   },
   {
     uuid: "3",
     key: "Pending Rewards",
     baseCurrency: "NAM 23.00",
-    fiatCurrency: "EUR 23.00",
   },
   {
     uuid: "4",
     key: "Available for Bonding",
     baseCurrency: "NAM 10.00",
-    fiatCurrency: "EUR 10.00",
   },
 ];
 
diff --git a/apps/namada-interface/src/slices/StakingAndGovernance/types.ts b/apps/namada-interface/src/slices/StakingAndGovernance/types.ts
@@ -63,7 +63,6 @@ export type MyValidators = Unique & {
 export type MyBalanceEntry = Unique & {
   key: string;
   baseCurrency: string;
-  fiatCurrency: string;
 };
 
 // PLACEHOLDER
diff --git a/apps/namada-interface/src/slices/coins.ts b/apps/namada-interface/src/slices/coins.ts
diff --git a/apps/namada-interface/src/slices/settings.ts b/apps/namada-interface/src/slices/settings.ts
diff --git a/apps/namada-interface/src/store/mocks.ts b/apps/namada-interface/src/store/mocks.ts
