diff --git a/apps/admin/src/components/CancelProposal.tsx b/apps/admin/src/components/CancelProposal.tsx index 48cf2ac8..4e594a53 100644 --- a/apps/admin/src/components/CancelProposal.tsx +++ b/apps/admin/src/components/CancelProposal.tsx @@ -110,6 +110,7 @@ export const CancelProposal = ({ color="secondary" rules={[daoExists, isConnectedToDao, addressCanCancel]} onClick={handleCancel} + style={{ paddingLeft: '1rem', paddingRight: '1rem' }} // centerAlign > {isLoading ? : 'Cancel'} diff --git a/apps/admin/src/pages/DaoOverview.tsx b/apps/admin/src/pages/DaoOverview.tsx index 096a4014..bc03651a 100644 --- a/apps/admin/src/pages/DaoOverview.tsx +++ b/apps/admin/src/pages/DaoOverview.tsx @@ -2,6 +2,7 @@ import { useCurrentDao, useDaoData } from '@daohaus/moloch-v3-hooks'; import { SingleColumnLayout } from '@daohaus/ui'; import { DaoOverview as DaoOverviewCard } from '@daohaus/moloch-v3-macro-ui'; import { Keychain } from '@daohaus/keychain-utils'; +import { farcastleChain } from '@daohaus/utils'; export const DaoOverview = () => { const { daoChain } = useCurrentDao(); @@ -10,7 +11,11 @@ export const DaoOverview = () => { return ( {dao && ( - + )} ); diff --git a/apps/admin/src/pages/Proposal.tsx b/apps/admin/src/pages/Proposal.tsx index cd4f50a8..e9c7b0e6 100644 --- a/apps/admin/src/pages/Proposal.tsx +++ b/apps/admin/src/pages/Proposal.tsx @@ -5,22 +5,33 @@ import { useDaoProposal, } from '@daohaus/moloch-v3-hooks'; import { + FarcastleButton, ProposalActions, ProposalDetailsContainer, ProposalHistory, } from '@daohaus/moloch-v3-macro-ui'; -import { BiColumnLayout, Card, ParLg, Loading, widthQuery } from '@daohaus/ui'; +import { + BiColumnLayout, + Card, + ParLg, + Loading, + widthQuery, + Button, +} from '@daohaus/ui'; import { DAO_METHOD_TO_PROPOSAL_TYPE, + farcastleChain, + getFarcastleFramemUrl, getProposalTypeLabel, PROPOSAL_TYPE_LABELS, PROPOSAL_TYPE_WARNINGS, - ProposalTypeIds, SENSITIVE_PROPOSAL_TYPES, } from '@daohaus/utils'; import { CancelProposal } from '../components/CancelProposal'; +import FarcasterLogo from '../assets/farcaster-logo.svg'; + const LoadingContainer = styled.div` margin-top: 5rem; `; @@ -84,7 +95,16 @@ export const Proposal = () => { )}`} actions={ proposal && ( - refetch()} /> + <> + refetch()} /> + {farcastleChain(daoChain) && ( + + )} + ) } left={ diff --git a/libs/moloch-v3-macro-ui/src/assets/farcaster-logo-yellow.svg b/libs/moloch-v3-macro-ui/src/assets/farcaster-logo-yellow.svg new file mode 100644 index 00000000..9ece0859 --- /dev/null +++ b/libs/moloch-v3-macro-ui/src/assets/farcaster-logo-yellow.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg b/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg new file mode 100644 index 00000000..49d9c151 --- /dev/null +++ b/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoOverview.tsx b/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoOverview.tsx index e21b79d2..c8125c4d 100644 --- a/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoOverview.tsx +++ b/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoOverview.tsx @@ -14,12 +14,14 @@ type DaoOverviewProps = { daoChain: ValidNetwork; daoId: string; graphApiKeys?: Keychain; + showFarcasterLink?: boolean; }; export const DaoOverview = ({ daoChain, daoId, graphApiKeys, + showFarcasterLink, }: DaoOverviewProps) => { const { dao } = useDaoData({ daoChain, @@ -34,7 +36,7 @@ export const DaoOverview = ({ {dao && ( <> - + diff --git a/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoProfile.tsx b/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoProfile.tsx index 2b78c099..9cd49924 100644 --- a/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoProfile.tsx +++ b/libs/moloch-v3-macro-ui/src/components/DaoOverview/DaoProfile.tsx @@ -15,13 +15,19 @@ import { daoProfileHasLinks, missingDaoProfileData, } from '../../utils/daoDataDisplayHelpers'; -import { OverviewIconLinkList, OverviewLinkList, TagList } from '../Layout'; +import { + FarcasterShareLink, + OverviewIconLinkList, + OverviewLinkList, + TagList, +} from '../Layout'; type DaoProfileProps = { dao: MolochV3Dao; + showFarcasterLink?: boolean; }; -export const DaoProfile = ({ dao }: DaoProfileProps) => { +export const DaoProfile = ({ dao, showFarcasterLink }: DaoProfileProps) => { const { daoChain, daoId } = useCurrentDao(); const missingProfile = useMemo(() => { @@ -63,6 +69,9 @@ export const DaoProfile = ({ dao }: DaoProfileProps) => { )} + {showFarcasterLink && ( + + )} {dao.tags && } diff --git a/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.styles.ts b/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.styles.ts index fbb78c07..ecb8cc76 100644 --- a/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.styles.ts +++ b/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.styles.ts @@ -20,6 +20,12 @@ export const MetaCardHeader = styled.div` margin-bottom: 3rem; `; +export const MetaCardLinks = styled.div` + display: flex; + flex-wrap: wrap; + gap: 1rem; +`; + export const MetaContent = styled.div` display: flex; justify-content: flex-start; diff --git a/libs/moloch-v3-macro-ui/src/components/DaoSettings/FarcastleButton.tsx b/libs/moloch-v3-macro-ui/src/components/DaoSettings/FarcastleButton.tsx new file mode 100644 index 00000000..b71dbfe9 --- /dev/null +++ b/libs/moloch-v3-macro-ui/src/components/DaoSettings/FarcastleButton.tsx @@ -0,0 +1,28 @@ +import { Button } from '@daohaus/ui'; +import { getFarcastleFramemUrl } from '@daohaus/utils'; + +import FarcasterLogo from '../../assets/farcaster-logo.svg'; + +export const FarcastleButton = ({ + daoId, + daoChain, + location, +}: { + daoId: string; + daoChain: string; + location?: string; +}) => { + return ( + + ); +}; diff --git a/libs/moloch-v3-macro-ui/src/components/DaoSettings/MetadataSettings.tsx b/libs/moloch-v3-macro-ui/src/components/DaoSettings/MetadataSettings.tsx index ba679a59..d2053194 100644 --- a/libs/moloch-v3-macro-ui/src/components/DaoSettings/MetadataSettings.tsx +++ b/libs/moloch-v3-macro-ui/src/components/DaoSettings/MetadataSettings.tsx @@ -10,6 +10,7 @@ import { import { charLimit, + farcastleChain, formatLongDateFromSeconds, ZERO_ADDRESS, } from '@daohaus/utils'; @@ -19,6 +20,7 @@ import { MolochV3Dao } from '@daohaus/moloch-v3-data'; import { DaoProfileAvatar, MetaCardHeader, + MetaCardLinks, MetaContent, SettingsContainer, WarningContainer, @@ -28,6 +30,7 @@ import { useDaoMember } from '@daohaus/moloch-v3-hooks'; import { ButtonRouterLink, SettingsLinkList, TagList } from '../Layout'; import { daoProfileHasLinks } from '../../utils/daoDataDisplayHelpers'; import { useMemo } from 'react'; +import { FarcastleButton } from './FarcastleButton'; type MetadataSettingsProps = { dao: MolochV3Dao; @@ -57,14 +60,19 @@ export const MetadataSettings = ({

Metadata

- {includeLinks && enableActions && ( - - Update Metadata - - )} + + {includeLinks && enableActions && ( + + Update Metadata + + )} + {farcastleChain(daoChain) && ( + + )} +
diff --git a/libs/moloch-v3-macro-ui/src/components/DaoSettings/index.ts b/libs/moloch-v3-macro-ui/src/components/DaoSettings/index.ts index 4b1c5053..1901740d 100644 --- a/libs/moloch-v3-macro-ui/src/components/DaoSettings/index.ts +++ b/libs/moloch-v3-macro-ui/src/components/DaoSettings/index.ts @@ -1,5 +1,6 @@ export * from './ContractSettings'; export * from './DaoSettings'; +export * from './FarcastleButton'; export * from './GovernanceSettings'; export * from './MetadataSettings'; export * from './ShamanSettings'; diff --git a/libs/moloch-v3-macro-ui/src/components/Layout/MetadataLinkLists.tsx b/libs/moloch-v3-macro-ui/src/components/Layout/MetadataLinkLists.tsx index 6b14c09b..d9cd107b 100644 --- a/libs/moloch-v3-macro-ui/src/components/Layout/MetadataLinkLists.tsx +++ b/libs/moloch-v3-macro-ui/src/components/Layout/MetadataLinkLists.tsx @@ -10,7 +10,8 @@ import { import { DaoProfileLink } from '@daohaus/moloch-v3-data'; import { DataMd, Link, ParMd } from '@daohaus/ui'; -import { charLimit } from '@daohaus/utils'; +import { charLimit, getFarcastleFramemUrl } from '@daohaus/utils'; +import FarcasterLogo from '../../assets/farcaster-logo-yellow.svg'; export const isPredefinedSettingsLink = (link: DaoProfileLink) => { return ( @@ -40,6 +41,19 @@ const IconLinkContainer = styled.div` margin: 1.5rem 0; `; +const FarcasterLinkContainer = styled.div` + display: flex; + gap: 1.5rem; + margin: 1.5rem 0; + padding-left: 0.5rem; +`; + +const FarcasterLinkContents = styled.div` + display: flex; + align-items: center; + gap: 0.5rem; +`; + const MetadataLinkIcons: { [key: string]: React.ReactNode } = { Github: , Discord: , @@ -117,3 +131,26 @@ export const OverviewLinkList = ({ links }: LinkListsProps) => { ); }; + +export const FarcasterShareLink = ({ + daoId, + daoChain, + location, +}: { + daoId?: string; + daoChain?: string; + location?: string; +}) => { + if (!daoId || !daoChain) return null; + const url = getFarcastleFramemUrl({ daoId, daoChain, location }); + return ( + + + + farcaster + Cast Farcastle Frame + + + + ); +}; diff --git a/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx b/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx index 26bbf545..5dd6f779 100644 --- a/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx +++ b/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx @@ -30,6 +30,7 @@ import styled from 'styled-components'; import { ProposalActionConfig } from '../ProposalActionData'; import ReactMarkdown from 'react-markdown'; +import { FarcasterShareLink } from '../Layout'; const Spacer = styled.div` margin-bottom: 2rem; diff --git a/libs/utils/src/utils/farcastle.ts b/libs/utils/src/utils/farcastle.ts new file mode 100644 index 00000000..a37f3513 --- /dev/null +++ b/libs/utils/src/utils/farcastle.ts @@ -0,0 +1,16 @@ +export const farcastleChain = (daoChain?: string) => daoChain !== '0xaa36a7'; + +export const getFarcastleFramemUrl = ({ + daoChain, + daoId, + location, +}: { + daoChain: string; + daoId: string; + location?: string; +}): string | undefined => { + if (daoChain === '0xaa36a7') return; + const baseUrl = `https://warpcast.com/~/compose?text=&embeds[]=https://frames.farcastle.net/molochv3/${daoChain}/${daoId}`; + + return location ? `${baseUrl}/${location}` : baseUrl; +}; diff --git a/libs/utils/src/utils/index.ts b/libs/utils/src/utils/index.ts index b551bb03..25cab037 100644 --- a/libs/utils/src/utils/index.ts +++ b/libs/utils/src/utils/index.ts @@ -2,6 +2,7 @@ export * from './cache'; export * from './dates'; export * from './gas'; export * from './general'; +export * from './farcastle'; export * from './formatting'; export * from './gnosis'; export * from './typeguards';