finishes farcastle links

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'}

apps/admin/src/pages/Proposal.tsx

@@ -5,23 +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;
 `;
@@ -85,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={
@@ -96,7 +115,6 @@ export const Proposal = () => {
               daoId={daoId}
               proposal={proposal}
               includeLinks={true}
-              showFarcasterLink={farcastleChain(daoChain)}
               proposalActionConfig={{
                 sensitiveProposalTypes: SENSITIVE_PROPOSAL_TYPES,
                 actionToProposalType: DAO_METHOD_TO_PROPOSAL_TYPE,

apps/admin/src/pages/Settings.tsx

@@ -3,7 +3,6 @@ import { useCurrentDao, useDaoData } from '@daohaus/moloch-v3-hooks';
 import { SingleColumnLayout } from '@daohaus/ui';
 import { DaoSettings } from '@daohaus/moloch-v3-macro-ui';
 import { Keychain } from '@daohaus/keychain-utils';
-import { farcastleChain } from '@daohaus/utils';
 
 export const Settings = () => {
   const { daoChain } = useCurrentDao();
@@ -16,7 +15,6 @@ export const Settings = () => {
           daoChain={daoChain as keyof Keychain}
           daoId={dao.id}
           includeLinks={true}
-          showFarcasterLink={farcastleChain(daoChain)}
         />
       )}
     </SingleColumnLayout>

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;

libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.tsx

@@ -13,15 +13,13 @@ type DaoSettingsProps = {
   daoId: string;
   includeLinks?: boolean;
   graphApiKeys?: Keychain;
-  showFarcasterLink?: boolean;
 };
 
 export const DaoSettings = ({
   daoChain,
   daoId,
   includeLinks = false,
   graphApiKeys,
-  showFarcasterLink,
 }: DaoSettingsProps) => {
   const { dao } = useDaoData({
     daoChain,
@@ -37,7 +35,6 @@ export const DaoSettings = ({
         dao={dao}
         daoChain={daoChain}
         includeLinks={includeLinks}
-        showFarcasterLink={showFarcasterLink}
       />
 
       <ContractSettings dao={dao} daoChain={daoChain} />

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>
+  );
+};

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,33 +20,28 @@ import { MolochV3Dao } from '@daohaus/moloch-v3-data';
 import {
   DaoProfileAvatar,
   MetaCardHeader,
+  MetaCardLinks,
   MetaContent,
   SettingsContainer,
   WarningContainer,
 } from './DaoSettings.styles';
 import { useDHConnect } from '@daohaus/connect';
 import { useDaoMember } from '@daohaus/moloch-v3-hooks';
-import {
-  ButtonRouterLink,
-  FarcasterShareLink,
-  SettingsLinkList,
-  TagList,
-} from '../Layout';
+import { ButtonRouterLink, SettingsLinkList, TagList } from '../Layout';
 import { daoProfileHasLinks } from '../../utils/daoDataDisplayHelpers';
 import { useMemo } from 'react';
+import { FarcastleButton } from './FarcastleButton';
 
 type MetadataSettingsProps = {
   dao: MolochV3Dao;
   daoChain: ValidNetwork;
   includeLinks?: boolean;
-  showFarcasterLink?: boolean;
 };
 
 export const MetadataSettings = ({
   dao,
   daoChain,
   includeLinks,
-  showFarcasterLink,
 }: MetadataSettingsProps) => {
   const { address } = useDHConnect();
   const { member } = useDaoMember({
@@ -64,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>
@@ -103,9 +104,6 @@ export const MetadataSettings = ({
           {daoProfileHasLinks(dao.links) && (
             <SettingsLinkList links={dao.links} />
           )}
-          {showFarcasterLink && (
-            <FarcasterShareLink daoId={dao.id} daoChain={daoChain} />
-          )}
           {dao.forwarder !== ZERO_ADDRESS && (
             <WarningContainer>
               <div className="title">

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';

libs/moloch-v3-macro-ui/src/components/Layout/MetadataLinkLists.tsx

@@ -9,9 +9,9 @@ import {
 } from 'react-icons/ri/index.js';
 
 import { DaoProfileLink } from '@daohaus/moloch-v3-data';
-import { DataMd, DataSm, Link, ParMd } from '@daohaus/ui';
+import { DataMd, Link, ParMd } from '@daohaus/ui';
 import { charLimit, getFarcastleFramemUrl } from '@daohaus/utils';
-import FarcasterLogo from '../../assets/farcaster-logo.svg';
+import FarcasterLogo from '../../assets/farcaster-logo-yellow.svg';
 
 export const isPredefinedSettingsLink = (link: DaoProfileLink) => {
   return (

libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx

@@ -67,7 +67,6 @@ type ProposalDetailsProps = {
   actionData?: DecodedMultiTX | null;
   decodeError: boolean;
   proposalActionConfig?: ProposalActionConfig;
-  showFarcasterLink?: boolean;
 };
 
 export const ProposalDetails = ({
@@ -78,7 +77,6 @@ export const ProposalDetails = ({
   actionData,
   decodeError = false,
   proposalActionConfig,
-  showFarcasterLink,
 }: ProposalDetailsProps) => {
   const { networks } = useDHConnect();
   const { profile: submitterProfile } = useProfile({
@@ -206,14 +204,6 @@ export const ProposalDetails = ({
         daoChain={daoChain}
         proposalActionConfig={proposalActionConfig}
       />
-
-      {showFarcasterLink && (
-        <FarcasterShareLink
-          daoId={daoId}
-          daoChain={daoChain}
-          location={`proposals/${proposal.proposalId}`}
-        />
-      )}
     </OverviewContainer>
   );
 };

libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetailsContainer.tsx

@@ -29,15 +29,13 @@ type ProposalDetailsContainerProps = {
   includeLinks: boolean;
   proposalActionConfig?: ProposalActionConfig;
   txLegos?: Record<string, TXLego>;
-  showFarcasterLink?: boolean;
 };
 
 export const ProposalDetailsContainer = ({
   daoChain,
   daoId,
   proposal,
   includeLinks = false,
-  showFarcasterLink,
   proposalActionConfig = {
     sensitiveProposalTypes: SENSITIVE_PROPOSAL_TYPES,
     actionToProposalType: DAO_METHOD_TO_PROPOSAL_TYPE,
@@ -94,7 +92,6 @@ export const ProposalDetailsContainer = ({
         actionData={actionData}
         decodeError={decodeError}
         includeLinks={includeLinks}
-        showFarcasterLink={showFarcasterLink}
         proposalActionConfig={proposalActionConfig}
       />
       <ProposalActionData