TW-832: NFT page re-design. Main info

public/_locales/en/messages.json

@@ -3065,6 +3065,12 @@
   "creditCard": {
     "message": "credit card"
   },
+  "creator": {
+    "message": "Creator:"
+  },
+  "creators": {
+    "message": "Creators:"
+  },
   "subscribeToNewsletter": {
     "message": "Subscribe to our Newsletter"
   },

public/_locales/uk/messages.json

@@ -1856,7 +1856,7 @@
       }
     }
   },
-  "showInfo": {
-    "message": "Деталі"
-  }
+  "showInfo": { "message": "Деталі" },
+  "creator": { "message": "Автор:" },
+  "creators": { "message": "Автори:" }
 }

src/app/atoms/FormSubmitButton.tsx

@@ -3,21 +3,20 @@ import React, { FC } from 'react';
 import classNames from 'clsx';
 
 import Spinner from 'app/atoms/Spinner/Spinner';
-import { T } from 'lib/i18n';
+import { setAnotherSelector } from 'lib/analytics';
 
-import { setAnotherSelector } from '../../lib/analytics';
 import { ButtonProps, Button } from './Button';
 
 interface FormSubmitButtonProps extends ButtonProps {
-  searchingRoute?: boolean;
+  keepChildrenWhenLoading?: boolean;
   loading?: boolean;
   small?: boolean;
   textClassNames?: string;
 }
 
 export const FormSubmitButton: FC<FormSubmitButtonProps> = ({
   loading,
-  searchingRoute,
+  keepChildrenWhenLoading,
   small,
   disabled,
   className,
@@ -31,30 +30,20 @@ export const FormSubmitButton: FC<FormSubmitButtonProps> = ({
     paddingBottom: small ? '0.5rem' : '0.625rem',
     ...style
   };
+
   const compoundedClassName = classNames(
-    'relative flex items-center',
-    'rounded border-2 font-semibold h-12',
+    'relative flex items-center justify-center h-12 gap-x-2',
+    'text-primary-orange-lighter font-semibold rounded border-2',
     'transition duration-200 ease-in-out',
-    small ? 'px-6' : 'px-8',
-    small ? 'text-sm' : 'text-base',
-    loading ? 'text-transparent' : 'text-primary-orange-lighter',
+    small ? 'px-6 text-sm' : 'px-8 text-base',
     disabled ? 'bg-gray-400 border-gray-400' : 'bg-primary-orange border-primary-orange',
-    loading || disabled || searchingRoute ? 'opacity-75' : 'opacity-90 hover:opacity-100 focus:opacity-100',
-    loading || disabled || searchingRoute ? 'pointer-events-none' : 'shadow-sm hover:shadow focus:shadow',
+    loading || disabled
+      ? 'opacity-75 pointer-events-none'
+      : 'opacity-90 hover:opacity-100 focus:opacity-100 shadow-sm hover:shadow focus:shadow',
     className
   );
 
   if (loading) {
-    return (
-      <Button className={compoundedClassName} style={compoundedStyle} disabled={disabled} {...rest}>
-        <div className="flex items-center justify-center">
-          <Spinner theme="white" style={{ width: small ? '2rem' : '3rem' }} />
-        </div>
-      </Button>
-    );
-  }
-
-  if (searchingRoute) {
     return (
       <Button
         className={compoundedClassName}
@@ -63,12 +52,8 @@ export const FormSubmitButton: FC<FormSubmitButtonProps> = ({
         {...rest}
         {...setAnotherSelector('loading', '')}
       >
-        <div className="flex items-center justify-center gap-x-2">
-          <Spinner theme="white" style={{ width: small ? '2rem' : '3rem' }} />
-          <span>
-            <T id="searchingTheBestRoute" />
-          </span>
-        </div>
+        <Spinner theme="white" style={{ width: small ? '2rem' : '3rem' }} />
+        {keepChildrenWhenLoading && children}
       </Button>
     );
   }

src/app/pages/Collectibles/CollectibleImage.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+
+import Spinner from 'app/atoms/Spinner/Spinner';
+import { ReactComponent as BrokenImageSvg } from 'app/icons/broken-image.svg';
+import { AssetImage } from 'app/templates/AssetImage';
+import { AssetMetadataBase } from 'lib/metadata';
+
+interface Props {
+  assetSlug: string;
+  metadata?: AssetMetadataBase;
+  large?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const CollectibleImage: FC<Props> = ({ metadata, assetSlug, large, className, style }) => (
+  <AssetImage
+    metadata={metadata}
+    assetSlug={assetSlug}
+    loader={<ImageLoader large={large} />}
+    fallback={<ImageFallback large={large} />}
+    className={className}
+    style={style}
+  />
+);
+
+interface ImageFallbackProps {
+  large?: boolean;
+}
+
+const ImageLoader: FC<ImageFallbackProps> = ({ large }) => (
+  <div className="w-full h-full flex items-center justify-center">
+    <Spinner theme="dark-gray" className={large ? 'w-10' : 'w-8'} />
+  </div>
+);
+
+const ImageFallback: FC<ImageFallbackProps> = ({ large }) => (
+  <div className="w-full h-full flex items-center justify-center">
+    <BrokenImageSvg height={large ? '23%' : '32%'} />
+  </div>
+);

src/app/pages/Collectibles/CollectibleItem.tsx

@@ -13,7 +13,7 @@ import { atomsToTokens } from 'lib/temple/helpers';
 import { useIntersectionDetection } from 'lib/ui/use-intersection-detection';
 import { Link } from 'lib/woozie';
 
-import { CollectibleItemImage } from './CollectibleItemImage';
+import { CollectibleImage } from './CollectibleImage';
 
 interface Props {
   assetSlug: string;
@@ -30,7 +30,7 @@ export const CollectibleItem: FC<Props> = ({ assetSlug, accountPkh, areDetailsSh
   const details = useCollectibleDetailsSelector(assetSlug);
 
   const listing = useMemo(() => {
-    if (!isDefined(details)) return null;
+    if (!details?.listing) return null;
 
     const { floorPrice, currencyId } = details.listing;
     const currency = objktCurrencies[currencyId];
@@ -59,7 +59,7 @@ export const CollectibleItem: FC<Props> = ({ assetSlug, accountPkh, areDetailsSh
         )}
         title={assetName}
       >
-        {displayed && <CollectibleItemImage metadata={metadata} assetSlug={assetSlug} />}
+        {displayed && <CollectibleImage 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">