Merge pull request #506 from us3r-network/F-subscriptionToServer-shix…

…uewen

F subscription to server shixuewen

apps/u3/.env.development

@@ -44,7 +44,7 @@ REACT_APP_DAPP_NFT_RECIPIENT_ADDRESS =  0xA25532B1287dEe6501fFa13Ff457fFcc9a6Ca6
 REACT_APP_SHARE_DOMAIN = https://share-dev.u3.xyz
 
 # U3 Caster Mint: [1.4.0] Goerli
-REACT_APP_CASTER_NFT_TO_MINT = 0x3cf0dfeab5bd741683f0a63c2342a8113c416694
+REACT_APP_CASTER_NFT_TO_MINT = 0x30ebadfd060bf39eac345f75e2eaa540db955fe2
 REACT_APP_CASTER_NFT_FIXED_PRICE_STRATEGY =  0xD8EB23E82f0795427F27D7F20CAb56e7630D1166
 REACT_APP_CASTER_NFT_CHAIN_ID =  5
 REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS =  0x885d0069e238C7929F0351689A9493fECad952Fe

apps/u3/.vscode/settings.json

@@ -3,6 +3,7 @@
   "cSpell.words": [
     "biolink",
     "deeplink",
+    "Degen",
     "Farcaster",
     "Farcster",
     "farsign",

apps/u3/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@airstack/airstack-react": "^0.4.7",
-    "@farcaster/hub-web": "^0.6.2",
+    "@farcaster/hub-web": "^0.7.3",
     "@lens-protocol/metadata": "^1.1.3",
     "@lens-protocol/react-web": "^2.0.0-alpha.25",
     "@lens-protocol/wagmi": "^3.0.0-alpha.22",
@@ -33,6 +33,7 @@
     "@tiptap/react": "^2.1.13",
     "@types/validator": "^13.11.7",
     "@us3r-network/auth-with-rainbowkit": "^0.2.1",
+    "@us3r-network/data-model": "^0.7.0",
     "@us3r-network/link": "0.7.1-alpha.0",
     "@us3r-network/profile": "0.7.0",
     "@wagmi/core": "^1.4.12",

apps/u3/public/service-worker-dev.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+// listen for push event
+self.addEventListener('push', (event) => {
+  let { title, body, icon } = event.data.json();
+  if (!title) title = 'U3 - Your Web3 Gateway';
+  if (!body) return;
+  self.registration.showNotification(title, {
+    body,
+    icon: icon || `logo192.png`,
+  });
+});

apps/u3/public/service-worker.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+// listen for push event
+self.addEventListener('push', (event) => {
+  let { title, body, icon } = event.data.json();
+  if (!title) title = 'U3 - Your Web3 Gateway';
+  if (!body) return;
+  self.registration.showNotification(title, {
+    body,
+    icon: icon || `logo192.png`,
+  });
+});

apps/u3/src/components/common/button/ColorButton.tsx

@@ -9,7 +9,7 @@ export default function ColorButton({
   return (
     <Button
       className={cn(
-        'h-[48px] p-[12px] gap-[8px] rounded-[12px] text-white text-[16px] font-bold bg-[linear-gradient(90deg,_#CD62FF_0%,_#62AAFF_100%)]',
+        'h-[48px] p-[12px] gap-[8px] rounded-[12px] text-white text-[16px] font-bold bg-[#5057AA] hover:bg-[#454C99]',
         className
       )}
       {...props}

apps/u3/src/components/common/icons/DegenTip.tsx

@@ -0,0 +1,25 @@
+export default function DegenTip({ className }: { className: string }) {
+  return (
+    <svg
+      width="789"
+      height="668"
+      viewBox="0 0 789 668"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M115.185 411.477L118.367 469.444C118.575 473.392 120.055 477.107 122.552 480.15C140.007 501.282 218.264 575.014 394.616 575.014C570.968 575.014 648.278 502.234 666.38 480.544C669.108 477.27 670.68 473.206 670.934 468.933L674.089 411.517C695.084 399.997 716.758 386.98 716.758 386.98C750.835 368.518 788.866 395.038 788.935 433.936C789.051 496.87 739.877 561.545 673.548 602.301C598.758 648.258 487.117 667.324 394.664 667.324C302.211 667.324 190.57 648.258 115.78 602.301C49.4513 561.545 0.277187 496.893 0.392781 433.936C0.462138 395.038 38.4929 368.518 72.5702 386.98C72.5702 386.98 94.207 399.965 115.185 411.477Z"
+        fill="#A36EFD"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M394.641 0.113525C538.834 0.113525 577.929 3.48079 636.558 10.2154H636.535C663.561 13.3272 685.224 33.438 683.212 60.6782L661.616 354.872C654.858 356.83 647.488 359.303 639.223 362.077C595.905 376.615 527.997 399.404 394.64 399.404C261.283 399.404 193.376 376.615 150.057 362.077C141.784 359.3 134.407 356.825 127.643 354.866L106.047 60.6782C104.059 33.438 125.652 12.8395 152.724 10.2154C210.637 4.59548 270.932 0.113525 394.641 0.113525ZM137.991 495.835L138.067 496.869L139.557 497.212C139.024 496.748 138.502 496.289 137.991 495.835ZM649.85 497.178L651.193 496.869L651.262 495.928C650.8 496.341 650.329 496.757 649.85 497.178Z"
+        fill="#A36EFD"
+      />
+    </svg>
+  );
+}

apps/u3/src/components/common/icons/SearchIcon.tsx

@@ -1,12 +1,14 @@
-export default function SearchIcon({ className }: { className?: string }) {
+import { ComponentPropsWithRef } from 'react';
+
+export default function SearchIcon(props: ComponentPropsWithRef<'svg'>) {
   return (
     <svg
       width="17"
       height="16"
       viewBox="0 0 17 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      {...props}
     >
       <path
         d="M15.75 14.7188L11.5625 10.5312C12.4688 9.4375 12.9688 8.03125 12.9688 6.5C12.9688 2.9375 10.0312 0 6.46875 0C2.875 0 0 2.9375 0 6.5C0 10.0938 2.90625 13 6.46875 13C7.96875 13 9.375 12.5 10.5 11.5938L14.6875 15.7812C14.8438 15.9375 15.0312 16 15.25 16C15.4375 16 15.625 15.9375 15.75 15.7812C16.0625 15.5 16.0625 15.0312 15.75 14.7188ZM1.5 6.5C1.5 3.75 3.71875 1.5 6.5 1.5C9.25 1.5 11.5 3.75 11.5 6.5C11.5 9.28125 9.25 11.5 6.5 11.5C3.71875 11.5 1.5 9.28125 1.5 6.5Z"

apps/u3/src/components/dapp/launcher/DappMenu.tsx

@@ -110,6 +110,7 @@ const ListInner = styled.div`
   overflow-y: auto;
 `;
 const Title = styled.div`
+  width: 40px;
   font-weight: 400;
   font-size: 12px;
   line-height: 14px;

apps/u3/src/components/explore/ExploreLayout.tsx

@@ -5,7 +5,7 @@ import HotPosts from './posts/HotPosts';
 import TopLinks from './links/TopLinks';
 import HighScoreDapps from './dapps/HighScoreDapps';
 import type { ExploreState } from '../../container/Explore';
-import CreatePosterBtn from './poster/CreatePosterBtn';
+import PosterMenu from '../poster/PosterMenu';
 import TopChannels from './channels/TopChannels';
 
 export default function ExploreLayout({
@@ -17,7 +17,7 @@ export default function ExploreLayout({
   return (
     <Wrapper>
       {!isMobile && (
-        <CreatePosterBtn
+        <PosterMenu
           disabled={
             hotPosts.isLoading || topLinks.isLoading || highScoreDapps.isLoading
           }

apps/u3/src/components/fren/Rss3Content.tsx

@@ -473,7 +473,7 @@ export default function Rss3Content({ address, empty }: Rss3ContentProps) {
     followingMap,
   } = useAppSelector(selectFrensHandlesState);
   const feedRef = useRef(null);
-  const { getProfileWithDid, profile } = useProfileState()!;
+  const { getProfileWithDid, profile } = useProfileState();
 
   const loading = useMemo(
     () => status === AsyncRequestStatus.PENDING,

apps/u3/src/components/layout/Index.tsx

@@ -19,6 +19,7 @@ import DappMenu from '../dapp/launcher/DappMenu';
 import MobileHeader from './mobile/MobileHeader';
 import MobileNav from './mobile/MobileNav';
 import { MobileGuide } from './mobile/MobileGuide';
+import AddPostMobile from '../social/AddPostMobile';
 
 function Layout() {
   const { ready } = useAuthentication();
@@ -31,6 +32,9 @@ function Layout() {
       {isMobile ? (
         <MobileContentBox>
           <Main />
+          <div className="fixed right-[20px] bottom-[80px]">
+            <AddPostMobile />
+          </div>
         </MobileContentBox>
       ) : (
         <RightBox>

apps/u3/src/components/layout/Nav.tsx

@@ -5,13 +5,14 @@
  * @LastEditTime: 2023-10-30 14:54:49
  * @Description: file description
  */
-import { useCallback, useRef, useState } from 'react';
+import { ComponentPropsWithRef, useCallback, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { isMobile } from 'react-device-detect';
 import useLogin from '../../hooks/shared/useLogin';
 import { CustomNavObject, navs } from '../../route/nav';
 import useRoute from '../../route/useRoute';
+import { cn } from '@/lib/utils';
 
 type Props = {
   onlyIcon?: boolean;
@@ -72,7 +73,7 @@ export default function Nav({ onlyIcon }: Props) {
           isActive={isActive}
           onClick={() => navigate(nav.route.path)}
         >
-          <PcNavItemIconBox isActive={isActive}>{nav.icon}</PcNavItemIconBox>
+          <NavItemIconBox isActive={isActive}>{nav.icon}</NavItemIconBox>
           {!isMobile && renderNavItemText(nav)}
         </PcNavItem>
       );
@@ -116,9 +117,9 @@ export default function Nav({ onlyIcon }: Props) {
                 isActive={groupIsActive}
                 onClick={() => handleGroupClick(item.key)}
               >
-                <PcNavItemIconBox isActive={groupIsActive}>
+                <NavItemIconBox isActive={groupIsActive}>
                   {item.icon}
-                </PcNavItemIconBox>
+                </NavItemIconBox>
                 {!isMobile && renderNavItemText(item)}
               </PcNavItem>
               <GroupChildrenBox>
@@ -179,16 +180,36 @@ export const PcNavItem = styled.div<{ isActive?: boolean; disabled?: boolean }>`
       cursor: not-allowed;
     `};
 `;
-export const PcNavItemIconBox = styled.div<{ isActive?: boolean }>`
-  flex-shrink: 0;
+export function NavItemIconBox({
+  isActive,
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<'div'> & { isActive?: boolean }) {
+  return (
+    <div
+      className={cn(
+        'flex-shrink-0 transition-all ease-out delay-300 relative',
+        className,
+        'max-sm:w-[24px] max-sm:h-[24px]'
+      )}
+      {...props}
+    >
+      <NavItemIconInner isActive={isActive}>{children}</NavItemIconInner>
+    </div>
+  );
+}
+export const NavItemIconInner = styled.div<{ isActive?: boolean }>`
+  width: 100%;
+  height: 100%;
   svg {
+    width: 100%;
+    height: 100%;
     path {
       stroke: ${({ isActive }) => (isActive ? `#fff` : '#718096')};
       transition: all 0.3s ease-out;
     }
   }
-  transition: all 0.3s ease-out;
-  position: relative;
 `;
 export const PcNavItemTextBox = styled.div`
   overflow: hidden;