base

gallery-so · May 3, 2024 · 78bf03f · 78bf03f
1 parent 94b8b42
commit 78bf03f
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 10 deletions.
diff --git a/apps/mobile/src/icons/MaximizeIcon.tsx b/apps/mobile/src/icons/MaximizeIcon.tsx
@@ -0,0 +1,39 @@
+import { useColorScheme } from 'nativewind';
+import React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+import colors from '~/shared/theme/colors';
+
+export function MaximizeIcon({ ...props }: SvgProps) {
+  const { colorScheme } = useColorScheme();
+  const strokeColor = colorScheme === 'dark' ? colors.white : colors.black['800'];
+
+  return (
+    <Svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+      <Path
+        d="M13.9997 6.66667V2H9.33301"
+        stroke={strokeColor}
+        stroke-width="0.666667"
+        stroke-miterlimit="10"
+      />
+      <Path
+        d="M13.9997 2L9.33301 6.66667"
+        stroke={strokeColor}
+        stroke-width="0.666667"
+        stroke-miterlimit="10"
+      />
+      <Path
+        d="M2 9.33398V14.0007H6.66667"
+        stroke={strokeColor}
+        stroke-width="0.666667"
+        stroke-miterlimit="10"
+      />
+      <Path
+        d="M2 13.9993L6.33333 9.66602"
+        stroke={strokeColor}
+        stroke-width="0.666667"
+        stroke-miterlimit="10"
+      />
+    </Svg>
+  );
+}
diff --git a/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx b/apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx
@@ -1,6 +1,6 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { graphql, useFragment } from 'react-relay';
@@ -9,6 +9,8 @@ import { useToggleTokenAdmire } from 'src/hooks/useToggleTokenAdmire';
 import { BookmarkIcon } from 'src/icons/BookmarkIcon';
 import { PoapIcon } from 'src/icons/PoapIcon';
 import { ShareIcon } from 'src/icons/ShareIcon';
+import { MaximizeIcon } from 'src/icons/MaximizeIcon';
+import Lightbox from 'react-native-lightbox-v2';
 
 import { BackButton } from '~/components/BackButton';
 import { TokenFailureBoundary } from '~/components/Boundaries/TokenFailureBoundary/TokenFailureBoundary';
@@ -18,6 +20,7 @@ import { IconContainer } from '~/components/IconContainer';
 import { MintLinkButton } from '~/components/MintLinkButton';
 import { Pill } from '~/components/Pill';
 import ProcessedText from '~/components/ProcessedText/ProcessedText';
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
 import {
   CreatorProfilePictureAndUsernameOrAddress,
   OwnerProfilePictureAndUsername,
@@ -96,6 +99,7 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
   );
 
   const { colorScheme } = useColorScheme();
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
 
   const token = query.tokenById;
   const ownerWalletAddress =
@@ -169,6 +173,10 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
     [colorScheme]
   );
 
