From 3b552010b394de4061ee69ce8a1410d4a5aab468 Mon Sep 17 00:00:00 2001 From: sktbrd Date: Fri, 30 Aug 2024 12:27:48 -0300 Subject: [PATCH 01/21] changed min-width and clean console.logs --- src/fidgets/ui/Links.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 4310b900..8d9dfc36 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -66,7 +66,7 @@ export const linkConfig: FidgetProperties = { }, { fieldName: "viewMode", - default: "grid", + default: "list", required: false, inputSelector: SwitchButton, group: "style", @@ -129,9 +129,9 @@ export const linkConfig: FidgetProperties = { }, ], size: { - minHeight: 1, + minHeight: 2, maxHeight: 36, - minWidth: 4, + minWidth: 2, maxWidth: 36, }, }; @@ -141,12 +141,7 @@ export const Links: React.FC> = ({ }) => { const links = Array.isArray(settings.links) ? settings.links : []; const isGridView = settings.viewMode === "grid"; - useEffect(() => { - console.log("Links fidget settings:", settings.links); - }, [settings.links]); - useEffect(() => { - console.log("Links fidget settings:", settings.links); - }, [settings.links]); + return (
Date: Fri, 30 Aug 2024 12:28:12 -0300 Subject: [PATCH 02/21] clean unused import --- src/fidgets/ui/Links.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 8d9dfc36..1ddee40f 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -4,7 +4,6 @@ import CSSInput from "@/common/components/molecules/CSSInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; import FontSelector from "@/common/components/molecules/FontSelector"; import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; -import { defaultStyleFields } from "../helpers"; import { FidgetSettingsStyle } from "@/common/fidgets"; import { CardHeader, From f216c19330c485b6e9286bcb23fb9bac034bde41 Mon Sep 17 00:00:00 2001 From: sktbrd Date: Fri, 30 Aug 2024 12:50:48 -0300 Subject: [PATCH 03/21] Links description Colors, replace avatar url --- .../components/molecules/LinksInput.tsx | 6 ++--- src/fidgets/ui/Links.tsx | 23 ++++++++++++++----- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/common/components/molecules/LinksInput.tsx b/src/common/components/molecules/LinksInput.tsx index c2a69a27..72889495 100644 --- a/src/common/components/molecules/LinksInput.tsx +++ b/src/common/components/molecules/LinksInput.tsx @@ -94,12 +94,12 @@ const LinksInput = forwardRef( const newLink = { text: "New Link", url: "https://", - avatar: "/images/chainEmoji.png", + avatar: "https://www.nounspace.com/images/chainEmoji.png", description: "Description", }; onChange?.([...value, newLink]); - setVisibleFields([...visibleFields, true]); // Automatically expand new link + setVisibleFields([...visibleFields, true]); }; const removeLink = (index: number) => { @@ -133,7 +133,7 @@ const LinksInput = forwardRef( value={link.url} onChange={(e: any) => { handleLinkChange(index, { ...link, url: e.target.value }); - showAdditionalFields(index); // Show fields when URL is updated + showAdditionalFields(index); }} /> diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 1ddee40f..1a94533d 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -36,6 +36,8 @@ export type LinkFidgetSettings = { itemBackground: string; viewMode: ViewMode; description?: string; + DescriptionColor: string; + HeaderColor: string; } & FidgetSettingsStyle; export const linkConfig: FidgetProperties = { @@ -55,7 +57,7 @@ export const linkConfig: FidgetProperties = { { text: "Nouns", url: "https://nouns.wtf", - avatar: "/images/nouns.svg", + avatar: "https://nouns.wtf/static/media/noggles.7644bfd0.svg", description: "Funds ideas", }, ], @@ -78,7 +80,14 @@ export const linkConfig: FidgetProperties = { group: "style", }, { - fieldName: "fontColor", + fieldName: "HeaderColor", + default: "black", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "DescriptionColor", default: "black", required: false, inputSelector: ColorSelector, @@ -153,6 +162,7 @@ export const Links: React.FC> = ({ overflow: "auto", scrollbarWidth: "none", padding: "0.5rem", + borderRadius: "1rem", }} > {settings?.title && ( @@ -161,7 +171,7 @@ export const Links: React.FC> = ({ className="text-2xl font-bold" style={{ fontFamily: settings.headingsFontFamily, - color: settings.fontColor, + color: settings.HeaderColor, }} > {settings.title} @@ -223,12 +233,12 @@ export const Links: React.FC> = ({ className="items-start text-base font-normal text-black dark:text-white flex-grow" style={{ fontFamily: settings.fontFamily, - color: settings.fontColor, + color: settings.HeaderColor, textAlign: "left", wordWrap: "break-word", overflow: "hidden", textOverflow: "ellipsis", - maxHeight: "3rem", // Adjust this value to limit the height of the text + maxHeight: "3rem", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", @@ -242,11 +252,12 @@ export const Links: React.FC> = ({ {link.description && (

{link.description} From e87db7f963c5f799806e1d9e9a3aae395500521a Mon Sep 17 00:00:00 2001 From: sktbrd Date: Fri, 30 Aug 2024 13:12:25 -0300 Subject: [PATCH 04/21] Links input handling focus --- src/common/components/molecules/LinksInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/components/molecules/LinksInput.tsx b/src/common/components/molecules/LinksInput.tsx index 72889495..b0cdfb69 100644 --- a/src/common/components/molecules/LinksInput.tsx +++ b/src/common/components/molecules/LinksInput.tsx @@ -135,6 +135,7 @@ const LinksInput = forwardRef( handleLinkChange(index, { ...link, url: e.target.value }); showAdditionalFields(index); }} + onFocus={() => showAdditionalFields(index)} />

Date: Sun, 1 Sep 2024 13:47:19 -0500 Subject: [PATCH 05/21] should fix initial feed settings (#391) --- src/fidgets/farcaster/Feed.tsx | 2 +- src/pages/homebase/index.tsx | 4 ++-- supabase/migrations/20240821215436_spaceOrderings.sql | 2 -- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/fidgets/farcaster/Feed.tsx b/src/fidgets/farcaster/Feed.tsx index 66b6d37d..b901e66b 100644 --- a/src/fidgets/farcaster/Feed.tsx +++ b/src/fidgets/farcaster/Feed.tsx @@ -109,7 +109,7 @@ const feedProperties: FidgetProperties = { displayName: "Username", inputSelector: TextInput, required: false, - disabledIf: (settings) => settings.selectPlatform.name === "Farcaster", + disabledIf: (settings) => settings.selectPlatform.name === "farcaster", default: "thenounspace", }, { diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx index 958c1841..4e9d4031 100644 --- a/src/pages/homebase/index.tsx +++ b/src/pages/homebase/index.tsx @@ -65,8 +65,8 @@ const Homebase: NextPageWithLayout = () => { args.feed = ( Date: Sun, 1 Sep 2024 13:50:55 -0500 Subject: [PATCH 06/21] Feed fix (#392) --- src/fidgets/farcaster/Feed.tsx | 4 ++-- src/pages/homebase/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fidgets/farcaster/Feed.tsx b/src/fidgets/farcaster/Feed.tsx index b901e66b..3658d051 100644 --- a/src/fidgets/farcaster/Feed.tsx +++ b/src/fidgets/farcaster/Feed.tsx @@ -93,7 +93,7 @@ const feedProperties: FidgetProperties = { displayName: "Select App", inputSelector: PlatformSelector, required: false, - default: { name: "farcaster", icon: "/images/farcaster.jpeg" }, + default: { name: "Farcaster", icon: "/images/farcaster.jpeg" }, }, { fieldName: "feedType", @@ -206,7 +206,7 @@ export const FEED_TYPES = [ const Feed: React.FC> = ({ settings }) => { const { - selectPlatform = { name: "farcaster", icon: "/images/farcaster.jpeg" }, + selectPlatform = { name: "Farcaster", icon: "/images/farcaster.jpeg" }, Xhandle, style, } = settings; diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx index 4e9d4031..232610b4 100644 --- a/src/pages/homebase/index.tsx +++ b/src/pages/homebase/index.tsx @@ -68,7 +68,7 @@ const Homebase: NextPageWithLayout = () => { feedType: FeedType.Following, users: "", filterType: FilterType.Users, - selectPlatform: { name: "farcaster", icon: "/images/farcaster.jpeg" }, + selectPlatform: { name: "Farcaster", icon: "/images/farcaster.jpeg" }, Xhandle: "", style: "", }} From 56b7d3c2c58ce991fa30203750c2e6dbe28d6012 Mon Sep 17 00:00:00 2001 From: Vlad 2 <116202536+sktbrd@users.noreply.github.com> Date: Tue, 3 Sep 2024 18:41:36 -0300 Subject: [PATCH 07/21] =?UTF-8?q?link=20=E2=8C=90=E2=97=A8-=E2=97=A8=20log?= =?UTF-8?q?o=20to=20@wtfisnouns=20space=20(#395)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Willy Ogorzaly --- src/common/components/molecules/BrandHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/molecules/BrandHeader.tsx b/src/common/components/molecules/BrandHeader.tsx index 260bc12c..828c32d5 100644 --- a/src/common/components/molecules/BrandHeader.tsx +++ b/src/common/components/molecules/BrandHeader.tsx @@ -18,7 +18,7 @@ const BrandHeader = () => { From 1ed504a9906ed3f20b74ad07c905a7aa9c1345ff Mon Sep 17 00:00:00 2001 From: Vlad 2 <116202536+sktbrd@users.noreply.github.com> Date: Wed, 4 Sep 2024 16:59:24 -0300 Subject: [PATCH 08/21] the whole link card is clicable now (#379) --- src/fidgets/ui/Links.tsx | 103 +++++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 1a94533d..0e949c31 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -182,53 +182,62 @@ export const Links: React.FC> = ({

{links.length > 0 && links.map((link, index) => ( - - {link.avatar ? ( - - - - {link.text} - - - ) : ( - - - - {link.text} - - - )} + + {link.avatar ? ( + + + + {link.text} + + + ) : ( + + + + {link.text} + + + )} - + + ))}
From 123a019765dc2251746bc694faf5bb975070574b Mon Sep 17 00:00:00 2001 From: Gleb Surinov Date: Thu, 5 Sep 2024 02:00:08 +0600 Subject: [PATCH 09/21] fix: Hydration error for space loading (#369) --- src/common/components/templates/SpaceLoading.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/common/components/templates/SpaceLoading.tsx b/src/common/components/templates/SpaceLoading.tsx index 992fbc97..dd49d653 100644 --- a/src/common/components/templates/SpaceLoading.tsx +++ b/src/common/components/templates/SpaceLoading.tsx @@ -1,15 +1,17 @@ -import React, { ReactNode, useMemo } from "react"; +import React, { ReactNode, useState, useEffect } from "react"; import { isUndefined } from "lodash"; import useWindowSize from "@/common/lib/hooks/useWindowSize"; export default function SpaceLoading({ profile }: { profile?: ReactNode }) { + const [rowHeight, setRowHeight] = useState(70); + const { height } = useWindowSize(); const maxRows = 12; const cols = 12; const margin = [16, 16]; const containerPadding = [16, 16]; - const { height } = useWindowSize(); - const rowHeight = useMemo( - () => + + useEffect(() => { + setRowHeight( height ? Math.round( // The 64 magic number here is the height of the tabs bar above the grid @@ -17,8 +19,9 @@ export default function SpaceLoading({ profile }: { profile?: ReactNode }) { maxRows, ) : 70, - [height], - ); + ), + [height]; + }); return ( <> From e0f457c92c70298da6eb25a0b62602d3007167cc Mon Sep 17 00:00:00 2001 From: Willy Ogorzaly Date: Fri, 6 Sep 2024 13:54:46 -0500 Subject: [PATCH 10/21] Revert commit 56b7d3c MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no longer planning to link ⌐◨-◨ to the wtfisnouns page. instead, will link to the homepage (that users can currently only see when not logged in) and add a link to the wtfisnouns page from there --- src/common/components/molecules/BrandHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/molecules/BrandHeader.tsx b/src/common/components/molecules/BrandHeader.tsx index 828c32d5..260bc12c 100644 --- a/src/common/components/molecules/BrandHeader.tsx +++ b/src/common/components/molecules/BrandHeader.tsx @@ -18,7 +18,7 @@ const BrandHeader = () => { From bd234c49dc84aff6fc094d6b4937c461631869b2 Mon Sep 17 00:00:00 2001 From: r4to Date: Fri, 6 Sep 2024 16:01:19 -0300 Subject: [PATCH 11/21] wip: Solves cast modal channel selector bug (#394) --- src/common/components/molecules/Modal.tsx | 4 +- .../components/organisms/Navigation.tsx | 4 +- .../farcaster/components/CreateCast.tsx | 37 +++++++++++++----- src/fidgets/farcaster/utils.ts | 29 ++++++++++++++ .../api/farcaster/neynar/active-channels.ts | 38 +++++++++++++++++++ .../api/farcaster/neynar/search-channels.ts | 38 +++++++++++++++++++ 6 files changed, 137 insertions(+), 13 deletions(-) create mode 100644 src/pages/api/farcaster/neynar/active-channels.ts create mode 100644 src/pages/api/farcaster/neynar/search-channels.ts diff --git a/src/common/components/molecules/Modal.tsx b/src/common/components/molecules/Modal.tsx index 38a5393e..d3d7d2dd 100644 --- a/src/common/components/molecules/Modal.tsx +++ b/src/common/components/molecules/Modal.tsx @@ -23,11 +23,11 @@ const Modal = ({ title, description, children, - focusMode, + focusMode = true, showClose = true, overlay = true, }: ModalProps) => ( - + {overlay && open && ( diff --git a/src/common/components/organisms/Navigation.tsx b/src/common/components/organisms/Navigation.tsx index 33ce0475..ab474683 100644 --- a/src/common/components/organisms/Navigation.tsx +++ b/src/common/components/organisms/Navigation.tsx @@ -163,10 +163,10 @@ const Navigation: React.FC = ({ isEditable, enterEditMode }) => { - + setShowCastModal(false)} />
diff --git a/src/fidgets/farcaster/components/CreateCast.tsx b/src/fidgets/farcaster/components/CreateCast.tsx index d74d0997..98041fff 100644 --- a/src/fidgets/farcaster/components/CreateCast.tsx +++ b/src/fidgets/farcaster/components/CreateCast.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useEditor, EditorContent } from "@mod-protocol/react-editor"; import { EmbedsEditor } from "@mod-protocol/react-ui-shadcn/dist/lib/embeds"; import { @@ -34,21 +34,20 @@ import { PhotoIcon } from "@heroicons/react/20/solid"; import { FarcasterEmbed, isFarcasterUrlEmbed } from "@mod-protocol/farcaster"; import { CastType, Signer } from "@farcaster/core"; import { useFarcasterSigner } from ".."; -import { submitCast } from "../utils"; +import { + fetchChannelsByName, + fetchChannelsForUser, + submitCast, +} from "../utils"; import { bytesToHex } from "@noble/ciphers/utils"; const API_URL = process.env.NEXT_PUBLIC_MOD_PROTOCOL_API_URL!; const getMentions = getFarcasterMentions(API_URL); + const debouncedGetMentions = debounce(getMentions, 200, { leading: true, trailing: false, }); -const getChannels = getFarcasterChannels(API_URL); -const debouncedGetChannels = debounce(getChannels, 200, { - leading: true, - trailing: false, -}); - const getUrlMetadata = fetchUrlMetadata(API_URL); const getMentionFids = getMentionFidsByUsernames(API_URL); @@ -82,6 +81,7 @@ export type DraftType = { type CreateCastProps = { initialDraft?: Partial; + afterSubmit?: () => void; }; export type ModProtocolCastAddBody = Exclude< @@ -117,7 +117,10 @@ async function publishPost(draft: DraftType, fid: number, signer: Signer) { } } -const CreateCast: React.FC = ({ initialDraft }) => { +const CreateCast: React.FC = ({ + initialDraft, + afterSubmit = () => {}, +}) => { const [currentMod, setCurrentMod] = useState(null); const [initialEmbeds, setInitialEmbeds] = useState(); const [draft, setDraft] = useState({ @@ -131,10 +134,26 @@ const CreateCast: React.FC = ({ initialDraft }) => { const { signer, isLoadingSigner, fid } = useFarcasterSigner("create-cast"); + const debouncedGetChannels = useCallback( + debounce( + async (query: string) => { + if (query && query !== "") { + return await fetchChannelsByName(query); + } else { + return await fetchChannelsForUser(fid); + } + }, + 200, + { leading: true, trailing: false }, + ), + [fid], + ); + const onSubmitPost = async (): Promise => { if ((!draft?.text && !draft?.embeds?.length) || isUndefined(signer)) return false; await publishPost(draft, fid, signer); + afterSubmit(); return true; }; diff --git a/src/fidgets/farcaster/utils.ts b/src/fidgets/farcaster/utils.ts index 118005c5..7bae5bc9 100644 --- a/src/fidgets/farcaster/utils.ts +++ b/src/fidgets/farcaster/utils.ts @@ -28,6 +28,7 @@ import { mnemonicToAccount } from "viem/accounts"; import { optimismChaninClient } from "@/constants/optimismChainClient"; import axiosBackend from "@/common/data/api/backend"; import { ModProtocolCastAddBody } from "./components/CreateCast"; +import { type Channel } from "@mod-protocol/farcaster"; export const WARPCAST_RECOVERY_PROXY: `0x${string}` = "0x00000000FcB080a4D6c39a9354dA9EB9bC104cd7"; @@ -404,3 +405,31 @@ export const getSignatureForUsernameProof = async ( }); return signature; }; + +export async function fetchChannelsForUser( + fid: number, + limit: number = 20, +): Promise { + try { + const channelsResponse = await axiosBackend.get( + `/api/farcaster/neynar/active-channels/?limit=${limit}&fid=${fid}`, + ); + return channelsResponse.data.channels as Channel[]; + } catch (e) { + return [] as Channel[]; + } +} + +export async function fetchChannelsByName( + query: string, + limit: number = 20, +): Promise { + try { + const channelsResponse = await axiosBackend.get( + `/api/farcaster/neynar/search-channels?limit=${limit}&q=${query}`, + ); + return channelsResponse.data.channels as Channel[]; + } catch (e) { + return [] as Channel[]; + } +} diff --git a/src/pages/api/farcaster/neynar/active-channels.ts b/src/pages/api/farcaster/neynar/active-channels.ts new file mode 100644 index 00000000..a99f6a8c --- /dev/null +++ b/src/pages/api/farcaster/neynar/active-channels.ts @@ -0,0 +1,38 @@ +import requestHandler from "@/common/data/api/requestHandler"; +import axios, { AxiosRequestConfig, isAxiosError } from "axios"; +import Error from "next/error"; +import { NextApiRequest, NextApiResponse } from "next/types"; + +async function loadUserChannels(req: NextApiRequest, res: NextApiResponse) { + try { + const options: AxiosRequestConfig = { + method: "GET", + url: `https://api.neynar.com/v2/farcaster/channel/user`, + headers: { + accept: "application/json", + api_key: process.env.NEYNAR_API_KEY!, + }, + params: req.query, + }; + + const { data } = await axios.request(options); + + if (data.status && data.status !== 200) { + return res.status(data.status).json(data); + } + + res.status(200).json(data); + } catch (e) { + if (isAxiosError(e)) { + res + .status(e.response!.data.status || 500) + .json(e.response!.data || "An unknown error occurred"); + } else { + res.status(500).json("An unknown error occurred"); + } + } +} + +export default requestHandler({ + get: loadUserChannels, +}); diff --git a/src/pages/api/farcaster/neynar/search-channels.ts b/src/pages/api/farcaster/neynar/search-channels.ts new file mode 100644 index 00000000..c3b191f6 --- /dev/null +++ b/src/pages/api/farcaster/neynar/search-channels.ts @@ -0,0 +1,38 @@ +import requestHandler from "@/common/data/api/requestHandler"; +import axios, { AxiosRequestConfig, isAxiosError } from "axios"; +import Error from "next/error"; +import { NextApiRequest, NextApiResponse } from "next/types"; + +async function searchChannels(req: NextApiRequest, res: NextApiResponse) { + try { + const options: AxiosRequestConfig = { + method: "GET", + url: `https://api.neynar.com/v2/farcaster/channel/search`, + headers: { + accept: "application/json", + api_key: process.env.NEYNAR_API_KEY!, + }, + params: req.query, + }; + + const { data } = await axios.request(options); + + if (data.status && data.status !== 200) { + return res.status(data.status).json(data); + } + + res.status(200).json(data); + } catch (e) { + if (isAxiosError(e)) { + res + .status(e.response!.data.status || 500) + .json(e.response!.data || "An unknown error occurred"); + } else { + res.status(500).json("An unknown error occurred"); + } + } +} + +export default requestHandler({ + get: searchChannels, +}); From a1e4e061ee237a97edf6839bfc545c4486d708a7 Mon Sep 17 00:00:00 2001 From: r4to Date: Fri, 6 Sep 2024 16:13:08 -0300 Subject: [PATCH 12/21] style: update metadata image preview style (#365) --- src/common/lib/utils/generateUserMetadataHtml.tsx | 5 ++--- src/pages/api/metadata/spaces.tsx | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/common/lib/utils/generateUserMetadataHtml.tsx b/src/common/lib/utils/generateUserMetadataHtml.tsx index 3e742a01..9a6aafb2 100644 --- a/src/common/lib/utils/generateUserMetadataHtml.tsx +++ b/src/common/lib/utils/generateUserMetadataHtml.tsx @@ -31,7 +31,6 @@ export const generateUserMetadataHtml = (userMetadata?: UserMetadata) => { - {bio && ( <> @@ -41,9 +40,9 @@ export const generateUserMetadataHtml = (userMetadata?: UserMetadata) => { )} {pfpUrl && ( <> - - + + )} diff --git a/src/pages/api/metadata/spaces.tsx b/src/pages/api/metadata/spaces.tsx index 153b3a63..9d5a8a8f 100644 --- a/src/pages/api/metadata/spaces.tsx +++ b/src/pages/api/metadata/spaces.tsx @@ -53,8 +53,8 @@ const ProfileCard = ({ userMetadata }: { userMetadata: UserMetadata }) => { >

Date: Mon, 9 Sep 2024 12:56:52 -0300 Subject: [PATCH 13/21] fix tabbar background and add tab button index (#403) --- src/common/components/organisms/TabBar.tsx | 2 +- src/common/components/templates/Space.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/components/organisms/TabBar.tsx b/src/common/components/organisms/TabBar.tsx index 088327ba..983bdac2 100644 --- a/src/common/components/organisms/TabBar.tsx +++ b/src/common/components/organisms/TabBar.tsx @@ -352,7 +352,7 @@ const TabBar = memo(function TabBar({ {inEditMode ? ( -

+
- {isNil(profile) && ( )} +
From 3071ec880003399f5d8da3f39a3cde9268a295e8 Mon Sep 17 00:00:00 2001 From: Vlad 2 <116202536+sktbrd@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:57:27 -0300 Subject: [PATCH 14/21] video fidget and iframe fidget improvements (#402) --- src/common/fidgets/FidgetWrapper.tsx | 1 - src/fidgets/helpers.tsx | 13 +++ src/fidgets/index.ts | 3 +- src/fidgets/ui/IFrame.tsx | 9 +- src/fidgets/ui/Video.tsx | 121 +++++++++++++++++++++++++++ 5 files changed, 140 insertions(+), 7 deletions(-) create mode 100644 src/fidgets/ui/Video.tsx diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx index 1da7842f..971749c1 100644 --- a/src/common/fidgets/FidgetWrapper.tsx +++ b/src/common/fidgets/FidgetWrapper.tsx @@ -70,7 +70,6 @@ export function FidgetWrapper({ homebaseConfig: state.homebase.homebaseConfig, })); - console.log(homebaseConfig); function onClickEdit() { setSelectedFidgetID(bundle.id); setCurrentFidgetSettings( diff --git a/src/fidgets/helpers.tsx b/src/fidgets/helpers.tsx index ea2dcb1d..c5dafa5d 100644 --- a/src/fidgets/helpers.tsx +++ b/src/fidgets/helpers.tsx @@ -34,3 +34,16 @@ export const defaultStyleFields: FidgetFieldConfig[] = [ group: "style", }, ]; + +export const transformUrl = (url: string) => { + if (url && url.match(/youtube\.com\/watch\?v=/)) { + return url.replace("watch?v=", "embed/"); + } + if (url && url.match(/vimeo\.com\/\d+/)) { + return url.replace("vimeo.com", "player.vimeo.com/video"); + } + if (url && url.match(/odysee\.com\/@/)) { + return url.replace("odysee.com", "odysee.com/$/embed"); + } + return url; +}; diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts index bb5c83c0..03ed83e2 100644 --- a/src/fidgets/index.ts +++ b/src/fidgets/index.ts @@ -12,7 +12,7 @@ import Feed from "./farcaster/Feed"; import CreateCast from "./farcaster/CreateCast"; import Links from "./ui/Links"; import snapShot from "./snapshot/SnapShot"; - +import VideoFidget from "./ui/Video"; export const CompleteFidgets = { // example: @@ -33,6 +33,7 @@ export const CompleteFidgets = { links: Links, // zora: zoraEmbed, -> 500 server error -Frame ancestors block SnapShot: snapShot, + Video: VideoFidget, }; export const LayoutFidgets = { diff --git a/src/fidgets/ui/IFrame.tsx b/src/fidgets/ui/IFrame.tsx index 734721c2..e641e8a5 100644 --- a/src/fidgets/ui/IFrame.tsx +++ b/src/fidgets/ui/IFrame.tsx @@ -9,9 +9,8 @@ import { import { isValidUrl } from "@/common/lib/utils/url"; import useSafeUrl from "@/common/lib/hooks/useSafeUrl"; import { defaultStyleFields } from "@/fidgets/helpers"; -import WidthSlider from "@/common/components/molecules/ScaleSliderSelector"; import IFrameWidthSlider from "@/common/components/molecules/IframeScaleSlider"; - +import { transformUrl } from "@/fidgets/helpers"; export type IFrameFidgetSettings = { url: string; size: number; @@ -69,7 +68,7 @@ const IFrame: React.FC> = ({ }) => { const isValid = isValidUrl(url); const sanitizedUrl = useSafeUrl(url, DISALLOW_URL_PATTERNS); - + const transformedUrl = transformUrl(sanitizedUrl || ""); if (!url) { return ; } @@ -78,7 +77,7 @@ const IFrame: React.FC> = ({ return ; } - if (!sanitizedUrl) { + if (!transformedUrl) { return ( > = ({ return (