Email App Revamp #31
Email App Revamp #31
Conversation
| @@ -1,34 +1,280 @@ | |||
| import { usePrivy } from '@privy-io/react-auth'; | |||
| import { useAppContext } from '@/context/app-context'; | |||
There was a problem hiding this comment.
@riyanshu-patro the landing page UI is not correct and should match the exact designs. Please refer to the core-connection example app
| usePushWalletContext, | ||
| } from '@pushprotocol/pushchain-ui-kit'; | ||
|
|
||
| const Header: FC = () => { |
There was a problem hiding this comment.
@riyanshu-patro The header component should be a fixed component and should not scroll with the viewport when user tries to scroll down.
| import { trimAddress, formatTimestamp } from '@/lib/utils'; | ||
| import { PushNetwork } from '@pushprotocol/push-chain'; | ||
| import { |
There was a problem hiding this comment.
@riyanshu-patro the attachment input is broken and I can't attach a file
| @@ -2,6 +2,8 @@ import EmailCard from './email-card'; | |||
| import { ScrollArea } from './ui/scroll-area'; | |||
| import { useAppContext } from '@/context/app-context'; | |||
| import { EMAIL_BOX } from '@/constants'; | |||
| import { Box } from 'shared-components'; | |||
| import { dummyEmail } from '@/lib/utils'; | |||
There was a problem hiding this comment.
From and to are same for a email I replied to.
| @@ -2,6 +2,8 @@ import EmailCard from './email-card'; | |||
| import { ScrollArea } from './ui/scroll-area'; | |||
| import { useAppContext } from '@/context/app-context'; | |||
| import { EMAIL_BOX } from '@/constants'; | |||
| import { Box } from 'shared-components'; | |||
| import { dummyEmail } from '@/lib/utils'; | |||
There was a problem hiding this comment.
The to section is empty. Should show the wallet address.
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| const { pushAccount, pushNetwork, setEmails } = useAppContext(); | ||
| const { signMessageAsync } = useSignMessage(); | ||
| const { |
There was a problem hiding this comment.
Validations also needs to be added to the To field and the message field.
| SendNotification, | ||
| Text, | ||
| TextArea, | ||
| TextInput, |
There was a problem hiding this comment.
When user focus out of the to field it should automatically accept the entered text and the recipient.
| import { trimAddress, formatTimestamp } from '@/lib/utils'; | ||
| import { PushNetwork } from '@pushprotocol/push-chain'; | ||
| import { |
There was a problem hiding this comment.
We need to make a network call after sending an email to update the sent email list.
| import { trimAddress, formatTimestamp } from '@/lib/utils'; | ||
| import { PushNetwork } from '@pushprotocol/push-chain'; | ||
| import { | ||
| Box, |
There was a problem hiding this comment.
Make sure the email listing and search doesn't breaks with a large number of emails in the response.
| @@ -0,0 +1,144 @@ | |||
| import { Back, Box, PushLogo, Text } from 'shared-components'; | |||
| import { Card } from './ui/card'; | |||
| import { css } from 'styled-components'; | |||
There was a problem hiding this comment.
- File names should be Capitalised camel case.
- Folder structure also needs to be updated.
Please refer to the core-connection repo for that.
| <Box display="flex" alignItems="center" gap="spacing-xs"> | ||
| <Box display="flex" alignItems="center" gap="spacing-xxs"> | ||
| <PushLogo height={40} /> | ||
| <Text variant="h2-bold">Push</Text> |
There was a problem hiding this comment.
Maybe remove the Push text for now in the mobile view,=,
| display: block; | ||
| @media (max-width: 768px) { | ||
| display: none; | ||
| } | ||
| `} |
There was a problem hiding this comment.
not the correct way. Wrap text inside the box component and use the box display property to implement it.
| @@ -0,0 +1,45 @@ | |||
| import { FC } from 'react'; | |||
| import { Box, PushLogo, Text } from 'shared-components'; | |||
| import { css } from 'styled-components'; | |||
There was a problem hiding this comment.
@riyanshu-patro you could uninstall the styled components from here and use the one from shared-components.
| @@ -2,15 +2,9 @@ import { StrictMode } from 'react'; | |||
| import { createRoot } from 'react-dom/client'; | |||
| import App from './App.tsx'; | |||
| import './index.css'; | |||
| import { AppProvider } from './providers/app-provider.tsx'; | |||
| import PrivyWalletProvider from './providers/privy-wallet-provider.tsx'; | |||
There was a problem hiding this comment.
I think we can delete the privy provider file.
| @@ -1,31 +1,31 @@ | |||
| import * as React from "react" | |||
| import * as PopoverPrimitive from "@radix-ui/react-popover" | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
Don't think this file is required
| }; | ||
|
|
||
| return ( | ||
| <div className="border border-gray-300 rounded-md flex items-center px-3 py-2"> |
There was a problem hiding this comment.
Why are we using tailwind css classes here. That needs to be uninstalled and we need to use the box component
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" /> | ||
| </ScrollAreaPrimitive.ScrollAreaScrollbar> | ||
| )) |
There was a problem hiding this comment.
Why are we not using select from design system?
Attached screenshots for the developed Email app -
Pending tasks -