Fix Sapphire undelegate transactions: display number of shares

Author: kaja-osojnik

.changelog/1892.bugfix.md

@@ -0,0 +1 @@
+Fix Sapphire undelegate transactions: display number of shares

src/app/components/Transactions/RuntimeTransactions.tsx

@@ -157,7 +157,16 @@ export const RuntimeTransactions: FC<TransactionsProps> = ({
               },
               {
                 align: TableCellAlign.Right,
-                content: <RoundedBalance value={transaction.amount} ticker={transaction.amount_symbol} />,
+                content:
+                  transaction.amount && transaction.amount !== '0' ? (
+                    <RoundedBalance value={transaction.amount} ticker={transaction.amount_symbol} />
+                  ) : (
+                    <RoundedBalance
+                      compactLargeNumbers
+                      value={transaction?.body?.shares}
+                      ticker={t('common.shares')}
+                    />
+                  ),
                 key: 'value',
               },
               {

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -33,6 +33,7 @@ import { MultipleTransactionsWarning } from '../../components/Transactions/Multi
 import { JsonCodeDisplay } from '../..//components/CodeDisplay'
 import { isRoflTransaction } from '../../utils/transaction'
 import Box from '@mui/material/Box'
+import { RoundedBalance } from 'app/components/RoundedBalance'
 
 export const RuntimeTransactionDetailPage: FC = () => {
   const { t } = useTranslation()
@@ -210,6 +211,19 @@ export const RuntimeTransactionDetailView: FC<{
               : t('common.missing')}
           </dd>
 
+          {transaction?.body?.shares && (
+            <>
+              <dt>{t('common.shares')}</dt>
+              <dd>
+                <RoundedBalance
+                  compactLargeNumbers
+                  value={transaction?.body?.shares}
+                  ticker={t('common.shares')}
+                />
+              </dd>
+            </>
+          )}
+
           {showFiatValues &&
             transaction.amount !== undefined &&
             !!amountSymbolPriceInfo &&