fix: Address too long (#9151)

Before
<img width="438" alt="Screenshot 2024-02-26 at 4 48 45 PM"
src="https://github.com/pancakeswap/pancake-frontend/assets/98292246/414d9d5d-08f2-4fe7-b4a6-c6964deac102">

After
<img width="438" alt="Screenshot 2024-02-26 at 4 48 20 PM"
src="https://github.com/pancakeswap/pancake-frontend/assets/98292246/6f9fc668-b9c6-430f-a136-d494c5248400">


<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->


<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `MobileResult` component in the `Leaderboard`
section of the TradingReward view.

### Detailed summary
- Imported `Text` and `Flex` from `@pancakeswap/uikit`
- Imported `BigNumber` and `useDomainNameForAddress`
- Updated styles for `StyledMobileRow`
- Added `ellipsis` prop to `Text`
- Reordered imports for better organization

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/views/TradingReward/components/Leaderboard/MobileResult.tsx

@@ -1,14 +1,14 @@
-import { styled } from 'styled-components'
-import { Box, Text, Flex, ProfileAvatar } from '@pancakeswap/uikit'
 import { useTranslation } from '@pancakeswap/localization'
-import { RankListDetail } from 'views/TradingReward/hooks/useRankList'
+import { Box, Flex, ProfileAvatar, Text } from '@pancakeswap/uikit'
 import { formatNumber } from '@pancakeswap/utils/formatBalance'
-import { useProfileForAddress } from 'state/profile/hooks'
-import { useDomainNameForAddress } from 'hooks/useDomain'
 import truncateHash from '@pancakeswap/utils/truncateHash'
+import BigNumber from 'bignumber.js'
 import { useCakePrice } from 'hooks/useCakePrice'
+import { useDomainNameForAddress } from 'hooks/useDomain'
 import { useMemo } from 'react'
-import BigNumber from 'bignumber.js'
+import { useProfileForAddress } from 'state/profile/hooks'
+import { styled } from 'styled-components'
+import { RankListDetail } from 'views/TradingReward/hooks/useRankList'
 
 export const StyledMobileRow = styled(Box)`
   background-color: ${({ theme }) => theme.card.background};
@@ -51,7 +51,7 @@ const MobileResult: React.FC<React.PropsWithChildren<MobileResultProps>> = ({ is
           </Flex>
         </Flex>
         <Flex width="70%" justifyContent="flex-end" alignSelf="center">
-          <Text color="primary" fontWeight="bold" style={{ alignSelf: 'center' }} mr="8px">
+          <Text ellipsis color="primary" fontWeight="bold" style={{ alignSelf: 'center' }} mr="8px">
             {profile?.username || domainName || truncateHash(rank.origin)}
           </Text>
           <ProfileAvatar width={32} height={32} src={profile?.nft?.image?.thumbnail ?? avatar} />