fix: break words

apps/governance/src/components/heading/heading.tsx

@@ -23,10 +23,13 @@ export const Heading = ({
       })}
     >
       <h1
-        className={classNames('font-alpha calt text-5xl break-words', {
-          'mt-0': !marginTop,
-          'mb-0': !marginBottom,
-        })}
+        className={classNames(
+          'font-alpha calt text-5xl [word-break:break-word]',
+          {
+            'mt-0': !marginTop,
+            'mb-0': !marginBottom,
+          }
+        )}
       >
         {title}
       </h1>

apps/governance/src/routes/proposals/components/proposal-asset-details/proposal-asset-details.tsx

@@ -7,8 +7,10 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 
 export const ProposalAssetDetails = ({
   asset,
+  originalAsset,
 }: {
   asset: AssetFieldsFragment;
+  originalAsset?: AssetFieldsFragment;
 }) => {
   const { t } = useTranslation();
   const [showAssetDetails, setShowAssetDetails] = useState(false);
@@ -27,6 +29,7 @@ export const ProposalAssetDetails = ({
         <div className="mb-10 pb-4">
           <AssetDetailsTable
             asset={asset}
+            originalAsset={originalAsset}
             omitRows={[
               AssetDetail.STATUS,
               AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -65,10 +65,13 @@ export const Proposal = ({
     ? removePaginationWrapper(assetData.assetsConnection?.edges)[0]
     : undefined;
 
+  const originalAsset = asset;
+
   if (proposal.terms.change.__typename === 'UpdateAsset' && asset) {
     asset = {
       ...asset,
       quantum: proposal.terms.change.quantum,
+      source: { ...asset.source },
     };
 
     if (asset.source.__typename === 'ERC20') {
@@ -228,7 +231,7 @@ export const Proposal = ({
         proposal.terms.change.__typename === 'UpdateAsset') &&
         asset && (
           <div className="mb-4">
-            <ProposalAssetDetails asset={asset} />
+            <ProposalAssetDetails asset={asset} originalAsset={originalAsset} />
           </div>
         )}
 

libs/assets/src/lib/asset-details-table.tsx

@@ -18,7 +18,7 @@ type Rows = {
   key: AssetDetail;
   label: string;
   tooltip: string;
-  value: (asset: Asset) => ReactNode | undefined;
+  value: (asset: Asset, orignalAsset?: Asset) => ReactNode | undefined;
   valueTooltip?: (asset: Asset) => string | null | undefined;
 }[];
 
@@ -52,6 +52,21 @@ const num = (asset: Asset, n: string | undefined | null) => {
   return addDecimalsFormatNumber(n, asset.decimals);
 };
 
+const Diff = ({
+  oldValue,
+  newValue,
+}: {
+  oldValue: ReactNode;
+  newValue: ReactNode;
+}) => (
+  <span className="flex gap-1">
+    <span className="line-through bg-vega-red-300 dark:bg-vega-red-600">
+      {oldValue}
+    </span>
+    <span className="bg-vega-green-300 dark:bg-vega-green-600">{newValue}</span>
+  </span>
+);
+
 export const useRows = () => {
   const t = useT();
   const AssetTypeMapping = useAssetTypeMapping();
@@ -103,7 +118,14 @@ export const useRows = () => {
         key: AssetDetail.QUANTUM,
         label: t('Quantum'),
         tooltip: t('The minimum economically meaningful amount of the asset'),
-        value: (asset) => num(asset, asset.quantum),
+        value: (asset, originalAsset) => {
+          const value = num(asset, asset.quantum);
+          if (originalAsset && originalAsset.quantum !== asset.quantum) {
+            const original = num(originalAsset, originalAsset.quantum);
+            return <Diff oldValue={original} newValue={value} />;
+          }
+          return value;
+        },
       },
       {
         key: AssetDetail.STATUS,
@@ -143,8 +165,24 @@ export const useRows = () => {
         tooltip: t('WITHDRAW_THRESHOLD_TOOLTIP_TEXT', {
           defaultValue: WITHDRAW_THRESHOLD_TOOLTIP_TEXT,
         }),
-        value: (asset) =>
-          num(asset, (asset.source as Schema.ERC20).withdrawThreshold),
+        value: (asset, originalAsset) => {
+          const value = num(
+            asset,
+            (asset.source as Schema.ERC20).withdrawThreshold
+          );
+          if (
+            originalAsset &&
+            (originalAsset.source as Schema.ERC20).withdrawThreshold !==
+              (asset.source as Schema.ERC20).withdrawThreshold
+          ) {
+            const original = num(
+              asset,
+              (originalAsset.source as Schema.ERC20).withdrawThreshold
+            );
+            return <Diff oldValue={original} newValue={value} />;
+          }
+          return value;
+        },
       },
       {
         key: AssetDetail.LIFETIME_LIMIT,
@@ -152,8 +190,26 @@ export const useRows = () => {
         tooltip: t(
           'The lifetime deposit limit per address. Note: this is a temporary measure that can be changed or removed through governance'
         ),
-        value: (asset) =>
-          num(asset, (asset.source as Schema.ERC20).lifetimeLimit),
+        value: (asset, originalAsset) => {
+          const value = num(
+            asset,
+            (asset.source as Schema.ERC20).lifetimeLimit
+          );
+
+          if (
+            originalAsset &&
+            (originalAsset.source as Schema.ERC20).lifetimeLimit !==
+              (asset.source as Schema.ERC20).lifetimeLimit
+          ) {
+            const original = num(
+              asset,
+              (originalAsset.source as Schema.ERC20).lifetimeLimit
+            );
+            return <Diff oldValue={original} newValue={value} />;
+          }
+
+          return value;
+        },
       },
       {
         key: AssetDetail.MAX_FAUCET_AMOUNT_MINT,
@@ -261,10 +317,13 @@ export const testId = (detail: AssetDetail, field: 'label' | 'value') =>
 
 export type AssetDetailsTableProps = {
   asset: Asset;
+  originalAsset?: Asset;
+
   omitRows?: AssetDetail[];
 } & Omit<KeyValueTableRowProps, 'children'>;
 export const AssetDetailsTable = ({
   asset,
+  originalAsset,
   omitRows = [],
   ...props
 }: AssetDetailsTableProps) => {
@@ -275,7 +334,7 @@ export const AssetDetailsTable = ({
 
   const details = useRows().map((r) => ({
     ...r,
-    value: r.value(asset),
+    value: r.value(asset, originalAsset),
     valueTooltip: r.valueTooltip?.(asset),
   }));