fix: diff indicator on edit delegation (#3013)

novasamatech · Jan 21, 2025 · f9488a3 · f9488a3
1 parent aac3b70
commit f9488a3
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 7 deletions.
diff --git a/src/renderer/entities/governance/ui/BalanceDiff.tsx b/src/renderer/entities/governance/ui/BalanceDiff.tsx
@@ -34,6 +34,7 @@ export const BalanceDiff = memo(({ from, to, asset, lock = BN_ZERO }: Props) =>
       to={<AssetBalance value={realTo} asset={asset} showSymbol={false} className="text-inherit" />}
       diff={<AssetBalance value={diff.abs()} asset={asset} className="text-inherit" />}
       suffix={asset.symbol}
+      equal={diff.isZero()}
       positive={diff.gten(0)}
     />
   );

diff --git a/src/renderer/entities/governance/ui/DiffValue.tsx b/src/renderer/entities/governance/ui/DiffValue.tsx
@@ -10,9 +10,10 @@ type Props = {
   suffix?: ReactNode;
   diff: ReactNode;
   positive?: boolean;
+  equal?: boolean;
 };
 
-export const DiffValue = ({ className, from, to, diff, suffix = null, positive }: Props) => {
+export const DiffValue = ({ className, from, to, diff, suffix = null, equal, positive }: Props) => {
   return (
     <div className={cnTw('flex flex-col items-end', className)}>
       <FootnoteText className="flex items-center gap-0.5 text-text-primary">
@@ -22,11 +23,12 @@ export const DiffValue = ({ className, from, to, diff, suffix = null, positive }
         {suffix}
       </FootnoteText>
       <FootnoteText className="flex items-center text-tab-text-accent">
-        {positive ? (
-          <Icon name="arrowDoubleUp" size={16} className="text-inherit" />
-        ) : (
-          <Icon name="arrowDoubleDown" size={16} className="text-inherit" />
-        )}
+        {!equal &&
+          (positive ? (
+            <Icon name="arrowDoubleUp" size={16} className="text-inherit" />
+          ) : (
+            <Icon name="arrowDoubleDown" size={16} className="text-inherit" />
+          ))}
         <span>{diff}</span>
       </FootnoteText>
     </div>

diff --git a/src/renderer/entities/governance/ui/LockPeriodDiff.tsx b/src/renderer/entities/governance/ui/LockPeriodDiff.tsx
@@ -40,6 +40,7 @@ export const LockPeriodDiff = memo(({ from, to, unlock = false, lockPeriods }: P
       diff={t('time.days', {
         count: parseInt(formatDistanceStrict(lockPeriods[to], lockPeriods[from], { unit: 'day', locale: dateLocale })),
       })}
+      equal={from === to}
       positive={lockPeriods[to] - lockPeriods[from] >= 0}
     />
   );

diff --git a/src/renderer/entities/governance/ui/LockValueDiff.tsx b/src/renderer/entities/governance/ui/LockValueDiff.tsx
@@ -30,6 +30,7 @@ export const LockValueDiff = ({ from, to, asset }: Props) => {
       to={<AssetBalance value={reusableTo} asset={asset} showSymbol={false} className="text-inherit" />}
       diff={<AssetBalance value={diff} asset={asset} className="text-inherit" />}
       suffix={asset.symbol}
+      equal={diff.isZero()}
       positive={diff.gten(0)}
     />
   );

diff --git a/src/renderer/widgets/EditDelegationModal/model/form-model.ts b/src/renderer/widgets/EditDelegationModal/model/form-model.ts
@@ -66,6 +66,7 @@ const $shards = createStore<AnyAccount[]>([]);
 const $delegateBalanceRange = createStore<string | string[]>(ZERO_BALANCE);
 const $signatoryBalance = createStore<string>(ZERO_BALANCE);
 const $proxyBalance = createStore<string>(ZERO_BALANCE);
+const $previousConviction = createStore<Conviction>('None');
 
 const $availableSignatories = createStore<AnyAccount[][]>([]);
 const $proxyAccount = createStore<AnyAccount | null>(null);
@@ -382,6 +383,17 @@ sample({
   target: $delegateForm.fields.isUnchanged.onChange,
 });
 
+sample({
+  clock: formInitiated,
+  source: $networkStore,
+  fn: (network, { activeDelegations, shards }) => {
+    const address = toAddress(shards[0].accountId, { prefix: network!.chain.addressPrefix });
+
+    return activeDelegations[address].conviction;
+  },
+  target: $previousConviction,
+});
+
 sample({
   clock: txWrapperChanged,
   target: spread({
@@ -488,6 +500,7 @@ export const formModel = {
   $accountsBalances,
   $delegateBalanceRange,
   $proxyBalance,
+  $previousConviction,
 
   $feeData,
   $isFeeLoading,

diff --git a/src/renderer/widgets/EditDelegationModal/ui/DelegateForm.tsx b/src/renderer/widgets/EditDelegationModal/ui/DelegateForm.tsx
@@ -207,6 +207,7 @@ const FeeSection = () => {
   const isFeeLoading = useUnit(formModel.$isFeeLoading);
   const isMultisig = useUnit(formModel.$isMultisig);
   const accounts = useUnit(formModel.$accounts);
+  const previousConviction = useUnit(formModel.$previousConviction);
 
   const lockPeriods = useStoreMap({
     store: lockPeriodsModel.$lockPeriods,
@@ -242,7 +243,7 @@ const FeeSection = () => {
           </DetailRow>
 
           <DetailRow label={t('governance.locks.undelegatePeriod')} wrapperClassName="items-start">
-            <LockPeriodDiff from="None" to={conviction.value} lockPeriods={lockPeriods} />
+            <LockPeriodDiff from={previousConviction} to={conviction.value} lockPeriods={lockPeriods} />
           </DetailRow>
         </>
       )}