TW-830: Collectibles Manage dropdown

public/_locales/en/messages.json

@@ -2358,6 +2358,9 @@
     "message": "less",
     "description": "Show less"
   },
+  "showInfo": {
+    "message": "Show info"
+  },
   "recentDestinations": {
     "message": "Recent destinations"
   },
@@ -3049,5 +3052,8 @@
   },
   "creditCard": {
     "message": "credit card"
+  },
+  "notListed": {
+    "message": "Not listed"
   }
 }

public/_locales/uk/messages.json

@@ -1855,5 +1855,8 @@
         "content": "$1"
       }
     }
+  },
+  "showInfo": {
+    "message": "Деталі"
   }
 }

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 { 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';
@@ -15,6 +16,7 @@ export const WithDataLoading: FC<PropsWithChildren> = ({ children }) => {
   useMetadataLoading();
   useTokensLoading();
   useBalancesLoading();
+  useCollectiblesDetailsLoading();
 
   useLongRefreshLoading();
   useAdvertisingLoading();

src/app/atoms/Checkbox.tsx

@@ -6,17 +6,18 @@ 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,
@@ -64,8 +65,8 @@ 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',
+          '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,9 +82,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 return 'border-gray-400';
             }
           })(),
-          containerClassName
+          overrideClassNames || 'h-6 w-6 rounded-md'
         ),
-      [localChecked, localFocused, errored, containerClassName]
+      [localChecked, localFocused, errored]
     );
 
     return (
@@ -101,8 +102,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         />
 
         <OkIcon
-          className={classNames(localChecked ? 'block' : 'hidden', 'h-4 w-4 pointer-events-none stroke-current')}
-          style={{ strokeWidth: 2 }}
+          className={classNames(localChecked ? 'block' : 'hidden', 'pointer-events-none stroke-current')}
+          style={{ strokeWidth: 2, height: '67%', width: '67%' }}
         />
       </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/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 type FormCheckboxProps = CheckboxProps & {
+export interface FormCheckboxProps extends CheckboxProps {
   label?: ReactNode;
   labelDescription?: ReactNode;
   errorCaption?: ReactNode;
   containerClassName?: string;
   labelClassName?: string;
-};
+}
 
 export const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxProps>(
   (

src/app/atoms/ImportTabSwitcher.tsx

@@ -27,13 +27,10 @@ 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',
-                'text-gray-500',
-                'border-b-2',
-                active ? 'border-primary-orange' : 'border-transparent',
-                active ? 'text-primary-orange' : 'hover:text-primary-orange',
+                'text-center cursor-pointer pb-1 pt-2 px-4 border-b-2',
+                'text-gray-500 truncate',
                 'transition ease-in-out duration-300',
-                'truncate'
+                active ? 'border-primary-orange text-primary-orange' : 'border-transparent hover:text-primary-orange'
               )}
             >
               <T id={i18nKey} />

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';
+  theme?: 'primary' | 'white' | 'gray' | 'dark-gray';
 };
 
 const Spinner = memo<SpinnerProps>(({ theme = 'primary', className, ...rest }) => (
@@ -24,6 +24,9 @@ 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';

src/app/atoms/SyncSpinner.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import Spinner from './Spinner/Spinner';
+
+interface Props {
+  className?: string;
+}
+
+export const SyncSpinner: React.FC<Props> = ({ className }) => (
+  <div className={clsx('w-full', className)}>
+    <Spinner theme="gray" className="w-16 m-auto" />
+  </div>
+);

src/app/atoms/index.ts

@@ -16,7 +16,7 @@ export { FormSecondaryButton } from './FormSecondaryButton';
 export type { FormCheckboxProps } from './FormCheckbox';
 export { FormCheckbox } from './FormCheckbox';
 
-export { ActivitySpinner } from './ActivitySpinner';
+export { SyncSpinner } from './SyncSpinner';
 
 export { NoSpaceField } from './NoSpaceField';
 

src/app/atoms/useTabSlug.tsx

@@ -4,9 +4,11 @@ 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]);
 };

src/app/hooks/use-collectibles-details-loading.ts

@@ -0,0 +1,17 @@
+import { useDispatch } from 'react-redux';
+
+import { loadCollectiblesDetailsActions } from 'app/store/collectibles/actions';
+import { COLLECTIBLES_DETAILS_SYNC_INTERVAL } from 'lib/fixed-times';
+import { useAccount } from 'lib/temple/front';
+import { useInterval } from 'lib/ui/hooks';
+
+export const useCollectiblesDetailsLoading = () => {
+  const { publicKeyHash } = useAccount();
+  const dispatch = useDispatch();
+
+  useInterval(
+    () => void dispatch(loadCollectiblesDetailsActions.submit(publicKeyHash)),
+    COLLECTIBLES_DETAILS_SYNC_INTERVAL,
+    [publicKeyHash, dispatch]
+  );
+};

src/app/layouts/PageLayout.tsx

@@ -1,4 +1,14 @@
-import React, { ComponentProps, FC, ReactNode, Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  ComponentProps,
+  FC,
+  ReactNode,
+  Suspense,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react';
 
 import classNames from 'clsx';
 
@@ -96,6 +106,8 @@ type ToolbarProps = {
   attention?: boolean;
 };
 
+export let ToolbarElement: HTMLDivElement | null = null;
+
 const Toolbar: FC<ToolbarProps> = ({
   pageTitle,
   hasBackAction = true,
@@ -137,7 +149,7 @@ const Toolbar: FC<ToolbarProps> = ({
 
   const [sticked, setSticked] = useState(false);
 
-  const rootRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement | null>();
 
   useEffect(() => {
     const toolbarEl = rootRef.current;
@@ -157,9 +169,14 @@ const Toolbar: FC<ToolbarProps> = ({
     return undefined;
   }, [setSticked]);
 
+  const updateRootRef = useCallback((elem: HTMLDivElement | null) => {
+    rootRef.current = elem;
+    ToolbarElement = elem;
+  }, []);
+
   return (
     <div
-      ref={rootRef}
+      ref={updateRootRef}
       className={classNames(
         'sticky z-20 flex items-center py-2 px-4',
         fullPage && !sticked && 'rounded-t',

src/app/layouts/TabsPageLayout.tsx

@@ -57,8 +57,9 @@ export const TabsPageLayout: FC<Props> = ({ tabs, icon, title, description }) =>
                     'flex1 w-full text-center cursor-pointer pb-2',
                     'border-b-2 text-gray-700 text-lg truncate',
                     tabs.length === 1 && 'mx-20',
-                    active ? 'border-primary-orange' : 'border-transparent',
-                    active ? 'text-primary-orange' : 'hover:text-primary-orange',
+                    active
+                      ? 'border-primary-orange text-primary-orange'
+                      : 'border-transparent hover:text-primary-orange',
                     'transition ease-in-out duration-300'
                   )}
                   testID={tab.testID}