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"
   },

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/Banner.tsx

@@ -27,11 +27,11 @@ export const Banner: FC<Props> = ({
     <p className="text-xs font-normal text-gray-700 mb-4">{description}</p>
 
     <div className="flex justify-between">
-      <FormSecondaryButton small className="flex-1 mr-4 h-2.25 rounded-md" type="button" onClick={onDisable}>
+      <FormSecondaryButton small className="flex-1 mr-4 h-9 rounded-md" type="button" onClick={onDisable}>
         <span className="capitalize text-base text-center w-full">{t(disableButtonText)}</span>
       </FormSecondaryButton>
 
-      <FormSubmitButton small className="flex-1 h-2.25 rounded-md" onClick={onEnable}>
+      <FormSubmitButton small className="flex-1 h-9 rounded-md" onClick={onEnable}>
         <span className="capitalize text-base text-center w-full whitespace-nowrap">{t(enableButtonText)}</span>
       </FormSubmitButton>
     </div>

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/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}
   >

src/app/atoms/DropdownWrapper.tsx

@@ -5,12 +5,21 @@ 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,
@@ -36,13 +45,10 @@ 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={{
-        backgroundColor: '#1b262c',
-        borderColor: '#212e36',
-        ...style
-      }}
+      style={style}
       {...rest}
     />
   </CSSTransition>

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/hooks/use-collectibles-details-loading.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { loadCollectiblesDetailsActions } from 'app/store/collectibles/actions';
+import { COLLECTIBLES_DETAILS_SYNC_INTERVAL } from 'lib/fixed-times';
+import { useAccount, useChainId, useCollectibleTokens } from 'lib/temple/front';
+import { useInterval } from 'lib/ui/hooks';
+
+export const useCollectiblesDetailsLoading = () => {
+  const chainId = useChainId()!;
+  const { publicKeyHash } = useAccount();
+  const { data: collectibles } = useCollectibleTokens(chainId, publicKeyHash);
+  const dispatch = useDispatch();
+
+  const { slugs, checksum } = useMemo(() => {
+    const slugs = collectibles.map(({ tokenSlug }) => tokenSlug);
+
+    const checksum = slugs.sort().join('+');
+
+    return { slugs, checksum };
+  }, [collectibles]);
+
+  useInterval(
+    () => {
+      if (slugs.length < 1) return;
+
+      dispatch(loadCollectiblesDetailsActions.submit(slugs));
+    },
+    COLLECTIBLES_DETAILS_SYNC_INTERVAL,
+    [checksum, dispatch]
+  );
+};

src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx

@@ -140,9 +140,9 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
   return (
     <DropdownWrapper
       opened={opened}
-      className="origin-top-right p-2"
+      design="dark"
+      className="origin-top-right p-2 min-w-64"
       style={{
-        minWidth: '16rem',
         transform: 'translate(3.25rem, 3.25rem)',
         pointerEvents: 'all'
       }}

src/app/layouts/PageLayout/Header/NetworkSelect/index.tsx

@@ -69,7 +69,7 @@ const NetworkSelect: FC<NetworkSelectProps> = () => {
       placement="bottom-end"
       strategy="fixed"
       popup={({ opened, setOpened }) => (
-        <DropdownWrapper opened={opened} className="origin-top-right p-2">
+        <DropdownWrapper opened={opened} design="dark" className="origin-top-right p-2">
           <div className={styles.scroll}>
             <h2
               className={classNames(

src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx

@@ -102,9 +102,9 @@ export const NewsletterOverlay: FC = () => {
           <div
             className={classNames(
               'flex flex-col justify-center text-center bg-orange-100 shadow-lg bg-no-repeat rounded-md',
-              popup ? 'h-full' : 'h-700',
-              popup ? 'p-4' : 'px-3.5 py-4.5'
+              popup ? 'p-4' : 'px-13 py-18'
             )}
+            style={{ height: popup ? '100%' : '700px' }}
           >
             <Button
               className={classNames(
@@ -134,7 +134,7 @@ export const NewsletterOverlay: FC = () => {
                 <input
                   ref={register()}
                   name="email"
-                  className="w-full max-h-3/25 p-4 rounded-md border text-sm text-gray-910"
+                  className="w-full max-h-13 p-4 rounded-md border text-sm text-gray-910"
                   placeholder="example@mail.com"
                   {...setTestID(NewsletterOverlaySelectors.emailInput)}
                 />

src/app/pages/Collectibles/CollectibleItem.tsx

@@ -1,44 +1,89 @@
-import React, { FC, useCallback, useRef, useState } from 'react';
+import React, { FC, useCallback, useRef, useState, useMemo } from 'react';
 
+import { isDefined } from '@rnw-community/shared';
+import clsx from 'clsx';
+
+import Money from 'app/atoms/Money';
 import { useAppEnv } from 'app/env';
-import { useAssetMetadata, getAssetName } from 'lib/metadata';
+import { useCollectibleDetailsSelector } from 'app/store/collectibles/selectors';
+import { objktCurrencies } from 'lib/apis/objkt';
+import { useAssetMetadata, getAssetName, TEZOS_METADATA } from 'lib/metadata';
+import { useBalance } from 'lib/temple/front';
+import { atomsToTokens } from 'lib/temple/helpers';
 import { useIntersectionDetection } from 'lib/ui/use-intersection-detection';
 import { Link } from 'lib/woozie';
 
 import { CollectibleItemImage } from './CollectibleItemImage';
 
 interface Props {
   assetSlug: string;
-  index: number;
-  itemsLength: number;
-  detailsShown?: boolean;
+  accountPkh: string;
+  areDetailsShown: boolean;
 }
 
-export const CollectibleItem: FC<Props> = ({ assetSlug, detailsShown }) => {
+export const CollectibleItem: FC<Props> = ({ assetSlug, accountPkh, areDetailsShown }) => {
   const { popup } = useAppEnv();
   const metadata = useAssetMetadata(assetSlug);
   const toDisplayRef = useRef<HTMLDivElement>(null);
   const [displayed, setDisplayed] = useState(true);
+  const { data: balance } = useBalance(assetSlug, accountPkh, { displayed });
+  const details = useCollectibleDetailsSelector(assetSlug);
+
+  const listing = useMemo(() => {
+    if (!isDefined(details)) return null;
+
+    const { floorPrice, currencyId } = details.listing;
+    const currency = objktCurrencies[currencyId];
+
+    if (!isDefined(currency)) return null;
+
+    return { floorPrice, decimals: currency.decimals, symbol: currency.symbol };
+  }, [details]);
 
   const handleIntersection = useCallback(() => {
     setDisplayed(true);
   }, [setDisplayed]);
 
   useIntersectionDetection(toDisplayRef, handleIntersection, !displayed);
 
+  const assetName = getAssetName(metadata);
+
   return (
     <Link to={`/collectible/${assetSlug}`} className="flex flex-col border border-gray-300 rounded-lg">
       <div
         ref={toDisplayRef}
-        className="flex items-center justify-center bg-blue-50 rounded-lg overflow-hidden hover:opacity-70"
-        style={{ height: popup ? 106 : 125 }}
+        className={clsx(
+          'relative flex items-center justify-center bg-blue-50 rounded-lg overflow-hidden hover:opacity-70',
+          areDetailsShown && 'border-b border-gray-300',
+          popup ? 'h-26.5' : 'h-31.25'
+        )}
+        title={assetName}
       >
         {displayed && <CollectibleItemImage metadata={metadata} assetSlug={assetSlug} />}
+
+        {areDetailsShown && balance ? (
+          <div className="absolute bottom-1.5 left-1.5 text-2xs text-white leading-none p-1 bg-black bg-opacity-60 rounded">
+            {balance.toFixed()}×
+          </div>
+        ) : null}
       </div>
 
-      {detailsShown && (
-        <div className="mt-2">
-          <p className="text-sm text-gray-910">{getAssetName(metadata)}</p>
+      {areDetailsShown && (
+        <div className="mt-1 mb-2 mx-1.5">
+          <h5 className="text-sm leading-5 text-gray-910 truncate">{assetName}</h5>
+          <div className="text-2xs leading-3 text-gray-600">
+            <span>Floor: </span>
+            {isDefined(listing) ? (
+              <>
+                <Money shortened smallFractionFont={false} tooltip={true} cryptoDecimals={TEZOS_METADATA.decimals}>
+                  {atomsToTokens(listing.floorPrice, listing.decimals)}
+                </Money>
+                <span> {listing.symbol}</span>
+              </>
+            ) : (
+              '-'
+            )}
+          </div>
         </div>
       )}
     </Link>