simplify web app & connect to provider
This commit is contained in:
parent
838180c9d5
commit
5b802b1d15
|
@ -11,7 +11,6 @@
|
|||
"@status-im/components": "*",
|
||||
"@status-im/icons": "*",
|
||||
"@tamagui/core": "1.0.15",
|
||||
"expo-blur": "~12.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-native-web": "^0.18.6"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { cloneElement, useRef, useState } from 'react'
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
|
||||
import {
|
||||
Composer,
|
||||
|
@ -6,120 +6,80 @@ import {
|
|||
Sidebar,
|
||||
SidebarMembers,
|
||||
Topbar,
|
||||
useAppDispatch,
|
||||
useAppState,
|
||||
} from '@status-im/components'
|
||||
import { useBlur } from '@status-im/components/hooks'
|
||||
import { COMMUNITIES } from '@status-im/components/src/sidebar/mock-data'
|
||||
import { Stack, styled, TamaguiProvider } from '@tamagui/core'
|
||||
import { AnimatePresence } from 'tamagui'
|
||||
import { CHANNEL_GROUPS } from '@status-im/components/src/sidebar/mock-data'
|
||||
|
||||
import tamaguiConfig from '../tamagui.config'
|
||||
|
||||
import type { ReactElement, ReactNode } from 'react'
|
||||
|
||||
type ThemeVars = 'light' | 'dark'
|
||||
|
||||
const AnimatableDrawer = styled(Stack, {
|
||||
variants: {
|
||||
fromRight: {
|
||||
true: {
|
||||
x: 500,
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
fromLeft: {
|
||||
true: {
|
||||
x: 500,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
function App() {
|
||||
const [theme, setTheme] = useState<ThemeVars>('light')
|
||||
const [showMembers, setShowMembers] = useState(false)
|
||||
|
||||
const [selectedChannel, setSelectedChannel] = useState<string>('welcome')
|
||||
const refMessagesContainer = useRef<HTMLDivElement>(null)
|
||||
|
||||
// TODO - this is a hack to get the icon to show up in the topbar when a channel is selected on mount
|
||||
const [icon, setIcon] = useState<ReactNode>(
|
||||
cloneElement(COMMUNITIES[0].channels[0].icon as ReactElement, {
|
||||
hasBackground: false,
|
||||
})
|
||||
)
|
||||
|
||||
const onChannelPress = (id: string, icon?: ReactNode) => {
|
||||
setSelectedChannel(id)
|
||||
setIcon(icon)
|
||||
const COMMUNITY = {
|
||||
name: 'Rarible',
|
||||
description:
|
||||
'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
|
||||
membersCount: 123,
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1574786527860-f2e274867c91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1764&q=80',
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [showMembers, setShowMembers] = useState(false)
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const { shouldBlurTop, shouldBlurBottom } = useBlur({
|
||||
ref: refMessagesContainer,
|
||||
ref: containerRef,
|
||||
})
|
||||
|
||||
const appState = useAppState()
|
||||
const appDispatch = useAppDispatch()
|
||||
|
||||
// TODO: This should change based on the URL
|
||||
const selectedChannel = useMemo(() => {
|
||||
for (const { channels } of CHANNEL_GROUPS) {
|
||||
for (const channel of channels) {
|
||||
if (channel.id === appState.channelId) {
|
||||
return channel
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [appState.channelId])
|
||||
|
||||
return (
|
||||
<TamaguiProvider config={tamaguiConfig} defaultTheme={'light'}>
|
||||
<div id="app">
|
||||
<div id="sidebar" style={{ zIndex: 200 }}>
|
||||
<Sidebar
|
||||
name="Rarible"
|
||||
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||
membersCount={123}
|
||||
onChannelPress={onChannelPress}
|
||||
selectedChannel={selectedChannel}
|
||||
community={COMMUNITY}
|
||||
selectedChannelId={appState.channelId}
|
||||
onChannelPress={channelId =>
|
||||
appDispatch({ type: 'set-channel', channelId })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
<Topbar
|
||||
isBlurred={shouldBlurTop}
|
||||
backgroundColor="$blurBackground"
|
||||
icon={
|
||||
icon &&
|
||||
cloneElement(icon as ReactElement, { hasBackground: false })
|
||||
}
|
||||
title={`#${selectedChannel}`}
|
||||
description="Share random funny stuff with the community. Play nice."
|
||||
blur={shouldBlurTop}
|
||||
channel={selectedChannel}
|
||||
membersVisisble={showMembers}
|
||||
onMembersPress={() => setShowMembers(show => !show)}
|
||||
/>
|
||||
|
||||
<div
|
||||
id="content"
|
||||
ref={refMessagesContainer}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<div id="content" ref={containerRef}>
|
||||
<div id="messages">
|
||||
<Messages />
|
||||
</div>
|
||||
<div id="composer">
|
||||
<Composer isBlurred={shouldBlurBottom} reply={false} />
|
||||
<Composer blur={shouldBlurBottom} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<AnimatePresence enterVariant="fromRight" exitVariant="fromLeft">
|
||||
|
||||
{showMembers && (
|
||||
<AnimatableDrawer
|
||||
id="members"
|
||||
key="members"
|
||||
animation={[
|
||||
'fast',
|
||||
{
|
||||
opacity: {
|
||||
overshootClamping: true,
|
||||
},
|
||||
},
|
||||
]}
|
||||
enterStyle={{ opacity: 0 }}
|
||||
exitStyle={{ opacity: 0 }}
|
||||
opacity={1}
|
||||
>
|
||||
<div id="members">
|
||||
<SidebarMembers />
|
||||
</AnimatableDrawer>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</TamaguiProvider>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -40,6 +40,7 @@ body,
|
|||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding: 40px 0px 0px 0px;
|
||||
height: 100vh;
|
||||
|
|
Loading…
Reference in New Issue