TW-760: [epic] NFT update

e2e/src/features/manage-tokens-collectibles.feature

@@ -3,7 +3,8 @@ Feature: Manage tokens + collectibles
 
   Scenario: As a user, I'd like to add tokens and collectibles to my wallet [Positive]
     Given I have imported an existing account
-    And I press Manage Button on the Assets page
+    And I press Manage Dropdown Button on the Assets page
+    And I press Manage Dropdown/Manage Button on the Assets page
 
     And I am on the ManageAssetsTokens page
     And I press Add Asset Button on the Manage Assets(Tokens) page

e2e/src/page-objects/pages/token.page.ts

@@ -1,11 +1,10 @@
 import { HomeSelectors } from 'src/app/pages/Home/Home.selectors';
-import { TokenPageSelectors } from 'src/app/pages/Home/Token-page.selectors';
+import { TokenPageSelectors } from 'src/app/pages/Home/OtherComponents/TokenPage.selectors';
 
+import { Page } from 'e2e/src/classes/page.class';
+import { createPageElement, findElement } from 'e2e/src/utils/search.utils';
 import { SHORT_TIMEOUT } from 'e2e/src/utils/timing.utils';
 
-import { Page } from '../../classes/page.class';
-import { createPageElement, findElement } from '../../utils/search.utils';
-
 export class TokenPage extends Page {
   pageName = createPageElement(TokenPageSelectors.pageName);
   tokenName = createPageElement(TokenPageSelectors.pageName);

package.json

@@ -32,6 +32,7 @@
     "@dicebear/avatars": "4.2.5",
     "@dicebear/avatars-bottts-sprites": "4.2.5",
     "@dicebear/avatars-jdenticon-sprites": "4.2.5",
+    "@google/model-viewer": "3.1.1",
     "@jitsu/sdk-js": "madfish-solutions/jitsu-js#87c49de334f5747952f7beda573b95ceb5d86903",
     "@ledgerhq/errors": "^6",
     "@ledgerhq/hw-transport": "6.27.8",
@@ -177,6 +178,7 @@
     "swr": "1.3.0",
     "tailwindcss": "2.2.19",
     "terser-webpack-plugin": "5.3.6",
+    "three": "^0.151.2",
     "timers-browserify": "^2.0.12",
     "tippy.js": "6.2.6",
     "ts-action": "^11.0.0",

public/_locales/de/messages.json

@@ -1855,7 +1855,7 @@
     "message": "Es wurden keine passenden dApps gefunden"
   },
   "thousandFormat": {
-    "message": "$thousand$k",
+    "message": "$thousand$K",
     "placeholders": {
       "thousand": {
         "content": "$1"

public/_locales/en/messages.json

@@ -702,6 +702,9 @@
   "send": {
     "message": "Send"
   },
+  "floorPrice": { "message": "Floor" },
+  "sellFor": { "message": "Sell for" },
+  "noOffersYet": { "message": "No offers yet" },
   "get": {
     "message": "Get"
   },
@@ -1689,12 +1692,9 @@
   "activity": {
     "message": "Activity"
   },
-  "manage": {
-    "message": "Manage"
-  },
-  "manageTokens": {
-    "message": "Manage Tokens"
-  },
+  "manage": { "message": "Manage" },
+  "manageTokens": { "message": "Manage Tokens" },
+  "manageAssetsList": { "message": "Manage assets list" },
   "noItemsFound": {
     "message": "No items found"
   },
@@ -2119,6 +2119,7 @@
   "blockExplorer": {
     "message": "Blockchain explorer"
   },
+  "viewOnBlockExplorer": { "message": "View on block explorer" },
   "specifyTokenId": {
     "message": "Specify token ID"
   },
@@ -2153,7 +2154,7 @@
     "message": "No matching dApps were found"
   },
   "thousandFormat": {
-    "message": "$thousand$k",
+    "message": "$thousand$K",
     "placeholders": {
       "thousand": {
         "content": "$1"
@@ -2362,6 +2363,8 @@
     "message": "less",
     "description": "Show less"
   },
+  "showInfo": { "message": "Show info" },
+  "hideZeroBalance": { "message": "Hide 0 balance" },
   "recentDestinations": {
     "message": "Recent destinations"
   },
@@ -3054,12 +3057,25 @@
   "creditCard": {
     "message": "credit card"
   },
+  "creator": {
+    "message": "Creator:"
+  },
+  "creators": {
+    "message": "Creators:"
+  },
   "subscribeToNewsletter": {
     "message": "Subscribe to our Newsletter"
   },
   "keepLatestNews": {
     "message": "Keep up with the latest news from Madfish"
   },
+  "unknownError": {
+    "message": "Unknown error"
+  },
+  "cannotSellToYourself": { "message": "Cannot sell to yourself" },
+  "selectedAccountCannotSignTx": { "message": "Selected account cannot sign transactions" },
+  "attributes": { "message": "Attributes" },
+  "properties": { "message": "Properties" },
   "viewAds": {
     "message": "View Ads"
   },

public/_locales/en_GB/messages.json

@@ -1362,12 +1362,9 @@
   "activity": {
     "message": "Activity"
   },
-  "manage": {
-    "message": "Manage"
-  },
-  "manageTokens": {
-    "message": "Manage Tokens"
-  },
+  "manage": { "message": "Manage" },
+  "manageTokens": { "message": "Manage Tokens" },
+  "manageAssetsList": { "message": "Manage assets list" },
   "noAssetsFound": {
     "message": "No assets found"
   },
@@ -1788,6 +1785,9 @@
   "keepLatestNews": {
     "message": "Keep up with the latest news from Madfish"
   },
+  "unknownError": {
+    "message": "Unknown error"
+  },
   "viewAds": {
     "message": "View Ads"
   },

public/_locales/pt/messages.json

@@ -1855,7 +1855,7 @@
     "message": "Não foram encontrados dApps correspondentes"
   },
   "thousandFormat": {
-    "message": "$thousand$k",
+    "message": "$thousand$K",
     "placeholders": {
       "thousand": {
         "content": "$1"

public/_locales/tr/messages.json

@@ -1855,7 +1855,7 @@
     "message": "Eşleşen dApps bulunamadı"
   },
   "thousandFormat": {
-    "message": "$thousand$k",
+    "message": "$thousand$K",
     "placeholders": {
       "thousand": {
         "content": "$1"

public/_locales/uk/messages.json

@@ -1365,12 +1365,9 @@
   "activity": {
     "message": "Активність"
   },
-  "manage": {
-    "message": "Керувати"
-  },
-  "manageAssets": {
-    "message": "Керувати Активами"
-  },
+  "manage": { "message": "Керувати" },
+  "manageTokens": { "message": "Керувати Токенами" },
+  "manageAssetsList": { "message": "Керувати Активами" },
   "noAssetsFound": {
     "message": "Активів не знайдено"
   },
@@ -1731,6 +1728,7 @@
   "blockExplorer": {
     "message": "Експлорер блокчейна"
   },
+  "viewOnBlockExplorer": { "message": "Відкрити в експлорері" },
   "game": {
     "message": "Гра"
   },
@@ -1854,5 +1852,12 @@
         "content": "$1"
       }
     }
+  },
+  "showInfo": { "message": "Деталі" },
+  "hideZeroBalance": { "message": "Сховати нульові баланси" },
+  "creator": { "message": "Автор:" },
+  "creators": { "message": "Автори:" },
+  "unknownError": {
+    "message": "Невідома помилка"
   }
 }

src/app/ConfirmPage.tsx

@@ -392,7 +392,7 @@ const ConfirmDAppForm: FC = () => {
           <div className="w-1/2 pr-2">
             <FormSecondaryButton
               type="button"
-              className="justify-center w-full"
+              className="w-full"
               loading={declining}
               onClick={handleDeclineClick}
               testID={content.declineActionTestID}

src/app/WithDataLoading.tsx

@@ -3,6 +3,7 @@ import React, { FC, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { useAdvertisingLoading } from 'app/hooks/use-advertising.hook';
+import { useCollectiblesDetailsLoading } from 'app/hooks/use-collectibles-details-loading';
 import { useTokensApyLoading } from 'app/hooks/use-load-tokens-apy.hook';
 import { useLongRefreshLoading } from 'app/hooks/use-long-refresh-loading.hook';
 import { useMetadataLoading } from 'app/hooks/use-metadata-loading';
@@ -11,10 +12,14 @@ import { useTokensLoading } from 'app/hooks/use-tokens-loading';
 import { loadSwapDexesAction, loadSwapTokensAction } from 'app/store/swap/actions';
 import { useBalancesLoading } from 'lib/temple/front/load-balances';
 
+import { useMetadataRefresh } from './hooks/use-metadata-refresh';
+
 export const WithDataLoading: FC<PropsWithChildren> = ({ children }) => {
-  useMetadataLoading();
   useTokensLoading();
+  useMetadataLoading();
+  useMetadataRefresh();
   useBalancesLoading();
+  useCollectiblesDetailsLoading();
 
   useLongRefreshLoading();
   useAdvertisingLoading();

src/app/atoms/Banner.tsx

@@ -32,7 +32,7 @@ export const Banner: FC<Props> = ({ title, description, enableButton, disableBut
     <div className="flex flex-wrap gap-x-4 gap-y-2">
       <FormSecondaryButton
         small
-        className="flex-1 h-2.25 rounded-md"
+        className="flex-1 h-9 rounded-md"
         onClick={disableButton.onClick}
         testID={disableButton.testID}
         testIDProperties={disableButton.testIDProperties}
@@ -44,7 +44,7 @@ export const Banner: FC<Props> = ({ title, description, enableButton, disableBut
 
       <FormSubmitButton
         small
-        className="flex-1 h-2.25 rounded-md"
+        className="flex-1 h-9 rounded-md"
         onClick={enableButton.onClick}
         testID={enableButton.testID}
         testIDProperties={enableButton.testIDProperties}

src/app/atoms/Checkbox.tsx

@@ -1,22 +1,23 @@
 import React, { forwardRef, InputHTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 
 import { ReactComponent as OkIcon } from 'app/icons/ok.svg';
 import { TestIDProps, setTestID, useAnalytics, AnalyticsEventCategory } from 'lib/analytics';
 import { blurHandler, checkedHandler, focusHandler } from 'lib/ui/inputHandlers';
 
-export type CheckboxProps = TestIDProps &
-  Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'className' | 'onFocus' | 'onBlur' | 'onClick'> & {
-    containerClassName?: string;
-    errored?: boolean;
-    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-  };
+export interface CheckboxProps
+  extends TestIDProps,
+    Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'className' | 'onFocus' | 'onBlur' | 'onClick'> {
+  overrideClassNames?: string;
+  errored?: boolean;
+  onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {
-      containerClassName,
+      overrideClassNames,
       errored = false,
       className,
       checked,
@@ -63,9 +64,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     const classNameMemo = useMemo(
       () =>
-        classNames(
-          'flex justify-center items-center h-6 w-6 flex-shrink-0',
-          'text-white border rounded-md overflow-hidden',
+        clsx(
+          'flex justify-center items-center flex-shrink-0',
+          'text-white border overflow-hidden',
           'transition ease-in-out duration-200 disable-outline-for-click',
           localChecked ? 'bg-primary-orange' : 'bg-black-40',
           localFocused && 'shadow-outline',
@@ -81,17 +82,17 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 return 'border-gray-400';
             }
           })(),
-          containerClassName
+          overrideClassNames || 'h-6 w-6 rounded-md'
         ),
-      [localChecked, localFocused, errored, containerClassName]
+      [localChecked, localFocused, errored, overrideClassNames]
     );
 
     return (
       <div className={classNameMemo}>
         <input
           ref={ref}
           type="checkbox"
-          className={classNames('sr-only', className)}
+          className={clsx('sr-only', className)}
           checked={localChecked}
           onChange={handleChange}
           onFocus={handleFocus}
@@ -101,8 +102,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         />
 
         <OkIcon
-          className={classNames(localChecked ? 'block' : 'hidden', 'h-4 w-4 pointer-events-none stroke-current')}
-          style={{ strokeWidth: 2 }}
+          className={clsx('h-4/6 w-4/6 stroke-2 stroke-current pointer-events-none', localChecked ? 'block' : 'hidden')}
         />
       </div>
     );

src/app/atoms/Divider.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import clsx from 'clsx';
+
 interface DividerProps {
   style?: React.CSSProperties;
   className?: string;
@@ -8,12 +10,10 @@ interface DividerProps {
 const Divider: FC<DividerProps> = ({ style, className }) => (
   <div
     style={{
-      width: '100%',
       height: '1px',
-      backgroundColor: '#E2E8F0',
       ...style
     }}
-    className={className}
+    className={clsx('w-full bg-gray-300', className)}
   />
 );
 

src/app/atoms/DonationBanner/DonationBanner.tsx

@@ -10,7 +10,7 @@ const DONATE_MAD_FISH_URL = 'https://donate.mad.fish';
 
 export const DonationBanner: FC = () => (
   <Anchor
-    className="flex flex-col items-center justify-center rounded h-7 bg-blue-150 max-w-100"
+    className="flex flex-col items-center justify-center rounded h-7 bg-blue-150 max-w-25"
     href={DONATE_MAD_FISH_URL}
     testID={DonationBannerSelectors.ukraineDonationBanner}
   >