Feature/show2 290 trending screen #663

intergalacticspacehighway · 2022-01-06T11:02:15Z

Why

This PR adds trending screen

How

Adds API hooks and temporary media component. Creator Preview is still not very efficient and has frame drops on clicking the expand chevron. I guess will have to replace it with a bottom sheet -> this one

Test Plan

Open Trending screen and try testing the tabs on android and iOS.

Known issues

Sometimes collapsable header might add padding on top.
API not cached on segmented control changes. This will be fixed once I add swr instead of custom hook.

Will push fixes for the known issues in the next PR

linear · 2022-01-06T11:02:17Z

SHOW2-290 Trending screen

vercel · 2022-01-06T11:02:18Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/showtime/showtime/31HZxUC7MhgHXYuc6XCDdKGSPCfk
✅ Preview: https://showtime-git-feature-show2-290-trending-screen-showtime.vercel.app

intergalacticspacehighway · 2022-01-06T11:06:06Z

packages/app/types.ts

@@ -0,0 +1,58 @@
+export type NFT = {


I think we can add API specific typings in this single file

Yeah good idea!

github-actions · 2022-01-06T11:09:53Z

PR Preview - Storybook

This pull request preview deployment is now available.

✅ Preview: io.showtime.storybook://expo-development-client/?url=https://exp.host/@tryshowtime/showtime-storybook-react-native/index.exp?release-channel=pr-663&sdkVersion=44.0.0

Comment ID: 1006485922

github-actions · 2022-01-06T11:14:16Z

PR Preview - App

This pull request preview deployment is now available.

✅ Preview: io.showtime.development://expo-development-client/?url=https://exp.host/@tryshowtime/showtime/index.exp?release-channel=pr-663&sdkVersion=44.0.0

Comment ID: 1006489310

axeldelafosse

Amazing job, as always ✨

axeldelafosse · 2022-01-06T11:16:49Z

packages/design-system/creator-preview/index.tsx

+      <View
+        style={{
+          height: 100,
+          aspectRatio: parseFloat(item.token_aspect_ratio),


axeldelafosse · 2022-01-06T11:22:17Z

apps/storybook-react-native/package.json

@@ -40,6 +40,7 @@
    "design-system": "*",
    "expo": "^44.0.0",
    "expo-asset": "~8.4.4",
+    "expo-av": "~10.2.0",


We need a new build for the Storybook Expo app!

axeldelafosse · 2022-01-06T11:23:33Z

packages/app/hooks/api-hooks.ts

+    retry,
+    isRefreshing,
+  } = useInfiniteListQuery((page) => {
+    const url = `/v2/featured?page=${page}&days=${days}&recache=1&limit=10`;


This endpoint feels a little bit slow don't you think?

yup. I wanted to bring this up. Thanks for reminding!

axeldelafosse · 2022-01-06T11:24:28Z

packages/app/screens/trending.tsx

 function TrendingScreen() {
-  return null;
+    useEffect(() => {
+      mixpanel.track("Trending page view");


Is this tracking event the same on the current web app? We should keep the same events everywhere otherwise it will be a mess haha

Looks like we don't track this yet. Good addition!

axeldelafosse · 2022-01-06T11:27:49Z

packages/design-system/creator-preview/index.tsx

+        </Accordion.Trigger>
+        <Accordion.Content>
+          <View tw="flex-1 flex-wrap flex-row">
+            {props.creator.top_items.map((item) => {


Maybe we can lazy load the items? I feel like we experience frame drops because we load all of them at once.

Or maybe we can only display two items with 50/50 width like in the design?

yeah makes sense, will experiment with it and let you know the findings!

axeldelafosse · 2022-01-06T11:28:32Z

packages/design-system/pinch-to-zoom/index.tsx

+      if (scale.value > 1) {
+        translation.x.value = ctx.translateOriginX - origin.x.value;
+        translation.y.value = ctx.translateOriginY - origin.y.value;
+      }


github-actions · 2022-01-06T12:06:23Z

PR Preview - Storybook on Chromatic

✅ Preview: The Storybook preview URL for this Pull Request

✅ Build: The Chromatic build URL for this Pull Request

* upgrade mmkv * Home/Feed (#655) * feed tabs * pinch to zoom * pinch to zoom * pinch to zoom * pinch to zoom * fix: feed ptr * fix: feed images * fix: feed images * wip: feed * wip: feed * wip: feed * wip - feed * wip - feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * upgrade mmkv * use correct app scheme and icon for walletconnect * improve walletconnect implementation * automatically submit when wallet is connected * Adjust gas price by a percentage (#653) * create video component * Feature/show2 290 trending screen (#663) * wip: trending * wip: trending * wip: trending * wip: trending * make api fast again * optimise creator previre * optimise creator preview * optimise creator preview * optimise creator preview * Update to handle long collection names (#662) * Enable Magic on minting & marketplace (#665) * install three.js + upgrade to react 18 + patch packages * add model component * Misc fixes (#666) * spinner fix * spinner fix * add swr * add swr * add swr * initial scroll fix * add accessToken hook (#667) * fix: added `useAccessToken` to access token for web (#669) * feat(SHOW2-225): refactor modal component (#652) * refactor: updated the modal styling for web * fix: fixed tailwind colors import * refactor: updated the modal styling for mobile * chore: reset modal storybook visibility * refactor: removed index.web * fix: fixed the modal body styling on mobile * refactor: updated modal styling for web/ios * fix: modal gestures components on Android Co-authored-by: Axel Delafosse <[email protected]> * list improvements (#671) * list improvements * list improvements * list improvements * list improvements * list improvements * list improvements * list improvements * render model as image for now * mark svg as todo * mark blurhash as todo on android * update logo * add nft title and description components * clean code * Update styles and semantics for listed for per feedback (#660) * disable save changes button when username is not available (#674) * use suspense + add types + add navigation elements context and hook to hide * improve collection component * add send icon * add comments + message box * use constants for scroll and padding height * clean code * chore(magic): add magic flag in useFlags and import them into modals (#675) * Profile screen (#677) * add flipper * add flipper * inti * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * list improvements * list improvements * wip profile * wip profile * profile api * profile wip * profile wip * profile wip * profile wip * profile wip * profile wip * profile wip * wip profile * wip profile * wip profile * wip profile * wip profile * wip profile * profile change route param * add react navigation to storybook RN * add react navigation to storybook RN * add react navigation to storybook RN * add react navigation to storybook RN * add camera * add reanimated handler to pager (#678) * add reanimated handler to pager * add reanimated handler to pager * new tabs * Revert "new tabs" This reverts commit b88ae0b. * upgrade vision-camera * add create modal * clean code * refactor: updated tabs item header width to be dynamic (#681) * update dependencies * upgrade deps and revert yarn.lock changes * use text-13 for tab items * render svg via xml + disabled press on media if in nft modal * fix camera tab bar icon container size * set trending tabs to full width screen * use suspense for profile tabs * clean header dropdown * Show an error when username is too short * set user color scheme * update status bar * fix imports * Feature/show2 309 create (#688) * fieldset * wip create UI * wip create UI * wip create UI * wip create UI * remove animated view from header (#692) * use media component everywhere * use the modal component for the create screen * fix: color mode re-renders * fix: color mode re-renders * fix: color mode re-renders * feat(SHOW2-283): added login with SMS flow and refactor login styling (#672) * fix: updated the button height based on design system * refactor: updated login screen styling * feat: added keyboard handling for iOS & Android * refactor: extracted email field ui into a separate component * feat: added phone number field * refactor: added contact details and remove email and phone number components * feat: added loading view * chore: removed debug console logs * fix: set loading state on phone number submitting * refactor: extract root magic instance * refactor: updated tabs header item indicator positioning * refactor: added a generic input field * refactor: extracted login container and header * refactor: updated login design to follow design system * fix: prevent tab header from setting invalid height * refactor: added text content type to input field * fix: logout customer when app fails to login * fix(unlist): allow an item to be unlisted by the owner when it not the lowest item for sale (#683) * Resolve an issue with next.js caching user profiles to a 404 (#680) (#698) Co-authored-by: Axel Delafosse <[email protected]> * rework explore page for marketplace (#700) * rework explore page for marketplace * fix mobile links * fix feed button tracking events Co-authored-by: Axel Delafosse <[email protected]> Co-authored-by: Nishan <[email protected]> Co-authored-by: Axel Delafosse <[email protected]> Co-authored-by: Miguel Piedrafita <[email protected]> Co-authored-by: Mo Gorhom <[email protected]> Co-authored-by: Henry Fontanier <[email protected]>

intergalacticspacehighway added 4 commits January 6, 2022 00:20

wip: trending

1f1d076

wip: trending

be71088

wip: trending

e868159

wip: trending

0dcf0f7

intergalacticspacehighway requested review from axeldelafosse and gorhom January 6, 2022 11:02

intergalacticspacehighway commented Jan 6, 2022

View reviewed changes

axeldelafosse approved these changes Jan 6, 2022

View reviewed changes

make api fast again

d2b2df6

vercel bot deployed to Preview January 6, 2022 12:02 View deployment

optimise creator previre

0d2b92f

vercel bot deployed to Preview January 6, 2022 13:08 View deployment

intergalacticspacehighway added 2 commits January 6, 2022 19:00

optimise creator preview

02a14ad

optimise creator preview

d62d527

vercel bot deployed to Preview January 6, 2022 13:31 View deployment

optimise creator preview

17866fb

vercel bot deployed to Preview January 6, 2022 13:41 View deployment

intergalacticspacehighway merged commit 424313e into staging Jan 6, 2022

intergalacticspacehighway deleted the feature/show2-290-trending-screen branch January 6, 2022 14:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/show2 290 trending screen #663

Feature/show2 290 trending screen #663

intergalacticspacehighway commented Jan 6, 2022

linear bot commented Jan 6, 2022

vercel bot commented Jan 6, 2022 •

edited

Loading

intergalacticspacehighway Jan 6, 2022

axeldelafosse Jan 6, 2022

github-actions bot commented Jan 6, 2022 •

edited

Loading

github-actions bot commented Jan 6, 2022 •

edited

Loading

axeldelafosse left a comment

axeldelafosse Jan 6, 2022

axeldelafosse Jan 6, 2022

axeldelafosse Jan 6, 2022

intergalacticspacehighway Jan 6, 2022

axeldelafosse Jan 6, 2022

axeldelafosse Jan 6, 2022

intergalacticspacehighway Jan 6, 2022

axeldelafosse Jan 6, 2022

intergalacticspacehighway Jan 6, 2022

axeldelafosse Jan 6, 2022

github-actions bot commented Jan 6, 2022 •

edited

Loading

Feature/show2 290 trending screen #663

Feature/show2 290 trending screen #663

Conversation

intergalacticspacehighway commented Jan 6, 2022

Why

How

Test Plan

Known issues

linear bot commented Jan 6, 2022

vercel bot commented Jan 6, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 6, 2022 • edited Loading

PR Preview - Storybook

github-actions bot commented Jan 6, 2022 • edited Loading

PR Preview - App

axeldelafosse left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 6, 2022 • edited Loading

PR Preview - Storybook on Chromatic

vercel bot commented Jan 6, 2022 •

edited

Loading

github-actions bot commented Jan 6, 2022 •

edited

Loading

github-actions bot commented Jan 6, 2022 •

edited

Loading

github-actions bot commented Jan 6, 2022 •

edited

Loading