Feat: staking claim [SW-160]

package.json

@@ -58,7 +58,7 @@
     "@safe-global/protocol-kit": "^4.1.0",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@safe-global/safe-deployments": "^1.37.3",
-    "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.12",
+    "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.13",
     "@safe-global/safe-modules-deployments": "^1.2.0",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",

src/components/transactions/TxDetails/TxData/index.tsx

@@ -1,5 +1,6 @@
 import SettingsChangeTxInfo from '@/components/transactions/TxDetails/TxData/SettingsChange'
 import type { SpendingLimitMethods } from '@/utils/transaction-guards'
+import { isStakingTxWithdrawInfo } from '@/utils/transaction-guards'
 import { isStakingTxExitInfo } from '@/utils/transaction-guards'
 import {
   isCancellationTxInfo,
@@ -22,6 +23,7 @@ import useChainId from '@/hooks/useChainId'
 import SwapOrder from '@/features/swap/components/SwapOrder'
 import StakingTxDepositDetails from '@/features/stake/components/StakingTxDepositDetails'
 import StakingTxExitDetails from '@/features/stake/components/StakingTxExitDetails'
+import StakingTxWithdrawDetails from '@/features/stake/components/StakingTxWithdrawDetails'
 
 const TxData = ({
   txDetails,
@@ -48,6 +50,10 @@ const TxData = ({
     return <StakingTxExitDetails txData={txDetails.txData} info={txDetails.txInfo} />
   }
 
+  if (isStakingTxWithdrawInfo(txDetails.txInfo)) {
+    return <StakingTxWithdrawDetails info={txDetails.txInfo} />
+  }
+
   if (isTransferTxInfo(txInfo)) {
     return <TransferTxInfo txInfo={txInfo} txStatus={txDetails.txStatus} trusted={trusted} imitation={imitation} />
   }

src/components/transactions/TxInfo/index.tsx

@@ -21,11 +21,13 @@ import {
   isTransferTxInfo,
   isStakingTxDepositInfo,
   isStakingTxExitInfo,
+  isStakingTxWithdrawInfo,
 } from '@/utils/transaction-guards'
 import { ellipsis, shortenAddress } from '@/utils/formatters'
 import { useCurrentChain } from '@/hooks/useChains'
 import { SwapTx } from '@/features/swap/components/SwapTxInfo/SwapTx'
 import StakingTxExitInfo from '@/features/stake/components/StakingTxExitInfo'
+import StakingTxWithdrawInfo from '@/features/stake/components/StakingTxWithdrawInfo'
 import { Box } from '@mui/material'
 import css from './styles.module.css'
 import StakingTxDepositInfo from '@/features/stake/components/StakingTxDepositInfo'
@@ -145,6 +147,10 @@ const TxInfo = ({ info, ...rest }: { info: TransactionInfo; omitSign?: boolean;
     return <StakingTxExitInfo info={info} />
   }
 
+  if (isStakingTxWithdrawInfo(info)) {
+    return <StakingTxWithdrawInfo info={info} />
+  }
+
   if (isCustomTxInfo(info)) {
     return <CustomTx info={info} />
   }

src/features/stake/components/StakingConfirmationTx/Withdraw.tsx

@@ -0,0 +1,29 @@
+import { Stack } from '@mui/material'
+import FieldsGrid from '@/components/tx/FieldsGrid'
+import type {
+  NativeStakingWithdrawConfirmationView,
+  StakingTxWithdrawInfo,
+} from '@safe-global/safe-gateway-typescript-sdk'
+import TokenAmount from '@/components/common/TokenAmount'
+
+type StakingOrderConfirmationViewProps = {
+  order: NativeStakingWithdrawConfirmationView | StakingTxWithdrawInfo
+}
+
+const StakingConfirmationTxWithdraw = ({ order }: StakingOrderConfirmationViewProps) => {
+  return (
+    <Stack gap={2}>
+      <FieldsGrid title="Receive">
+        {' '}
+        <TokenAmount
+          value={order.rewards}
+          tokenSymbol={order.tokenInfo.symbol}
+          decimals={order.tokenInfo.decimals}
+          logoUri={order.tokenInfo.logoUri}
+        />
+      </FieldsGrid>
+    </Stack>
+  )
+}
+
+export default StakingConfirmationTxWithdraw

src/features/stake/components/StakingConfirmationTx/index.tsx

@@ -2,6 +2,7 @@ import type { AnyStakingConfirmationView } from '@safe-global/safe-gateway-types
 import { ConfirmationViewTypes, type StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import StakingConfirmationTxDeposit from '@/features/stake/components/StakingConfirmationTx/Deposit'
 import StakingConfirmationTxExit from '@/features/stake/components/StakingConfirmationTx/Exit'
+import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingConfirmationTx/Withdraw'
 
 type StakingOrderConfirmationViewProps = {
   order: AnyStakingConfirmationView | StakingTxInfo
@@ -10,6 +11,7 @@ type StakingOrderConfirmationViewProps = {
 const StrakingConfirmationTx = ({ order }: StakingOrderConfirmationViewProps) => {
   const isDeposit = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_DEPOSIT
   const isExit = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_VALIDATORS_EXIT
+  const isWithdraw = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_WITHDRAW
 
   if (isDeposit) {
     return <StakingConfirmationTxDeposit order={order} />
@@ -19,6 +21,10 @@ const StrakingConfirmationTx = ({ order }: StakingOrderConfirmationViewProps) =>
     return <StakingConfirmationTxExit order={order} />
   }
 
+  if (isWithdraw) {
+    return <StakingConfirmationTxWithdraw order={order} />
+  }
+
   return null
 }
 

src/features/stake/components/StakingTxDepositInfo/index.tsx

@@ -1,8 +1,17 @@
 import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import { camelCaseToSpaces } from '@/utils/formatters'
+import TokenAmount from '@/components/common/TokenAmount'
 
 export const StakingTxDepositInfo = ({ info }: { info: StakingTxInfo }) => {
-  return <>{camelCaseToSpaces(info.type).toLowerCase()}</>
+  return (
+    <>
+      <TokenAmount
+        value={info.value}
+        tokenSymbol={info.tokenInfo.symbol}
+        decimals={info.tokenInfo.decimals}
+        logoUri={info.tokenInfo.logoUri}
+      />
+    </>
+  )
 }
 
 export default StakingTxDepositInfo

src/features/stake/components/StakingTxWithdrawDetails/index.tsx

@@ -0,0 +1,13 @@
+import { Box } from '@mui/material'
+import type { StakingTxWithdrawInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingConfirmationTx/Withdraw'
+
+const StakingTxWithdrawDetails = ({ info }: { info: StakingTxWithdrawInfo }) => {
+  return (
+    <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}>
+      <StakingConfirmationTxWithdraw order={info} />
+    </Box>
+  )
+}
+
+export default StakingTxWithdrawDetails

src/features/stake/components/StakingTxWithdrawInfo/index.tsx

@@ -0,0 +1,17 @@
+import type { StakingTxWithdrawInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import TokenAmount from '@/components/common/TokenAmount'
+
+const StakingTxWithdrawInfo = ({ info }: { info: StakingTxWithdrawInfo }) => {
+  return (
+    <>
+      <TokenAmount
+        value={info.rewards}
+        tokenSymbol={info.tokenInfo.symbol}
+        decimals={info.tokenInfo.decimals}
+        logoUri={info.tokenInfo.logoUri}
+      />
+    </>
+  )
+}
+
+export default StakingTxWithdrawInfo

src/features/stake/components/StakingWidget/index.tsx

@@ -2,24 +2,37 @@ import { useMemo } from 'react'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import AppFrame from '@/components/safe-apps/AppFrame'
 import { getEmptySafeApp } from '@/components/safe-apps/utils'
+import useChainId from '@/hooks/useChainId'
+import useChains from '@/hooks/useChains'
 
+const WIDGET_PRODUCTION_URL = 'https://safe.widget.kiln.fi/earn'
+const WIDGET_TESTNET_URL = 'https://safe.widget.testnet.kiln.fi/earn'
 const widgetAppData = {
-  url: 'https://safe.widget.testnet.kiln.fi/earn',
+  url: WIDGET_PRODUCTION_URL,
   name: 'Stake',
   iconUrl: '/images/common/stake.svg',
   chainIds: ['17000', '11155111', '1', '42161', '137', '56', '8453', '10'],
 }
 
 const StakingWidget = () => {
   const isDarkMode = useDarkMode()
+  let url = widgetAppData.url
+  const currentChainId = useChainId()
+  const { configs } = useChains()
+  const testChains = useMemo(() => configs.filter((chain) => chain.isTestnet), [configs])
+
+  // if currentChainId is in testChains, then set the url to the testnet version
+  if (testChains.some((chain) => chain.chainId === currentChainId)) {
+    url = WIDGET_TESTNET_URL
+  }
 
   const appData = useMemo(
     () => ({
       ...getEmptySafeApp(),
       ...widgetAppData,
-      url: widgetAppData.url + `?theme=${isDarkMode ? 'dark' : 'light'}`,
+      url: url + `?theme=${isDarkMode ? 'dark' : 'light'}`,
     }),
-    [isDarkMode],
+    [isDarkMode, url],
   )
 
   return (

src/features/stake/helpers/utils.ts

@@ -2,10 +2,12 @@ import { id } from 'ethers'
 import type { BaseTransaction } from '@safe-global/safe-apps-sdk'
 
 const WITHDRAW_SIGHASH = id('requestValidatorsExit(bytes)').slice(0, 10)
+const CLAIM_SIGHASH = id('batchWithdrawCLFee(bytes)').slice(0, 10)
 
 export const getStakeTitle = (txs: BaseTransaction[] | undefined) => {
   const hashToLabel = {
     [WITHDRAW_SIGHASH]: 'Withdraw request',
+    [CLAIM_SIGHASH]: 'Claim',
   }
 
   const stakeTitle = txs

src/hooks/useTransactionType.tsx

@@ -100,6 +100,12 @@ export const getTransactionType = (tx: TransactionSummary, addressBook: AddressB
         text: 'Withdraw request',
       }
     }
+    case TransactionInfoType.NATIVE_STAKING_WITHDRAW: {
+      return {
+        icon: '/images/common/stake.svg',
+        text: 'Claim',
+      }
+    }
     case TransactionInfoType.CUSTOM: {
       if (isMultiSendTxInfo(tx.txInfo) && !tx.safeAppInfo) {
         return {

src/services/tx/extractTxInfo.ts

@@ -63,6 +63,7 @@ const extractTxInfo = (
         return txDetails.txData?.value ?? '0'
       case 'NativeStakingDeposit':
       case 'NativeStakingValidatorsExit':
+      case 'NativeStakingWithdraw':
         return txDetails.txData?.value ?? '0'
       case 'Custom':
         return txDetails.txInfo.value
@@ -92,6 +93,7 @@ const extractTxInfo = (
         return orderTo
       case 'NativeStakingDeposit':
       case 'NativeStakingValidatorsExit':
+      case 'NativeStakingWithdraw':
         const stakingTo = txDetails.txData?.to.value
         if (!stakingTo) {
           throw new Error('Staking tx data does not have a `to` field')

src/utils/transaction-guards.ts

@@ -36,6 +36,8 @@ import type {
   AnyStakingConfirmationView,
   StakingTxExitInfo,
   StakingTxDepositInfo,
+  StakingTxWithdrawInfo,
+  NativeStakingWithdrawConfirmationView,
 } from '@safe-global/safe-gateway-typescript-sdk'
 import {
   ConfirmationViewTypes,
@@ -129,10 +131,13 @@ export const isStakingTxDepositInfo = (value: TransactionInfo): value is Staking
 }
 
 export const isStakingTxExitInfo = (value: TransactionInfo): value is StakingTxExitInfo => {
-  console.log('is staking tx exit info', value, TransactionInfoType.NATIVE_STAKING_VALIDATORS_EXIT)
   return value.type === TransactionInfoType.NATIVE_STAKING_VALIDATORS_EXIT
 }
 
+export const isStakingTxWithdrawInfo = (value: TransactionInfo): value is StakingTxWithdrawInfo => {
+  return value.type === TransactionInfoType.NATIVE_STAKING_WITHDRAW
+}
+
 export const isTwapConfirmationViewOrder = (
   decodedData: AnyConfirmationView | undefined,
 ): decodedData is TwapOrderConfirmationView => {
@@ -177,10 +182,23 @@ export const isStakingExitConfirmationView = (
   return false
 }
 
+export const isStakingWithdrawConfirmationView = (
+  decodedData: AnyConfirmationView | undefined,
+): decodedData is NativeStakingWithdrawConfirmationView => {
+  if (decodedData && 'type' in decodedData) {
+    return decodedData?.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_WITHDRAW
+  }
+  return false
+}
+
 export const isAnyStakingConfirmationView = (
   decodedData: AnyConfirmationView | undefined,
 ): decodedData is AnyStakingConfirmationView => {
-  return isStakingDepositConfirmationView(decodedData) || isStakingExitConfirmationView(decodedData)
+  return (
+    isStakingDepositConfirmationView(decodedData) ||
+    isStakingExitConfirmationView(decodedData) ||
+    isStakingWithdrawConfirmationView(decodedData)
+  )
 }
 
 export const isGenericConfirmation = (

yarn.lock

@@ -4183,10 +4183,10 @@
   dependencies:
     semver "^7.6.2"
 
-"@safe-global/safe-gateway-typescript-sdk@3.22.3-beta.12":
-  version "3.22.3-beta.12"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.12.tgz#2ebc398d6c8c4f27cc68865dbd7e7603add099ae"
-  integrity sha512-BBcyYNa8RDN5tQrYHOp3Bdo3CTo7r6ZB0Nzgce5OI7rKjorgCv0TprVTW8w8YVMXa74wC6uT06udXAB0IDRu8A==
+"@safe-global/safe-gateway-typescript-sdk@3.22.3-beta.13":
+  version "3.22.3-beta.13"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.13.tgz#e6feaf93b16788ec6237c7f73f0d57f8514dde0c"
+  integrity sha512-VAoil8BbAsG14cDFG/sSFmCBIGQpJbyQeI7O7LFkPGwCVOFhHhE7SiurDiSkw13QLLxnIqB/Hq6jse+wa7Ny9g==
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.21.2"