cashout bet amount

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@apollo/client": "^3.11.1",
     "@azuro-org/dictionaries": "^3.0.26",
-    "@azuro-org/sdk": "5.4.0-beta.2",
+    "@azuro-org/sdk": "5.4.0-beta.3",
     "@azuro-org/sdk-social-aa-connector": "^1.0.6",
     "@floating-ui/react-dom-interactions": "^0.13.3",
     "@glidejs/glide": "^3.6.2",

src/components/ui/Icon/icons.ts

@@ -9,6 +9,8 @@ import _sport_baseball from '../../../../public/images/icons/sport/baseball.svg?
 import _sport_baseballSource from '!!raw-loader!../../../../public/images/icons/sport/baseball.svg'
 import _sport_basketball from '../../../../public/images/icons/sport/basketball.svg?url'
 import _sport_basketballSource from '!!raw-loader!../../../../public/images/icons/sport/basketball.svg'
+import _sport_beach_volleyball from '../../../../public/images/icons/sport/beach-volleyball.svg?url'
+import _sport_beach_volleyballSource from '!!raw-loader!../../../../public/images/icons/sport/beach-volleyball.svg'
 import _sport_boxing from '../../../../public/images/icons/sport/boxing.svg?url'
 import _sport_boxingSource from '!!raw-loader!../../../../public/images/icons/sport/boxing.svg'
 import _sport_cod from '../../../../public/images/icons/sport/cod.svg?url'
@@ -43,8 +45,12 @@ import _sport_rugby_league from '../../../../public/images/icons/sport/rugby-lea
 import _sport_rugby_leagueSource from '!!raw-loader!../../../../public/images/icons/sport/rugby-league.svg'
 import _sport_rugby_union from '../../../../public/images/icons/sport/rugby-union.svg?url'
 import _sport_rugby_unionSource from '!!raw-loader!../../../../public/images/icons/sport/rugby-union.svg'
+import _sport_table_tennis from '../../../../public/images/icons/sport/table-tennis.svg?url'
+import _sport_table_tennisSource from '!!raw-loader!../../../../public/images/icons/sport/table-tennis.svg'
 import _sport_tennis from '../../../../public/images/icons/sport/tennis.svg?url'
 import _sport_tennisSource from '!!raw-loader!../../../../public/images/icons/sport/tennis.svg'
+import _sport_volleyball from '../../../../public/images/icons/sport/volleyball.svg?url'
+import _sport_volleyballSource from '!!raw-loader!../../../../public/images/icons/sport/volleyball.svg'
 import _networks_arbitrum from '../../../../public/images/icons/networks/arbitrum.svg?url'
 import _networks_arbitrumSource from '!!raw-loader!../../../../public/images/icons/networks/arbitrum.svg'
 import _networks_base from '../../../../public/images/icons/networks/base.svg?url'
