feat: show changed logo in proposal

apps/enterprise/src/components/dao-logo/DAOLogo.module.sass

@@ -5,13 +5,13 @@
   align-items: center
   justify-content: center
 
+  aspect-ratio: 1/1
+
   &[data-variant="small"]
-    width: 40px
     height: 40px
     padding: 8px
 
   &[data-variant="large"]
-    width: 60px
     height: 60px
     padding: 12px
 

apps/enterprise/src/components/value-diff/ValueDiff.tsx

@@ -1,10 +1,11 @@
 import { Text } from 'components/primitives';
 import styles from './ValueDiff.module.sass';
 import { ReactComponent as ArrowRightIcon } from 'components/assets/ArrowRight.svg';
+import { ReactNode } from 'react';
 
 interface ValueDiffProps {
-  oldValue: string;
-  newValue: string;
+  oldValue: ReactNode;
+  newValue: ReactNode;
 }
 
 export const ValueDiff = ({ oldValue, newValue }: ValueDiffProps) => (

apps/enterprise/src/pages/proposal/FieldsDiff.tsx

@@ -1,13 +1,13 @@
 import { Text } from 'components/primitives';
 import styles from './FieldsDiff.module.sass';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ValueDiff } from 'components/value-diff';
 import styled from 'styled-components';
 
-interface FieldChangeInfo {
+export interface FieldChangeInfo {
   name: string;
-  oldValue: string;
-  newValue: string;
+  oldValue: ReactNode;
+  newValue: ReactNode;
 }
 
 interface FieldsDiffProps {

apps/enterprise/src/pages/proposal/LogoValueView.tsx

@@ -0,0 +1,15 @@
+import { DAOLogo } from "components/dao-logo"
+import { HStack } from "lib/ui/Stack"
+
+interface LogoValueViewProps {
+  value: string
+}
+
+export const LogoValueView = ({ value }: LogoValueViewProps) => {
+  return (
+    <HStack alignItems="center" gap={4}>
+      <DAOLogo logo={value} />
+      {value}
+    </HStack>
+  )
+}

apps/enterprise/src/pages/proposal/ProposalActionDiff.tsx

@@ -1,21 +1,31 @@
 import { TitledCard } from 'components/titled-card';
-import { FieldsDiff } from './FieldsDiff';
+import { ReactNode, useMemo } from 'react';
+import { FieldChangeInfo, FieldsDiff } from './FieldsDiff';
 
 interface Props {
   title: string;
   fieldNameRecord: Record<string, string>;
-  oldView: Record<string, string>;
-  updatedFields: Record<string, string | undefined>;
+  oldView: Record<string, ReactNode | undefined>;
+  updatedFields: Record<string, ReactNode | undefined>;
 }
 
 export const ProposalActionDiff = ({ title, oldView, updatedFields, fieldNameRecord }: Props) => {
+  const fields = useMemo(() => {
+    const result: FieldChangeInfo[] = [];
+
+    Object.entries(updatedFields).forEach(([name, newValue]) => {
+      const oldValue = oldView[name];
+      if (oldValue === undefined || newValue === undefined) return;
+
+      result.push({ name: fieldNameRecord[name] || name, oldValue, newValue: newValue as string });
+    });
+    return result;
+  }, [fieldNameRecord, oldView, updatedFields]);
+
   return (
     <TitledCard title={title}>
       <FieldsDiff
-        fields={Object.entries(updatedFields).map(([name, newValue]) => {
-          const oldValue = oldView[name];
-          return { name: fieldNameRecord[name] || name, oldValue, newValue: newValue as string };
-        })}
+        fields={fields}
       />
     </TitledCard>
   );

apps/enterprise/src/pages/proposal/helpers/metadataView.ts → apps/enterprise/src/pages/proposal/helpers/metadataView.tsx

@@ -1,13 +1,15 @@
+import { ReactNode } from 'react';
 import { DAO } from 'types';
 import { enterprise } from 'types/contracts';
+import { LogoValueView } from '../LogoValueView';
 
-export interface MetadataView extends Record<string, string> {
-  discord: string;
-  github: string;
-  telegram: string;
-  twitter: string;
-  logo: string;
-  name: string;
+export interface MetadataView extends Record<string, ReactNode> {
+  discord: ReactNode;
+  github: ReactNode;
+  telegram: ReactNode;
+  twitter: ReactNode;
+  logo: ReactNode;
+  name: ReactNode;
 }
 
 export const metadataViewFieldNameRecord: Record<keyof MetadataView, string> = {
@@ -45,7 +47,7 @@ export const getUpdatedFields = (msg: enterprise.UpdateMetadataMsg): Partial<Met
   }
 
   if (msg.logo !== 'no_change') {
-    view.twitter = formatLogo(msg.logo.change);
+    view.logo = <LogoValueView value={formatLogo(msg.logo.change)} />
   }
 
   if (msg.name !== 'no_change') {
@@ -76,7 +78,7 @@ export const fromDao = (dao: DAO): MetadataView => {
     github: github_username,
     telegram: telegram_username,
     twitter: twitter_username,
-    logo,
+    logo: logo === noValue ? noValue : <LogoValueView value={logo} />,
     name,
   };
 };