+  const handleMaximizeToggle = () => {
+    setIsLightboxOpen((currIsLightboxOpen) => !currIsLightboxOpen);
+  };
+
   return (
     <ScrollView>
       <View className="flex flex-col space-y-3 px-4 pb-4">
@@ -188,14 +196,20 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
             />
           </View>
 
-          <View className="w-full mb-3">
-            <TokenFailureBoundary tokenRef={token} variant="large">
-              <NftDetailAssetCacheSwapper
-                cachedPreviewAssetUrl={route.params.cachedPreviewAssetUrl}
-              >
-                <NftDetailAsset tokenRef={token} />
-              </NftDetailAssetCacheSwapper>
-            </TokenFailureBoundary>
+          <View className="flex justify-between w-full mb-3">
+            <Lightbox
+              isOpen={isLightboxOpen}
+              onClose={() => setIsLightboxOpen(false)}
+              onOpen={() => setIsLightboxOpen(true)}
+            >
+              <TokenFailureBoundary tokenRef={token} variant="large">
+                <NftDetailAssetCacheSwapper
+                  cachedPreviewAssetUrl={route.params.cachedPreviewAssetUrl}
+                >
+                  <NftDetailAsset tokenRef={token} />
+                </NftDetailAssetCacheSwapper>
+              </TokenFailureBoundary>
+            </Lightbox>
           </View>
         </View>
 
@@ -211,6 +225,14 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
                 {tokenDefinition.name}
               </Typography>
             </View>
+            <GalleryTouchableOpacity
+              onPress={handleMaximizeToggle}
+              eventElementId="NFT Detail Maximize Icon"
+              eventName="NFT Detail Maximize Icon Clicked"
+              eventContext={contexts['NFT Detail']}
+            >
+              <MaximizeIcon />
+            </GalleryTouchableOpacity>
           </View>
           <GalleryTouchableOpacity
             eventElementId="NFT Detail Contract Name Pill"

diff --git a/package.json b/package.json
@@ -13,12 +13,16 @@
     "fetch-schema-dev": "get-graphql-schema https://gateway.dev.gallery.so/ > schema.graphql"
   },
   "dependencies": {
+    "@openspacelabs/react-native-zoomable-view": "^2.1.6",
+    "add": "^2.0.6",
     "nextjs-routes": "^1.0.8",
     "react": "^18.2.0",
     "react-hotkeys-hook": "^4.3.8",
+    "react-native-lightbox-v2": "^0.9.0",
     "react-relay": "^15.0.0",
     "relay-runtime": "^15.0.0",
-    "web3-utils": "^4.2.1"
+    "web3-utils": "^4.2.1",
+    "yarn": "^1.22.22"
   },
   "engines": {
     "node": "20.5.0"

diff --git a/yarn.lock b/yarn.lock
@@ -6847,6 +6847,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@openspacelabs/react-native-zoomable-view@npm:^2.1.6":
+  version: 2.2.0
+  resolution: "@openspacelabs/react-native-zoomable-view@npm:2.2.0"
+  dependencies:
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ">=16.8.0"
+    react-native: ">=0.54.0"
+  checksum: 3227ec0954b52440ed3a69781582c08901df7a8fc265ceed4eef3d948a1826f4ccf293a45fe14d2f93e1d8863e5122563543ba506c11bfe37a3679f12ddb6027
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-android-arm64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-android-arm64@npm:2.4.1"
@@ -12746,6 +12758,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"add@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "add@npm:2.0.6"
+  checksum: e2d23d40494565dfed4acd65e478570c444db5ac6c053551ed429c39ea0f2c99d83df63e7befec936df601827d2254d06a2fb6f7dcfd2022e810b25eab818b8c
+  languageName: node
+  linkType: hard
+
 "aes-js@npm:3.0.0":
   version: 3.0.0
   resolution: "aes-js@npm:3.0.0"
@@ -20217,10 +20236,12 @@ __metadata:
   resolution: "gallery-monorepo@workspace:."
   dependencies:
     "@moonrepo/cli": ^1.21.2
+    "@openspacelabs/react-native-zoomable-view": ^2.1.6
     "@types/react-relay": ^14.1.3
     "@types/relay-runtime": ^14.1.8
     "@typescript-eslint/eslint-plugin": ^6.15.0
     "@typescript-eslint/parser": ^6.15.0
+    add: ^2.0.6
     eslint: ^8.56.0
     eslint-config-prettier: ^9.1.0
     eslint-plugin-react-hooks: ^4.6.0
@@ -20232,12 +20253,14 @@ __metadata:
     prettier: ^2.8.4
     react: ^18.2.0
     react-hotkeys-hook: ^4.3.8
+    react-native-lightbox-v2: ^0.9.0
     react-relay: ^15.0.0
     relay-compiler: ^15.0.0
     relay-runtime: ^15.0.0
     tsconfig-moon: ^1.2.2
     typescript: ^5.0.0
     web3-utils: ^4.2.1
+    yarn: ^1.22.22
   languageName: unknown
   linkType: soft
 
@@ -29324,6 +29347,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-lightbox-v2@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "react-native-lightbox-v2@npm:0.9.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-native: ">=0.61.0"
+  checksum: ffedc7e58348ca28ea3a20baa7fa7d4b6cb493473e5f36a701aca22dc59c47606d64d667bb64ac7a1c2c1af686fcd99cd2883bd713797664517f0ed98ad03929
+  languageName: node
+  linkType: hard
+
 "react-native-linear-gradient@npm:^2.6.2":
   version: 2.6.2
   resolution: "react-native-linear-gradient@npm:2.6.2"
@@ -35642,6 +35675,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yarn@npm:^1.22.22":
+  version: 1.22.22
+  resolution: "yarn@npm:1.22.22"
+  bin:
+    yarn: bin/yarn.js
+    yarnpkg: bin/yarn.js
+  checksum: 59aeef5ccfd3347287f939448e6d3594f0a42f74025b9bdc2a277641c1d4070c07a38b6e7c35e695f77410b0269a5a43c78535786564f86f39c9f781e6efa311
+  languageName: node
+  linkType: hard
+
 "yauzl@npm:^2.10.0, yauzl@npm:^2.4.2":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"