update artcpa app

src/extensions/artcpaclub/src/config.ts

@@ -1,6 +1,13 @@
+import { Network } from '../../../shared/types'
+
 export const Config = {
-  Urls: {
-    ApiBase: 'https://api.artcpaclub.com/api',
-    Marketplace: 'https://marketplace.artcpaclub.com',
+  ApiBaseUrl: (network: Network) => {
+    if (network === 'devnet') return 'https://devnet-api.artcpaclub.com/api'
+    return 'https://api.artcpaclub.com/api'
+  },
+
+  MarketplaceUrl: (network: Network) => {
+    if (network === 'devnet') return 'https://devnet-marketplace.artcpaclub.com'
+    return 'https://marketplace.artcpaclub.com'
   },
 }

src/extensions/artcpaclub/src/contracts.tsx

@@ -1,3 +1,7 @@
+import React from 'react'
+import { ProposalAction } from '@peerme/core-ts'
+import { StakeEsdtActionPreview } from './previews/StakeEsdtActionPreview'
+import { UnstakeEsdtActionPreview } from './previews/UnstakeEsdtActionPreview'
 import { Network, ExtensionScInfo, ExtensionConfig } from '../../../shared/types'
 
 const getContractAddress = (network: Network) => {
@@ -10,9 +14,11 @@ export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
   UserStake: {
     Address: getContractAddress(config.network),
     Endpoint: 'userStake',
+    ActionPreview: (action: ProposalAction) => <StakeEsdtActionPreview action={action} config={config} />,
   },
   UserUnstake: {
     Address: getContractAddress(config.network),
     Endpoint: 'userUnstake',
+    ActionPreview: (action: ProposalAction) => <UnstakeEsdtActionPreview action={action} config={config} />,
   },
 })

src/extensions/artcpaclub/src/esdt/EsdtTab.tsx

