[GAL-3616] Update NFT Detail Page [mobile] (#1697)

* Add post nav + nft selector * isolate pfp function * Add post input * add token preview to post * composer ui * Add discard post bottom sheet * Add toast * remove debugger * fix toast ui * Fix assign post/pfp * Reset post navigation stack * turn off auto capitalize input * Dark mode * fix dark mode icon * add FF * rename * Fix naming toast * add event tracker * fix typography * Add element support to Toast * Separate Post Navigator * prettier * Remove pressIn effect on post icon * Fix input line height * Update nft detail page * add FF * redirect to post page * Only show post button to token owner * add xs size to pfp * show pfp in nft detail * fix dark mode * Update nft selector title * add setting to profile page * update setting screen header * Remove comment * Rename PFP component to NFT Selector * update schema * integrate the post query * update post nft detail icon * always show More Info section * lint --------- Co-authored-by: kaito <80802871+kaitoo1@users.noreply.github.com>
gallery-so · Jul 20, 2023 · 1880d22 · 1880d22
1 parent b65e6f0
commit 1880d22
Show file tree

Hide file tree

Showing 10 changed files with 259 additions and 140 deletions.
diff --git a/apps/mobile/src/components/Button.tsx b/apps/mobile/src/components/Button.tsx
@@ -154,7 +154,7 @@ export function Button({
         )}
       >
         <View
-          className={clsx('flex flex-row items-center justify-center space-x-4', {
+          className={clsx('flex flex-row items-center justify-center space-x-2', {
             'opacity-0': loading,
             'opacity-100': !loading,
           })}

diff --git a/apps/mobile/src/components/ProfilePicture/RawProfilePicture.tsx b/apps/mobile/src/components/ProfilePicture/RawProfilePicture.tsx
@@ -10,6 +10,7 @@ import { Typography } from '../Typography';
 import { DefaultUserIcon } from './DefaultUserIcon';
 
 const sizeMapping: { [size in Size]: number } = {
+  xxs: 16,
   xs: 20,
   sm: 24,
   md: 32,
@@ -19,6 +20,7 @@ const sizeMapping: { [size in Size]: number } = {
 };
 
 const fontSizeMapping: { [size in Size]: number } = {
+  xxs: 8,
   xs: 12,
   sm: 14,
   md: 18,
@@ -27,7 +29,7 @@ const fontSizeMapping: { [size in Size]: number } = {
   xxl: 40,
 };
 
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export type RawProfilePictureProps = {
   size: Size;

diff --git a/apps/mobile/src/icons/BottomArrowIcon.tsx b/apps/mobile/src/icons/BottomArrowIcon.tsx
@@ -0,0 +1,17 @@
+import { useColorScheme } from 'nativewind';
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+import colors from '~/shared/theme/colors';
+
+export function BottomArrowIcon(props: SvgProps) {
+  const { colorScheme } = useColorScheme();
+
+  const strokeColor = colorScheme === 'dark' ? colors.white : colors.black['800'];
+
+  return (
+    <Svg width={17} height={16} fill="none" {...props}>
+      <Path stroke={strokeColor} strokeMiterlimit={10} d="M3.833 6 8.5 10.667 13.167 6" />
+    </Svg>
+  );
+}
diff --git a/apps/mobile/src/icons/CirclePostIcon.tsx b/apps/mobile/src/icons/CirclePostIcon.tsx
@@ -0,0 +1,18 @@
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+type Props = {
+  color: string;
+  size?: number;
+} & SvgProps;
+
+export const CirclePostIcon = ({ color, size = 32, ...props }: Props) => {
+  return (
+    <Svg width={size} height={size} fill="none" {...props}>
+      <Path stroke={color} strokeMiterlimit={10} d="M12 8.272v8M16 12.273H8" />
+      <Path
+        stroke={color}
+        d="M12 22.273c5.523 0 10-4.478 10-10 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 5.522 4.477 10 10 10Z"
+      />
+    </Svg>
+  );
+};
diff --git a/apps/mobile/src/screens/NftDetailScreen/DetailSection.tsx b/apps/mobile/src/screens/NftDetailScreen/DetailSection.tsx
@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
 
+import { InteractiveLink } from '~/components/InteractiveLink';
+
 import { Typography } from '../../components/Typography';
 
 export function DetailSection({
@@ -17,7 +19,7 @@ export function DetailSection({
 export function DetailLabelText({ children }: PropsWithChildren) {
   return (
     <Typography
-      className="text-xs dark:color-metal"
+      className="text-xs text-metal dark:color-metal"
       font={{ family: 'ABCDiatype', weight: 'Medium' }}
     >
       {children}
@@ -31,9 +33,54 @@ export function DetailValue({ children }: PropsWithChildren) {
       numberOfLines={1}
       ellipsizeMode="middle"
       className="text-sm"
-      font={{ family: 'ABCDiatype', weight: 'Regular' }}
+      font={{ family: 'ABCDiatype', weight: 'Bold' }}
     >
       {children}
     </Typography>
   );
 }
+
+type DetailExternalLinkProps = {
+  link: string;
+  label: string;
+  trackingLabel: string;
+};
+export function DetailExternalLink({ link, label, trackingLabel }: DetailExternalLinkProps) {
+  return (
+    <InteractiveLink href={link} type={trackingLabel}>
+      <View className="flex flex-row space-x-1">
+        <Typography
+          numberOfLines={1}
+          ellipsizeMode="middle"
+          className="text-sm"
+          font={{ family: 'ABCDiatype', weight: 'Regular' }}
+        >
+          View on
+        </Typography>
+        <Typography
+          numberOfLines={1}
+          ellipsizeMode="middle"
+          className="text-sm"
+          font={{ family: 'ABCDiatype', weight: 'Medium' }}
+        >
+          {label}
+        </Typography>
+      </View>
+    </InteractiveLink>
+  );
+}
+
+export function DetailMoreInfoLink({ link }: { link: string }) {
+  return (
+    <InteractiveLink href={link} type="NFT Detail More Info URL">
+      <Typography
+        numberOfLines={1}
+        ellipsizeMode="middle"
+        className="text-sm"
+        font={{ family: 'ABCDiatype', weight: 'Regular' }}
+      >
+        More Info
+      </Typography>
+    </InteractiveLink>
+  );
+}
diff --git a/apps/mobile/src/screens/NftDetailScreen/NftAdditionalDetails.tsx b/apps/mobile/src/screens/NftDetailScreen/NftAdditionalDetails.tsx
@@ -8,11 +8,10 @@ import { NftAdditionalDetailsEth } from './NftAdditionalDetailsEth';
 import { NftAdditionalDetailsTezos } from './NftAdditionalDetailsTezos';
 
 type NftAdditionalDetailsProps = {
-  showDetails: boolean;
   tokenRef: NftAdditionalDetailsFragment$key;
 };
 
-export function NftAdditionalDetails({ tokenRef, showDetails }: NftAdditionalDetailsProps) {
+export function NftAdditionalDetails({ tokenRef }: NftAdditionalDetailsProps) {
   const token = useFragment(
     graphql`
       fragment NftAdditionalDetailsFragment on Token {
@@ -27,10 +26,10 @@ export function NftAdditionalDetails({ tokenRef, showDetails }: NftAdditionalDet
   );
 
   if (token.chain === 'POAP') {
-    return <NftAdditionalDetailsPOAP showDetails={showDetails} tokenRef={token} />;
+    return <NftAdditionalDetailsPOAP tokenRef={token} />;
   } else if (token.chain === 'Tezos') {
-    return <NftAdditionalDetailsTezos showDetails={showDetails} tokenRef={token} />;
+    return <NftAdditionalDetailsTezos tokenRef={token} />;
   } else {
-    return <NftAdditionalDetailsEth showDetails={showDetails} tokenRef={token} />;
+    return <NftAdditionalDetailsEth tokenRef={token} />;
   }
 }
diff --git a/apps/mobile/src/screens/NftDetailScreen/NftAdditionalDetailsEth.tsx b/apps/mobile/src/screens/NftDetailScreen/NftAdditionalDetailsEth.tsx
@@ -7,17 +7,20 @@ import { NftAdditionalDetailsEthFragment$key } from '~/generated/NftAdditionalDe
 import { extractMirrorXyzUrl } from '~/shared/utils/extractMirrorXyzUrl';
 import { getOpenseaExternalUrl, hexHandler } from '~/shared/utils/getOpenseaExternalUrl';
 
-import { EnsOrAddress } from '../../components/EnsOrAddress';
-import { InteractiveLink } from '../../components/InteractiveLink';
 import { LinkableAddress } from '../../components/LinkableAddress';
-import { DetailLabelText, DetailSection, DetailValue } from './DetailSection';
+import {
+  DetailExternalLink,
+  DetailLabelText,
+  DetailMoreInfoLink,
+  DetailSection,
+  DetailValue,
+} from './DetailSection';
 
 type NftAdditionalDetailsEthProps = {
-  showDetails: boolean;
   tokenRef: NftAdditionalDetailsEthFragment$key;
 };
 
-export function NftAdditionalDetailsEth({ tokenRef, showDetails }: NftAdditionalDetailsEthProps) {
+export function NftAdditionalDetailsEth({ tokenRef }: NftAdditionalDetailsEthProps) {
   const token = useFragment(
     graphql`
       fragment NftAdditionalDetailsEthFragment on Token {
@@ -28,15 +31,9 @@ export function NftAdditionalDetailsEth({ tokenRef, showDetails }: NftAdditional
         tokenMetadata
 
         contract {
-          creatorAddress {
-            address
-            ...LinkableAddressFragment
-            ...EnsOrAddressWithSuspenseFragment
-          }
           contractAddress {
             address
             ...LinkableAddressFragment
-            ...EnsOrAddressWithSuspenseFragment
           }
         }
       }
@@ -64,68 +61,61 @@ export function NftAdditionalDetailsEth({ tokenRef, showDetails }: NftAdditional
 
   return (
     <View className="flex flex-col space-y-4">
-      {token.contract?.creatorAddress?.address && (
-        <DetailSection>
-          <DetailLabelText>CREATED BY</DetailLabelText>
-
-          {/* TODO(Terence) When the contract screen is ready, setup the onPress here */}
-          <EnsOrAddress chainAddressRef={token.contract.creatorAddress} />
-        </DetailSection>
-      )}
-
-      {showDetails && (
-        <View className="flex flex-col space-y-4">
-          <View className="flex flex-row space-x-16">
-            {contract?.contractAddress?.address && (
-              <DetailSection>
-                <DetailLabelText>CONTRACT ADDRESS</DetailLabelText>
-                <LinkableAddress
-                  chainAddressRef={contract.contractAddress}
-                  type="NFT Detail Contract Address"
-                />
-              </DetailSection>
-            )}
-
-            {tokenId && (
-              <DetailSection>
-                <DetailLabelText>TOKEN ID</DetailLabelText>
-                <DetailValue>{hexHandler(tokenId)}</DetailValue>
-              </DetailSection>
-            )}
-          </View>
+      <View className="flex flex-col space-y-4">
+        <View className="flex flex-row space-x-16">
+          {contract?.contractAddress?.address && (
+            <DetailSection>
+              <DetailLabelText>CONTRACT</DetailLabelText>
+              <LinkableAddress
+                chainAddressRef={contract.contractAddress}
+                type="NFT Detail Contract Address"
+              />
+            </DetailSection>
+          )}
 
-          {token.chain && (
+          {tokenId && (
             <DetailSection>
-              <DetailLabelText>CHAIN</DetailLabelText>
-              <DetailValue>{token.chain}</DetailValue>
+              <DetailLabelText>TOKEN ID</DetailLabelText>
+              <DetailValue>{hexHandler(tokenId)}</DetailValue>
             </DetailSection>
           )}
+        </View>
 
-          {mirrorXyzUrl && (
+        <View className="flex flex-row space-x-16">
+          {token.chain && (
             <DetailSection>
-              <InteractiveLink href={mirrorXyzUrl} type="NFT Detail View on Mirror">
-                View on Mirror
-              </InteractiveLink>
+              <DetailLabelText>NETWORK</DetailLabelText>
+              <DetailValue>{token.chain}</DetailValue>
             </DetailSection>
           )}
 
           {openSeaExternalUrl && (
             <DetailSection>
-              <InteractiveLink href={openSeaExternalUrl} type="NFT Detail View on Opensea">
-                View on OpenSea
-              </InteractiveLink>
+              <DetailExternalLink
+                link={openSeaExternalUrl}
+                label="OpenSea"
+                trackingLabel="NFT Detail View on Opensea"
+              />
             </DetailSection>
           )}
 
-          {externalUrl && (
+          {mirrorXyzUrl && (
             <DetailSection>
-              <InteractiveLink href={externalUrl} type="NFT Detail More Info URL">
-                More Info
-              </InteractiveLink>
+              <DetailExternalLink
+                link={mirrorXyzUrl}
+                label="Mirror"
+                trackingLabel="NFT Detail View on Mirror"
+              />
             </DetailSection>
           )}
         </View>
-      )}
+
+        {externalUrl && (
+          <DetailSection>
+            <DetailMoreInfoLink link={externalUrl} />
+          </DetailSection>
+        )}
+      </View>
     </View>
   );
 }
diff --git a/apps/mobile/src/screens/NftDetailScreen/NftAdditionalDetailsPOAP.tsx b/apps/mobile/src/screens/NftDetailScreen/NftAdditionalDetailsPOAP.tsx
@@ -10,11 +10,10 @@ import {
 } from '~/screens/NftDetailScreen/DetailSection';
 
 type POAPNftDetailSectionProps = {
-  showDetails: boolean;
   tokenRef: NftAdditionalDetailsPOAPFragment$key;
 };
 
-export function NftAdditionalDetailsPOAP({ tokenRef, showDetails }: POAPNftDetailSectionProps) {
+export function NftAdditionalDetailsPOAP({ tokenRef }: POAPNftDetailSectionProps) {
   const token = useFragment(
     graphql`
       fragment NftAdditionalDetailsPOAPFragment on Token {
@@ -44,20 +43,23 @@ export function NftAdditionalDetailsPOAP({ tokenRef, showDetails }: POAPNftDetai
 
   return (
     <View className="flex flex-col space-y-4">
-      {formattedDate && (
-        <DetailSection>
-          <DetailLabelText>Created</DetailLabelText>
-          <DetailValue>{formattedDate}</DetailValue>
-        </DetailSection>
-      )}
-      {location && (
-        <DetailSection>
-          <DetailLabelText>Location</DetailLabelText>
-          <DetailValue>{location}</DetailValue>
-        </DetailSection>
-      )}
+      <>
+        <View className="flex flex-row space-x-16">
+          {formattedDate && (
+            <DetailSection>
+              <DetailLabelText>CREATED</DetailLabelText>
+              <DetailValue>{formattedDate}</DetailValue>
+            </DetailSection>
+          )}
+
+          {location && (
+            <DetailSection>
+              <DetailLabelText>Location</DetailLabelText>
+              <DetailValue>{location}</DetailValue>
+            </DetailSection>
+          )}
+        </View>
 
-      {showDetails && (
         <View className="flex flex-col space-y-4">
           {id && (
             <DetailSection>
@@ -78,7 +80,7 @@ export function NftAdditionalDetailsPOAP({ tokenRef, showDetails }: POAPNftDetai
             </DetailSection>
           )}
         </View>
-      )}
+      </>
     </View>
   );
 }