beta-0.4

.github/workflows/u3-firebase-hosting-merge.yml

@@ -18,10 +18,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "20"
       - run: |
           cd apps/u3
-          yarn 
+          yarn install --ignore-engines
           yarn build
         env:
           CI: false
@@ -60,10 +60,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "20"
       - run: |
           cd apps/u3
-          yarn 
+          yarn install --ignore-engines
           yarn build
         env:
           CI: false

apps/u3/README.md

@@ -1 +1,3 @@
-# Collector Page v2
+# U3
+use --ignore-engines when install deps
+```yarn install --ignore-engines```

apps/u3/package.json

@@ -5,9 +5,9 @@
   "dependencies": {
     "@airstack/airstack-react": "^0.4.7",
     "@farcaster/hub-web": "^0.6.2",
-    "@lens-protocol/metadata": "1.0.4",
-    "@lens-protocol/react-web": "2.0.0-alpha.23",
-    "@lens-protocol/wagmi": "3.0.0-alpha.20",
+    "@lens-protocol/metadata": "^1.1.3",
+    "@lens-protocol/react-web": "^2.0.0-alpha.25",
+    "@lens-protocol/wagmi": "^3.0.0-alpha.22",
     "@livepeer/react": "^2.8.8",
     "@loadable/component": "^5.15.2",
     "@multiavatar/multiavatar": "^1.0.7",
@@ -18,13 +18,13 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
-    "@rainbow-me/rainbowkit": "^1.0.11",
+    "@rainbow-me/rainbowkit": "^1.3.1",
     "@react-spring/web": "^9.6.1",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/validator": "^13.11.7",
-    "@us3r-network/auth-with-rainbowkit": "^0.2.0-alpha.1",
-    "@us3r-network/link": "0.2.5",
-    "@us3r-network/profile": "0.5.10-alpha.1",
+    "@us3r-network/auth-with-rainbowkit": "^0.2.1",
+    "@us3r-network/link": "0.3.0-alpha.2",
+    "@us3r-network/profile": "0.6.0",
     "@xmtp/content-type-remote-attachment": "^1.1.2",
     "@xmtp/xmtp-js": "^11.1.1",
     "@zoralabs/zdk": "^2.4.0",
@@ -87,8 +87,8 @@
     "tslib": "^2.3.0",
     "typescript": "^5.2.2",
     "validator": "^13.11.0",
-    "viem": "^1.16.6",
-    "wagmi": "^1.4.3",
+    "viem": "^1.20.0",
+    "wagmi": "^1.4.12",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",
@@ -172,8 +172,5 @@
     "url": "^0.11.0",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.6.0"
-  },
-  "resolutions": {
-    "did-session": "2.0.1"
   }
 }

apps/u3/src/components/dapp/detail/Header.tsx

@@ -4,6 +4,7 @@ import { useFavorAction } from '@us3r-network/link';
 import { useProfileState } from '@us3r-network/profile';
 import { MultiPlatformShareMenuBtn } from 'src/components/shared/share/MultiPlatformShareMenuBtn';
 import { getDappShareUrl } from 'src/utils/shared/share';
