TW-826: [revert] NFT update. Collectibles (#933)

* Revert "TW-830: Collectibles Manage dropdown (#925)" This reverts commit 998660c. * Revert "TW-828: Collectibles grid layout (#922)" This reverts commit 13ac5d7.
madfish-solutions · Jul 12, 2023 · aa8ec4c · aa8ec4c
1 parent 8baf012
commit aa8ec4c
Show file tree

Hide file tree

Showing 63 changed files with 619 additions and 993 deletions.
diff --git a/package.json b/package.json
@@ -181,7 +181,6 @@
     "ts-node": "^10.4.0",
     "ts-prune": "^0.10.3",
     "typescript": "4.5.5",
-    "use-custom-compare": "^1.4.0",
     "use-debounce": "7.0.1",
     "use-force-update": "1.0.7",
     "use-onclickoutside": "0.4.1",

diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
@@ -1856,7 +1856,7 @@
     "message": "Es wurden keine passenden dApps gefunden"
   },
   "thousandFormat": {
-    "message": "$thousand$K",
+    "message": "$thousand$k",
     "placeholders": {
       "thousand": {
         "content": "$1"

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -2161,7 +2161,7 @@
     "message": "No matching dApps were found"
   },
   "thousandFormat": {
-    "message": "$thousand$K",
+    "message": "$thousand$k",
     "placeholders": {
       "thousand": {
         "content": "$1"
@@ -2370,9 +2370,6 @@
     "message": "less",
     "description": "Show less"
   },
-  "showInfo": {
-    "message": "Show info"
-  },
   "recentDestinations": {
     "message": "Recent destinations"
   },

diff --git a/public/_locales/pt/messages.json b/public/_locales/pt/messages.json
@@ -1856,7 +1856,7 @@
     "message": "Não foram encontrados dApps correspondentes"
   },
   "thousandFormat": {
-    "message": "$thousand$K",
+    "message": "$thousand$k",
     "placeholders": {
       "thousand": {
         "content": "$1"

diff --git a/public/_locales/tr/messages.json b/public/_locales/tr/messages.json
@@ -1856,7 +1856,7 @@
     "message": "Eşleşen dApps bulunamadı"
   },
   "thousandFormat": {
-    "message": "$thousand$K",
+    "message": "$thousand$k",
     "placeholders": {
       "thousand": {
         "content": "$1"

diff --git a/public/_locales/uk/messages.json b/public/_locales/uk/messages.json
@@ -1855,8 +1855,5 @@
         "content": "$1"
       }
     }
-  },
-  "showInfo": {
-    "message": "Деталі"
   }
 }
diff --git a/src/app/WithDataLoading.tsx b/src/app/WithDataLoading.tsx
@@ -3,7 +3,6 @@ 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 { useLongRefreshLoading } from 'app/hooks/use-long-refresh-loading.hook';
 import { useMetadataLoading } from 'app/hooks/use-metadata-loading';
 import { useTokensLoading } from 'app/hooks/use-tokens-loading';
@@ -16,7 +15,6 @@ export const WithDataLoading: FC<PropsWithChildren> = ({ children }) => {
   useMetadataLoading();
   useTokensLoading();
   useBalancesLoading();
-  useCollectiblesDetailsLoading();
 
   useLongRefreshLoading();
   useAdvertisingLoading();

diff --git a/src/app/atoms/ActivitySpinner.tsx b/src/app/atoms/ActivitySpinner.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import Spinner from './Spinner/Spinner';
+
+interface ActivitySpinnerProps {
+  height?: string;
+}
+
+export const ActivitySpinner: React.FC<ActivitySpinnerProps> = ({ height = '21px' }) => (
+  <div className="w-full flex items-center justify-center overflow-hidden" style={{ height }}>
+    <Spinner theme="gray" className="w-16" />
+  </div>
+);
diff --git a/src/app/atoms/Checkbox.tsx b/src/app/atoms/Checkbox.tsx
@@ -6,18 +6,17 @@ 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 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;
-}
+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;
+  };
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {
-      overrideClassNames,
+      containerClassName,
       errored = false,
       className,
       checked,
@@ -65,8 +64,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const classNameMemo = useMemo(
       () =>
         classNames(
-          'flex justify-center items-center flex-shrink-0',
-          'text-white border overflow-hidden',
+          'flex justify-center items-center h-6 w-6 flex-shrink-0',
+          'text-white border rounded-md overflow-hidden',
           'transition ease-in-out duration-200 disable-outline-for-click',
           localChecked ? 'bg-primary-orange' : 'bg-black-40',
           localFocused && 'shadow-outline',
@@ -82,9 +81,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 return 'border-gray-400';
             }
           })(),
-          overrideClassNames || 'h-6 w-6 rounded-md'
+          containerClassName
         ),
-      [localChecked, localFocused, errored]
+      [localChecked, localFocused, errored, containerClassName]
     );
 
     return (
@@ -102,8 +101,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         />
 
         <OkIcon
-          className={classNames(localChecked ? 'block' : 'hidden', 'pointer-events-none stroke-current')}
-          style={{ strokeWidth: 2, height: '67%', width: '67%' }}
+          className={classNames(localChecked ? 'block' : 'hidden', 'h-4 w-4 pointer-events-none stroke-current')}
+          style={{ strokeWidth: 2 }}
         />
       </div>
     );

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

diff --git a/src/app/atoms/DonationBanner/DonationBanner.tsx b/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-25"
+    className="flex flex-col items-center justify-center rounded h-7 bg-blue-150 max-w-100"
     href={DONATE_MAD_FISH_URL}
     testID={DonationBannerSelectors.ukraineDonationBanner}
   >

diff --git a/src/app/atoms/DropdownWrapper.tsx b/src/app/atoms/DropdownWrapper.tsx
@@ -5,21 +5,12 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 
 type DropdownWrapperProps = HTMLAttributes<HTMLDivElement> & {
   opened: boolean;
-  design?: Design;
   hiddenOverflow?: boolean;
   scaleAnimation?: boolean;
 };
 
-const DESIGN_CLASS_NAMES = {
-  light: 'bg-white border-gray-300',
-  dark: 'bg-gray-910 border-gray-850'
-};
-
-type Design = keyof typeof DESIGN_CLASS_NAMES;
-
 const DropdownWrapper: FC<DropdownWrapperProps> = ({
   opened,
-  design = 'light',
   hiddenOverflow = true,
   scaleAnimation = true,
   className,
@@ -45,10 +36,13 @@ const DropdownWrapper: FC<DropdownWrapperProps> = ({
         'mt-2 border rounded-md shadow-xl',
         hiddenOverflow && 'overflow-hidden',
         process.env.TARGET_BROWSER === 'firefox' && 'grayscale-firefox-fix',
-        DESIGN_CLASS_NAMES[design],
         className
       )}
-      style={style}
+      style={{
+        backgroundColor: '#1b262c',
+        borderColor: '#212e36',
+        ...style
+      }}
       {...rest}
     />
   </CSSTransition>

diff --git a/src/app/atoms/FormCheckbox.tsx b/src/app/atoms/FormCheckbox.tsx
@@ -5,13 +5,13 @@ import classNames from 'clsx';
 import Checkbox, { CheckboxProps } from 'app/atoms/Checkbox';
 import { AnalyticsEventCategory, setTestID, useAnalytics } from 'lib/analytics';
 
-export interface FormCheckboxProps extends CheckboxProps {
+export type FormCheckboxProps = CheckboxProps & {
   label?: ReactNode;
   labelDescription?: ReactNode;
   errorCaption?: ReactNode;
   containerClassName?: string;
   labelClassName?: string;
-}
+};
 
 export const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxProps>(
   (

diff --git a/src/app/atoms/ImportTabSwitcher.tsx b/src/app/atoms/ImportTabSwitcher.tsx
@@ -27,10 +27,13 @@ const ImportTabSwitcher: React.FC<ImportTabSwitcherProps> = ({ className, tabs,
           <Link key={slug} to={`${urlPrefix}/${slug}`} replace>
             <div
               className={classNames(
-                'text-center cursor-pointer pb-1 pt-2 px-4 border-b-2',
-                'text-gray-500 truncate',
+                'text-center cursor-pointer pb-1 pt-2 px-4',
+                'text-gray-500',
+                'border-b-2',
+                active ? 'border-primary-orange' : 'border-transparent',
+                active ? 'text-primary-orange' : 'hover:text-primary-orange',
                 'transition ease-in-out duration-300',
-                active ? 'border-primary-orange text-primary-orange' : 'border-transparent hover:text-primary-orange'
+                'truncate'
               )}
             >
               <T id={i18nKey} />

diff --git a/src/app/atoms/Money.tsx b/src/app/atoms/Money.tsx
@@ -68,7 +68,7 @@ const Money = memo<MoneyProps>(
       );
     }
 
-    if (!fiat && !shortened && decimalsLength > cryptoDecimals) {
+    if (!fiat && decimalsLength > cryptoDecimals && !shortened) {
       return (
         <MoneyWithoutFormat
           tooltip={tooltip}

diff --git a/src/app/atoms/Spinner/Spinner.tsx b/src/app/atoms/Spinner/Spinner.tsx
@@ -5,7 +5,7 @@ import classNames from 'clsx';
 import styles from './Spinner.module.css';
 
 type SpinnerProps = HTMLAttributes<HTMLDivElement> & {
-  theme?: 'primary' | 'white' | 'gray' | 'dark-gray';
+  theme?: 'primary' | 'white' | 'gray';
 };
 
 const Spinner = memo<SpinnerProps>(({ theme = 'primary', className, ...rest }) => (
@@ -24,9 +24,6 @@ const Spinner = memo<SpinnerProps>(({ theme = 'primary', className, ...rest }) =
               case 'white':
                 return 'bg-white shadow-sm';
 
-              case 'dark-gray':
-                return 'bg-gray-600';
-
               case 'gray':
               default:
                 return 'bg-gray-400';

diff --git a/src/app/atoms/SyncSpinner.tsx b/src/app/atoms/SyncSpinner.tsx
diff --git a/src/app/atoms/index.ts b/src/app/atoms/index.ts
@@ -16,7 +16,7 @@ export { FormSecondaryButton } from './FormSecondaryButton';
 export type { FormCheckboxProps } from './FormCheckbox';
 export { FormCheckbox } from './FormCheckbox';
 
-export { SyncSpinner } from './SyncSpinner';
+export { ActivitySpinner } from './ActivitySpinner';
 
 export { NoSpaceField } from './NoSpaceField';
 

diff --git a/src/app/atoms/useTabSlug.tsx b/src/app/atoms/useTabSlug.tsx
@@ -4,11 +4,9 @@ import { useLocation } from 'lib/woozie';
 
 export const useTabSlug = () => {
   const { search } = useLocation();
-
   const tabSlug = useMemo(() => {
     const usp = new URLSearchParams(search);
     return usp.get('tab');
   }, [search]);
-
   return useMemo(() => tabSlug, [tabSlug]);
 };
diff --git a/src/app/hooks/use-collectibles-details-loading.ts b/src/app/hooks/use-collectibles-details-loading.ts
diff --git a/src/app/icons/broken-image.svg b/src/app/icons/broken-image.svg
diff --git a/src/app/icons/editing.svg b/src/app/icons/editing.svg
diff --git a/src/app/icons/manage.svg b/src/app/icons/manage.svg