Use the new Modal Screen HOC

apps/storybook-react-native/.storybook/storybook.requires.js

@@ -1,9 +1,8 @@
 /* do not change this file, it is auto generated by storybook. */
 import {
-  configure,
   addDecorator,
   addParameters,
-  addArgsEnhancer,
+  configure,
 } from "@storybook/react-native";
 
 import { decorators, parameters } from "./preview";
@@ -41,7 +40,6 @@ const getStories = () => {
     require("../../../packages/design-system/alert/alert.stories.tsx"),
     require("../../../packages/design-system/toast/toast.stories.tsx"),
     require("../../../packages/design-system/verification-badge/badge.stories.tsx"),
-    require("../../../packages/design-system/modal-new/modal.stories"),
     require("../../../packages/design-system/snackbar/snackbar.stories.tsx"),
   ];
 };

packages/app/components/comments/index.tsx

@@ -15,7 +15,7 @@ import { useUser } from "app/hooks/use-user";
 import type { NFT } from "app/types";
 
 import { useAlert } from "design-system/alert";
-import { ModalFooter } from "design-system/modal-new";
+import { ModalFooter } from "design-system/modal";
 
 import { CommentInputBox, CommentInputBoxMethods } from "./comment-input-box";
 import { CommentsContainer } from "./comments-container";

packages/app/components/following-user-list.tsx

