Merge pull request #536 from HausDAO/sk/farcaster-links

adds dao overview link
HausDAO · Nov 7, 2024 · d52b51e · d52b51e
2 parents 5f5d14e + bacd3dc
commit d52b51e
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 16 deletions.
diff --git 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 ? <Loading size={20} /> : 'Cancel'}

diff --git 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 (
     <SingleColumnLayout>
       {dao && (
-        <DaoOverviewCard daoChain={daoChain as keyof Keychain} daoId={dao.id} />
+        <DaoOverviewCard
+          daoChain={daoChain as keyof Keychain}
+          daoId={dao.id}
+          showFarcasterLink={farcastleChain(daoChain)}
+        />
       )}
     </SingleColumnLayout>
   );

diff --git 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 && (
-          <CancelProposal proposal={proposal} onSuccess={() => refetch()} />
+          <>
+            <CancelProposal proposal={proposal} onSuccess={() => refetch()} />
+            {farcastleChain(daoChain) && (
+              <FarcastleButton
+                daoId={daoId}
+                daoChain={daoChain}
+                location={`proposals/${proposal.proposalId}`}
+              />
+            )}
+          </>
         )
       }
       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
diff --git a/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg b/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg
diff --git 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 && (
         <>
           <OverviewCard>
-            <DaoProfile dao={dao} />
+            <DaoProfile dao={dao} showFarcasterLink={showFarcasterLink} />
             <DataGrid>
               <DataIndicator label="Members" data={dao.activeMemberCount} />
               <DataIndicator label="Proposals" data={dao.proposalCount} />

diff --git 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) => {
               <OverviewIconLinkList links={dao.links} />
             </>
           )}
+          {showFarcasterLink && (
+            <FarcasterShareLink daoId={daoId} daoChain={daoChain} />
+          )}
           <TagListContainer>
             {dao.tags && <TagList tags={dao.tags} />}
           </TagListContainer>

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
@@ -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
@@ -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 (
+    <Button
+      color="secondary"
+      href={getFarcastleFramemUrl({
+        daoId,
+        daoChain,
+        location,
+      })}
+      style={{ gap: '.5rem' }}
+    >
+      <img src={FarcasterLogo} alt="farcaster" width="22px" /> Cast
+    </Button>
+  );
+};
diff --git 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 = ({
     <SettingsContainer>
       <MetaCardHeader>
         <H3>Metadata</H3>
-        {includeLinks && enableActions && (
-          <ButtonRouterLink
-            color="secondary"
-            to={`/molochv3/${daoChain}/${dao.id}/settings/update`}
-          >
-            Update Metadata
-          </ButtonRouterLink>
-        )}
+        <MetaCardLinks>
+          {includeLinks && enableActions && (
+            <ButtonRouterLink
+              color="secondary"
+              to={`/molochv3/${daoChain}/${dao.id}/settings/update`}
+            >
+              Update Metadata
+            </ButtonRouterLink>
+          )}
+          {farcastleChain(daoChain) && (
+            <FarcastleButton daoId={dao.id} daoChain={daoChain} />
+          )}
+        </MetaCardLinks>
       </MetaCardHeader>
       <MetaContent>
         <div>

diff --git 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
@@ -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: <RiGithubFill size={'2.5rem'} />,
   Discord: <RiDiscordFill size={'2.5rem'} />,
@@ -117,3 +131,26 @@ export const OverviewLinkList = ({ links }: LinkListsProps) => {
     </LinkContainer>
   );
 };
+
+export const FarcasterShareLink = ({
+  daoId,
+  daoChain,
+  location,
+}: {
+  daoId?: string;
+  daoChain?: string;
+  location?: string;
+}) => {
+  if (!daoId || !daoChain) return null;
+  const url = getFarcastleFramemUrl({ daoId, daoChain, location });
+  return (
+    <FarcasterLinkContainer>
+      <Link showExternalIcon={false} href={url}>
+        <FarcasterLinkContents>
+          <img src={FarcasterLogo} alt="farcaster" width="22px" />
+          <DataMd>Cast Farcastle Frame</DataMd>
+        </FarcasterLinkContents>
+      </Link>
+    </FarcasterLinkContainer>
+  );
+};
diff --git 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
@@ -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
@@ -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';