diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts index 876c4a29..6691fb60 100644 --- a/src/fidgets/index.ts +++ b/src/fidgets/index.ts @@ -10,6 +10,7 @@ import NounishGovernance from "./community/nouns-dao/NounishGovernance"; import Cast from "./farcaster/Cast"; import Feed from "./farcaster/Feed"; import CreateCast from "./farcaster/CreateCast"; +import zoraEmbed from "./zora/zoraEmbed"; export const CompleteFidgets = { // @@ -28,6 +29,7 @@ export const CompleteFidgets = { iframe: IFrame, // Nouns governance: NounishGovernance, + zora: zoraEmbed, }; export const LayoutFidgets = { diff --git a/src/fidgets/zora/zoraEmbed.tsx b/src/fidgets/zora/zoraEmbed.tsx new file mode 100644 index 00000000..165419b2 --- /dev/null +++ b/src/fidgets/zora/zoraEmbed.tsx @@ -0,0 +1,100 @@ +import React, { useEffect, useState, useRef } from "react"; +import TextInput from "@/common/components/molecules/TextInput"; +import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; +import { FontFamily, Color } from "@/common/lib/theme"; + +export type ZoraFidgetSettings = { + text: string; + fontFamily: FontFamily; + fontColor: Color; + headingsFontFamily: FontFamily; + headingsFontColor: Color; + background: Color; + fidgetBorderWidth: string; + fidgetBorderColor: Color; + fidgetShadow: string; + fidgetWidth: string; + fidgetHeight: string; +}; + +export const ZoraProperties: FidgetProperties = { + fidgetName: "zora", + icon: 0x1f535, + fields: [ + { + fieldName: "text", + default: + "https://zora.co/collect/zora:0x460779723619a8e25632bce2e74b6b9ce4915c7b/4", + required: true, + inputSelector: TextInput, + group: "settings", + }, + ], + size: { + minHeight: 1, + maxHeight: 36, + minWidth: 1, + maxWidth: 36, + }, +}; + +export const Zora: React.FC> = ({ + settings: { + text, + background, + fidgetBorderWidth, + fidgetBorderColor, + fidgetShadow, + fidgetWidth, + fidgetHeight, + }, +}) => { + const [zoraSource, setZoraSource] = useState(""); + const iframeRef = useRef(null); + + const transformTextIntoIframeString = (text: string): string => { + //todo: replace referral to nounspace wallet + return text + "/embed?referrer=0x41CB654D1F47913ACAB158a8199191D160DAbe4A"; + }; + + useEffect(() => { + const transformedEmbed = transformTextIntoIframeString(text); + setZoraSource(transformedEmbed); + }, [text]); + + return ( +
+ {zoraSource && ( + + )} +
+ ); +}; + +export default { + fidget: Zora, + properties: ZoraProperties, +} as FidgetModule>;