Merge pull request #115 from multiversx/development

Development

src/components/Filters/SearchFilter.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useSearchParams } from 'react-router-dom';
 
-import { isHash, addressIsBech32 } from 'helpers';
+import { METACHAIN_SHARD_ID } from 'appConstants';
+import { isHash, addressIsBech32, isMetachain } from 'helpers';
 import { faSearch } from 'icons/regular';
 import { TransactionFiltersEnum } from 'types';
 
@@ -11,7 +12,7 @@ export interface SearchFilterType {
   filter: TransactionFiltersEnum;
   placeholder?: string;
   className?: string;
-  validation?: 'address' | 'hash';
+  validation?: 'address' | 'hash' | 'address-or-metachain';
 }
 
 export const SearchFilter = ({
@@ -61,9 +62,26 @@ export const SearchFilter = ({
           updateUrl(searchValue);
         }
       }
-    } else {
-      updateUrl(searchValue);
+      if (validation === 'address-or-metachain') {
+        const isValid =
+          isMetachain(searchValue) || addressIsBech32(searchValue);
+
+        setErrorText(isValid ? '' : 'Invalid Address');
+        if (isValid) {
+          if (isMetachain(searchValue)) {
+            updateUrl(String(METACHAIN_SHARD_ID));
+
+            return;
+          }
+
+          updateUrl(searchValue);
+        }
+      }
+
+      return;
     }
+
+    updateUrl(searchValue);
   };
 
   return (

src/components/Filters/TransactionsFilters/FromColumnFilters.tsx

@@ -38,7 +38,7 @@ export const FromColumnFilters = ({
                   name='sender-filter'
                   filter={TransactionFiltersEnum.sender}
                   placeholder='Address'
-                  validation='address'
+                  validation='address-or-metachain'
                 />
               </div>
             </div>

src/components/FormatValue/FormatUSD/FormatUSD.tsx

@@ -26,7 +26,6 @@ export const FormatUSD = (props: FormatUSDUIType) => {
     showPrefix = true,
     className
   } = props;
-
   const amount = decimals
     ? formatAmount({
         input: String(unprocessedValue),

src/components/Links/CollectionLink/CollectionLink.tsx

@@ -38,6 +38,10 @@ export const CollectionLink = ({ collection, ...rest }: CollectionLinkType) => (
         />
       </Overlay>
     )}
-    <NftBadge type={collection.type} className='ms-2' />
+    <NftBadge
+      type={collection.type}
+      subType={collection.subType}
+      className='ms-2'
+    />
   </>
 );

src/components/NftBadge/NftBadge.tsx

@@ -1,44 +1,30 @@
-import { NftTypeEnum, TokenTypeEnum } from 'types';
+import { Overlay, NftTypeBadge, NftSubTypeBadge } from 'components';
+import {
+  NftSubtypeEnum,
+  NftTypeEnum,
+  TokenTypeEnum,
+  WithClassnameType
+} from 'types';
+
+export interface NftBadgeUIType extends WithClassnameType {
+  type: NftTypeEnum | TokenTypeEnum;
+  subType?: NftSubtypeEnum;
+  showTooltip?: boolean;
+}
 
 export const NftBadge = ({
   type,
+  subType,
+  showTooltip = true,
   className
-}: {
-  type: NftTypeEnum | TokenTypeEnum;
-  className?: string;
-}) => {
-  switch (type) {
-    case NftTypeEnum.SemiFungibleESDT:
-      return (
-        <div
-          className={`badge badge-outline badge-outline-orange ${
-            className ? className : ''
-          }`}
-        >
-          SFT
-        </div>
-      );
-    case NftTypeEnum.NonFungibleESDT:
-      return (
-        <div
-          className={`badge badge-outline badge-outline-yellow ${
-            className ? className : ''
-          }`}
-        >
-          NFT
-        </div>
-      );
-    case NftTypeEnum.MetaESDT:
-      return (
-        <div
-          className={`badge badge-outline badge-outline-green ${
-            className ? className : ''
-          }`}
-        >
-          Meta-ESDT
-        </div>
-      );
-    default:
-      return null;
+}: NftBadgeUIType) => {
+  if (showTooltip && subType) {
+    return (
+      <Overlay title={<NftSubTypeBadge subType={subType} />}>
+        <NftTypeBadge type={type} className={className}></NftTypeBadge>
+      </Overlay>
+    );
   }
+
+  return <NftTypeBadge type={type} className={className}></NftTypeBadge>;
 };

src/components/NftBadge/NftSubTypeBadge.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+
+import { NftSubtypeEnum } from 'types';
+
+export const NftSubTypeBadge = ({
+  subType,
+  className
+}: {
+  subType: NftSubtypeEnum;
+  className?: string;
+}) => {
+  switch (subType) {
+    // NFT Subtypes
+    case NftSubtypeEnum.DynamicSemiFungibleESDT:
+    case NftSubtypeEnum.DynamicNonFungibleESDT:
+    case NftSubtypeEnum.NonFungibleESDTv2:
+    case NftSubtypeEnum.DynamicMetaESDT:
+      return (
+        <div
+          className={classNames(
+            'badge',
+            {
+              'badge-orange text-orange-100':
+                subType === NftSubtypeEnum.DynamicSemiFungibleESDT,
+              'badge-yellow text-orange-100':
+                subType === NftSubtypeEnum.DynamicNonFungibleESDT ||
+                subType === NftSubtypeEnum.NonFungibleESDTv2,
+              'badge-green text-green-100':
+                subType === NftSubtypeEnum.DynamicMetaESDT
+            },
+            className
+          )}
+        >
+          {subType}
+        </div>
+      );
+
+    default:
+      return null;
+  }
+};

src/components/NftBadge/NftTypeBadge.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+
+import { getNftText } from 'helpers';
+import { NftTypeEnum, TokenTypeEnum } from 'types';
+
+export const NftTypeBadge = ({
+  type,
+  className
+}: {
+  type: NftTypeEnum | TokenTypeEnum;
+  className?: string;
+}) => {
+  switch (type) {
+    // default NFT types
+    case NftTypeEnum.SemiFungibleESDT:
+    case NftTypeEnum.NonFungibleESDT:
+    case NftTypeEnum.MetaESDT:
+      return (
+        <div
+          className={classNames(
+            'badge badge-outline',
+            { 'badge-outline-orange': type === NftTypeEnum.SemiFungibleESDT },
+            { 'badge-outline-yellow': type === NftTypeEnum.NonFungibleESDT },
+            { 'badge-outline-green': type === NftTypeEnum.MetaESDT },
+            className
+          )}
+        >
+          {getNftText(type)}
+        </div>
+      );
+
+    default:
+      return null;
+  }
+};

src/components/NftBadge/index.ts

@@ -1 +1,3 @@
 export * from './NftBadge';
+export * from './NftTypeBadge';
+export * from './NftSubTypeBadge';

src/config/config.devnet.ts

@@ -25,11 +25,11 @@ export const multiversxApps = allApps([
   },
   {
     id: 'explorer',
-    url: 'http://devnet-explorer.multiversx.com'
+    url: 'https://devnet-explorer.multiversx.com'
   },
   {
     id: 'xexchange',
-    url: 'http://devnet.xexchange.com'
+    url: 'https://devnet.xexchange.com'
   },
   {
     id: 'xspotlight',

src/config/config.testnet.ts

@@ -25,7 +25,11 @@ export const multiversxApps = allApps([
   },
   {
     id: 'explorer',
-    url: 'http://testnet-explorer.multiversx.com'
+    url: 'https://testnet-explorer.multiversx.com'
+  },
+  {
+    id: 'xexchange',
+    url: 'https://testnet.xexchange.com'
   },
   {
     id: 'xspotlight',

src/helpers/formatValue/formatAmount.ts

@@ -1,6 +1,6 @@
 import { FormatAmountType as SdkDappFormatAmountType } from '@multiversx/sdk-dapp/utils/operations/formatAmount';
 import { stringIsInteger } from '@multiversx/sdk-dapp/utils/validation/stringIsInteger';
-import { MAX_DISPLAY_ZERO_DECIMALS, ZERO } from 'appConstants';
+import { ELLIPSIS, MAX_DISPLAY_ZERO_DECIMALS, ZERO } from 'appConstants';
 import { DECIMALS, DIGITS } from 'config';
 
 interface FormatAmountType extends SdkDappFormatAmountType {
@@ -16,7 +16,8 @@ export function formatAmount({
   addCommas = false
 }: FormatAmountType) {
   if (!stringIsInteger(input, false)) {
-    throw new Error('Invalid input');
+    console.error('Invalid input', input);
+    return ELLIPSIS;
   }
 
   showLastNonZeroDecimal =

src/helpers/getValue/getAccountDelegationDetails.ts

@@ -0,0 +1,53 @@
+import BigNumber from 'bignumber.js';
+
+import { ZERO } from 'appConstants';
+import { AccountDelegationType } from 'types';
+
+export const getAccountDelegationDetails = (
+  delegation: AccountDelegationType[]
+) => {
+  if (delegation && delegation.length > 0) {
+    const bNactive = delegation
+      .map(({ userActiveStake }) => userActiveStake)
+      .reduce((a, b) => new BigNumber(a).plus(b), new BigNumber(ZERO));
+    const bNclaimableRewards = delegation
+      .map(({ claimableRewards }) => claimableRewards ?? ZERO)
+      .reduce((a, b) => new BigNumber(a).plus(b), new BigNumber(ZERO));
+    const undelegatedAmounts = delegation
+      .map(
+        ({ userUndelegatedList }) =>
+          userUndelegatedList?.map(({ amount }) => amount) ?? []
+      )
+      .reduce((a, b) => a.concat(b), []);
+    const bNunstaked = undelegatedAmounts.reduce(
+      (a, b) => new BigNumber(a).plus(b),
+      new BigNumber(ZERO)
+    );
+    const bNunbondable = delegation
+      .map(({ userUnBondable }) => userUnBondable)
+      .reduce((a, b) => new BigNumber(a).plus(b), new BigNumber(ZERO));
+
+    const activePlusUnStaked = bNactive.plus(bNunstaked);
+    const bNlocked = activePlusUnStaked
+      .plus(bNclaimableRewards)
+      .plus(bNunbondable);
+
+    const show = bNlocked.isGreaterThan(0);
+
+    return {
+      active: bNactive,
+      unstaked: bNunstaked.plus(bNunbondable),
+      claimable: bNclaimableRewards,
+      locked: bNlocked,
+      show
+    };
+  }
+
+  return {
+    active: new BigNumber(ZERO),
+    unstaked: new BigNumber(ZERO),
+    claimable: new BigNumber(ZERO),
+    locked: new BigNumber(ZERO),
+    show: false
+  };
+};

src/helpers/getValue/getAccountLegacyDelegationDetails.ts

@@ -0,0 +1,53 @@
+import BigNumber from 'bignumber.js';
+
+import { ZERO } from 'appConstants';
+import { AccountDelegationLegacyType } from 'types';
+
+export const getAccountLegacyDelegationDetails = (
+  delegationLegacy: AccountDelegationLegacyType
+) => {
+  if (delegationLegacy) {
+    const bNactive = new BigNumber(delegationLegacy.userActiveStake ?? ZERO);
+    const bNuserWaitingStake = new BigNumber(
+      delegationLegacy.userWaitingStake ?? ZERO
+    );
+    const bNclaimableRewards = new BigNumber(
+      delegationLegacy.claimableRewards ?? ZERO
+    );
+    const bNunstakedStakeLegacy = new BigNumber(
+      delegationLegacy.userUnstakedStake ?? ZERO
+    );
+    const bNdeferredPaymentLegacy = new BigNumber(
+      delegationLegacy.userDeferredPaymentStake ?? ZERO
+    );
+    const bNwithdrawOnlyStakeLegacy = new BigNumber(
+      delegationLegacy.userWithdrawOnlyStake ?? ZERO
+    );
+
+    const bNunstaked = bNunstakedStakeLegacy.plus(bNdeferredPaymentLegacy);
+    const bNlocked = bNactive
+      .plus(bNuserWaitingStake)
+      .plus(bNclaimableRewards)
+      .plus(bNunstakedStakeLegacy)
+      .plus(bNdeferredPaymentLegacy)
+      .plus(bNwithdrawOnlyStakeLegacy);
+
+    const show = bNlocked.isGreaterThan(0);
+
+    return {
+      active: bNactive,
+      unstaked: bNunstaked,
+      claimable: bNclaimableRewards,
+      locked: bNlocked,
+      show
+    };
+  }
+
+  return {
+    active: new BigNumber(ZERO),
+    unstaked: new BigNumber(ZERO),
+    claimable: new BigNumber(ZERO),
+    locked: new BigNumber(ZERO),
+    show: false
+  };
+};