feat: merge rfox into rfox ecosystem (#10323)

Author: NeOMakinG

.env

@@ -188,3 +188,4 @@ VITE_FEATURE_THORCHAIN_TCY=true
 VITE_FEATURE_THORCHAIN_TCY_WIDGET=true
 
 VITE_FEATURE_TX_HISTORY_BYE_BYE=false
+VITE_FEATURE_RFOX_FOX_ECOSYSTEM_PAGE=false

.env.development

@@ -73,3 +73,4 @@ NODE_ENV=development
 VITE_FEATURE_MIXPANEL=true
 
 VITE_FEATURE_TX_HISTORY_BYE_BYE=true
+VITE_FEATURE_RFOX_FOX_ECOSYSTEM_PAGE=true

src/Routes/RoutesCommon.tsx

@@ -9,6 +9,7 @@ import { RouteCategory } from './helpers'
 
 import { ExploreIcon } from '@/components/Icons/Explore'
 import { FoxIcon } from '@/components/Icons/FoxIcon'
+import { FoxPageIcon } from '@/components/Icons/FoxPageIcon'
 import { HomeIcon } from '@/components/Icons/Home'
 import { PoolsIcon } from '@/components/Icons/Pools'
 import { RFOXIcon } from '@/components/Icons/RFOX'
@@ -22,6 +23,7 @@ import { getConfig } from '@/config'
 import { assetIdPaths } from '@/hooks/useRouteAssetId/useRouteAssetId'
 import { Accounts } from '@/pages/Accounts/Accounts'
 import { ExploreCategory } from '@/pages/Explore/ExploreCategory'
+import { FoxEcosystemPage } from '@/pages/Fox/FoxEcosystemPage'
 import { FoxPage } from '@/pages/Fox/FoxPage'
 import { History } from '@/pages/History/History'
 import { RFOX } from '@/pages/RFOX/RFOX'
@@ -269,7 +271,7 @@ export const routes: Route[] = [
     priority: 1,
     main: RFOX,
     category: RouteCategory.Fox,
-    disable: !getConfig().VITE_FEATURE_RFOX,
+    disable: !getConfig().VITE_FEATURE_RFOX || getConfig().VITE_FEATURE_RFOX_FOX_ECOSYSTEM_PAGE,
   },
   {
     path: '/fox',
@@ -279,7 +281,16 @@ export const routes: Route[] = [
     category: RouteCategory.Fox,
     priority: 6,
     mobileNav: false,
-    disable: !getConfig().VITE_FEATURE_FOX_PAGE,
+    disable: !getConfig().VITE_FEATURE_FOX_PAGE || getConfig().VITE_FEATURE_RFOX_FOX_ECOSYSTEM_PAGE,
+  },
+  {
+    path: '/fox-ecosystem/*',
+    label: 'navBar.foxEcosystem',
+    icon: <FoxPageIcon />,
+    main: FoxEcosystemPage,
+    priority: 6,
+    mobileNav: false,
+    disable: !getConfig().VITE_FEATURE_RFOX_FOX_ECOSYSTEM_PAGE,
   },
   {
     path: '/tcy/*',

src/assets/translations/en/main.json

@@ -1121,7 +1121,19 @@
       "youGotMore": "You got %{cryptoUpside} more on this trade"
     },
     "networkFee": "Network Fee",
-    "feeExplainer": "Quote includes a %{feePercentage}% ShapeShift fee"
+    "feeExplainer": "Quote includes a %{feePercentage}% ShapeShift fee",
+    "claim": {
+      "pending": "Your claim of %{amount} %{symbol} is being processed.",
+      "complete": "Your claim of %{amount} %{symbol} is complete."
+    },
+    "rewardDistribution": {
+      "pending": {
+        "description": "Your reward of %{amountAndSymbol} is processing..."
+      },
+      "complete": {
+        "description": "Your reward of %{amountAndSymbol} is complete."
+      }
+    }
   },
   "limitOrder": {
     "heading": "Limit",
@@ -1352,7 +1364,7 @@
         },
         "skip": {
           "title": "Skip this step?",
-          "description": "Skipping the backup means you won't be able to recover your wallet if you lose access to your device.",
+          "description": "Skipping the backup means you won’t be able to recover your wallet if you lose access to your device.",
           "confirmCta": "Yes, I’ve saved my seed phrase"
         }
       }
