TW-838 Finihes adult nft

src/app/hooks/use-metadata-loading.ts

@@ -10,7 +10,7 @@ import {
 } from 'app/store/tokens-metadata/actions';
 import { useTokensMetadataSelector } from 'app/store/tokens-metadata/selectors';
 import { METADATA_SYNC_INTERVAL } from 'lib/fixed-times';
-import { useChainId, useTezos } from 'lib/temple/front';
+import { useAccount, useChainId, useTezos } from 'lib/temple/front';
 import { useAllStoredTokensSlugs } from 'lib/temple/front/assets';
 import { TempleChainId } from 'lib/temple/types';
 import { useInterval } from 'lib/ui/hooks';
@@ -19,6 +19,7 @@ export const useMetadataLoading = () => {
   const chainId = useChainId(true)!;
   const dispatch = useDispatch();
   const tezos = useTezos();
+  const { publicKeyHash: accountPublicKeyHash } = useAccount();
 
   const tokensMetadata = useTokensMetadataSelector();
 
@@ -45,9 +46,9 @@ export const useMetadataLoading = () => {
 
       const rpcUrl = tezos.rpc.getRpcUrl();
 
-      dispatch(loadTokensMetadataAction({ rpcUrl, slugs: slugsWithoutMetadata }));
+      dispatch(loadTokensMetadataAction({ rpcUrl, slugs: slugsWithoutMetadata, accountPublicKeyHash }));
     },
     METADATA_SYNC_INTERVAL,
-    [tezos, slugsWithoutMetadata]
+    [tezos, slugsWithoutMetadata, accountPublicKeyHash]
   );
 };

src/app/pages/Collectibles/CollectibleItem.tsx

@@ -6,14 +6,15 @@ import clsx from 'clsx';
 import Money from 'app/atoms/Money';
 import { useAppEnv } from 'app/env';
 import { useCollectibleDetailsSelector } from 'app/store/collectibles/selectors';
+import { useTokenMetadataSelector } from 'app/store/tokens-metadata/selectors';
 import { objktCurrencies } from 'lib/apis/objkt';
