update artcpa action previews

src/extensions/artcpaclub/src/contracts.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Config } from './config'
 import { ProposalAction } from '@peerme/core-ts'
-import { StakeEsdtActionPreview } from './previews/StakeEsdtActionPreview'
-import { ClaimEsdtActionPreview } from './previews/ClaimEsdtActionPreview'
-import { UnstakeEsdtActionPreview } from './previews/UnstakeEsdtActionPreview'
+import { StakeActionPreview } from './previews/StakeActionPreview'
+import { ClaimActionPreview } from './previews/ClaimActionPreview'
+import { UnstakeActionPreview } from './previews/UnstakeActionPreview'
 import { Network, ExtensionScInfo, ExtensionConfig } from '../../../shared/types'
 
 const getEsdtPoolContractAddress = (network: Network) => {
@@ -22,17 +22,17 @@ export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
   EsdtUserStake: {
     Address: getEsdtPoolContractAddress(config.network),
     Endpoint: 'userStake',
-    ActionPreview: (action: ProposalAction) => <StakeEsdtActionPreview action={action} config={config} />,
+    ActionPreview: (action: ProposalAction) => <StakeActionPreview action={action} config={config} />,
   },
   EsdtUserUnstake: {
     Address: getEsdtPoolContractAddress(config.network),
     Endpoint: 'userUnstake',
-    ActionPreview: (action: ProposalAction) => <UnstakeEsdtActionPreview action={action} config={config} />,
+    ActionPreview: (action: ProposalAction) => <UnstakeActionPreview action={action} config={config} />,
   },
   EsdtUserClaim: {
     Address: getEsdtPoolContractAddress(config.network),
     Endpoint: 'userClaim',
-    ActionPreview: (action: ProposalAction) => <ClaimEsdtActionPreview action={action} config={config} />,
+    ActionPreview: (action: ProposalAction) => <ClaimActionPreview action={action} config={config} />,
   },
   EsdtViewPool: {
     Address: getEsdtPoolContractAddress(config.network),
@@ -42,17 +42,17 @@ export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
   NftUserStake: {
     Address: getNftPoolContractAddress(config.network),
     Endpoint: 'userStake',
-    ActionPreview: (action: ProposalAction) => <StakeEsdtActionPreview action={action} config={config} />,
+    ActionPreview: (action: ProposalAction) => <StakeActionPreview action={action} config={config} />,
   },
   NftUserUnstake: {
     Address: getNftPoolContractAddress(config.network),
     Endpoint: 'userUnstake',
-    ActionPreview: (action: ProposalAction) => <UnstakeEsdtActionPreview action={action} config={config} />,
+    ActionPreview: (action: ProposalAction) => <UnstakeActionPreview action={action} config={config} />,
   },
   NftUserClaim: {
     Address: getNftPoolContractAddress(config.network),
     Endpoint: 'userClaim',
-    ActionPreview: (action: ProposalAction) => <ClaimEsdtActionPreview action={action} config={config} />,
+    ActionPreview: (action: ProposalAction) => <ClaimActionPreview action={action} config={config} />,
   },
   NftViewPool: {
     Address: getNftPoolContractAddress(config.network),

src/extensions/artcpaclub/src/previews/ClaimEsdtActionPreview.tsx → src/extensions/artcpaclub/src/previews/ClaimActionPreview.tsx

@@ -10,7 +10,7 @@ type Props = {
   config: ExtensionConfig
 }
 
-export function ClaimEsdtActionPreview(props: Props) {
+export function ClaimActionPreview(props: Props) {
   const poolId = props.action.arguments[0] as number
   const [selectedPool, setSelectedPool] = useState<EsdtPool | null>(null)
 

src/extensions/artcpaclub/src/previews/StakeEsdtActionPreview.tsx → src/extensions/artcpaclub/src/previews/StakeActionPreview.tsx

@@ -11,7 +11,7 @@ type Props = {
   config: ExtensionConfig
 }
 
-export function StakeEsdtActionPreview(props: Props) {
+export function StakeActionPreview(props: Props) {
   const poolId = props.action.arguments[0] as number
   const [selectedPool, setSelectedPool] = useState<EsdtPool | null>(null)
 

src/extensions/artcpaclub/src/previews/UnstakeActionPreview.tsx

@@ -0,0 +1,54 @@
+import { Config } from '../config'
+import { EsdtPool, NftPool } from '../types'
+import BigNumber from 'bignumber.js'
+import React, { useEffect, useState } from 'react'
+import { ExtensionConfig } from '../../../../shared/types'
+import { ProposalAction, toActionArgsBigNumber, toFormattedTokenAmount } from '@peerme/core-ts'
+import { ActionPreviewHighlight } from '../../../../shared/ui/elements'
+
+type Props = {
+  action: ProposalAction
+  config: ExtensionConfig
+}
+
+export function UnstakeActionPreview(props: Props) {
+  const [selectedPool, setSelectedPool] = useState<EsdtPool | NftPool | null>(null)
+  const isNft = props.action.arguments.length === 3
+  const poolId = props.action.arguments[0] as number
+  const nonce = (isNft ? props.action.arguments[1] : null) as number | null
+  const optAmount = (isNft ? props.action.arguments[2] : props.action.arguments[1]) as number | null
+  const amountBig = optAmount ? toActionArgsBigNumber(optAmount) : new BigNumber(0)
+
+  useEffect(() => {
+    if (!poolId) return
+    const apiEndpoint = isNft ? 'nftstaking' : 'tokenstaking'
+    fetch(Config.ApiBaseUrl(props.config.network) + '/' + apiEndpoint + '/' + poolId).then(async (res) => {
+      const data = await res.json()
+      setSelectedPool(data)
+    })
+  }, [poolId])
+
+  if (isNft) {
+    return (
+      <ActionPreviewHighlight>
+        unstake{' '}
+        <strong>
+          {amountBig.toNumber()} {selectedPool ? selectedPool.stake_token_id : ''}
+        </strong>{' '}
+        with Nonce <strong>{nonce}</strong>{' '}
+        {selectedPool ? `from pool ${selectedPool.title}` : `from pool with id ${poolId}`}.
+      </ActionPreviewHighlight>
+    )
+  }
+
+  return (
+    <ActionPreviewHighlight>
+      unstake{' '}
+      <strong>
+        {toFormattedTokenAmount(amountBig, (selectedPool as EsdtPool)?.stake_token_decimal || 0)}{' '}
+        {selectedPool ? selectedPool.stake_token_id : ''}
+      </strong>{' '}
+      {selectedPool ? `from pool ${selectedPool.title}` : `from pool with id ${poolId}`}.
+    </ActionPreviewHighlight>
+  )
+}