Release/2.2.0 (#1236)

* Update webpack-dev-server

* Update @noble/ciphers usage

* Add fallback to `accountName` in account-info-row component

* Fix usage of `toBytes` in signWasmDeploy method

* Center align Ledger sign button in sign-transaction page

* Add token market price display and related logic updates

* Bump version to 2.2.0 and update `casper-wallet-core` dependency to the latest commit. Add new build resource `476.bundle.js` to Xcode project.

* Refactor `TokensList` component to remove redundant `useState` hooks and simplify token listing logic.

* Refactor `MarketDataValue` component to improve layout alignment and styling; replace `SpaceBetweenFlexRow` with `AlignedSpaceBetweenFlexRow` for consistent spacing.

* Refactor `Token` component to simplify state management and encapsulate token data retrieval logic into `getTokenData` utility function.

* Fix `amount-step` fiat amount formatting by properly validating `tokenPrice` as a numeric value

* Add border radius to price provider icons in `MarketDataValue` for circular styling

* Release 2.2.0 version

Author: Comp0te

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "Casper Wallet",
   "description": "Securely manage your CSPR tokens and interact with dapps with the self-custody wallet for the Casper blockchain.",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "author": "MAKE LLC",
   "scripts": {
     "devtools:redux": "redux-devtools --hostname=localhost",
@@ -71,7 +71,7 @@
     "base64-loader": "1.0.0",
     "big.js": "^6.2.1",
     "casper-js-sdk": "^5.0.6",
-    "casper-wallet-core": "git+ssh://[email protected]:make-software/casper-wallet-core.git#v1.1.3",
+    "casper-wallet-core": "git+ssh://[email protected]:make-software/casper-wallet-core.git#v1.1.4",
     "date-fns": "^2.30.0",
     "dotenv-webpack": "^8.1.0",
     "i18next": "^23.11.0",
@@ -179,7 +179,7 @@
     "webextension-polyfill": "0.10.0",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.2.1",
     "xcode-build-webpack-plugin": "^1.0.2"
   }
 }

package.json

@@ -1,3 +1,3 @@
 HASH=$(git rev-parse --short HEAD)
 
-npm run build:chrome && npm run build:firefox && cd ./build && zip -r casper-wallet-2.1.2rc2#$HASH.zip ./* && npm run build:src
+npm run build:chrome && npm run build:firefox && cd ./build && zip -r casper-wallet-2.2.0rc3#$HASH.zip ./* && npm run build:src