-import { useAssetMetadata, getAssetName, TEZOS_METADATA } from 'lib/metadata';
+import { 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';
+import { CollectibleItemImage } from './CollectibleItemImage/CollectibleItemImage';
 
 interface Props {
   assetSlug: string;
@@ -23,7 +24,7 @@ interface Props {
 
 export const CollectibleItem: FC<Props> = ({ assetSlug, accountPkh, areDetailsShown }) => {
   const { popup } = useAppEnv();
-  const metadata = useAssetMetadata(assetSlug);
+  const metadata = useTokenMetadataSelector(assetSlug);
   const toDisplayRef = useRef<HTMLDivElement>(null);
   const [displayed, setDisplayed] = useState(true);
   const { data: balance } = useBalance(assetSlug, accountPkh, { displayed });

src/app/pages/Collectibles/CollectibleItemImage/CollectibleItemImage.tsx

@@ -0,0 +1,46 @@
+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 { TokenMetadata } from 'lib/metadata';
+
+import Blur from './bg.png';
+
+interface Props {
+  assetSlug: string;
+  metadata?: TokenMetadata;
+}
+
+export const CollectibleItemImage: FC<Props> = ({ metadata, assetSlug }) => {
+  if (metadata?.isAdultContent) {
+    return (
+      <div className="flex justify-center items-center h-full w-full">
+        <img src={Blur} alt="Adult content" className="h-full w-full" />
+        <svg className="absolute z-10" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+          <path
+            stroke="#718096"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M18.827 18.827a4.002 4.002 0 0 1-6.636-1.23 4 4 0 0 1 .982-4.424M23.92 23.92A13.427 13.427 0 0 1 16 26.667C6.667 26.667 1.334 16 1.334 16A24.6 24.6 0 0 1 8.08 8.08l15.84 15.84ZM13.2 5.653a12.159 12.159 0 0 1 2.8-.32C25.334 5.333 30.667 16 30.667 16a24.666 24.666 0 0 1-2.88 4.253L13.2 5.653ZM1.333 1.333l29.334 29.334"
+          />
+        </svg>
+      </div>
+    );
+  }
+
+  return <AssetImage metadata={metadata} assetSlug={assetSlug} loader={<ImageLoader />} fallback={<ImageFallback />} />;
+};
+
+const ImageLoader: FC = () => (
+  <div className="w-full h-full flex items-center justify-center">
+    <Spinner theme="dark-gray" className="w-8" />
+  </div>
+);
+
+const ImageFallback: FC = () => (
+  <div className="w-full h-full flex items-center justify-center">
+    <BrokenImageSvg height="32%" />
+  </div>
+);

src/app/pages/Collectibles/CollectiblePage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import BigNumber from 'bignumber.js';
 import classNames from 'clsx';
@@ -9,19 +9,24 @@ import Divider from 'app/atoms/Divider';
 import HashShortView from 'app/atoms/HashShortView';
 import { ReactComponent as CopyIcon } from 'app/icons/copy.svg';
 import PageLayout from 'app/layouts/PageLayout';
+import { useTokenMetadataSelector } from 'app/store/tokens-metadata/selectors';
 import { AssetIcon } from 'app/templates/AssetIcon';
 import { fromFa2TokenSlug } from 'lib/assets/utils';
 import { T } from 'lib/i18n';
-import { useAssetMetadata, getAssetName } from 'lib/metadata';
+import { getAssetName } from 'lib/metadata';
 import { useAccount, useBalance } from 'lib/temple/front';
 import useCopyToClipboard from 'lib/ui/useCopyToClipboard';
 import { navigate } from 'lib/woozie';
 
+import Blur from './CollectibleItemImage/bg.png';
+
 interface Props {
   assetSlug: string;
 }
 
 const CollectiblePage: FC<Props> = ({ assetSlug }) => {
+  const [isShowBlur, setIsShowBlur] = useState(true);
+
   const [assetContract, assetId] = useMemo(
     () => [fromFa2TokenSlug(assetSlug).contract, new BigNumber(fromFa2TokenSlug(assetSlug).id)],
     [assetSlug]
@@ -34,16 +39,46 @@ const CollectiblePage: FC<Props> = ({ assetSlug }) => {
   });
 
   const { copy } = useCopyToClipboard();
-  const collectibleData = useAssetMetadata(assetSlug);
+  const collectibleData = useTokenMetadataSelector(assetSlug);
 
   const collectibleName = getAssetName(collectibleData);
 
+  const handleTapToRevealClick = () => setIsShowBlur(false);
+
   return (
     <PageLayout pageTitle={collectibleName}>
       <div style={{ maxWidth: '360px', margin: 'auto' }} className="text-center pb-4">
         <div className={classNames('w-full max-w-sm mx-auto')}>
           <div style={{ borderRadius: '12px', width: '320px' }} className={'border border-gray-300 p-6 mx-auto my-10'}>
-            <AssetIcon assetSlug={assetSlug} />
+            {isShowBlur ? (
+              <button
+                className="relative flex justify-center items-center h-full w-full"
+                onClick={handleTapToRevealClick}
+              >
+                <img className="h-full w-full" src={Blur} alt="Adult content" />
+                <div className="absolute z-10 flex flex-col justify-center items-center">
+                  <svg
+                    className="mb-3"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 32 32"
+                    width="40"
+                    height="40"
+                    fill="none"
+                  >
+                    <path
+                      stroke="#1B262C"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M18.827 18.827a4.002 4.002 0 0 1-6.636-1.23 4 4 0 0 1 .982-4.424M23.92 23.92A13.427 13.427 0 0 1 16 26.667C6.667 26.667 1.334 16 1.334 16A24.6 24.6 0 0 1 8.08 8.08l15.84 15.84ZM13.2 5.653a12.159 12.159 0 0 1 2.8-.32C25.334 5.333 30.667 16 30.667 16a24.666 24.666 0 0 1-2.88 4.253L13.2 5.653ZM1.333 1.333l29.334 29.334"
+                    />
+                  </svg>
+                  <span className="text-base text-gray-910 font-semibold">Click to reveal</span>
+                </div>
+              </button>
+            ) : (
+              <AssetIcon assetSlug={assetSlug} />
+            )}
           </div>
         </div>
 

src/app/store/tokens-metadata/actions.ts

@@ -5,9 +5,11 @@ import { createActions } from 'lib/store';
 
 export const addTokensMetadataAction = createAction<TokenMetadata[]>('assets/ADD_TOKENS_METADATA');
 
-export const loadTokensMetadataAction = createAction<{ rpcUrl: string; slugs: string[] }>(
-  'assets/LOAD_TOKENS_METADATA'
-);
+export const loadTokensMetadataAction = createAction<{
+  rpcUrl: string;
+  slugs: string[];
+  accountPublicKeyHash: string;
+}>('assets/LOAD_TOKENS_METADATA');
 
 export const loadWhitelistAction = createActions<undefined, TokenMetadata[]>('assets/LOAD_WHITELIST_METADATA');
 

src/app/store/tokens-metadata/epics.ts

@@ -1,9 +1,14 @@
+import { isNonEmptyArray } from '@apollo/client/utilities';
+import { isDefined } from '@rnw-community/shared';
 import { combineEpics, Epic } from 'redux-observable';
 import { Observable, of } from 'rxjs';
 import { catchError, concatMap, map, switchMap } from 'rxjs/operators';
 import { Action } from 'ts-action';
 import { ofType, toPayload } from 'ts-action-operators';
 
+import { fetchUserAdultCollectibles$ } from 'lib/apis/objkt';
+import { toTokenSlug } from 'lib/assets';
+import { isCollectible, TokenMetadata } from 'lib/metadata';
 import { loadOneTokenMetadata$, loadTokensMetadata$, loadWhitelist$ } from 'lib/metadata/fetch';
 
 import {
@@ -59,12 +64,45 @@ const loadOneTokenMetadataEpic = (action$: Observable<Action>) =>
     )
   );
 
+export const checkTokensMetadata$ = (tokensMetadata: TokenMetadata[], accountPublicKeyHash: string) =>
+  fetchUserAdultCollectibles$(accountPublicKeyHash).pipe(
+    map(adultCollectibles => {
+      if (isNonEmptyArray(adultCollectibles)) {
+        const newTokensMetadata = tokensMetadata.map(token => {
+          if (!isCollectible(token) || token.isAdultContent === true) {
+            return token;
+          }
+
+          const tokenSlug = toTokenSlug(token.address, token.id);
+
+          const isAdultCollectible = adultCollectibles.find(
+            ({ fa_contract, token_id }) => tokenSlug === toTokenSlug(fa_contract, token_id)
+          );
+
+          if (isDefined(isAdultCollectible)) {
+            return {
+              ...token,
+              isAdultContent: true
+            };
+          }
+
+          return token;
+        });
+
+        return newTokensMetadata;
+      }
+
+      return tokensMetadata;
+    })
+  );
+
 const loadTokensMetadataEpic = (action$: Observable<Action>) =>
   action$.pipe(
     ofType(loadTokensMetadataAction),
     toPayload(),
-    switchMap(({ rpcUrl, slugs }) =>
+    switchMap(({ rpcUrl, slugs, accountPublicKeyHash }) =>
       loadTokensMetadata$(rpcUrl, slugs).pipe(
+        switchMap(tokensMetadata => checkTokensMetadata$(tokensMetadata, accountPublicKeyHash)),
         map(tokensMetadata => addTokensMetadataAction(tokensMetadata)),
         catchError(err => of(loadOneTokenMetadataActions.fail(err.message)))
       )

src/lib/apis/objkt/adult-tags.ts

@@ -0,0 +1,58 @@
+export const ADULT_CONTENT_TAGS = [
+  'sexy',
+  'sex',
+  'nudity',
+  'nude',
+  'lingerie',
+  'naked',
+  'breasts',
+  'womeninart',
+  'femail',
+  'erotic',
+  'nudeart',
+  'boob',
+  'nsfw',
+  'pornography',
+  'profanity',
+  'anal',
+  'blowjob',
+  'porn',
+  'crempie',
+  'slut',
+  'bitch',
+  'dick',
+  'cock',
+  'penis',
+  'slurs',
+  'distasteful',
+  'disgusting',
+  'exploitative',
+  'contemptible',
+  'insensitive',
+  'blasphemous',
+  'obscene',
+  'defamatory',
+  'libelous',
+  'heinous',
+  'discriminatory',
+  'insulting',
+  'inflammatory',
+  'scandalous',
+  'derogatory',
+  'repugnant',
+  'immoral',
+  'indecent',
+  'disrespectful',
+  'malicious',
+  'belittling',
+  'misogynistic',
+  'intimidating',
+  'sinister',
+  'humiliating',
+  'demeaning',
+  'spiteful',
+  'intolerant',
+  'sadistic',
+  'xenophobic',
+  'disdainful'
+];

src/lib/apis/objkt/index.ts

@@ -1,7 +1,9 @@
+import { Observable, map } from 'rxjs';
+
 import { fromFa2TokenSlug } from 'lib/assets/utils';
 
 import { apolloObjktClient } from './constants';
-import { buildGetCollectiblesQuery } from './queries';
+import { buildGetCollectiblesQuery, buildGetUserAdultCollectiblesQuery } from './queries';
 
 export { objktCurrencies } from './constants';
 
@@ -20,6 +22,15 @@ interface UserObjktCollectible {
   listings_active: ObjktListing[];
 }
 
+interface UserAdultCollectibles {
+  fa_contract: string;
+  token_id: string;
+}
+
+interface UserAdultCollectiblesQueryResponse {
+  token: UserAdultCollectibles[];
+}
+
 export const fetchObjktCollectibles$ = (slugs: string[]) => {
   const request = buildGetCollectiblesQuery();
 
@@ -35,3 +46,8 @@ export const fetchObjktCollectibles$ = (slugs: string[]) => {
 
   return apolloObjktClient.query<GetUserObjktCollectiblesResponse>(request, queryVariables);
 };
+export const fetchUserAdultCollectibles$ = (address: string): Observable<UserAdultCollectibles[]> => {
+  const request = buildGetUserAdultCollectiblesQuery(address);
+
+  return apolloObjktClient.query<UserAdultCollectiblesQueryResponse>(request).pipe(map(result => result.token));
+};