+import { useEffect, useState } from 'react';
 import { formatFilterShowName } from '../../../utils/shared/filter';
 import {
   DappExploreListItemResponse,
@@ -23,6 +24,7 @@ import { Edit } from '../../common/icons/edit';
 import useLogin from '../../../hooks/shared/useLogin';
 import Badge from '../Badge';
 import { DappMintButton } from '../DappMintButton';
+import { SaveButton } from '@/components/shared/button/SaveButton';
 
 type Props = StyledComponentPropsWithRef<'div'> & {
   data: DappExploreListItemResponse;
@@ -49,6 +51,16 @@ export default function Header({
   const isU3Dapp = data?.url?.startsWith('https://u3.xyz');
   const u3DappRoutePath = data?.url?.replace('https://u3.xyz', '');
 
+  const [linkParam, setLinkParam] = useState(null);
+  console.log('linkParam', data);
+  useEffect(() => {
+    setLinkParam({
+      url: data.url,
+      type: 'dapp',
+      title: data.name,
+    });
+  }, [data.url]);
+
   return (
     <HeaderWrapper {...otherProps}>
       <HeaderImg src={data.image} />
@@ -79,6 +91,9 @@ export default function Header({
       </HeaderCenter>
       <HeaderRight>
         <RightButtons>
+          {data?.id && (
+            <SaveButton linkId={data?.linkStreamId} link={linkParam} />
+          )}
           {data?.id && (
             <DappShareMenuBtn
               shareLink={getDappShareUrl(data.id)}

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

@@ -2,7 +2,7 @@
  * @Author: shixuewen [email protected]
  * @Date: 2022-12-29 18:44:14
  * @LastEditors: bufan [email protected]
- * @LastEditTime: 2023-10-27 12:14:05
+ * @LastEditTime: 2023-12-13 14:40:52
  * @Description: file description
  */
 import {
@@ -274,7 +274,7 @@ export default forwardRef(function DappInstallList(props: Props, ref) {
     </Wrapper>
   );
 });
-
+/*
 function UninstallOptionItem({
   linkId,
   onSuccessfullyFavor,
@@ -301,6 +301,7 @@ function UninstallOptionItem({
     </OptionItem>
   );
 }
+*/
 const Wrapper = styled.div`
   position: relative;
 `;

apps/u3/src/components/news/contents/ContentPreview.tsx

@@ -1,11 +1,11 @@
 /*
  * @Author: shixuewen [email protected]
  * @Date: 2022-12-14 10:28:05
- * @LastEditors: shixuewen friendlysxw@163.com
- * @LastEditTime: 2023-01-29 14:36:56
+ * @LastEditors: bufan bufan@hotmail.com
+ * @LastEditTime: 2023-12-13 16:07:10
  * @Description: file description
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled, { StyledComponentPropsWithRef } from 'styled-components';
 import useFullScreen from '../../../hooks/shared/useFullScreen';
@@ -18,6 +18,7 @@ import ContentShowerBox, {
 } from './ContentShowerBox';
 import { ContentItemActions } from './ListItem';
 import { getContentShareUrl } from '../../../utils/shared/share';
+import { SaveButton } from '@/components/shared/button/SaveButton';
 
 export type ContentPreviewProps = StyledComponentPropsWithRef<'div'> & {
   data?: ContentListItem;
@@ -46,14 +47,21 @@ export default function ContentPreview({
       setTab('original');
     }
   }, [data]);
-
+  const linkParam = useMemo(() => {
+    return {
+      url: data.link,
+      type: 'content',
+      title: data.title,
+    };
+  }, [data.link]);
   return (
     <ContentPreviewWrapper {...otherProps}>
       {data && (
         <>
           <Header>
             <ContentShowerTabs tab={tab} setTab={(t) => setTab(t)} />
             <HeaderRight>
+              <SaveButton linkId="" link={linkParam} />
               <ContentItemActions
                 id={data.id}
                 editorScore={data.editorScore}

apps/u3/src/components/news/contents/ContentShower.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import styled from 'styled-components';
 import { ContentListItem } from '../../../services/news/types/contents';
@@ -36,6 +36,14 @@ export default function ContentShower({
     () => getContentPlatformLogoWithJsonValue(value),
     [value]
   );
+  const [linkParam, setLinkParam] = useState(null);
+  useEffect(() => {
+    setLinkParam({
+      url: link,
+      type: 'content',
+      title,
+    });
+  }, [link, title]);
   return (
     <Shower>
       <ContentWrapper>
@@ -55,12 +63,15 @@ export default function ContentShower({
           </div>
         </ContentTitle>
         <ContentBody dangerouslySetInnerHTML={{ __html: contentFix }} />
-        {!isMobile && data.linkStreamId && (
-          <ContentActionsStyled linkId={data.linkStreamId} />
+        {!isMobile && (
+          <ContentActionsStyled linkId={data.linkStreamId} link={linkParam} />
         )}
       </ContentWrapper>
-      {!isMobile && data.linkStreamId && (
-        <ContentCommentLayoutStyled linkId={data.linkStreamId} />
+      {!isMobile && (
+        <ContentCommentLayoutStyled
+          linkId={data.linkStreamId}
+          link={linkParam}
+        />
       )}
     </Shower>
   );

apps/u3/src/components/news/contents/ListItem.tsx

@@ -1,13 +1,12 @@
 import styled from 'styled-components';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Share } from '../../common/icons/share';
+// import { Share } from '../../common/icons/share';
 // import { EyeClose } from '../icons/eyeClose';
 import { defaultFormatFromNow } from '../../../utils/shared/time';
 import LinkBox from './LinkBox';
-import { ButtonPrimaryLine } from '../../common/button/ButtonBase';
 import { getContentPlatformLogoWithJsonValue } from '../../../utils/news/content';
 import type { ContentExploreListItemData } from './ContentList';
-import { VoteButtonBase } from '../../shared/button/VoteButtonBase';
+// import { VoteButtonBase } from '../../shared/button/VoteButtonBase';
 import { MultiPlatformShareMenuBtn } from '../../shared/share/MultiPlatformShareMenuBtn';
 import { CONTENT_SHARE_TITLE } from '../../../constants';
 
@@ -20,7 +19,12 @@ export default function ListItem({
   isActive: boolean;
   clickAction: () => void;
 }) {
-  const { value, link, createdAt, title, hidden, linkStreamId } = data;
+  const { value, link, createdAt, title, hidden } = data;
+  // const currentLink = {
+  //   url: link,
+  //   title,
+  //   type: 'content',
+  // };
   const itemRef = useRef<HTMLDivElement & { isActive: boolean }>();
   const [height, setHeight] = useState('fit-content');
   const [classNames, setClassNames] = useState('');
@@ -51,9 +55,9 @@ export default function ListItem({
       isActive={isActive}
     >
       <ItemInner isActive={isActive} height={height}>
-        <div className="left">
-          {linkStreamId && <VoteButtonStyled linkId={linkStreamId} />}
-        </div>
+        {/* <div className="left">
+          <VoteButtonStyled linkId={linkStreamId} link={currentLink} />
+        </div> */}
 
         <div className={isActive ? 'right active' : 'right'}>
           <p>{title}</p>
@@ -68,18 +72,18 @@ export default function ListItem({
     </ContentItem>
   );
 }
-const VoteButtonStyled = styled(VoteButtonBase)`
-  width: 60px;
-  height: 60px;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-`;
+// const VoteButtonStyled = styled(VoteButtonBase)`
+//   width: 60px;
+//   height: 60px;
+//   padding: 0;
+//   display: flex;
+//   flex-direction: column;
+//   gap: 5px;
+//   svg {
+//     width: 18px;
+//     height: 18px;
+//   }
+// `;
 
 export function ContentItemActions({
   id,
@@ -265,7 +269,7 @@ const ItemInner = styled.div<{ isActive: boolean; height: string }>`
   }
 
   & div.right {
-    width: calc(100% - 62px);
+    width: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -291,19 +295,19 @@ const ItemInner = styled.div<{ isActive: boolean; height: string }>`
     }
   }
 `;
-const ContentItemLeftVoteButton = styled(ButtonPrimaryLine)`
-  width: 50px;
-  height: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0;
-  > span {
-    color: #ffffff;
-    font-size: 12px;
-    line-height: 14px;
-  }
-`;
+// const ContentItemLeftVoteButton = styled(ButtonPrimaryLine)`
+//   width: 50px;
+//   height: 50px;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   gap: 0;
+//   > span {
+//     color: #ffffff;
+//     font-size: 12px;
+//     line-height: 14px;
+//   }
+// `;
 const ContentItemTitle = styled.div`
   display: flex;
   align-items: center;
@@ -347,12 +351,3 @@ const ContentItemActionsWrapper = styled.div`
   justify-content: end;
   align-items: center;
 `;
-
-const ContentHandleButton = styled(ButtonPrimaryLine)`
-  padding: 6px;
-  height: 32px;
-`;
-
-const ContentHandleButtonVote = styled(ContentHandleButton)`
-  width: 190px;
-`;