@@ -2715,6 +2727,9 @@
     }
   },
   "RFOX": {
+    "stakeInitiated": "Stake Initiated",
+    "unstakeInitiated": "Unstake Initiated",
+    "claimWithdraw": "Claim Withdraw",
     "staking": "rFOX Staking",
     "bridge": "Bridge",
     "bridgeFunds": "Bridge Funds",
@@ -2879,7 +2894,7 @@
       "confirmTitle": "Confirm Claim",
       "networkFee": "Network Fee",
       "confirmAndClaim": "Claim & Stake",
-      "notice": "You’re claiming %{amount} TCY. It’ll be automatically staked — unstake anytime after to receive it in your wallet."
+      "notice": "You’re claiming %{amount} TCY. It’ll be automatically staked — unstake anytime after to receive it in your wallet."
     },
     "assetClaimButton": {
       "claimAction": "Claim"
@@ -3126,6 +3141,14 @@
     "limitOrderTitle": "%{sellAmount} %{sellSymbol} → %{buyAmount} %{buySymbol}",
     "pendingTransactions": "%{count} Pending",
     "orderCancelled": "Order Cancelled",
-    "orderExpired": "Order Expired"
+    "orderExpired": "Order Expired",
+    "rewardDistribution": {
+      "pending": {
+        "description": "Your reward of %{amountAndSymbol} is processing..."
+      },
+      "complete": {
+        "description": "Your reward of %{amountAndSymbol} is complete."
+      }
+    }
   }
 }

src/components/AssetSearch/components/AssetRow.tsx

@@ -40,7 +40,13 @@ export const AssetRow: FC<{ asset: Asset; index: number; data: AssetData }> = me
     )
     const userCurrencyBalance =
       useAppSelector(s => selectPortfolioUserCurrencyBalanceByAssetId(s, filter)) ?? '0'
-    const handleOnClick = useCallback(() => handleClick(asset), [asset, handleClick])
+    const handleOnClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation()
+        handleClick(asset)
+      },
+      [asset, handleClick],
+    )
 
     if (!asset) return null
 

src/components/ButtonWalletPredicate/ButtonWalletPredicate.tsx

@@ -1,10 +1,13 @@
 import type { ButtonProps } from '@chakra-ui/react'
