From 67212d39783c4b2de603cf98020cdfee71119e28 Mon Sep 17 00:00:00 2001 From: Ben Goldberg Date: Mon, 18 Mar 2024 17:03:54 -0700 Subject: [PATCH] Dapp Browser: empty tab ui (#5475) * some progress on dapp listings ui * progress * dapp listings ui complete * rebase fix * tweak * android fixes * fallback gradient --- src/components/DappBrowser/BrowserTab.tsx | 19 +- src/components/DappBrowser/Homepage.tsx | 253 ++++++++++++++++++++++ 2 files changed, 255 insertions(+), 17 deletions(-) create mode 100644 src/components/DappBrowser/Homepage.tsx diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx index f4bd34be7b8..b1fa0b1c7a4 100644 --- a/src/components/DappBrowser/BrowserTab.tsx +++ b/src/components/DappBrowser/BrowserTab.tsx @@ -21,6 +21,7 @@ import DappBrowserWebview from './DappBrowserWebview'; import { IS_ANDROID, IS_IOS } from '@/env'; import { DappBrowserShadows } from './DappBrowserShadows'; import { WebViewBorder } from './WebViewBorder'; +import Homepage from './Homepage'; interface BrowserTabProps { tabIndex: number; @@ -364,22 +365,6 @@ export const BrowserTab = React.memo(function BrowserTab({ tabIndex, injectedJS [loadProgress] ); - const HomepageComponent = () => ( - - - Dapp Browser Homepage - - - ); - const WebviewComponent = () => ( : ; + const TabContent = isOnHomepage ? : ; return ( <> diff --git a/src/components/DappBrowser/Homepage.tsx b/src/components/DappBrowser/Homepage.tsx new file mode 100644 index 00000000000..ebd1735881f --- /dev/null +++ b/src/components/DappBrowser/Homepage.tsx @@ -0,0 +1,253 @@ +import { ButtonPressAnimation } from '@/components/animations'; +import { Page } from '@/components/layout'; +import { Bleed, Box, ColorModeProvider, Cover, Inline, Inset, Stack, Text } from '@/design-system'; +import { useNavigation } from '@/navigation'; +import { TAB_BAR_HEIGHT } from '@/navigation/SwipeNavigator'; +import { deviceUtils, safeAreaInsetValues } from '@/utils'; +import React from 'react'; +import { ScrollView, View } from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import { BlurView } from '@react-native-community/blur'; +import { ImgixImage } from '@/components/images'; +import ContextMenuButton from '@/components/native-context-menu/contextMenu'; + +const HORIZONTAL_INSET = 24; + +const NUM_LOGOS = 5; +const LOGO_PADDING = 14; +const LOGO_SIZE = (deviceUtils.dimensions.width - HORIZONTAL_INSET * 2 - (NUM_LOGOS - 1) * LOGO_PADDING) / NUM_LOGOS; + +const NUM_CARDS = 2; +const CARD_PADDING = 12; +const CARD_SIZE = (deviceUtils.dimensions.width - HORIZONTAL_INSET * 2 - (NUM_CARDS - 1) * CARD_PADDING) / NUM_CARDS; + +const Card = () => { + const bgImageUrl = 'https://nftcalendar.io/storage/uploads/2022/05/06/banner_discord1_05062022181527627565bf3c203.jpeg'; + const logoImageUrl = 'https://pbs.twimg.com/profile_images/1741494128779886592/RY4V0T2F_400x400.jpg'; + + const menuConfig = { + menuTitle: '', + menuItems: [ + { + actionKey: 'test1', + actionTitle: 'Option 1', + icon: { + iconType: 'SYSTEM', + iconValue: 'chart.line.uptrend.xyaxis', + }, + }, + { + actionKey: 'test2', + actionTitle: 'Option 2', + icon: { + iconType: 'SYSTEM', + iconValue: 'plus.forwardslash.minus', + }, + }, + ], + }; + + return ( + + + + {bgImageUrl && ( + + + + + + + )} + + + + Rainbowcast + + + zora.co + + + + + + + + + 􀍠 + + + + + + {}} + style={{ top: 12, right: 12, height: 24, width: 24, position: 'absolute' }} + /> + + ); +}; + +const Logo = () => { + const imageUrl = 'https://pbs.twimg.com/profile_images/1741494128779886592/RY4V0T2F_400x400.jpg'; + + return ( + + + + + + Zora + + + + + ); +}; + +export default function Homepage() { + const { navigate } = useNavigation(); + + return ( + + + + + + + 􀙭 + + + Trending + + + + + + + + + + + + + + + + + + 􀋃 + + + Favorites + + + + + + + + + + + + + + + + + + + + + + 􀐫 + + + Recents + + + + + + + + + + + + ); +}