feat: xmtp refactor and unread count

JustaName-id · Dec 6, 2024 · d4572e6 · d4572e6
1 parent 3900db0
commit d4572e6
Show file tree

Hide file tree

Showing 45 changed files with 2,900 additions and 2,015 deletions.
diff --git a/packages/@justweb3/ui/src/lib/ui/NotificationBadge/NotificationBadge.module.css b/packages/@justweb3/ui/src/lib/ui/NotificationBadge/NotificationBadge.module.css
@@ -0,0 +1,27 @@
+.notificationIcon {
+    position: relative;
+    display: inline-block;
+
+}
+
+.icon {
+    font-size: 24px; /* Adjust icon size */
+    line-height: 40px; /* Center the icon vertically */
+    text-align: center;
+}
+
+.badge {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    background-color: red;
+    color: white;
+    font-size: 8px;
+    font-weight: bold;
+    line-height: 1;
+    border-radius: 100px;
+    padding: 2px 4px;
+    transform: translate(50%, -50%);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    white-space: nowrap;
+}
diff --git a/packages/@justweb3/ui/src/lib/ui/NotificationBadge/index.tsx b/packages/@justweb3/ui/src/lib/ui/NotificationBadge/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './NotificationBadge.module.css';
+import { SPAN } from '../Text';
+
+interface NotificationBadgeProps {
+  count: number;
+  icon?: React.ReactNode;
+  maxCount?: number;
+}
+
+export const NotificationBadge: React.FC<NotificationBadgeProps> = ({
+  count,
+  icon,
+  maxCount = 99,
+}) => {
+  return (
+    <div className={styles.notificationIcon}>
+      {/*<div className={styles.icon}>{icon}</div>*/}
+      {icon}
+      {/*{count > 0 && <SPAN className={styles.badge}>{count}</SPAN>}*/}
+      {count > 0 && (
+        <SPAN className={styles.badge}>
+          {count > maxCount ? `${maxCount}+` : count}
+        </SPAN>
+      )}
+    </div>
+  );
+};
+
+export default NotificationBadge;
diff --git a/packages/@justweb3/ui/src/lib/ui/index.ts b/packages/@justweb3/ui/src/lib/ui/index.ts
@@ -18,3 +18,4 @@ export * from './Sheet';
 export * from './Label';
 export * from './Checkbox';
 export * from './Skeleton';
+export * from './NotificationBadge';
diff --git a/packages/@justweb3/ui/src/stories/ui/notification-badge.stories.tsx b/packages/@justweb3/ui/src/stories/ui/notification-badge.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NotificationBadge } from '../../lib/ui';
+import React from 'react';
+
+const meta: Meta<typeof NotificationBadge> = {
+  component: NotificationBadge,
+  title: 'Design System/UI/NotificationBadge',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof NotificationBadge>;
+
+const ChatIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 2.5C11.9884 2.49947 13.8956 3.28926 15.3021 4.69566C16.7086 6.10206 17.4992 8.00989 17.5 9.9995C17.4997 10.9847 17.3055 11.9603 16.9285 12.8704C16.5514 13.7806 15.9989 14.6075 15.3025 15.304C14.606 16.0005 13.7793 16.5529 12.8695 16.9297C11.9597 17.3065 10.9847 17.5003 10 17.5C8.694 17.5 7.09 17.1718 5.946 16.5524L3.156 17.475C3.06789 17.5039 2.97347 17.5078 2.8833 17.4861C2.79313 17.4644 2.71076 17.4181 2.6454 17.3523C2.58003 17.2865 2.53425 17.2037 2.51316 17.1134C2.49208 17.023 2.49652 16.9286 2.526 16.8406L3.452 14.0679C2.78 12.8942 2.5 11.3603 2.5 9.9995C2.5008 8.00989 3.29139 6.10206 4.69788 4.69566C6.10437 3.28926 8.01158 2.49947 10 2.5Z"
+        fill="var(--justweb3-primary-color)"
+      />
+    </svg>
+  );
+};
+
+export const Normal: Story = {
+  args: {
+    count: 1,
+    icon: <ChatIcon />,
+  },
+};
+
+export const Zero: Story = {
+  args: {
+    count: 0,
+    icon: <ChatIcon />,
+  },
+};
+
+export const Many: Story = {
+  args: {
+    count: 50,
+    icon: <ChatIcon />,
+  },
+};
+
+export const ManyWithMax: Story = {
+  args: {
+    count: 1000,
+    icon: <ChatIcon />,
+  },
+};
diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx
@@ -35,12 +35,14 @@ import styles from './JustWeb3Button.module.css';
 
 export interface JustWeb3Buttonrops {
   children: ReactNode;
+  style?: React.CSSProperties;
   logout?: () => void;
 }
 
 export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
   children,
   logout,
+  style,
 }) => {
   const [openMApps, setOpenMApps] = useState(false);
   const { plugins, mApps, config } = useContext(JustWeb3Context);
@@ -89,6 +91,9 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
       <ClickableItem
         title={'loading'}
         clickable={false}
+        style={{
+          ...style,
+        }}
         left={
           <div
             style={{
@@ -124,6 +129,9 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
           onClick={() => {
             handleOpenSignInDialog(true);
           }}
+          style={{
+            ...style,
+          }}
           left={<Avatar />}
           right={
             <Badge
@@ -171,6 +179,7 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
         style={{
           backgroundColor: 'var(--justweb3-background-color)',
           color: 'var(--justweb3-primary-color)',
+          ...style,
         }}
         contentStyle={{
           alignItems: 'start',
@@ -187,32 +196,6 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
   const connectedEnsProfileContent = (
     <Flex direction="column" gap={'10px'}>
       <Flex direction="column" gap={'10px'}>
-        {/*<Flex direction="row" align="center" justify="space-between">*/}
-        {/*  <P*/}
-        {/*    style={{*/}
-        {/*      fontSize: '12px',*/}
-        {/*      fontWeight: 300,*/}
-        {/*    }}*/}
-        {/*  >*/}
-        {/*    Profile Overview*/}
-        {/*  </P>*/}
-        {/*  <Button*/}
-        {/*    variant={'primary'}*/}
-        {/*    size={'sm'}*/}
-        {/*    rightIcon={*/}
-        {/*      <ArrowWhiteIcon*/}
-        {/*        width={15}*/}
-        {/*        color={'var(--justweb3-primary-color-foreground)'}*/}
-        {/*      />*/}
-        {/*    }*/}
-        {/*    onClick={() => {*/}
-        {/*      openEnsProfile(connectedEns?.ens, connectedEns?.chainId);*/}
-        {/*    }}*/}
-        {/*  >*/}
-        {/*    View Full Profile*/}
-        {/*  </Button>*/}
-        {/*</Flex>*/}
-        {/* Profile */}
         <Flex
           direction="column"
           gap="15px"

diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/AllMessageSheet/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/AllMessageSheet/index.tsx