Merge branch 'redesign' into AMB--4965

ambrosus · Dec 16, 2024 · 0bca6df · 0bca6df
2 parents 315b152 + 35eca6b
commit 0bca6df
Show file tree

Hide file tree

Showing 52 changed files with 523 additions and 527 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/src/components/composite/TextOrSpinner/index.tsx b/src/components/composite/TextOrSpinner/index.tsx
@@ -6,7 +6,7 @@ import { scale } from '@utils/scaling';
 
 interface TextOrSpinnerProps {
   loading: boolean;
-  loadingLabel: string;
+  loadingLabel: string | undefined;
   label: string;
   spinnerColor?: string;
   spinnerCustomSize?: number;
@@ -50,18 +50,22 @@ export const TextOrSpinner = ({
       {loading ? (
         <Row alignItems="center">
           <Spinner
-            customSize={spinnerCustomSize}
+            сustomSize={spinnerCustomSize}
             color={spinnerColor}
             size={spinnerSize}
           />
-          <Spacer horizontal value={scale(8)} />
-          <Text
-            fontSize={styles.loading?.fontSize}
-            fontFamily={styles.loading?.fontFamily}
-            color={styles.loading?.color}
-          >
-            {loadingLabel}
-          </Text>
+          {loadingLabel && (
+            <>
+              <Spacer horizontal value={scale(8)} />
+              <Text
+                fontSize={styles.loading?.fontSize}
+                fontFamily={styles.loading?.fontFamily}
+                color={styles.loading?.color}
+              >
+                {loadingLabel}
+              </Text>
+            </>
+          )}
         </Row>
       ) : (
         <Text

diff --git a/src/components/modular/Passcode/index.tsx b/src/components/modular/Passcode/index.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { split, dropRight } from 'lodash';
 import { styles } from '@components/modular/Passcode/styles';
 import { Button, Spacer } from '@components/base';
 import { useForwardedRef } from '@hooks';
@@ -36,9 +37,11 @@ export const Passcode = forwardRef<TextInput, PasscodeProps>(
     }: PasscodeProps,
     ref
   ) => {
-    const [code, setCode] = useState('');
-    const localRef = useForwardedRef<TextInput>(ref);
     const navigation: NavigationListenerType = useNavigation();
+    const localRef = useForwardedRef<TextInput>(ref);
+
+    const [passcode, setPasscode] = useState('');
+
     useEffect(() => {
       if (DeviceUtils.isAndroid) {
         // @ ts-ignore
@@ -52,37 +55,38 @@ export const Passcode = forwardRef<TextInput, PasscodeProps>(
 
     useEffect(() => {
       if (changePasscodeStep === 2 || changePasscodeStep === 3) {
-        setCode('');
+        setPasscode('');
       }
-    }, [changePasscodeStep]);
+    }, [changePasscodeStep, setPasscode]);
 
     const handleCodeChange = useCallback(
       (text: string) => {
-        if (code.length === 4) return;
+        if (passcode.length === 4) return;
         const numericText = StringUtils.removeNonNumericCharacters(text, false);
-        const newCode = `${code}${numericText}`;
-        setCode(newCode);
+        const newCode = `${passcode}${numericText}`;
+        setPasscode(newCode);
         const passcodeArray = newCode.split('');
         onPasscodeChange(passcodeArray);
         if (type === 'change') {
           if (numericText.length === 4) {
-            setTimeout(() => setCode(''), 50);
+            setTimeout(() => setPasscode(''), 50);
           }
         }
       },
-      [code, onPasscodeChange, type]
+      [passcode, setPasscode, onPasscodeChange, type]
     );
 
     const onPressBackspace = useCallback(() => {
-      const newData = code.substring(0, code.length - 1);
-      setCode(newData);
-    }, [code]);
+      const newPasscode = dropRight(passcode, 1).join('');
+      onPasscodeChange(split(newPasscode, ''));
+      setPasscode(newPasscode);
+    }, [onPasscodeChange, passcode]);
 
     const renderCircles = useCallback(() => {
       const circleElements = [];
 
       for (let i = 0; i < 4; i++) {
-        const isFilled = i < code.length;
+        const isFilled = i < passcode.length;
         circleElements.push(
           <View
             key={i}
@@ -92,7 +96,7 @@ export const Passcode = forwardRef<TextInput, PasscodeProps>(
       }
 
       return circleElements;
-    }, [code.length]);
+    }, [passcode.length]);
 
     return (
       <View>

diff --git a/src/components/modular/SingleAsset/index.tsx b/src/components/modular/SingleAsset/index.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
+import { ethers } from 'ethers';
 import { styles } from './styles';
 import { Row, Spacer, Text } from '@components/base';
 import { scale } from '@utils/scaling';
@@ -28,8 +29,6 @@ export const SingleAsset = ({
     return `$${NumberUtils.numberToTransformedLocale(usdPrice.toString())}`;
   }, [usdPrice]);
 
-  const tokenBalance = balance.formattedBalance;
-
   const tokenNameOrAddress = useMemo(() => {
     const isAddress = StringValidators.isStringAddress(symbol);
 
@@ -63,8 +62,9 @@ export const SingleAsset = ({
               fontSize={13}
               color={COLORS.neutral400}
             >
-              {NumberUtils.numberToTransformedLocale(tokenBalance)}{' '}
-              {symbol || 'tokens'}
+              {`${NumberUtils.numberToTransformedLocale(
+                ethers.utils.formatEther(balance.wei)
+              )} ${symbol || 'tokens'}`}
             </Text>
           </View>
         </Row>

diff --git a/src/components/modular/StakingPool/index.tsx b/src/components/modular/StakingPool/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { View } from 'react-native';
 import { useTranslation } from 'react-i18next';
-import { BigNumber } from 'ethers';
+import { ethers } from 'ethers';
 import { StakingPool } from '@models';
 import { Row, Spacer, Text } from '@components/base';
 import { useStakingPoolDetails } from '@entities/staking';
 import { TokenLogo } from '../TokenLogo';
-import { NumberUtils } from '@utils/number';
 import { TokenUtils } from '@utils/token';
 import { scale, verticalScale } from '@utils/scaling';
 import { COLORS } from '@constants/colors';
+import { NumberUtils } from '@utils/number';
 
 interface StakingPoolItemProps {
   stakingPool: StakingPool;
@@ -44,9 +44,10 @@ export const StakingPoolItem = (props: StakingPoolItemProps) => {
             fontWeight="500"
           >
             {t('staking.current.stake', {
-              amount: NumberUtils.formatAmount(
-                poolStakingDetails?.user.raw ?? BigNumber.from(0),
-                0
+              amount: NumberUtils.formatDecimal(
+                ethers.utils.formatEther(
+                  poolStakingDetails?.user.raw ?? ethers.BigNumber.from(0)
+                )
               ),
               symbol: 'AMB'
             })}

diff --git a/src/components/templates/ExplorerAccount/ExplorerAccount.Transactions.tsx b/src/components/templates/ExplorerAccount/ExplorerAccount.Transactions.tsx
@@ -125,6 +125,7 @@ export const AccountTransactions = forwardRef<
           contentContainerStyle={[styles.list, containerStyle]}
           onEndReached={onEndReached}
           showsVerticalScrollIndicator={false}
+          scrollEventThrottle={16}
           testID="Transactions_List"
           ListFooterComponent={() =>
             loading && <CenteredSpinner containerStyle={styles.loader} />

diff --git a/src/components/templates/InputWithTokenSelect/index.tsx b/src/components/templates/InputWithTokenSelect/index.tsx
@@ -45,6 +45,7 @@ interface InputWithTokenSelectProps {
   resetKeyboardState?: boolean;
   selectable?: boolean;
   isRequiredRefetchBalance?: boolean;
+  error?: string;
 }
 
 export const InputWithTokenSelect = forwardRef<
@@ -66,7 +67,8 @@ export const InputWithTokenSelect = forwardRef<
       onBlur,
       resetKeyboardState = false,
       selectable = true,
-      isRequiredRefetchBalance = false
+      isRequiredRefetchBalance = false,
+      error = undefined
     },
     ref
   ) => {
@@ -190,6 +192,17 @@ export const InputWithTokenSelect = forwardRef<
             />
           </Pressable>
         </View>
+        {error !== '' && (
+          <Text
+            fontSize={12}
+            fontFamily="Inter_500Medium"
+            fontWeight="500"
+            color={COLORS.error400}
+            style={styles.error}
+          >
+            {error}
+          </Text>
+        )}
 
         <BalanceRow
           token={token}

diff --git a/src/components/templates/InputWithTokenSelect/styles.ts b/src/components/templates/InputWithTokenSelect/styles.ts
@@ -23,5 +23,8 @@ export const styles = StyleSheet.create({
   inputAndroidSpecified: {
     fontSize: moderateScale(22),
     lineHeight: moderateScale(29.75)
+  },
+  error: {
+    paddingBottom: verticalScale(4)
   }
 });
diff --git a/src/components/templates/TransactionDetails/index.tsx b/src/components/templates/TransactionDetails/index.tsx
@@ -102,12 +102,12 @@ export const TransactionDetails = ({
   }, [transaction]);
 
   const amountWithSymbolValue = useMemo(() => {
-    const amount = NumberUtils.numberToTransformedLocale(
-      transactionTokenInfo?.cryptoAmount ?? 0
-    );
+    const amount = NumberUtils.numberToTransformedLocale(transaction.amount);
 
-    return transaction.isSent ? `-${amount}` : amount;
-  }, [transaction, transactionTokenInfo]);
+    return transaction.isSent && transaction.amount !== 0
+      ? `-${amount}`
+      : amount;
+  }, [transaction]);
 
   return (
     <View testID="Transaction_Details">

diff --git a/src/components/templates/WalletTransactionsAndAssets/index.tsx b/src/components/templates/WalletTransactionsAndAssets/index.tsx
@@ -13,7 +13,6 @@ import {
 } from 'react-native';
 import { DerivedValue } from 'react-native-reanimated';
 import { useTranslation } from 'react-i18next';
-import { ethers } from 'ethers';
 import { styles } from './styles';
 import { AnimatedTabs } from '@components/modular';
 import { ExplorerAccount } from '@models';
@@ -24,6 +23,7 @@ import { NftAssets } from './NftAssets';
 import { WalletDepositFunds } from '../WalletDepositFunds';
 import { Spinner } from '@components/base';
 import { _tokensOrNftMapper } from '@entities/wallet';
+import { balanceReducer } from '@features/wallet-assets/utils';
 
 interface WalletTransactionsAndAssetsProps {
   account: ExplorerAccount;
@@ -116,8 +116,8 @@ export const WalletTransactionsAndAssets = ({
   );
 
   const isSelectAccountBalanceZero = useMemo(() => {
-    return ethers.utils.parseEther(account.ambBalanceWei).isZero();
-  }, [account.ambBalanceWei]);
+    return balanceReducer(tokensOrNFTs.tokens, account.ambBalanceWei).isZero();
+  }, [account.ambBalanceWei, tokensOrNFTs.tokens]);
 
   if (loading) {
     return (

diff --git a/src/constants/config.ts b/src/constants/config.ts
@@ -46,7 +46,7 @@ const envs = {
     FACTORY_ADDRESS: '0x2b6852CeDEF193ece9814Ee99BE4A4Df7F463557',
     CHAIN_ID: 16718,
     CURRENCY_GRAPH_URL:
-      'https://graph-node-api.ambrosus.io/subgraphs/name/airdao/astra-test-usd-e'
+      'https://graph-node-api.ambrosus.io/subgraphs/name/airdao/astra-price-test-b'
   },
   stage: {
     WALLET_API_URL: 'https://wallet-api.ambrosus.io',
@@ -89,7 +89,7 @@ const envs = {
     MARKETPLACE_URL: 'https://bond-backend-api.ambrosus.io',
     CHAIN_ID: 16718,
     CURRENCY_GRAPH_URL:
-      'https://graph-node-api.ambrosus.io/subgraphs/name/airdao/astra-test-usd-e'
+      'https://graph-node-api.ambrosus.io/subgraphs/name/airdao/astra-price-test-b'
   },
   testnet: {
     WALLET_API_URL: 'https://wallet-api.ambrosus-test.io',
@@ -132,7 +132,7 @@ const envs = {
     MARKETPLACE_URL: 'https://bond-backend-api.ambrosus-test.io',
     CHAIN_ID: 22040,
     CURRENCY_GRAPH_URL:
-      'https://graph-node-api.ambrosus.io/subgraphs/name/airdao/astra-test-usd-e'
+      'https://graph-node-api.ambrosus.io/subgraphs/name/airdao/astra-price-test-b'
   }
 };
 

diff --git a/src/features/bridge/context/Bridge.Context.tsx b/src/features/bridge/context/Bridge.Context.tsx
@@ -2,6 +2,7 @@ import { createContextSelector } from '@utils/createContextSelector';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Config as BridgeConfigModel,
+  BridgeDataState,
   FeeData,
   Token
 } from '@lib/bridgeSDK/models/types';
@@ -45,7 +46,8 @@ export const BridgeContext = () => {
   const [destination, setDestination] = useState(DEFAULT_ETH_NETWORK);
   const networkNativeToken = Config.NETWORK_NATIVE_COIN[from.id];
 
-  const [selectedBridgeData, setSelectedBridgeData] = useState(null);
+  const [selectedBridgeData, setSelectedBridgeData] =
+    useState<BridgeDataState | null>(null);
   const [selectedTokenPairs, setSelectedTokenPairs] = useState<Token[] | null>(
     null
   );
@@ -219,6 +221,18 @@ export const BridgeContext = () => {
     return selectedTokenPairs ? selectedTokenPairs[1] : DEFAULT_TOKEN_TO;
   }, [selectedTokenPairs]);
 
+  const decimals = useMemo(
+    () =>
+      fromData.value.id === 'amb'
+        ? selectedTokenDestination.decimals
+        : selectedTokenFrom.decimals,
+    [
+      fromData.value.id,
+      selectedTokenDestination.decimals,
+      selectedTokenFrom.decimals
+    ]
+  );
+
   const processBridge = useCallback(
     async (getOnlyGasFee: boolean, bridgeFee: FeeData) => {
       try {
@@ -227,10 +241,7 @@ export const BridgeContext = () => {
             tokenFrom: selectedTokenFrom,
             tokenTo: selectedTokenDestination,
             selectedAccount: wallet,
-            amountTokens: formatUnits(
-              bridgeFee.amount,
-              selectedTokenFrom.decimals
-            ),
+            amountTokens: formatUnits(bridgeFee.amount, decimals),
             feeData: bridgeFee,
             gasFee: getOnlyGasFee
           };
@@ -255,6 +266,7 @@ export const BridgeContext = () => {
     [
       bridgeConfig,
       bridgeErrorHandler,
+      decimals,
       fromData.value.id,
       selectedTokenDestination,
       selectedTokenFrom,