Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Use the new Modal Screen HOC #1053

Merged
merged 9 commits into from
Apr 27, 2022
Merged

Use the new Modal Screen HOC #1053

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c75f2f1
use the new modal screen hoc
axeldelafosse Apr 27, 2022
e713315
clean modal implementations
axeldelafosse Apr 27, 2022
df99490
remove background color for web modals
axeldelafosse Apr 27, 2022
0a4c83c
bring back modal sheet
axeldelafosse Apr 27, 2022
82c508a
handle login modal close
axeldelafosse Apr 27, 2022
b74b99f
fix design login modal on web
axeldelafosse Apr 27, 2022
493c988
improve modal sheet
axeldelafosse Apr 27, 2022
41fdc30
set default bottom sheet snap points
axeldelafosse Apr 27, 2022
294e60d
remove max height for login modal
axeldelafosse Apr 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 1 addition & 3 deletions apps/storybook-react-native/.storybook/storybook.requires.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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"),
];
};
Expand Down
2 changes: 1 addition & 1 deletion packages/app/components/comments/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
131 changes: 99 additions & 32 deletions packages/app/components/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
115 changes: 0 additions & 115 deletions packages/app/components/list/listing-card.tsx
View file
Open in desktop

This file was deleted.

33 changes: 0 additions & 33 deletions packages/app/components/list/listing-modal.tsx
View file
Open in desktop

This file was deleted.

26 changes: 14 additions & 12 deletions packages/app/components/login/index.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -76,7 +76,7 @@ export function Login({ onLogin }: LoginProps) {
) : (
<>
<LoginHeader />
<View tw="mb-[16px]">
<View tw="p-4">
<Button
onPress={() => handleSubmitWallet()}
variant="primary"
Expand All @@ -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>
Expand Down
13 changes: 7 additions & 6 deletions packages/app/components/transfer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,12 +174,13 @@ function Transfer({ nft }: { nft?: NFT }) {
width={14}
/>
<Text tw="text-gray-500 font-bold pl-1" variant="text-xs">
{`Minted ${formatDistanceToNowStrict(
new Date(nft?.token_created),
{
addSuffix: true,
}
)}`}
{nft?.token_created &&
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I know using && operator in renders might cause unexpected results. Not sure if it can be 0 (zero) but even if not, it would be good practice to use Ternary Operator for the values comes from the endpoint which we are not sure it will be 0 or undefined.

Ref: https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point, thanks! Is there an ESLint plugin for this? I keep forgetting about it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there is but it's not specific to JSX, we should still be able to use the && operator. I'll check it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Included this change in my latest PR

`Minted ${formatDistanceToNowStrict(
new Date(nft?.token_created),
{
addSuffix: true,
}
)}`}
</Text>
</View>
</View>
Expand Down