@@ -194,6 +200,7 @@ const icons = {
   'sport/american-football': { src: _sport_american_football.src, source: isServer && _sport_american_footballSource, width: _sport_american_football.width, height: _sport_american_football.height, aspect: _sport_american_football.width/_sport_american_football.height }, 
   'sport/baseball': { src: _sport_baseball.src, source: isServer && _sport_baseballSource, width: _sport_baseball.width, height: _sport_baseball.height, aspect: _sport_baseball.width/_sport_baseball.height }, 
   'sport/basketball': { src: _sport_basketball.src, source: isServer && _sport_basketballSource, width: _sport_basketball.width, height: _sport_basketball.height, aspect: _sport_basketball.width/_sport_basketball.height }, 
+  'sport/beach-volleyball': { src: _sport_beach_volleyball.src, source: isServer && _sport_beach_volleyballSource, width: _sport_beach_volleyball.width, height: _sport_beach_volleyball.height, aspect: _sport_beach_volleyball.width/_sport_beach_volleyball.height }, 
   'sport/boxing': { src: _sport_boxing.src, source: isServer && _sport_boxingSource, width: _sport_boxing.width, height: _sport_boxing.height, aspect: _sport_boxing.width/_sport_boxing.height }, 
   'sport/cod': { src: _sport_cod.src, source: isServer && _sport_codSource, width: _sport_cod.width, height: _sport_cod.height, aspect: _sport_cod.width/_sport_cod.height }, 
   'sport/cricket': { src: _sport_cricket.src, source: isServer && _sport_cricketSource, width: _sport_cricket.width, height: _sport_cricket.height, aspect: _sport_cricket.width/_sport_cricket.height }, 
@@ -211,7 +218,9 @@ const icons = {
   'sport/pubg': { src: _sport_pubg.src, source: isServer && _sport_pubgSource, width: _sport_pubg.width, height: _sport_pubg.height, aspect: _sport_pubg.width/_sport_pubg.height }, 
   'sport/rugby-league': { src: _sport_rugby_league.src, source: isServer && _sport_rugby_leagueSource, width: _sport_rugby_league.width, height: _sport_rugby_league.height, aspect: _sport_rugby_league.width/_sport_rugby_league.height }, 
   'sport/rugby-union': { src: _sport_rugby_union.src, source: isServer && _sport_rugby_unionSource, width: _sport_rugby_union.width, height: _sport_rugby_union.height, aspect: _sport_rugby_union.width/_sport_rugby_union.height }, 
+  'sport/table-tennis': { src: _sport_table_tennis.src, source: isServer && _sport_table_tennisSource, width: _sport_table_tennis.width, height: _sport_table_tennis.height, aspect: _sport_table_tennis.width/_sport_table_tennis.height }, 
   'sport/tennis': { src: _sport_tennis.src, source: isServer && _sport_tennisSource, width: _sport_tennis.width, height: _sport_tennis.height, aspect: _sport_tennis.width/_sport_tennis.height }, 
+  'sport/volleyball': { src: _sport_volleyball.src, source: isServer && _sport_volleyballSource, width: _sport_volleyball.width, height: _sport_volleyball.height, aspect: _sport_volleyball.width/_sport_volleyball.height }, 
   'networks/arbitrum': { src: _networks_arbitrum.src, source: isServer && _networks_arbitrumSource, width: _networks_arbitrum.width, height: _networks_arbitrum.height, aspect: _networks_arbitrum.width/_networks_arbitrum.height }, 
   'networks/base': { src: _networks_base.src, source: isServer && _networks_baseSource, width: _networks_base.width, height: _networks_base.height, aspect: _networks_base.width/_networks_base.height }, 
   'networks/binance': { src: _networks_binance.src, source: isServer && _networks_binanceSource, width: _networks_binance.width, height: _networks_binance.height, aspect: _networks_binance.width/_networks_binance.height }, 

src/compositions/profile/Bets/Bets.tsx

@@ -2,7 +2,7 @@
 
 import { useChain, useRedeemBet, BetType, type Bet, type BetOutcome, usePrecalculatedCashouts } from '@azuro-org/sdk'
 import { getGameStatus, GameStatus } from '@azuro-org/toolkit'
-import { Message, useIntl } from '@locmod/intl'
+import { Message } from '@locmod/intl'
 import React, { useMemo } from 'react'
 import dayjs from 'dayjs'
 import { useSearchParams, useRouter, usePathname } from 'next/navigation'
@@ -182,11 +182,10 @@ type BetProps = {
 const Bet: React.FC<BetProps> = ({ bet }) => {
   const {
     createdAt, status: graphBetStatus, amount, outcomes,
-    payout, possibleWin, freebetId, txHash, tokenId,
+    payout, cashout, possibleWin, freebetId, txHash, tokenId,
     isWin, isLose, isCanceled, isRedeemed, isLive, isCashedOut,
   } = bet
 
-  const intl = useIntl()
   const { betToken, appChain } = useChain()
   const { submit, isPending, isProcessing } = useRedeemBet()
   const { totalMultiplier: totalCashoutMultiplier, isCashoutAvailable } = usePrecalculatedCashouts({
@@ -203,29 +202,36 @@ const Bet: React.FC<BetProps> = ({ bet }) => {
   const withButton = !isRedeemed && !isCashedOut && (isWin || isCanceled)
 
   const { resultTitle, resultAmount } = useMemo(() => {
+    if (isCashedOut) {
+      return {
+        resultTitle: messages.cashedOut,
+        resultAmount: `${formatToFixed(cashout!, 3)} ${betToken.symbol}`,
+      }
+    }
+
     if (isWin) {
       return {
-        resultTitle: intl.formatMessage(messages.winning),
+        resultTitle: messages.winning,
         resultAmount: `${formatToFixed(payout || possibleWin, 3)} ${betToken.symbol}`,
       }
     }
 
     if (isLose) {
       return {
-        resultTitle: intl.formatMessage(messages.loss),
+        resultTitle: messages.loss,
         resultAmount: `-${formatToFixed(amount, 2)} ${betToken.symbol}`,
       }
     }
 
     if (isCanceled) {
       return {
-        resultTitle: intl.formatMessage(messages.possibleWin),
+        resultTitle: messages.possibleWin,
         resultAmount: '––',
       }
     }
 
     return {
-      resultTitle: intl.formatMessage(messages.possibleWin),
+      resultTitle: messages.possibleWin,
       resultAmount: `${formatToFixed(possibleWin, 3)} ${betToken.symbol}`,
     }
   }, [])
@@ -296,12 +302,12 @@ const Bet: React.FC<BetProps> = ({ bet }) => {
         </div>
         <div className="flex ds:items-center mb:flex-col mb:space-y-3">
           <div className="flex items-center text-caption-13 mb:justify-between">
-            <span className="text-grey-70 mr-1">{resultTitle}</span>
+            <Message className="text-grey-70 mr-1" value={resultTitle} />
             <span
               className={
                 cx('font-semibold', {
-                  'text-grey-70': isLose || isCanceled,
-                  'text-accent-green': isWin,
+                  'text-grey-70': isLose || isCanceled || isCashedOut,
+                  'text-accent-green': isWin && !isCashedOut,
                 })
               }
             >{resultAmount}

src/compositions/profile/Bets/messages.ts

@@ -35,6 +35,9 @@ export default {
   winning: {
     en: 'Winning:',
   },
+  cashedOut: {
+    en: 'Cash-Out Amount:',
+  },
   loss: {
     en: 'Loss:',
   },