-import { Button } from '@chakra-ui/react'
+import { Button, useMediaQuery } from '@chakra-ui/react'
 import { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
+import { Drawer } from 'vaul'
 
+import { useSafeDialog } from '@/context/DialogContextProvider/DialogContextProvider'
 import { WalletActions } from '@/context/WalletProvider/actions'
 import { useWallet } from '@/hooks/useWallet/useWallet'
+import { breakpoints } from '@/theme/theme'
 
 type ButtonWalletPredicateProps = {
   isValidWallet: boolean
@@ -20,17 +23,31 @@ export const ButtonWalletPredicate = ({
     dispatch,
     state: { isConnected },
   } = useWallet()
+  const { isOpen } = useSafeDialog()
+  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
 
   const handleConnect = useCallback(() => {
     dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true })
   }, [dispatch])
 
-  if (!isConnected)
+  if (!isConnected) {
+    // @TODO: This is a hack to close any drawer if this button is in the context of a drawer, remove me if we have a better way to handle multiple modal stacking
+    if (isOpen && !isLargerThanMd) {
+      return (
+        <Drawer.Close>
+          <Button {...restProps} onClick={handleConnect} isDisabled={false} colorScheme='blue'>
+            {translate('common.connectWallet')}
+          </Button>
+        </Drawer.Close>
+      )
+    }
+
     return (
       <Button {...restProps} onClick={handleConnect} isDisabled={false} colorScheme='blue'>
         {translate('common.connectWallet')}
       </Button>
     )
+  }
 
   return (
     <>

src/components/Icons/FoxPageIcon.tsx

@@ -0,0 +1,17 @@
+import { createIcon } from '@chakra-ui/react'
+
+export const FoxPageIcon = createIcon({
+  displayName: 'FoxPageIcon',
+  path: (
+    <>
+      <path
+        d='M 395.500 1.448 C 393.300 2.144, 373.950 10.134, 352.500 19.204 C 331.050 28.273, 302.925 39.925, 290 45.097 L 266.500 54.500 208.139 54.774 L 149.777 55.047 124.139 44.870 C 110.037 39.272, 80.950 27.289, 59.500 18.240 C 17.440 0.497, 15.050 -0.185, 7.632 3.446 C 2.336 6.039, 0.008 10.183, 0.004 17.026 C 0.002 20.066, 6.267 60.241, 13.926 106.303 L 27.851 190.054 13.926 235.134 C -1.313 284.464, -1.923 287.561, 2.542 292.867 C 3.940 294.529, 12.262 300.301, 21.036 305.694 C 29.809 311.087, 36.990 315.847, 36.994 316.272 C 36.997 316.696, 31.938 324.571, 25.750 333.772 L 14.500 350.500 14.500 357 C 14.500 362.097, 14.975 364.166, 16.701 366.586 C 19.491 370.496, 36.725 381.923, 41.436 382.986 C 45.859 383.983, 51.831 382.548, 55.231 379.671 C 56.642 378.477, 72.492 355.565, 90.452 328.756 C 108.413 301.947, 123.955 279.560, 124.989 279.006 C 130.049 276.298, 133.383 277.612, 157.772 291.934 C 171.475 299.981, 183.530 306.374, 186.306 307.067 C 195.359 309.325, 207 305.973, 213.128 299.343 C 214.574 297.779, 227.334 278.050, 241.484 255.500 C 255.633 232.950, 267.728 213.951, 268.361 213.280 C 269.252 212.335, 274.322 215.085, 290.937 225.530 C 312.409 239.028, 315.548 240.382, 319.929 238.038 C 320.917 237.509, 322.271 235.759, 322.938 234.149 C 324 231.587, 322.890 224.889, 314.029 180.361 C 308.462 152.388, 303.412 128.235, 302.807 126.689 C 301.306 122.855, 295.870 118.919, 291.287 118.348 C 287.279 117.848, 184.454 138.950, 180.316 141.121 C 177.478 142.610, 175.706 146.982, 176.561 150.386 C 177.416 153.792, 179.010 154.969, 204.500 171.008 C 216.050 178.276, 225.632 184.342, 225.794 184.488 C 226.419 185.055, 189.709 242.624, 187.367 244.750 C 186.004 245.987, 184.111 247, 183.160 247 C 182.209 247, 170.646 240.647, 157.465 232.881 C 126.446 214.607, 124.398 213.659, 117.089 214.187 C 105.944 214.993, 104.529 216.425, 82.930 248.752 C 72.366 264.563, 63.335 277.927, 62.862 278.450 C 61.665 279.769, 53.471 275.649, 51.594 272.784 C 50.193 270.646, 50.920 268.050, 62.675 233.194 L 75.256 195.891 64.132 128.274 C 58.015 91.085, 53.120 60.551, 53.255 60.420 C 53.659 60.028, 95.860 77.005, 120.312 87.397 C 132.858 92.728, 145.560 97.541, 148.537 98.092 C 151.871 98.708, 175.771 98.979, 210.726 98.796 L 267.500 98.500 289.500 89.124 C 317.800 77.064, 360.240 59.907, 360.681 60.348 C 360.869 60.536, 356.009 91.109, 349.880 128.288 L 338.737 195.887 351.378 233.193 C 363.971 270.357, 364.011 270.508, 362.175 272.968 C 361.111 274.393, 351.269 280.129, 338.915 286.525 C 287.983 312.895, 257.277 336.995, 219.141 380.532 C 212.894 387.665, 207.494 393.609, 207.141 393.743 C 206.789 393.876, 200.875 387.887, 194 380.435 C 175.378 360.248, 134.619 323, 131.152 323 C 130.058 323, 107 357.358, 107 358.988 C 107 359.465, 110.262 362.389, 114.250 365.485 C 133.664 380.559, 156.155 403.208, 183.443 435.162 C 190.342 443.241, 196.478 449.473, 198.456 450.412 C 202.841 452.493, 211.019 452.435, 215.514 450.292 C 217.766 449.218, 223.387 443.557, 230.657 435.042 C 257.355 403.768, 278.531 382.363, 299 365.957 C 309.329 357.678, 339.815 337.873, 375 316.582 C 412.414 293.943, 415 291.792, 415 283.312 C 415 280.326, 414.658 278.093, 414.240 278.352 C 413.822 278.610, 407.318 258.724, 399.787 234.161 L 386.093 189.500 399.831 107.299 C 407.387 62.088, 413.891 24.776, 414.284 24.382 C 414.678 23.989, 415 20.517, 415 16.667 C 415 12.817, 414.712 9.955, 414.360 10.307 C 414.008 10.659, 412.945 9.496, 411.997 7.723 C 408.929 1.984, 402.062 -0.628, 395.500 1.448 M 0.336 18 C 0.336 22.125, 0.513 23.813, 0.728 21.750 C 0.944 19.688, 0.944 16.313, 0.728 14.250 C 0.513 12.188, 0.336 13.875, 0.336 18 M 0.310 284.500 C 0.315 287.800, 0.502 289.029, 0.725 287.232 C 0.947 285.435, 0.943 282.735, 0.715 281.232 C 0.486 279.729, 0.304 281.200, 0.310 284.500'
+        stroke='none'
+        fill='currentColor'
+        fill-rule='evenodd'
+      />
+      <path d='' stroke='none' fill='currentColor' fill-rule='evenodd' />
+    </>
+  ),
+  viewBox: '0 0 414 452',
+})

src/components/Layout/Header/ActionCenter/ActionCenter.tsx

@@ -21,19 +21,21 @@ import { AppUpdateActionCard } from './components/AppUpdateActionCard'
 import { EmptyState } from './components/EmptyState'
 import { GenericTransactionActionCard } from './components/GenericTransactionActionCard'
 import { LimitOrderActionCard } from './components/LimitOrderActionCard'
+import { RewardDistributionActionCard } from './components/RewardDistributionActionCard'
 import { RfoxClaimActionCard } from './components/RfoxClaimActionCard'
 import { SwapActionCard } from './components/SwapActionCard'
 import { TcyClaimActionCard } from './components/TcyClaimActionCard'
 
 import { Display } from '@/components/Display'
+import { RfoxInitiatedActionCard } from '@/components/Layout/Header/ActionCenter/components/RfoxInitiatedActionCard'
 import { CancelLimitOrder } from '@/components/MultiHopTrade/components/LimitOrder/components/CancelLimitOrder'
 import { useLimitOrders } from '@/components/MultiHopTrade/components/LimitOrder/hooks/useLimitOrders'
 import type { OrderToCancel } from '@/components/MultiHopTrade/components/LimitOrder/types'
 import {
   selectWalletActionsSorted,
   selectWalletPendingActions,
 } from '@/state/slices/actionSlice/selectors'
-import { ActionType } from '@/state/slices/actionSlice/types'
+import { ActionType, GenericTransactionDisplayType } from '@/state/slices/actionSlice/types'
 import { swapSlice } from '@/state/slices/swapSlice/swapSlice'
 import { useAppSelector } from '@/state/store'
 
@@ -105,6 +107,10 @@ export const ActionCenter = memo(() => {
           case ActionType.ChangeAddress:
           case ActionType.Approve:
           case ActionType.Claim: {
+            if (action.transactionMetadata.displayType === GenericTransactionDisplayType.RFOX) {
+              return <RfoxInitiatedActionCard key={action.id} action={action} />
+            }
+
             return <GenericTransactionActionCard key={action.id} action={action} />
           }
           case ActionType.RfoxClaim: {
@@ -113,6 +119,9 @@ export const ActionCenter = memo(() => {
           case ActionType.TcyClaim: {
             return <TcyClaimActionCard key={action.id} action={action} />
           }
+          case ActionType.RewardDistribution: {
+            return <RewardDistributionActionCard key={action.id} action={action} />
+          }
           default:
             return null
         }

src/components/Layout/Header/ActionCenter/components/GenericTransactionActionCard.tsx

@@ -74,11 +74,7 @@ export const GenericTransactionActionCard = ({ action }: GenericTransactionActio
   }, [asset, action.transactionMetadata.assetId, action.status])
 
   const footer = useMemo(() => {
-    return (
-      <>
-        <ActionStatusTag status={action.status} />
-      </>
-    )
+    return <ActionStatusTag status={action.status} />
   }, [action.status])
 
   return (

src/components/Layout/Header/ActionCenter/components/Notifications/RewardDistributionNotification.tsx

@@ -0,0 +1,86 @@
+import { Box, Flex, HStack, Stack } from '@chakra-ui/react'
+import type { RenderProps } from '@chakra-ui/react/dist/types/toast/toast.types'
+import { thorchainAssetId } from '@shapeshiftoss/caip'
+import { fromBaseUnit } from '@shapeshiftoss/utils'
+import { useMemo } from 'react'
+
+import { NotificationWrapper } from './NotificationWrapper'
+
+import { Amount } from '@/components/Amount/Amount'
+import { AssetIconWithBadge } from '@/components/AssetIconWithBadge'
+import { ActionStatusIcon } from '@/components/Layout/Header/ActionCenter/components/ActionStatusIcon'
+import type { TextPropTypes } from '@/components/Text/Text'
+import { Text } from '@/components/Text/Text'
+import type { RewardDistributionWithMetadata } from '@/pages/RFOX/hooks/useLifetimeRewardDistributionsQuery'
+import { actionSlice } from '@/state/slices/actionSlice/actionSlice'
+import { ActionStatus } from '@/state/slices/actionSlice/types'
+import { selectAssetById } from '@/state/slices/selectors'
+import { useAppSelector } from '@/state/store'
+
+type RewardDistributionNotificationProps = {
+  distribution: RewardDistributionWithMetadata
+  actionId: string
+  handleClick: () => void
+  onClose: () => void
+} & RenderProps
+
+export const RewardDistributionNotification = ({
+  distribution,
+  actionId,
+  handleClick,
+  onClose,
+}: RewardDistributionNotificationProps) => {
+  const runeAsset = useAppSelector(state => selectAssetById(state, thorchainAssetId))
+  const actions = useAppSelector(actionSlice.selectors.selectActionsById)
+  const action = actions[actionId]
+  const isComplete = action?.status === ActionStatus.Complete
+
+  const rewardDistributionTranslationComponents: TextPropTypes['components'] = useMemo(() => {
+    if (!runeAsset) return
+
+    return {
+      amountAndSymbol: (
+        <Amount.Crypto
+          value={fromBaseUnit(distribution.amount.toString(), runeAsset.precision ?? 0)}
+          symbol={runeAsset?.symbol}
+          fontSize='sm'
+          fontWeight='bold'
+          maximumFractionDigits={6}
+          omitDecimalTrailingZeros
+          display='inline'
+        />
+      ),
+    }
+  }, [distribution.amount, runeAsset])
+
+  const rewardDistributionTitleTranslation = useMemo(() => {
+    if (isComplete) return 'actionCenter.rewardDistribution.complete.description'
+    return 'actionCenter.rewardDistribution.pending.description'
+  }, [isComplete])
+
+  if (!distribution) return null
+
+  return (
+    <NotificationWrapper handleClick={handleClick} onClose={onClose}>
+      <Stack spacing={3}>
+        <Flex alignItems='center' justifyContent='space-between' pe={6}>
+          <HStack spacing={2}>
+            <AssetIconWithBadge assetId={thorchainAssetId} size='md'>
+              <ActionStatusIcon status={action.status} />
+            </AssetIconWithBadge>
+
+            <Box ml={2}>
+              <Text
+                flex={1}
+                fontSize='sm'
+                letterSpacing='0.02em'
+                translation={rewardDistributionTitleTranslation}
+                components={rewardDistributionTranslationComponents}
+              />
+            </Box>
+          </HStack>
+        </Flex>
+      </Stack>
+    </NotificationWrapper>
+  )
+}