scripts/build_all.sh

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import Big from 'big.js';
+import React, { useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -9,6 +10,7 @@ import { TokenType, useCasperToken } from '@hooks/use-casper-token';
 import { SpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
 import { useFetchCep18Tokens } from '@libs/services/cep18-service';
 import { List, TokenPlate, Typography } from '@libs/ui/components';
+import { formatCurrency } from '@libs/ui/utils';
 
 import { formatCep18Tokens } from './utils';
 
@@ -21,30 +23,25 @@ const TotalValueContainer = styled(SpaceBetweenFlexRow)`
 `;
 
 export const TokensList = () => {
-  const [tokensList, setTokensList] = useState<TokenType[]>([]);
-  const [totalAmountFiat, setTotalAmountFiat] = useState<string | null>(null);
-
   const casperToken = useCasperToken();
   const { cep18Tokens } = useFetchCep18Tokens();
   const { t } = useTranslation();
   const navigate = useTypedNavigate();
 
-  useEffect(() => {
-    const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
-
-    const tokensList: TokenType[] = [];
-
-    if (casperToken) {
-      tokensList.push(casperToken);
-      setTotalAmountFiat(casperToken.amountFiat);
+  const tokensList: TokenType[] = [
+    ...(casperToken ? [casperToken] : []),
+    ...(formatCep18Tokens(cep18Tokens) ?? [])
+  ];
+
+  const totalAmountFiat = formatCurrency(
+    tokensList
+      .reduce((acc, cur) => acc.add(cur.amountFiatDecimal || 0), Big(0))
+      .toFixed(),
+    'USD',
+    {
+      precision: 2
     }
-
-    if (formatedCep18Tokens) {
-      tokensList.push(...formatedCep18Tokens);
-    }
-
-    setTokensList(tokensList);
-  }, [casperToken, cep18Tokens]);
+  );
 
   useEffect(() => {
     const container = document.querySelector('#ms-container');

src/apps/popup/pages/home/components/tokens-list/index.tsx

@@ -1,9 +1,9 @@
-import { TokenDto } from 'casper-wallet-core/src/data/dto';
+import { ITokenWithFiatBalance } from 'casper-wallet-core';
 
 import { TokenType } from '@hooks/use-casper-token';
 
 export const formatCep18Tokens = (
-  cep18Tokens: TokenDto[] | undefined
+  cep18Tokens: ITokenWithFiatBalance[] | undefined
 ): TokenType[] | undefined => {
   return cep18Tokens
     ?.map<TokenType>(token => ({
@@ -14,7 +14,11 @@ export const formatCep18Tokens = (
       amount: token.formattedDecimalBalance,
       symbol: token.symbol,
       decimals: token.decimals,
-      amountFiat: null,
+      amountFiat: token.formattedFiatBalance,
+      amountFiatDecimal: token.fiatBalance,
+      tokenPrice: token.fiatPrice?.toString(),
+      tokenPriceProvider: token.marketDataProvider,
+      tokenPriceProviderUrl: token.marketDataProviderUrl,
       icon: token.iconUrl || 'assets/icons/cep18-contract-icon.svg'
     }))
     .sort((a, b) => {

src/apps/popup/pages/home/components/tokens-list/utils.ts

@@ -0,0 +1,54 @@
+import { SupportedMarketDataProviders } from 'casper-wallet-core';
+import React from 'react';
+
+import { TokenType } from '@hooks/use-casper-token';
+
+import { CenteredFlexRow, SpacingSize } from '@libs/layout';
+import { Button, Typography } from '@libs/ui/components';
+
+interface IMarketDataValueProps {
+  token: TokenType;
+}
+
+const priceProviderAssetsMap: Record<SupportedMarketDataProviders, string> = {
+  CoinGecko: 'assets/icons/coingecko.png',
+  FriendlyMarket: 'assets/icons/friendly-market.png'
+};
+
+export const MarketDataValue: React.FC<IMarketDataValueProps> = ({ token }) => (
+  <Button
+    inline
+    disabled={!token.tokenPriceProviderUrl}
+    style={{ background: 'transparent', padding: 0 }}
+    onClick={() => {
+      if (token.tokenPriceProviderUrl) {
+        window.open(token.tokenPriceProviderUrl, '_blank');
+      }
+    }}
+  >
+    <CenteredFlexRow gap={SpacingSize.Small}>
+      {token.tokenPrice && (
+        <Typography
+          wordBreak={true}
+          type="captionRegular"
+          color="contentAction"
+        >
+          {`$${Number(token.tokenPrice).toLocaleString('en-US', {
+            maximumFractionDigits: 10
+          })}`}
+        </Typography>
+      )}
+      {token.tokenPriceProvider && (
+        <img
+          alt={`${token.tokenPriceProvider} icon`}
+          src={priceProviderAssetsMap[token.tokenPriceProvider]}
+          width="20"
+          height="20"
+          style={{
+            borderRadius: '50%'
+          }}
+        />
+      )}
+    </CenteredFlexRow>
+  </Button>
+);

src/apps/popup/pages/token-details/MarketDataValue.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -8,20 +8,18 @@ import { NetworkSetting } from '@src/constants';
 import { isSafariBuild } from '@src/utils';
 
 import { formatCep18Tokens } from '@popup/pages/home/components/tokens-list/utils';
+import { MarketDataValue } from '@popup/pages/token-details/MarketDataValue';
+import { getTokenData } from '@popup/pages/token-details/utils';
 import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
 
-import {
-  selectActiveNetworkSetting,
-  selectApiConfigBasedOnActiveNetwork
-} from '@background/redux/settings/selectors';
-import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
+import { selectActiveNetworkSetting } from '@background/redux/settings/selectors';
 
-import { TokenType, useCasperToken } from '@hooks/use-casper-token';
+import { useCasperToken } from '@hooks/use-casper-token';
 
 import {
+  AlignedSpaceBetweenFlexRow,
   CenteredFlexColumn,
   CenteredFlexRow,
-  SpaceBetweenFlexRow,
   SpacingSize
 } from '@libs/layout';
 import { useFetchCep18Tokens } from '@libs/services/cep18-service';
@@ -33,7 +31,7 @@ import {
   Typography
 } from '@libs/ui/components';
 
-const ListItemContainer = styled(SpaceBetweenFlexRow)`
+const ListItemContainer = styled(AlignedSpaceBetweenFlexRow)`
   padding: 16px;
 `;
 
@@ -50,80 +48,82 @@ const ButtonContainer = styled(CenteredFlexColumn)`
 type TokenInfoList = {
   id: number;
   name: string;
-  value: string;
+  value: string | JSX.Element;
 };
 
 export const Token = () => {
   const location = useTypedLocation();
-  const [tokenData, setTokenData] = useState<TokenType | null>(
-    location.state.tokenData ?? null
-  );
-  const [tokenInfoList, setTokenInfoList] = useState<TokenInfoList[] | []>([]);
+  const initialTokenData = location.state.tokenData ?? null;
 
   const { t } = useTranslation();
   const navigate = useTypedNavigate();
   const { tokenName } = useParams();
   const casperToken = useCasperToken();
 
-  const { casperLiveUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
-  const activeAccount = useSelector(selectVaultActiveAccount);
   const network = useSelector(selectActiveNetworkSetting);
   const { cep18Tokens } = useFetchCep18Tokens();
 
-  useEffect(() => {
-    if (tokenName === 'Casper') {
-      // Casper Coin case
-      if (casperToken && activeAccount) {
-        setTokenData(casperToken);
-        setTokenInfoList([
-          { id: 1, name: 'Symbol', value: casperToken?.symbol }
-        ]);
-      }
+  const tokenData = getTokenData(
+    initialTokenData,
+    cep18Tokens,
+    casperToken,
+    tokenName
+  );
+
+  const getTokenInfoList = (): TokenInfoList[] => {
+    if (tokenName === 'Casper' && casperToken) {
+      return [
+        { id: 1, name: 'Symbol', value: casperToken?.symbol },
+        ...(casperToken.tokenPrice
+          ? [
+              {
+                id: 2,
+                name: 'Market Price',
+                value: <MarketDataValue token={casperToken} />
+              }
+            ]
+          : [])
+      ];
     } else {
       // CEP-18 token case
       const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
 
-      const token = formatedCep18Tokens?.find(token => token.id === tokenName);
-
-      if (token) {
-        setTokenData(token);
-        setTokenInfoList([
-          { id: 1, name: 'Symbol', value: token?.symbol },
-          { id: 2, name: 'Decimals', value: (token?.decimals || 0).toString() }
-        ]);
-      } else {
-        setTokenData(prev => (prev ? { ...prev, amount: '0' } : null));
-        setTokenInfoList([
-          { id: 1, name: 'Symbol', value: tokenData?.symbol ?? '' },
-          {
-            id: 2,
-            name: 'Decimals',
-            value: (tokenData?.decimals || 0).toString()
-          }
-        ]);
-      }
+      const token =
+        formatedCep18Tokens?.find(token => token.id === tokenName) ?? tokenData;
+
+      return [
+        { id: 1, name: 'Symbol', value: token?.symbol ?? '' },
+        { id: 2, name: 'Decimals', value: (token?.decimals || 0).toString() },
+        ...(Boolean(Number(token?.tokenPrice)) && token
+          ? [
+              {
+                id: 3,
+                name: 'Market Price',
+                value: <MarketDataValue token={token} />
+              }
+            ]
+          : [])
+      ];
     }
-  }, [
-    tokenName,
-    casperToken,
-    activeAccount,
-    casperLiveUrl,
-    cep18Tokens,
-    tokenData?.symbol,
-    tokenData?.decimals
-  ]);
+  };
 
   return (
     <List
       contentTop={SpacingSize.Small}
-      rows={tokenInfoList}
+      rows={getTokenInfoList()}
       renderHeader={() => <TokenPlate token={tokenData} />}
       renderRow={({ name, value }) => (
         <ListItemContainer>
           <Typography type="captionRegular" color="contentSecondary">
             {name}
           </Typography>
-          <Typography type="captionRegular">{value}</Typography>
+          {typeof value === 'string' ? (
+            <Typography wordBreak={true} type="captionRegular">
+              {value}
+            </Typography>
+          ) : (
+            value
+          )}
         </ListItemContainer>
       )}
       renderFooter={() => (

src/apps/popup/pages/token-details/token.tsx

@@ -0,0 +1,27 @@
+import { ITokenWithFiatBalance } from 'casper-wallet-core';
+
+import { formatCep18Tokens } from '@popup/pages/home/components/tokens-list/utils';
+
+import { TokenType } from '@hooks/use-casper-token';
+
+export const getTokenData = (
+  initialTokenData: TokenType | null,
+  cep18Tokens: ITokenWithFiatBalance[],
+  casperToken: TokenType | null,
+  tokenName?: string
+) => {
+  if (tokenName === 'Casper') {
+    return casperToken;
+  } else {
+    // CEP-18 token case
+    const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
+
+    const token = formatedCep18Tokens?.find(token => token.id === tokenName);
+
+    if (token) {
+      return token;
+    } else {
+      return initialTokenData ? { ...initialTokenData, amount: '0' } : null;
+    }
+  }
+};