From bacd3dca2cbf99c44634cd6660e995df91a58ad8 Mon Sep 17 00:00:00 2001
From: skuhlmann <samkuhlmann@gmail.com>
Date: Wed, 6 Nov 2024 17:05:33 -0700
Subject: [PATCH] finishes farcastle links

---
 apps/admin/src/components/CancelProposal.tsx  |  1 +
 apps/admin/src/pages/Proposal.tsx             | 26 +++++++++++---
 apps/admin/src/pages/Settings.tsx             |  2 --
 .../src/assets/farcaster-logo-yellow.svg      |  5 +++
 .../src/assets/farcaster-logo.svg             |  6 ++--
 .../DaoSettings/DaoSettings.styles.ts         |  6 ++++
 .../components/DaoSettings/DaoSettings.tsx    |  3 --
 .../DaoSettings/FarcastleButton.tsx           | 28 +++++++++++++++
 .../DaoSettings/MetadataSettings.tsx          | 36 +++++++++----------
 .../src/components/DaoSettings/index.ts       |  1 +
 .../components/Layout/MetadataLinkLists.tsx   |  4 +--
 .../ProposalDetails/ProposalDetails.tsx       | 10 ------
 .../ProposalDetailsContainer.tsx              |  3 --
 13 files changed, 85 insertions(+), 46 deletions(-)
 create mode 100644 libs/moloch-v3-macro-ui/src/assets/farcaster-logo-yellow.svg
 create mode 100644 libs/moloch-v3-macro-ui/src/components/DaoSettings/FarcastleButton.tsx

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 ? <Loading size={20} /> : 'Cancel'}
diff --git a/apps/admin/src/pages/Proposal.tsx b/apps/admin/src/pages/Proposal.tsx
index 6344b86d..e9c7b0e6 100644
--- a/apps/admin/src/pages/Proposal.tsx
+++ b/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,
diff --git a/apps/admin/src/pages/Settings.tsx b/apps/admin/src/pages/Settings.tsx
index 68e676db..dc1dbbde 100644
--- a/apps/admin/src/pages/Settings.tsx
+++ b/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>
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 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M257.778 155.556H742.222V844.445H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.445H257.778V155.556Z" fill="#ffcb47"/>
+<path d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.445H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z" fill="#ffcb47"/>
+<path d="M675.556 746.667C663.282 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.445H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z" fill="#ffcb47"/>
+</svg>
\ 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
index 9ece0859..49d9c151 100644
--- a/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg
+++ b/libs/moloch-v3-macro-ui/src/assets/farcaster-logo.svg
@@ -1,5 +1,5 @@
 <svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M257.778 155.556H742.222V844.445H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.445H257.778V155.556Z" fill="#ffcb47"/>
-<path d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.445H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z" fill="#ffcb47"/>
-<path d="M675.556 746.667C663.282 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.445H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z" fill="#ffcb47"/>
+<path d="M257.778 155.556H742.222V844.445H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.445H257.778V155.556Z" fill="white"/>
+<path d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.445H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z" fill="white"/>
+<path d="M675.556 746.667C663.282 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.445H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z" fill="white"/>
 </svg>
\ No newline at end of file
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/DaoSettings.tsx b/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.tsx
index 0b1cdb9f..c3508f41 100644
--- a/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.tsx
+++ b/libs/moloch-v3-macro-ui/src/components/DaoSettings/DaoSettings.tsx
@@ -13,7 +13,6 @@ type DaoSettingsProps = {
   daoId: string;
   includeLinks?: boolean;
   graphApiKeys?: Keychain;
-  showFarcasterLink?: boolean;
 };
 
 export const DaoSettings = ({
@@ -21,7 +20,6 @@ export const DaoSettings = ({
   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} />
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 (
+    <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
index ea4c385b..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,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">
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 d1978ce7..d9cd107b 100644
--- a/libs/moloch-v3-macro-ui/src/components/Layout/MetadataLinkLists.tsx
+++ b/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 (
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 353aca1a..5dd6f779 100644
--- a/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx
+++ b/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>
   );
 };
diff --git a/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetailsContainer.tsx b/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetailsContainer.tsx
index 7e13773d..d6678f17 100644
--- a/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetailsContainer.tsx
+++ b/libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetailsContainer.tsx
@@ -29,7 +29,6 @@ type ProposalDetailsContainerProps = {
   includeLinks: boolean;
   proposalActionConfig?: ProposalActionConfig;
   txLegos?: Record<string, TXLego>;
-  showFarcasterLink?: boolean;
 };
 
 export const ProposalDetailsContainer = ({
@@ -37,7 +36,6 @@ export const ProposalDetailsContainer = ({
   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