From 971f0a2458fc01444bf0c33a19503f27edf32924 Mon Sep 17 00:00:00 2001 From: bufan Date: Wed, 13 Dec 2023 14:47:46 +0800 Subject: [PATCH 01/11] upgrade us3r libs --- apps/u3/package.json | 15 ++++++--------- .../components/dapp/launcher/DappInstallList.tsx | 5 +++-- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/apps/u3/package.json b/apps/u3/package.json index fee2add3..4eb6be64 100644 --- a/apps/u3/package.json +++ b/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,9 +18,9 @@ "@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.0", + "@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", @@ -168,8 +168,5 @@ "url": "^0.11.0", "webpack": "^5.73.0", "webpack-bundle-analyzer": "^4.6.0" - }, - "resolutions": { - "did-session": "2.0.1" } } diff --git a/apps/u3/src/components/dapp/launcher/DappInstallList.tsx b/apps/u3/src/components/dapp/launcher/DappInstallList.tsx index 9bc37a2b..d1d431d7 100644 --- a/apps/u3/src/components/dapp/launcher/DappInstallList.tsx +++ b/apps/u3/src/components/dapp/launcher/DappInstallList.tsx @@ -2,7 +2,7 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-29 18:44:14 * @LastEditors: bufan bufan@hotmail.com - * @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) { ); }); - +/* function UninstallOptionItem({ linkId, onSuccessfullyFavor, @@ -301,6 +301,7 @@ function UninstallOptionItem({ ); } +*/ const Wrapper = styled.div` position: relative; `; From a02fb01db444f5d24b43fec29a1889598dbd7b0c Mon Sep 17 00:00:00 2001 From: bufan Date: Thu, 14 Dec 2023 10:30:15 +0800 Subject: [PATCH 02/11] reopen svae module --- .../src/components/save/SaveExploreList.tsx | 29 ++++++------ .../components/save/SaveExploreListItem.tsx | 45 ++++++++----------- apps/u3/src/route/nav.ts | 14 +++--- 3 files changed, 41 insertions(+), 47 deletions(-) diff --git a/apps/u3/src/components/save/SaveExploreList.tsx b/apps/u3/src/components/save/SaveExploreList.tsx index 5368d048..776ef708 100644 --- a/apps/u3/src/components/save/SaveExploreList.tsx +++ b/apps/u3/src/components/save/SaveExploreList.tsx @@ -1,9 +1,17 @@ +/* + * @Author: bufan bufan@hotmail.com + * @Date: 2023-11-24 18:31:36 + * @LastEditors: bufan bufan@hotmail.com + * @LastEditTime: 2023-12-14 10:19:49 + * @FilePath: /u3/apps/u3/src/components/save/SaveExploreList.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import styled from 'styled-components'; import AnimatedListItem, { useAnimatedListTransition, } from '../common/animation/AnimatedListItem'; -import CardBase from '../common/card/CardBase'; import SaveExploreListItem from './SaveExploreListItem'; +import { MEDIA_BREAK_POINTS } from '@/constants'; export type SaveExploreListItemData = { id: string; @@ -38,18 +46,13 @@ export default function SaveExploreList({ ); } -const SaveExploreListWrapper = styled(CardBase)` - padding: 0; +const SaveExploreListWrapper = styled.div` width: 100%; - height: 100%; - display: flex; - flex-direction: column; - & > div { - & { - border-bottom: 1px solid rgba(57, 66, 76, 0.5); - } - &:last-child:not(:first-child) { - border-bottom: none; - } + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(4, minmax(calc((100% - 20px * 3) / 4), 1fr)); + + @media (min-width: ${MEDIA_BREAK_POINTS.md}px) and (max-width: ${MEDIA_BREAK_POINTS.xxl}px) { + grid-template-columns: repeat(6, minmax(calc((100% - 20px * 2) / 3), 1fr)); } `; diff --git a/apps/u3/src/components/save/SaveExploreListItem.tsx b/apps/u3/src/components/save/SaveExploreListItem.tsx index f7a00c26..064489a8 100644 --- a/apps/u3/src/components/save/SaveExploreListItem.tsx +++ b/apps/u3/src/components/save/SaveExploreListItem.tsx @@ -12,21 +12,17 @@ export default function SaveExploreListItem({ data, ...props }: SaveExploreListItemProps) { + console.log('save item', data); return ( - - {data.title} - - {!!data?.createAt && ( - - {defaultFormatFromNow(data.createAt)} - - )} - - - - + + {data.title || data.url} + {!!data?.createAt && ( + + {defaultFormatFromNow(data.createAt)} + + )} ); @@ -34,10 +30,15 @@ export default function SaveExploreListItem({ const Wrapper = styled.div` width: 100%; - height: 105px; + height: 200px; padding: 20px; box-sizing: border-box; + background: #1b1e23; + border: 1px solid #39424c; + border-radius: 20px; + position: relative; cursor: pointer; + color: #ffffff; &:hover { background: rgba(20, 23, 26, 0.3); } @@ -49,13 +50,9 @@ const ListItemInner = styled.div` display: flex; flex-direction: column; justify-content: space-between; - gap: 10px; -`; -const TopBox = styled.div` - display: flex; gap: 20px; - align-items: center; `; + const TitleText = styled(EllipsisText)` flex: 1; font-weight: 500; @@ -71,20 +68,14 @@ const TimeText = styled.span` color: #718096; `; -const BottomBox = styled.div` - display: flex; - gap: 20px; - align-items: center; -`; const IconLink = styled(LinkBox)` display: flex; flex-direction: row; align-items: center; - padding: 8px 20px 8px 16px; + padding: 0; box-sizing: border-box; - gap: 8px; - height: 36px; + gap: 6px; background: #14171a; border-radius: 100px; @@ -95,7 +86,7 @@ const IconLink = styled(LinkBox)` span { font-weight: 400; font-size: 14px; - line-height: 17px; + line-height: 18px; color: #718096; } `; diff --git a/apps/u3/src/route/nav.ts b/apps/u3/src/route/nav.ts index 0a8c76f7..0e0a0d49 100644 --- a/apps/u3/src/route/nav.ts +++ b/apps/u3/src/route/nav.ts @@ -2,7 +2,7 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-12 13:59:01 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-07 15:31:30 + * @LastEditTime: 2023-12-13 15:32:17 * @Description: file description */ import React, { ReactNode } from 'react'; @@ -63,12 +63,12 @@ export const navs: CustomNavObject[] = [ icon: React.createElement(DappSvg), route: getRoute(RouteKey.dappStore), }, - // { - // name: 'Save', - // activeRouteKeys: [RouteKey.save], - // icon: React.createElement(BookmarkSvg), - // route: getRoute(RouteKey.save), - // }, + { + name: 'Save', + activeRouteKeys: [RouteKey.save], + icon: React.createElement(BookmarkSvg), + route: getRoute(RouteKey.save), + }, // { // name: 'profile', // activeRouteKeys: [RouteKey.profile], From 21cb86a9b86903973d4ffacf14da781b6a2407ac Mon Sep 17 00:00:00 2001 From: bufan Date: Thu, 14 Dec 2023 11:17:46 +0800 Subject: [PATCH 03/11] add save buttons to social, links, dapp --- apps/u3/package.json | 2 +- apps/u3/src/components/dapp/detail/Header.tsx | 15 ++++ .../news/contents/ContentPreview.tsx | 16 +++- .../news/contents/ContentShower.tsx | 21 +++-- .../src/components/news/contents/ListItem.tsx | 79 +++++++++---------- .../news/contents/action/ContentActions.tsx | 17 +++- .../contents/comment/ContentCommentLayout.tsx | 15 +++- .../src/components/news/links/LinkPreview.tsx | 15 +++- .../components/shared/button/SaveButton.tsx | 47 +++++++++++ apps/u3/src/components/social/PostCard.tsx | 18 ++++- .../src/components/social/farcaster/FCast.tsx | 17 +++- 11 files changed, 194 insertions(+), 68 deletions(-) create mode 100644 apps/u3/src/components/shared/button/SaveButton.tsx diff --git a/apps/u3/package.json b/apps/u3/package.json index 4eb6be64..b9d26979 100644 --- a/apps/u3/package.json +++ b/apps/u3/package.json @@ -19,7 +19,7 @@ "@reduxjs/toolkit": "^1.8.3", "@types/validator": "^13.11.7", "@us3r-network/auth-with-rainbowkit": "^0.2.1", - "@us3r-network/link": "0.3.0-alpha.0", + "@us3r-network/link": "0.3.0-alpha.1", "@us3r-network/profile": "0.6.0", "@xmtp/content-type-remote-attachment": "^1.1.2", "@xmtp/xmtp-js": "^11.1.1", diff --git a/apps/u3/src/components/dapp/detail/Header.tsx b/apps/u3/src/components/dapp/detail/Header.tsx index 035d6bd5..128e8a13 100644 --- a/apps/u3/src/components/dapp/detail/Header.tsx +++ b/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 ( @@ -79,6 +91,9 @@ export default function Header({ + {data?.id && ( + + )} {data?.id && ( & { data?: ContentListItem; @@ -46,7 +47,13 @@ export default function ContentPreview({ setTab('original'); } }, [data]); - + const linkParam = useMemo(() => { + return { + url: data.link, + type: 'content', + title: data.title, + }; + }, [data.link]); return ( {data && ( @@ -54,6 +61,7 @@ export default function ContentPreview({
setTab(t)} /> + getContentPlatformLogoWithJsonValue(value), [value] ); + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: link, + type: 'content', + title, + }); + }, [link, title]); return ( @@ -55,12 +63,15 @@ export default function ContentShower({ - {!isMobile && data.linkStreamId && ( - + {!isMobile && ( + )} - {!isMobile && data.linkStreamId && ( - + {!isMobile && ( + )} ); diff --git a/apps/u3/src/components/news/contents/ListItem.tsx b/apps/u3/src/components/news/contents/ListItem.tsx index c7a65d5c..bf6eee1d 100644 --- a/apps/u3/src/components/news/contents/ListItem.tsx +++ b/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(); const [height, setHeight] = useState('fit-content'); const [classNames, setClassNames] = useState(''); @@ -51,9 +55,9 @@ export default function ListItem({ isActive={isActive} > -
- {linkStreamId && } -
+ {/*
+ +
*/}

{title}

@@ -68,18 +72,18 @@ export default function ListItem({ ); } -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; -`; diff --git a/apps/u3/src/components/news/contents/action/ContentActions.tsx b/apps/u3/src/components/news/contents/action/ContentActions.tsx index c271e5e1..1cdf500e 100644 --- a/apps/u3/src/components/news/contents/action/ContentActions.tsx +++ b/apps/u3/src/components/news/contents/action/ContentActions.tsx @@ -1,3 +1,11 @@ +/* + * @Author: bufan bufan@hotmail.com + * @Date: 2023-11-24 18:31:36 + * @LastEditors: bufan bufan@hotmail.com + * @LastEditTime: 2023-12-14 11:11:49 + * @FilePath: /u3/apps/u3/src/components/news/contents/action/ContentActions.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import styled, { StyledComponentPropsWithRef, css } from 'styled-components'; import { Comments } from '@us3r-network/link'; import { ButtonPrimaryLineCss } from '../../../common/button/ButtonBase'; @@ -7,12 +15,13 @@ import IconMessage from '../../../common/icons/IconMessage'; export default function ContentActions({ linkId, + link, ...wrapperProps -}: StyledComponentPropsWithRef<'div'> & { linkId: string }) { +}: StyledComponentPropsWithRef<'div'> & { linkId: string; link: any }) { return ( - - + + {({ commentsCount }) => { return ( <> @@ -22,7 +31,7 @@ export default function ContentActions({ ); }} - + ); } diff --git a/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx b/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx index eeba5b8a..e75c53c5 100644 --- a/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx +++ b/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx @@ -1,15 +1,24 @@ +/* + * @Author: bufan bufan@hotmail.com + * @Date: 2023-11-24 18:31:36 + * @LastEditors: bufan bufan@hotmail.com + * @LastEditTime: 2023-12-14 11:12:40 + * @FilePath: /u3/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import styled, { StyledComponentPropsWithRef } from 'styled-components'; import ContentComments from './ContentComments'; import ContentCommentAddForm from './ContentCommentAddForm'; export default function ContentCommentLayout({ linkId, + link, ...wrapperProps -}: StyledComponentPropsWithRef<'div'> & { linkId: string }) { +}: StyledComponentPropsWithRef<'div'> & { linkId: string; link: any }) { return ( - - + + ); } diff --git a/apps/u3/src/components/news/links/LinkPreview.tsx b/apps/u3/src/components/news/links/LinkPreview.tsx index 272a1dee..91a29fab 100644 --- a/apps/u3/src/components/news/links/LinkPreview.tsx +++ b/apps/u3/src/components/news/links/LinkPreview.tsx @@ -2,10 +2,10 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-14 10:28:05 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-05 18:35:31 + * @LastEditTime: 2023-12-13 19:43:03 * @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 { LinkListItem } from 'src/services/news/types/links'; @@ -16,6 +16,7 @@ import useFullScreen from '../../../hooks/shared/useFullScreen'; import ButtonFullScreen from '../../common/button/ButtonFullScreen'; import LinkContentBox, { Tab } from './LinkContentBox'; import LinkPost from './LinkPost'; +import { SaveButton } from '@/components/shared/button/SaveButton'; export type LinkPreviewProps = StyledComponentPropsWithRef<'div'> & { data?: LinkListItem; @@ -31,7 +32,14 @@ export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) { // setTab('readerView'); // } // }, [data]); - + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: data.url, + type: 'link', + title: data.metadata.title, + }); + }, [data.url]); return ( data && ( @@ -39,6 +47,7 @@ export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) {
setTab(t)} /> + + {({ isFavoring, isFavored, favorsCount }) => { + console.log(isFavoring, isFavored, favorsCount); + return ( +
+ {(() => { + if (isFavoring) { + // return ; + } + if (isFavored) { + return ; + } + return ; + })()} +
+ ); + }} + + ); +} + +export const FavorButtonStyled = styled(FavorButton)` + ${ButtonPrimaryLineCss} + /* color: #fff; */ + border: none; + background: none; + padding: 6px; + height: 32px; + &:hover { + border: none; + } +`; diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx index 61a6581e..713057b8 100644 --- a/apps/u3/src/components/social/PostCard.tsx +++ b/apps/u3/src/components/social/PostCard.tsx @@ -2,12 +2,12 @@ * @Author: bufan bufan@hotmail.com * @Date: 2023-12-06 17:17:59 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-07 13:24:31 + * @LastEditTime: 2023-12-13 19:59:53 * @FilePath: /u3/apps/u3/src/components/social/PostCard.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import dayjs from 'dayjs'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import styled, { StyledComponentPropsWithRef } from 'styled-components'; import { getOfficialPublicationUrl } from 'src/utils/social/lens/getLensExternalLink'; @@ -25,6 +25,7 @@ import { import TooltipProfileNavigateLink from '../profile/profile-info/TooltipProfileNavigateLink'; import { MultiPlatformShareMenuBtn } from '../shared/share/MultiPlatformShareMenuBtn'; import { SOCIAL_SHARE_TITLE } from '../../constants'; +import { SaveButton } from '../shared/button/SaveButton'; export type PostCardData = { platform: SocialPlatform; @@ -90,6 +91,14 @@ export default function PostCard({ shareLinkEmbedTitle, ...wrapperProps }: StyledComponentPropsWithRef<'div'> & PostCardProps) { + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: getOfficialPublicationUrl(id), + type: 'link', + title: data?.content, + }); + }, [id]); return ( @@ -139,11 +148,12 @@ export default function PostCard({ repostAction={repostAction} /> -
{ e.stopPropagation(); }} > + -
+ )} diff --git a/apps/u3/src/components/social/farcaster/FCast.tsx b/apps/u3/src/components/social/farcaster/FCast.tsx index 3f367087..072a7b40 100644 --- a/apps/u3/src/components/social/farcaster/FCast.tsx +++ b/apps/u3/src/components/social/farcaster/FCast.tsx @@ -33,6 +33,7 @@ import { PostCardMenuBtn } from '../PostCardMenuBtn'; import { SOCIAL_SHARE_TITLE } from '../../../constants'; import { getEmbeds } from '../../../utils/social/farcaster/getEmbeds'; import { farcasterHandleToBioLinkHandle } from '@/utils/profile/biolink'; +import { SaveButton } from '@/components/shared/button/SaveButton'; export default function FCast({ cast, @@ -95,6 +96,17 @@ export default function FCast({ return following.includes(userData.fid); }, [isFollowing, following, userData.fid]); + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: getOfficialCastUrl( + userData.userName, + Buffer.from(castId.hash).toString('hex') + ), + type: 'link', + title: cast.text, + }); + }, [castId.hash]); return ( {!simpleLayout && ( -
{ e.stopPropagation(); }} > + -
+ )} From 13dd0de49f8fd640f9c1c8bbb1c3dfb2eec23a67 Mon Sep 17 00:00:00 2001 From: bufan Date: Wed, 13 Dec 2023 14:47:46 +0800 Subject: [PATCH 04/11] upgrade us3r libs --- apps/u3/package.json | 15 ++++++--------- .../components/dapp/launcher/DappInstallList.tsx | 5 +++-- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/apps/u3/package.json b/apps/u3/package.json index d5903705..45c1718b 100644 --- a/apps/u3/package.json +++ b/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", @@ -22,9 +22,9 @@ "@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.0", + "@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", @@ -172,8 +172,5 @@ "url": "^0.11.0", "webpack": "^5.73.0", "webpack-bundle-analyzer": "^4.6.0" - }, - "resolutions": { - "did-session": "2.0.1" } } diff --git a/apps/u3/src/components/dapp/launcher/DappInstallList.tsx b/apps/u3/src/components/dapp/launcher/DappInstallList.tsx index 9bc37a2b..d1d431d7 100644 --- a/apps/u3/src/components/dapp/launcher/DappInstallList.tsx +++ b/apps/u3/src/components/dapp/launcher/DappInstallList.tsx @@ -2,7 +2,7 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-29 18:44:14 * @LastEditors: bufan bufan@hotmail.com - * @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) { ); }); - +/* function UninstallOptionItem({ linkId, onSuccessfullyFavor, @@ -301,6 +301,7 @@ function UninstallOptionItem({ ); } +*/ const Wrapper = styled.div` position: relative; `; From 9e254bc0348031a261f547d7fa04be6f6cc61e8d Mon Sep 17 00:00:00 2001 From: bufan Date: Thu, 14 Dec 2023 10:30:15 +0800 Subject: [PATCH 05/11] reopen svae module --- .../src/components/save/SaveExploreList.tsx | 29 ++++++------ .../components/save/SaveExploreListItem.tsx | 45 ++++++++----------- apps/u3/src/route/nav.tsx | 26 +++++------ 3 files changed, 47 insertions(+), 53 deletions(-) diff --git a/apps/u3/src/components/save/SaveExploreList.tsx b/apps/u3/src/components/save/SaveExploreList.tsx index 5368d048..776ef708 100644 --- a/apps/u3/src/components/save/SaveExploreList.tsx +++ b/apps/u3/src/components/save/SaveExploreList.tsx @@ -1,9 +1,17 @@ +/* + * @Author: bufan bufan@hotmail.com + * @Date: 2023-11-24 18:31:36 + * @LastEditors: bufan bufan@hotmail.com + * @LastEditTime: 2023-12-14 10:19:49 + * @FilePath: /u3/apps/u3/src/components/save/SaveExploreList.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import styled from 'styled-components'; import AnimatedListItem, { useAnimatedListTransition, } from '../common/animation/AnimatedListItem'; -import CardBase from '../common/card/CardBase'; import SaveExploreListItem from './SaveExploreListItem'; +import { MEDIA_BREAK_POINTS } from '@/constants'; export type SaveExploreListItemData = { id: string; @@ -38,18 +46,13 @@ export default function SaveExploreList({ ); } -const SaveExploreListWrapper = styled(CardBase)` - padding: 0; +const SaveExploreListWrapper = styled.div` width: 100%; - height: 100%; - display: flex; - flex-direction: column; - & > div { - & { - border-bottom: 1px solid rgba(57, 66, 76, 0.5); - } - &:last-child:not(:first-child) { - border-bottom: none; - } + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(4, minmax(calc((100% - 20px * 3) / 4), 1fr)); + + @media (min-width: ${MEDIA_BREAK_POINTS.md}px) and (max-width: ${MEDIA_BREAK_POINTS.xxl}px) { + grid-template-columns: repeat(6, minmax(calc((100% - 20px * 2) / 3), 1fr)); } `; diff --git a/apps/u3/src/components/save/SaveExploreListItem.tsx b/apps/u3/src/components/save/SaveExploreListItem.tsx index f7a00c26..064489a8 100644 --- a/apps/u3/src/components/save/SaveExploreListItem.tsx +++ b/apps/u3/src/components/save/SaveExploreListItem.tsx @@ -12,21 +12,17 @@ export default function SaveExploreListItem({ data, ...props }: SaveExploreListItemProps) { + console.log('save item', data); return ( - - {data.title} - - {!!data?.createAt && ( - - {defaultFormatFromNow(data.createAt)} - - )} - - - - + + {data.title || data.url} + {!!data?.createAt && ( + + {defaultFormatFromNow(data.createAt)} + + )} ); @@ -34,10 +30,15 @@ export default function SaveExploreListItem({ const Wrapper = styled.div` width: 100%; - height: 105px; + height: 200px; padding: 20px; box-sizing: border-box; + background: #1b1e23; + border: 1px solid #39424c; + border-radius: 20px; + position: relative; cursor: pointer; + color: #ffffff; &:hover { background: rgba(20, 23, 26, 0.3); } @@ -49,13 +50,9 @@ const ListItemInner = styled.div` display: flex; flex-direction: column; justify-content: space-between; - gap: 10px; -`; -const TopBox = styled.div` - display: flex; gap: 20px; - align-items: center; `; + const TitleText = styled(EllipsisText)` flex: 1; font-weight: 500; @@ -71,20 +68,14 @@ const TimeText = styled.span` color: #718096; `; -const BottomBox = styled.div` - display: flex; - gap: 20px; - align-items: center; -`; const IconLink = styled(LinkBox)` display: flex; flex-direction: row; align-items: center; - padding: 8px 20px 8px 16px; + padding: 0; box-sizing: border-box; - gap: 8px; - height: 36px; + gap: 6px; background: #14171a; border-radius: 100px; @@ -95,7 +86,7 @@ const IconLink = styled(LinkBox)` span { font-weight: 400; font-size: 14px; - line-height: 17px; + line-height: 18px; color: #718096; } `; diff --git a/apps/u3/src/route/nav.tsx b/apps/u3/src/route/nav.tsx index 0111f3a1..de3aff5f 100644 --- a/apps/u3/src/route/nav.tsx +++ b/apps/u3/src/route/nav.tsx @@ -2,7 +2,7 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-12 13:59:01 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-07 15:31:30 + * @LastEditTime: 2023-12-14 18:01:45 * @Description: file description */ import React, { ReactNode } from 'react'; @@ -61,18 +61,18 @@ export const navs: CustomNavObject[] = [ icon: React.createElement(SocialSvg), route: getRoute(RouteKey.socialLayout), }, - // { - // name: 'Apps', - // activeRouteKeys: [RouteKey.dappStore, RouteKey.dapp], - // icon: React.createElement(DappSvg), - // route: getRoute(RouteKey.dappStore), - // }, - // { - // name: 'Save', - // activeRouteKeys: [RouteKey.save], - // icon: React.createElement(BookmarkSvg), - // route: getRoute(RouteKey.save), - // }, + { + name: 'Apps', + activeRouteKeys: [RouteKey.dappStore, RouteKey.dapp], + icon: React.createElement(DappSvg), + route: getRoute(RouteKey.dappStore), + }, + { + name: 'Save', + activeRouteKeys: [RouteKey.save], + icon: React.createElement(BookmarkSvg), + route: getRoute(RouteKey.save), + }, // { // name: 'profile', // activeRouteKeys: [RouteKey.profile], From cd05e61986ec817435c8cb66daebeb64734a64bb Mon Sep 17 00:00:00 2001 From: bufan Date: Thu, 14 Dec 2023 11:17:46 +0800 Subject: [PATCH 06/11] add save buttons to social, links, dapp --- apps/u3/package.json | 2 +- apps/u3/src/components/dapp/detail/Header.tsx | 15 ++++ .../news/contents/ContentPreview.tsx | 16 +++- .../news/contents/ContentShower.tsx | 21 +++-- .../src/components/news/contents/ListItem.tsx | 79 +++++++++---------- .../news/contents/action/ContentActions.tsx | 17 +++- .../contents/comment/ContentCommentLayout.tsx | 15 +++- .../src/components/news/links/LinkPreview.tsx | 15 +++- .../components/shared/button/SaveButton.tsx | 47 +++++++++++ apps/u3/src/components/social/PostCard.tsx | 18 ++++- .../src/components/social/farcaster/FCast.tsx | 18 ++++- 11 files changed, 195 insertions(+), 68 deletions(-) create mode 100644 apps/u3/src/components/shared/button/SaveButton.tsx diff --git a/apps/u3/package.json b/apps/u3/package.json index 45c1718b..4b17fb66 100644 --- a/apps/u3/package.json +++ b/apps/u3/package.json @@ -23,7 +23,7 @@ "@reduxjs/toolkit": "^1.8.3", "@types/validator": "^13.11.7", "@us3r-network/auth-with-rainbowkit": "^0.2.1", - "@us3r-network/link": "0.3.0-alpha.0", + "@us3r-network/link": "0.3.0-alpha.1", "@us3r-network/profile": "0.6.0", "@xmtp/content-type-remote-attachment": "^1.1.2", "@xmtp/xmtp-js": "^11.1.1", diff --git a/apps/u3/src/components/dapp/detail/Header.tsx b/apps/u3/src/components/dapp/detail/Header.tsx index 035d6bd5..128e8a13 100644 --- a/apps/u3/src/components/dapp/detail/Header.tsx +++ b/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 ( @@ -79,6 +91,9 @@ export default function Header({ + {data?.id && ( + + )} {data?.id && ( & { data?: ContentListItem; @@ -46,7 +47,13 @@ export default function ContentPreview({ setTab('original'); } }, [data]); - + const linkParam = useMemo(() => { + return { + url: data.link, + type: 'content', + title: data.title, + }; + }, [data.link]); return ( {data && ( @@ -54,6 +61,7 @@ export default function ContentPreview({
setTab(t)} /> + getContentPlatformLogoWithJsonValue(value), [value] ); + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: link, + type: 'content', + title, + }); + }, [link, title]); return ( @@ -55,12 +63,15 @@ export default function ContentShower({
- {!isMobile && data.linkStreamId && ( - + {!isMobile && ( + )} - {!isMobile && data.linkStreamId && ( - + {!isMobile && ( + )} ); diff --git a/apps/u3/src/components/news/contents/ListItem.tsx b/apps/u3/src/components/news/contents/ListItem.tsx index c7a65d5c..bf6eee1d 100644 --- a/apps/u3/src/components/news/contents/ListItem.tsx +++ b/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(); const [height, setHeight] = useState('fit-content'); const [classNames, setClassNames] = useState(''); @@ -51,9 +55,9 @@ export default function ListItem({ isActive={isActive} > -
- {linkStreamId && } -
+ {/*
+ +
*/}

{title}

@@ -68,18 +72,18 @@ export default function ListItem({ ); } -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; -`; diff --git a/apps/u3/src/components/news/contents/action/ContentActions.tsx b/apps/u3/src/components/news/contents/action/ContentActions.tsx index c271e5e1..1cdf500e 100644 --- a/apps/u3/src/components/news/contents/action/ContentActions.tsx +++ b/apps/u3/src/components/news/contents/action/ContentActions.tsx @@ -1,3 +1,11 @@ +/* + * @Author: bufan bufan@hotmail.com + * @Date: 2023-11-24 18:31:36 + * @LastEditors: bufan bufan@hotmail.com + * @LastEditTime: 2023-12-14 11:11:49 + * @FilePath: /u3/apps/u3/src/components/news/contents/action/ContentActions.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import styled, { StyledComponentPropsWithRef, css } from 'styled-components'; import { Comments } from '@us3r-network/link'; import { ButtonPrimaryLineCss } from '../../../common/button/ButtonBase'; @@ -7,12 +15,13 @@ import IconMessage from '../../../common/icons/IconMessage'; export default function ContentActions({ linkId, + link, ...wrapperProps -}: StyledComponentPropsWithRef<'div'> & { linkId: string }) { +}: StyledComponentPropsWithRef<'div'> & { linkId: string; link: any }) { return ( - - + + {({ commentsCount }) => { return ( <> @@ -22,7 +31,7 @@ export default function ContentActions({ ); }} - + ); } diff --git a/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx b/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx index eeba5b8a..e75c53c5 100644 --- a/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx +++ b/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx @@ -1,15 +1,24 @@ +/* + * @Author: bufan bufan@hotmail.com + * @Date: 2023-11-24 18:31:36 + * @LastEditors: bufan bufan@hotmail.com + * @LastEditTime: 2023-12-14 11:12:40 + * @FilePath: /u3/apps/u3/src/components/news/contents/comment/ContentCommentLayout.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import styled, { StyledComponentPropsWithRef } from 'styled-components'; import ContentComments from './ContentComments'; import ContentCommentAddForm from './ContentCommentAddForm'; export default function ContentCommentLayout({ linkId, + link, ...wrapperProps -}: StyledComponentPropsWithRef<'div'> & { linkId: string }) { +}: StyledComponentPropsWithRef<'div'> & { linkId: string; link: any }) { return ( - - + + ); } diff --git a/apps/u3/src/components/news/links/LinkPreview.tsx b/apps/u3/src/components/news/links/LinkPreview.tsx index 272a1dee..91a29fab 100644 --- a/apps/u3/src/components/news/links/LinkPreview.tsx +++ b/apps/u3/src/components/news/links/LinkPreview.tsx @@ -2,10 +2,10 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-14 10:28:05 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-05 18:35:31 + * @LastEditTime: 2023-12-13 19:43:03 * @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 { LinkListItem } from 'src/services/news/types/links'; @@ -16,6 +16,7 @@ import useFullScreen from '../../../hooks/shared/useFullScreen'; import ButtonFullScreen from '../../common/button/ButtonFullScreen'; import LinkContentBox, { Tab } from './LinkContentBox'; import LinkPost from './LinkPost'; +import { SaveButton } from '@/components/shared/button/SaveButton'; export type LinkPreviewProps = StyledComponentPropsWithRef<'div'> & { data?: LinkListItem; @@ -31,7 +32,14 @@ export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) { // setTab('readerView'); // } // }, [data]); - + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: data.url, + type: 'link', + title: data.metadata.title, + }); + }, [data.url]); return ( data && ( @@ -39,6 +47,7 @@ export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) {
setTab(t)} /> + + {({ isFavoring, isFavored, favorsCount }) => { + console.log(isFavoring, isFavored, favorsCount); + return ( +
+ {(() => { + if (isFavoring) { + // return ; + } + if (isFavored) { + return ; + } + return ; + })()} +
+ ); + }} + + ); +} + +export const FavorButtonStyled = styled(FavorButton)` + ${ButtonPrimaryLineCss} + /* color: #fff; */ + border: none; + background: none; + padding: 6px; + height: 32px; + &:hover { + border: none; + } +`; diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx index 1935a959..98a9beca 100644 --- a/apps/u3/src/components/social/PostCard.tsx +++ b/apps/u3/src/components/social/PostCard.tsx @@ -2,12 +2,12 @@ * @Author: bufan bufan@hotmail.com * @Date: 2023-12-06 17:17:59 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-07 13:24:31 + * @LastEditTime: 2023-12-13 19:59:53 * @FilePath: /u3/apps/u3/src/components/social/PostCard.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import dayjs from 'dayjs'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import styled, { StyledComponentPropsWithRef } from 'styled-components'; import { getOfficialPublicationUrl } from 'src/utils/social/lens/getLensExternalLink'; @@ -25,6 +25,7 @@ import { import TooltipProfileNavigateLink from '../profile/profile-info/TooltipProfileNavigateLink'; import { MultiPlatformShareMenuBtn } from '../shared/share/MultiPlatformShareMenuBtn'; import { SOCIAL_SHARE_TITLE } from '../../constants'; +import { SaveButton } from '../shared/button/SaveButton'; export type PostCardData = { platform: SocialPlatform; @@ -90,6 +91,14 @@ export default function PostCard({ shareLinkEmbedTitle, ...wrapperProps }: StyledComponentPropsWithRef<'div'> & PostCardProps) { + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: getOfficialPublicationUrl(id), + type: 'link', + title: data?.content, + }); + }, [id]); return ( @@ -139,11 +148,12 @@ export default function PostCard({ repostAction={repostAction} /> -
{ e.stopPropagation(); }} > + -
+ )} diff --git a/apps/u3/src/components/social/farcaster/FCast.tsx b/apps/u3/src/components/social/farcaster/FCast.tsx index f3f888c5..c02aa70a 100644 --- a/apps/u3/src/components/social/farcaster/FCast.tsx +++ b/apps/u3/src/components/social/farcaster/FCast.tsx @@ -33,6 +33,8 @@ import { PostCardMenuBtn } from '../PostCardMenuBtn'; import { SOCIAL_SHARE_TITLE } from '../../../constants'; import { getEmbeds } from '../../../utils/social/farcaster/getEmbeds'; import FCastText from './FCastText'; +import { farcasterHandleToBioLinkHandle } from '@/utils/profile/biolink'; +import { SaveButton } from '@/components/shared/button/SaveButton'; export default function FCast({ cast, @@ -95,6 +97,17 @@ export default function FCast({ return following.includes(userData.fid); }, [isFollowing, following, userData.fid]); + const [linkParam, setLinkParam] = useState(null); + useEffect(() => { + setLinkParam({ + url: getOfficialCastUrl( + userData.userName, + Buffer.from(castId.hash).toString('hex') + ), + type: 'link', + title: cast.text, + }); + }, [castId.hash]); return ( {!simpleLayout && ( -
{ e.stopPropagation(); }} > + -
+ )} From 03733218126447a308373c50db7fbbd9b18f98ad Mon Sep 17 00:00:00 2001 From: shixuewen Date: Thu, 14 Dec 2023 18:24:48 +0800 Subject: [PATCH 07/11] fix: fix load links --- apps/u3/src/container/news/Links.tsx | 7 +- apps/u3/src/hooks/news/useFeedLinks.ts | 115 +++++++++++++++++-------- 2 files changed, 81 insertions(+), 41 deletions(-) diff --git a/apps/u3/src/container/news/Links.tsx b/apps/u3/src/container/news/Links.tsx index da0662f0..8304397a 100644 --- a/apps/u3/src/container/news/Links.tsx +++ b/apps/u3/src/container/news/Links.tsx @@ -19,7 +19,8 @@ import { LinkGroup } from 'src/components/news/header/NewsMenu'; function Links() { const { group, link } = useParams(); const { currentSearchParams, searchParamsChange } = useLinksSearchParams(); - const { loading, hasMore, links, load, loadMore } = useFeedLinks(); + const { loading, moreLoading, hasMore, links, load, loadMore } = + useFeedLinks(); useEffect(() => { const linkGroup = LinkGroup.find((item) => item.group === group); @@ -30,14 +31,14 @@ function Links() { }, [group, currentSearchParams]); const getMore = useCallback(() => { - if (loading) return; + if (moreLoading) return; if (!hasMore) return; const linkGroup = LinkGroup.find((item) => item.group === group); const groupDomain = { includeDomains: linkGroup?.includeDomains, }; loadMore(groupDomain, currentSearchParams, link); - }, [hasMore, load, loading, currentSearchParams, group]); + }, [hasMore, loadMore, moreLoading, currentSearchParams, group]); return isMobile ? ( { + const { keywords, orderBy } = currentSearchParams; + const { data } = await fetchLinks( + { + keywords: keywords.split(' ') || [], + includeDomains: domains.includeDomains || [], + excludeDomains: domains.excludeDomains || [], + urls: link === defaultLinkURLHash ? [] : [link], + orderBy, + endCursor, + }, + token + ); + const newLinks = data.data.data; + newLinks.forEach((item) => { + item.metadata = + item.metadata && item.metadata.title + ? processMetadata(item.metadata) + : null; + item.supportIframe = checkSupportIframe(item.url); + }); + const { pageInfo } = data.data; + return { + newLinks: newLinks.filter((l) => l.metadata && l.metadata?.title), + pageInfo, + }; +}; + export default function useFeedLinks() { const { user } = useLogin(); + const { token } = user || {}; const [links, setLinks] = useState>([]); const [loading, setLoading] = useState(false); + const [moreLoading, setMoreLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const [endCursor, setEndCursor] = useState(''); const loadMore = useCallback( @@ -36,63 +79,59 @@ export default function useFeedLinks() { currentSearchParams = defaultLinkSearchParams, link = defaultLinkURLHash ) => { - if (loading) return; - // console.log('currentSearchParams: ', currentSearchParams); - const { keywords, orderBy } = currentSearchParams; - console.log('keywords: ', keywords); + if (loading || moreLoading) return; try { - setLoading(true); - const { data } = await fetchLinks( - { - keywords: keywords.split(' ') || [], - includeDomains: domains.includeDomains || [], - excludeDomains: domains.excludeDomains || [], - urls: link === defaultLinkURLHash ? [] : [link], - orderBy, - endCursor, - }, - user?.token - ); - const newLinks = data.data.data; - newLinks.forEach((item) => { - item.metadata = - item.metadata && item.metadata.title - ? processMetadata(item.metadata) - : null; - item.supportIframe = checkSupportIframe(item.url); + setMoreLoading(true); + const { newLinks, pageInfo } = await getLinks({ + domains, + currentSearchParams, + link, + endCursor, + token, }); - setLinks( - unionBy( - links, - newLinks.filter((l) => l.metadata && l.metadata?.title), - (l) => l.url - ) - ); - setEndCursor(data.data.pageInfo.endFarcasterCursor); - setHasMore(data.data.pageInfo.hasNextPage); + setLinks(unionBy(links, newLinks, (l) => l.url)); + setEndCursor(pageInfo.endFarcasterCursor); + setHasMore(pageInfo.hasNextPage); } catch (error) { console.error(error.message || messages.common.error); setHasMore(false); } finally { - setLoading(false); + setMoreLoading(false); } }, - [links, endCursor] + [links, endCursor, token, loading, moreLoading] ); const load = useCallback( - ( + async ( domains = defaultLinkDomians, currentSearchParams = defaultLinkSearchParams, link = defaultLinkURLHash ) => { setEndCursor(''); - loadMore(domains, currentSearchParams, link); + try { + setLoading(true); + const { newLinks, pageInfo } = await getLinks({ + domains, + currentSearchParams, + link, + endCursor: '', + token, + }); + setLinks(unionBy([], newLinks, (l) => l.url)); + setEndCursor(pageInfo.endFarcasterCursor); + setHasMore(pageInfo.hasNextPage); + } catch (error) { + console.error(error.message || messages.common.error); + setHasMore(false); + } finally { + setLoading(false); + } }, - [] + [token] ); - return { links, loading, hasMore, endCursor, load, loadMore }; + return { links, loading, moreLoading, hasMore, endCursor, load, loadMore }; } const DOMAINS_DO_NOT_SUPPORT_IFRAME = [ From 36044337d0b0ac9ef4588da3851acd5b42d2371e Mon Sep 17 00:00:00 2001 From: bufan Date: Thu, 14 Dec 2023 18:43:39 +0800 Subject: [PATCH 08/11] remove save button from social list --- apps/u3/README.md | 4 +++- apps/u3/package.json | 2 +- .../src/components/news/links/LinkPreview.tsx | 6 +++--- apps/u3/src/components/social/PostCard.tsx | 18 +++++++++------- .../src/components/social/farcaster/FCast.tsx | 21 ++++++++++--------- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/apps/u3/README.md b/apps/u3/README.md index 6ad01f31..f8459628 100644 --- a/apps/u3/README.md +++ b/apps/u3/README.md @@ -1 +1,3 @@ -# Collector Page v2 +# U3 +use --ignore-engines when install deps +```yarn install --ignore-engines``` diff --git a/apps/u3/package.json b/apps/u3/package.json index 4b17fb66..7dacb231 100644 --- a/apps/u3/package.json +++ b/apps/u3/package.json @@ -23,7 +23,7 @@ "@reduxjs/toolkit": "^1.8.3", "@types/validator": "^13.11.7", "@us3r-network/auth-with-rainbowkit": "^0.2.1", - "@us3r-network/link": "0.3.0-alpha.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", diff --git a/apps/u3/src/components/news/links/LinkPreview.tsx b/apps/u3/src/components/news/links/LinkPreview.tsx index 91a29fab..647cb7fb 100644 --- a/apps/u3/src/components/news/links/LinkPreview.tsx +++ b/apps/u3/src/components/news/links/LinkPreview.tsx @@ -2,7 +2,7 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-14 10:28:05 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-13 19:43:03 + * @LastEditTime: 2023-12-14 18:24:21 * @Description: file description */ import { useEffect, useMemo, useState } from 'react'; @@ -35,9 +35,9 @@ export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) { const [linkParam, setLinkParam] = useState(null); useEffect(() => { setLinkParam({ - url: data.url, + url: data.url.slice(0, 100), // todo: expand this limit at model type: 'link', - title: data.metadata.title, + title: data.metadata.title.slice(0, 200), }); }, [data.url]); return ( diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx index 98a9beca..ecd49cc6 100644 --- a/apps/u3/src/components/social/PostCard.tsx +++ b/apps/u3/src/components/social/PostCard.tsx @@ -2,7 +2,7 @@ * @Author: bufan bufan@hotmail.com * @Date: 2023-12-06 17:17:59 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-13 19:59:53 + * @LastEditTime: 2023-12-14 18:40:16 * @FilePath: /u3/apps/u3/src/components/social/PostCard.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -89,16 +89,18 @@ export default function PostCard({ followAction, shareLink, shareLinkEmbedTitle, + isDetail, ...wrapperProps }: StyledComponentPropsWithRef<'div'> & PostCardProps) { const [linkParam, setLinkParam] = useState(null); useEffect(() => { - setLinkParam({ - url: getOfficialPublicationUrl(id), - type: 'link', - title: data?.content, - }); - }, [id]); + if (isDetail) + setLinkParam({ + url: getOfficialPublicationUrl(id), + type: 'link', + title: data?.content.slice(0, 200), // todo: expand this limit at model + }); + }, [id, isDetail]); return ( @@ -153,7 +155,7 @@ export default function PostCard({ e.stopPropagation(); }} > - + {isDetail && } { - setLinkParam({ - url: getOfficialCastUrl( - userData.userName, - Buffer.from(castId.hash).toString('hex') - ), - type: 'link', - title: cast.text, - }); - }, [castId.hash]); + if (isDetail) + setLinkParam({ + url: getOfficialCastUrl( + userData.userName, + Buffer.from(castId.hash).toString('hex') + ), + type: 'link', + title: cast.text.slice(0, 200), // todo: expand this limit at model + }); + }, [castId.hash, isDetail]); return ( - + {isDetail && } Date: Fri, 15 Dec 2023 09:19:08 +0800 Subject: [PATCH 09/11] make change to follow comment --- apps/u3/package.json | 3 --- apps/u3/src/route/nav.tsx | 18 +++++++++++------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/apps/u3/package.json b/apps/u3/package.json index 08e0e46e..7dacb231 100644 --- a/apps/u3/package.json +++ b/apps/u3/package.json @@ -8,9 +8,6 @@ "@lens-protocol/metadata": "^1.1.3", "@lens-protocol/react-web": "^2.0.0-alpha.25", "@lens-protocol/wagmi": "^3.0.0-alpha.22", - "@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", diff --git a/apps/u3/src/route/nav.tsx b/apps/u3/src/route/nav.tsx index de3aff5f..364e7cfa 100644 --- a/apps/u3/src/route/nav.tsx +++ b/apps/u3/src/route/nav.tsx @@ -2,7 +2,7 @@ * @Author: shixuewen friendlysxw@163.com * @Date: 2022-12-12 13:59:01 * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-14 18:01:45 + * @LastEditTime: 2023-12-15 09:18:03 * @Description: file description */ import React, { ReactNode } from 'react'; @@ -61,12 +61,16 @@ export const navs: CustomNavObject[] = [ icon: React.createElement(SocialSvg), route: getRoute(RouteKey.socialLayout), }, - { - name: 'Apps', - activeRouteKeys: [RouteKey.dappStore, RouteKey.dapp], - icon: React.createElement(DappSvg), - route: getRoute(RouteKey.dappStore), - }, + ...(isMobile + ? [ + { + name: 'Apps', + activeRouteKeys: [RouteKey.dappStore, RouteKey.dapp], + icon: React.createElement(DappSvg), + route: getRoute(RouteKey.dappStore), + }, + ] + : []), { name: 'Save', activeRouteKeys: [RouteKey.save], From fed5ee3909a6cee18917b8fdb6ee83b3ae39798d Mon Sep 17 00:00:00 2001 From: bufan Date: Fri, 15 Dec 2023 10:09:18 +0800 Subject: [PATCH 10/11] update cicd --- .github/workflows/u3-firebase-hosting-merge.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/u3-firebase-hosting-merge.yml b/.github/workflows/u3-firebase-hosting-merge.yml index 263d6eaa..7ce38591 100644 --- a/.github/workflows/u3-firebase-hosting-merge.yml +++ b/.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 From 2145c4064cf8ff02a12008f25088d90377d53fb1 Mon Sep 17 00:00:00 2001 From: bufan Date: Fri, 15 Dec 2023 14:26:10 +0800 Subject: [PATCH 11/11] upgrade wagmi and viem --- apps/u3/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/u3/package.json b/apps/u3/package.json index 7dacb231..88ce33c2 100644 --- a/apps/u3/package.json +++ b/apps/u3/package.json @@ -18,7 +18,7 @@ "@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", @@ -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",