@@ -26,7 +26,7 @@ export function EsdtTab() {
 
   useEffect(() => {
     if (!poolId) return
-    fetch(Config.Urls.ApiBase + '/tokenstaking/' + poolId).then(async (res) => {
+    fetch(Config.ApiBaseUrl(app.config.network) + '/tokenstaking/' + poolId).then(async (res) => {
       const data = await res.json()
       setSelectedPool(data)
     })
@@ -57,14 +57,21 @@ export function EsdtTab() {
   ) : (
     <>
       <a
-        href={Config.Urls.Marketplace + '/staking/token/' + selectedPool.pool_id}
+        href={Config.MarketplaceUrl(app.config.network) + '/staking/token/' + selectedPool.pool_id}
         target="_blank"
         rel="noopener"
         className="flex px-6 py-3 bg-gray-200 dark:bg-gray-800 rounded-xl mb-4"
       >
         <div className="flex-grow text-left">
-          <h3 className="text-lg text-black dark:text-white">{selectedPool.title}</h3>
-          <span className="text-sm text-gray-500">Token: {selectedPool.stake_token_id}</span>
+          <h3 className="text-lg text-black dark:text-white mb-2">{selectedPool.title}</h3>
+          <ul className="text-base text-gray-500 list-disc pl-4">
+            <li>
+              Stake Token: <strong>{selectedPool.stake_token_id}</strong>
+            </li>
+            <li>
+              Reward Token: <strong>{selectedPool.reward_token_id}</strong>
+            </li>
+          </ul>
         </div>
       </a>
       <_Staker pool={selectedPool} className="mb-4" />

src/extensions/artcpaclub/src/esdt/_Staker.tsx

@@ -14,7 +14,7 @@ type Props = {
 export function _Staker(props: Props) {
   const app = useApp()
   const [payment, setPayment] = useState<TokenTransfer | null>(null)
-  const isSubmitDisabled = !payment
+  const isSubmitDisabled = !payment || payment.amountAsBigInteger.isZero()
 
   const handleSubmit = (e: SyntheticEvent) => {
     e.preventDefault()
@@ -37,13 +37,13 @@ export function _Staker(props: Props) {
         <EntityTransferSelector
           config={app.config.walletConfig}
           entity={app.config.entity}
-          permissions={[]}
+          permissions={[{ name: '*', value: '0', destination: '', endpoint: '', arguments: [], payments: [] }]}
           onSelected={(val) => setPayment(val)}
-          tokenIdWhitelist={[props.pool.stake_token_id]}
+          tokenIdWhitelist={['EGLD', props.pool.stake_token_id]}
           className="mb-8"
         />
         <Button color="blue" className="block w-full" disabled={isSubmitDisabled} submit>
-          Add Stake Action to Proposal
+          Add Stake Action
         </Button>
       </form>
     </AppSection>

src/extensions/artcpaclub/src/esdt/_Unstaker.tsx

@@ -1,7 +1,8 @@
 import { EsdtPool } from '../types'
-import { Button } from '@peerme/web-ui'
 import { Contracts } from '../contracts'
-import React, { SyntheticEvent } from 'react'
+import { Button, Input } from '@peerme/web-ui'
+import { sanitizeNumeric } from '@peerme/core-ts'
+import React, { SyntheticEvent, useState } from 'react'
 import { useApp } from '../../../../shared/hooks/useApp'
 import { AppSection } from '../../../../shared/ui/elements'
 
@@ -12,6 +13,7 @@ type Props = {
 
 export function _Unstaker(props: Props) {
   const app = useApp()
+  const [amount, setAmount] = useState('0')
 
   const handleSubmit = (e: SyntheticEvent) => {
     e.preventDefault()
@@ -28,9 +30,33 @@ export function _Unstaker(props: Props) {
   return (
     <AppSection title="Unstake" className={props.className}>
       <form onSubmit={handleSubmit}>
-        <p>Work in progress.</p>
+        <label htmlFor="amount" className="mb-2 pl-1 text-xl text-gray-800 dark:text-gray-200">
+          Amount
+        </label>
+        <div className="relative">
+          <Input
+            id="amount"
+            type="number"
+            placeholder="Amount"
+            value={amount}
+            onChange={(val) => setAmount(sanitizeNumeric(val))}
+            className="mb-2"
+            autoComplete="off"
+          />
+          {/* TODO: implement once SC data available {+amount !== +scAmount && (
+          <div className="absolute bottom-1/2 right-4 translate-y-1/2 transform">
+            <button
+              type="button"
+              onClick={() => setAmount(scAmount.toString())}
+              className="rounded-xl bg-gray-800 px-3 py-1 uppercase text-gray-100 shadow-lg transition duration-300 hover:bg-gray-900"
+            >
+              Max
+            </button>
+          </div>
+        )} */}
+        </div>
         <Button color="blue" className="block w-full" submit>
-          Add Unstake Action to Proposal
+          Add Unstake Action
         </Button>
       </form>
     </AppSection>

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

@@ -0,0 +1,39 @@
+import { Config } from '../config'
+import { EsdtPool } from '../types'
+import React, { useEffect, useState } from 'react'
+import { TokenTransfer } from '@multiversx/sdk-core/out'
+import { ExtensionConfig } from '../../../../shared/types'
+import { ActionPreviewHighlight } from '../../../../shared/ui/elements'
+import { ProposalAction, toFormattedTokenPayment, toTokenPaymentFromProposalPayment } from '@peerme/core-ts'
+
+type Props = {
+  action: ProposalAction
+  config: ExtensionConfig
+}
+
+export function StakeEsdtActionPreview(props: Props) {
+  const poolId = props.action.arguments[0] as number
+  const [selectedPool, setSelectedPool] = useState<EsdtPool | null>(null)
+
+  const displayablePayments =
+    props.action.payments.length > 0
+      ? props.action.payments
+          .map((payment) => toFormattedTokenPayment(toTokenPaymentFromProposalPayment(payment)))
+          .join(', ')
+      : toFormattedTokenPayment(TokenTransfer.egldFromBigInteger(props.action.value))
+
+  useEffect(() => {
+    if (!poolId) return
+    fetch(Config.ApiBaseUrl(props.config.network) + '/tokenstaking/' + poolId).then(async (res) => {
+      const data = await res.json()
+      setSelectedPool(data)
+    })
+  }, [poolId])
+
+  return (
+    <ActionPreviewHighlight>
+      stake <strong>{displayablePayments}</strong>{' '}
+      {selectedPool ? `in pool ${selectedPool.title}` : `in pool with id ${poolId}`}.
+    </ActionPreviewHighlight>
+  )
+}

src/extensions/artcpaclub/src/previews/UnstakeEsdtActionPreview.tsx

@@ -0,0 +1,35 @@
+import { Config } from '../config'
+import { EsdtPool } from '../types'
+import { ProposalAction } from '@peerme/core-ts'
+import React, { useEffect, useState } from 'react'
+import { ExtensionConfig } from '../../../../shared/types'
+import { ActionPreviewHighlight } from '../../../../shared/ui/elements'
+
+type Props = {
+  action: ProposalAction
+  config: ExtensionConfig
+}
+
+export function UnstakeEsdtActionPreview(props: Props) {
+  const poolId = props.action.arguments[0] as number
+  const optAmount = props.action.arguments[1] as number | null
+  const [selectedPool, setSelectedPool] = useState<EsdtPool | null>(null)
+
+  useEffect(() => {
+    if (!poolId) return
+    fetch(Config.ApiBaseUrl(props.config.network) + '/tokenstaking/' + poolId).then(async (res) => {
+      const data = await res.json()
+      setSelectedPool(data)
+    })
+  }, [poolId])
+
+  return (
+    <ActionPreviewHighlight>
+      unstake{' '}
+      <strong>
+        {optAmount ? optAmount : 'all'} {selectedPool ? selectedPool.stake_token_id : ''}
+      </strong>{' '}
+      {selectedPool ? `from pool ${selectedPool.title}` : `from pool with id ${poolId}`}.
+    </ActionPreviewHighlight>
+  )
+}