Email App Revamp

examples/core-connection/yarn.lock

@@ -6822,7 +6822,7 @@ __metadata:
 
 "shared-components@file:../../packages/shared-components::locator=core-connection%40workspace%3A.":
   version: 0.1.0
-  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=498aac&locator=core-connection%40workspace%3A."
+  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=799d4e&locator=core-connection%40workspace%3A."
   dependencies:
     "@emotion/react": "npm:^11.13.0"
     "@radix-ui/react-dialog": "npm:^1.1.1"
@@ -6843,7 +6843,7 @@ __metadata:
   peerDependencies:
     react: ^18.3.1
     react-dom: ^18.3.1
-  checksum: 10/f9032d46c349f59ae84062f96110e8c1df66b69f8aabd583eb25aeb826c9bc383f017a32f4fd9e016f3abcfbab507a86e09b80ec0bfa9703516305eea5e8247e
+  checksum: 10/b85739b98051e191bf7118f0007d9b9aef1f6eb01d6ba62a9fe627945b724416ea96fbf36ceaea9953092ba5d1172b92ea1dfd6841f5071e2a6a4f8d5538e1d1
   languageName: node
   linkType: hard
 

examples/email/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "deploy:vercel": "vercel build --prod && vercel deploy --prebuilt --prod",
@@ -16,6 +16,7 @@
     "@privy-io/wagmi": "^0.2.12",
     "@pushprotocol/node-core": "^0.0.29",
     "@pushprotocol/push-chain": "^0.1.7",
+    "@pushprotocol/pushchain-ui-kit": "^1.0.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",

examples/email/src/App.tsx

@@ -1,25 +1,38 @@
-import { usePrivy } from '@privy-io/react-auth';
+import { getBlocksCSSVariables, themeConfig } from 'shared-components';
+import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import AppRoutes from './routes';
+import { BrowserRouter } from 'react-router-dom';
+import {
+  ENV,
+  PushWalletIFrame,
+  PushWalletProvider,
+} from '@pushprotocol/pushchain-ui-kit';
+import { AppProvider } from './context/AppContext';
 
-import { useAppContext } from './context/app-context';
-import LoggedInView from './components/logged-in-view';
-import Login from './components/login';
+const GlobalStyle = createGlobalStyle`
+  :root{
+    /* Font Family */
+      --font-family: 'FK Grotesk Neu', Helvetica, sans-serif;
+
+    /* New blocks theme css variables*/
+
+    ${(props) => getBlocksCSSVariables(props.theme.blocksTheme)}
+  }
+`;
 
 function App() {
-  const { ready, authenticated } = usePrivy();
-  const { pushAccount } = useAppContext();
   return (
-    <>
-      {ready ? (
-        <main className="h-screen w-screen">
-          {authenticated || pushAccount ? <LoggedInView /> : <Login />}
-        </main>
-      ) : (
-        <div className="flex flex-col gap-4 items-center justify-center h-screen w-full">
-          <div className="w-8 h-8 animate-ping bg-primary rounded-full"></div>
-          <p>Loading</p>
-        </div>
-      )}
-    </>
+    <ThemeProvider theme={themeConfig.light}>
+      <GlobalStyle />
+      <PushWalletProvider env={ENV.PROD}>
+        <AppProvider>
+          <BrowserRouter>
+            <PushWalletIFrame />
+            <AppRoutes />
+          </BrowserRouter>
+        </AppProvider>
+      </PushWalletProvider>
+    </ThemeProvider>
   );
 }
 

examples/email/src/components/ui/card.tsx → examples/email/src/common/components/Card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/helpers/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,68 +9,67 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      'bg-card border-b-[1px] py-4 px-6 flex flex-col items-start gap-3',
       className
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+  <div ref={ref} className={cn('flex flex-col', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn('font-semibold leading-none tracking-tight', className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+));
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

examples/email/src/common/components/ContentLayout.tsx

@@ -0,0 +1,31 @@
+// React and other libraries
+import { FC, ReactNode } from 'react';
+
+// External Libraries
+import { Box, css } from 'shared-components';
+
+type ContentLayoutProps = {
+  children: ReactNode;
+};
+
+const ContentLayout: FC<ContentLayoutProps> = ({ children }) => {
+  return (
+    <Box
+      alignItems="center"
+      backgroundColor="surface-transparent"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      maxWidth="1200px"
+      width={{ initial: 'calc(100% - (var(--spacing-sm) * 2))', ml: 'auto' }}
+      css={css`
+        flex: initial;
+        margin: 0;
+      `}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export { ContentLayout };

examples/email/src/common/components/Popover.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/helpers/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-screen md:w-[470px] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

examples/email/src/components/ui/scroll-area.tsx → examples/email/src/common/components/ScrollArea.tsx

@@ -1,46 +1,50 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/helpers/utils';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <div
+      className="h-full w-full rounded-[inherit]"
+      style={{ overflow: 'hidden scroll' }}
+    >
       {children}
-    </ScrollAreaPrimitive.Viewport>
+    </div>
+
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation = 'vertical', ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
       className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };

examples/email/src/common/components/Select.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { CaretDown } from 'shared-components';
+import { Text } from 'shared-components';
+
+interface DropdownItem {
+  label: string;
+  icon: React.ReactNode;
+  value: string;
+}
+
+interface SelectProps {
+  value: string;
+  onSelect: (value: string) => void;
+  options: DropdownItem[];
+}
+
+const Select: React.FC<SelectProps> = ({ value, onSelect, options }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const handleSelect = (item: string) => {
+    onSelect(item);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="relative w-[20%]">
+      <button
+        className={`w-full flex items-center justify-between p-3 gap-2 border-[1.5px] rounded-xl ${
+          isOpen ? 'border-[#F3AEFF]' : 'border-[#EAEBF2]'
+        } focus:border-[#F3AEFF] hover:border-[#C4CBD5]`}
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <span>{options.find((i) => i.value === value)?.icon}</span>
+        <CaretDown />
+      </button>
+
+      {isOpen && (
+        <ul className="absolute flex flex-col w-40 z-10 p-2 gap-2 bg-white border border-[#C4CBD5] rounded-xl shadow-lg mt-3 right-0">
+          {options.map((item) => (
+            <li
+              key={item.label}
+              onClick={() => handleSelect(item.value)}
+              className="flex items-center px-1 py-2 rounded-[6px] hover:bg-gray-100 cursor-pointer"
+            >
+              <span className="mr-2">{item.icon}</span>
+              <Text variant="bs-regular">{item.label}</Text>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export { Select };
+
+export type { SelectProps, DropdownItem };

examples/email/src/common/components/index.ts

@@ -0,0 +1,5 @@
+export * from './ContentLayout';
+export * from './Select';
+export * from './Card';
+export * from './Popover';
+export * from './ScrollArea';