From 503d41cc13d7d4184d219c484bc8065f53b57773 Mon Sep 17 00:00:00 2001
From: Noisekit <28145325+noisekit@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:17:52 +0800
Subject: [PATCH] Update amount display on claim modal to match rewards list
 (#455)

---
 .../src/components/Rewards/RewardsModal.tsx   | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/liquidity/ui/src/components/Rewards/RewardsModal.tsx b/liquidity/ui/src/components/Rewards/RewardsModal.tsx
index f582983c1..717d13739 100644
--- a/liquidity/ui/src/components/Rewards/RewardsModal.tsx
+++ b/liquidity/ui/src/components/Rewards/RewardsModal.tsx
@@ -1,20 +1,22 @@
 import { CheckIcon } from '@chakra-ui/icons';
 import {
-  ModalContent,
-  ModalBody,
-  Modal,
-  Text,
-  Flex,
-  ModalOverlay,
-  CircularProgress,
-  Link,
   Button,
+  CircularProgress,
   Divider,
+  Flex,
+  Link,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  Text,
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { Amount } from '@snx-v3/Amount';
 import { etherscanLink } from '@snx-v3/etherscanLink';
 import { useNetwork } from '@snx-v3/useBlockchain';
 import { WithdrawIncrease } from '@snx-v3/WithdrawIncrease';
+import { wei } from '@synthetixio/wei';
+import { useEffect, useState } from 'react';
 
 interface RewardsModalInterface {
   collateralSymbol?: string;
@@ -99,7 +101,11 @@ export const RewardsModal = ({
               ml={2}
             >
               <Text fontSize="14px" fontWeight={700} lineHeight="20px" color="white">
-                Claiming {amount ? amount : ''} {collateralSymbol ? collateralSymbol : ''}
+                <Amount
+                  value={wei(amount)}
+                  prefix="Claiming "
+                  suffix={collateralSymbol ? ` ${collateralSymbol}` : undefined}
+                />
               </Text>
               <Text fontSize="12px" lineHeight="16px" color="gray.500">
                 Claim your rewards