@@ -18,6 +18,7 @@ export const FollowingList = (props: {
   hideSheet: () => void;
 }) => {
   const { data, loading } = useFollowingList(props.profileId);
+
   return (
     <UserList loading={loading} users={data?.list} onClose={props.hideSheet} />
   );

packages/app/components/list/index.tsx

@@ -1,47 +1,114 @@
-import { useEffect } from "react";
-import { Platform, ScrollView } from "react-native";
-
-import {
-  BottomSheetModalProvider,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
+import { formatDistanceToNowStrict } from "date-fns";
 
+import { PolygonScanButton } from "app/components/polygon-scan-button";
+import { useCurrentUserAddress } from "app/hooks/use-current-user-address";
+import { useListNFT } from "app/hooks/use-list-nft";
 import { useUser } from "app/hooks/use-user";
-import { useRouter } from "app/navigation/use-router";
 import type { NFT } from "app/types";
+import { findAddressInOwnerList } from "app/utilities";
+
+import { Media, Spinner, Text, View } from "design-system";
+import { Owner } from "design-system/card";
+import { Collection } from "design-system/card/rows/collection";
+import { PolygonScan } from "design-system/icon";
+import { tw } from "design-system/tailwind";
 
-import { ListingCard } from "./listing-card";
-import { ListingModal } from "./listing-modal";
+import { ListingForm } from "./listing-form";
+import { ListingUnavailable } from "./listing-unavailable";
 
 type Props = {
   nft?: NFT;
 };
 
-const ListingScrollView =
-  Platform.OS === "android" ? BottomSheetScrollView : ScrollView;
-
 const List = ({ nft }: Props) => {
-  const router = useRouter();
-  const { isAuthenticated } = useUser();
-
-  /**
-   * Redirect on log out
-   */
-  useEffect(() => {
-    const isUnauthenticated = !isAuthenticated;
-    if (isUnauthenticated) {
-      router.pop();
-    }
-  }, [isAuthenticated]);
+  const { user } = useUser();
+  const { userAddress: address } = useCurrentUserAddress();
+  const { listNFT, state } = useListNFT();
+
+  const hasMultipleOwners = nft?.multiple_owners_list
+    ? nft?.multiple_owners_list.length > 1
+    : false;
+
+  const isActiveAddressAnOwner = Boolean(
+    findAddressInOwnerList(
+      address,
+      user?.data.profile.wallet_addresses_v2,
+      nft?.multiple_owners_list
+    )
+  );
+
+  if (state.status === "listingSuccess") {
+    return (
+      <View tw="flex-1 items-center justify-center mt-4">
+        <Text variant="text-4xl">🎉</Text>
+        <View>
+          <Text
+            variant="text-lg"
+            tw="my-8 text-black dark:text-white text-center"
+          >
+            Your NFT has been listed on Showtime!
+          </Text>
+          <PolygonScanButton transactionHash={state.transactionHash} />
+        </View>
+      </View>
+    );
+  }
+
+  if (state.status === "transactionInitiated") {
+    return (
+      <View tw="flex-1 items-center justify-center">
+        <Spinner />
+        <View tw="items-center">
+          <Text
+            variant="text-base"
+            tw="text-black dark:text-white text-center my-8"
+          >
+            Your NFT is being listed on Showtime. Feel free to navigate away
+            from this screen.
+          </Text>
+          <PolygonScanButton transactionHash={state.transactionHash} />
+        </View>
+      </View>
+    );
+  }
 
   return (
-    <BottomSheetModalProvider>
-      <ListingModal>
-        <ListingScrollView contentContainerStyle={{ paddingBottom: 80 }}>
-          <ListingCard nft={nft} />
-        </ListingScrollView>
-      </ListingModal>
-    </BottomSheetModalProvider>
+    <View tw="flex-1">
+      <Collection nft={nft} />
+      <View tw="p-4">
+        <View tw="flex-row items-center">
+          <Media item={nft} tw="w-[80px] h-[80px] rounded-2xl" />
+          <View tw="flex-1 px-4">
+            <Text variant="text-lg" tw=" text-black dark:text-white mb-2">
+              {nft?.token_name}
+            </Text>
+            <View tw="flex-row items-center">
+              <PolygonScan
+                width={14}
+                height={14}
+                color={tw.style("text-gray-500").color as string}
+              />
+              {nft?.token_created ? (
+                <Text tw="text-gray-500 font-bold pl-1" variant="text-xs">
+                  {`Minted ${formatDistanceToNowStrict(
+                    new Date(nft?.token_created),
+                    {
+                      addSuffix: true,
+                    }
+                  )}`}
+                </Text>
+              ) : null}
+            </View>
+          </View>
+        </View>
+        <Owner nft={nft} price={!hasMultipleOwners} tw="px-0 my-4" />
+        {isActiveAddressAnOwner ? (
+          <ListingForm nft={nft} listNFT={listNFT} listState={state} />
+        ) : (
+          <ListingUnavailable nft={nft} />
+        )}
+      </View>
+    </View>
   );
 };
 

packages/app/components/login/index.web.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 
 import { yup } from "app/lib/yup";
 
-import { View, Text, Button, ButtonLabel } from "design-system";
+import { Button, ButtonLabel, Text, View } from "design-system";
 
 import { LoginContainer } from "./login-container";
 import { LoginHeader } from "./login-header";
@@ -76,7 +76,7 @@ export function Login({ onLogin }: LoginProps) {
       ) : (
         <>
           <LoginHeader />
-          <View tw="mb-[16px]">
+          <View tw="p-4">
             <Button
               onPress={() => handleSubmitWallet()}
               variant="primary"
@@ -85,19 +85,21 @@ export function Login({ onLogin }: LoginProps) {
               <ButtonLabel>Sign in with Wallet</ButtonLabel>
             </Button>
           </View>
-          <View tw="mb-[16px] mx-[-16px] bg-gray-100 dark:bg-gray-900">
-            <Text tw="my-[8px] font-bold text-sm text-gray-600 dark:text-gray-400 text-center">
+          <View tw="mb-4 bg-gray-100 dark:bg-gray-900">
+            <Text tw="my-2 font-bold text-sm text-gray-600 dark:text-gray-400 text-center">
               — or —
             </Text>
           </View>
-          <LoginInputField
-            key="login-contact-details-field"
-            label="Contact details"
-            placeholder="Enter your email or phone number"
-            signInButtonLabel="Sign in"
-            validationSchema={contactDetailsValidationSchema}
-            onSubmit={handleSubmitContactDetails}
-          />
+          <View tw="p-4">
+            <LoginInputField
+              key="login-contact-details-field"
+              label="Contact details"
+              placeholder="Enter your email or phone number"
+              signInButtonLabel="Sign in"
+              validationSchema={contactDetailsValidationSchema}
+              onSubmit={handleSubmitContactDetails}
+            />
+          </View>
         </>
       )}
     </LoginContainer>