From c6ed3c9e8d30501fa195309242805dedf030d251 Mon Sep 17 00:00:00 2001
From: Micha Vie <micha@freeiam.com>
Date: Wed, 6 Dec 2023 19:10:47 +0100
Subject: [PATCH] update artcpa nft unstaking

---
 src/extensions/artcpaclub/src/helpers.ts      |   8 +-
 .../artcpaclub/src/nft/_Unstaker.tsx          | 112 ++++++++++++------
 src/extensions/artcpaclub/src/types.ts        |   7 +-
 3 files changed, 89 insertions(+), 38 deletions(-)

diff --git a/src/extensions/artcpaclub/src/helpers.ts b/src/extensions/artcpaclub/src/helpers.ts
index a94640d..90b92ac 100644
--- a/src/extensions/artcpaclub/src/helpers.ts
+++ b/src/extensions/artcpaclub/src/helpers.ts
@@ -2,13 +2,17 @@ import BigNumber from 'bignumber.js'
 import { EsdtPoolOnChain, NftPoolOnChain } from './types'
 
 export const toTypedEsdtPoolOnChain = (value: any): EsdtPoolOnChain => ({
+  ...value,
   user_stake_amount: new BigNumber(value.user_stake_amount),
   user_reward_amount: new BigNumber(value.user_reward_amount),
-  ...value,
 })
 
 export const toTypedNftPoolOnChain = (value: any): NftPoolOnChain => ({
+  ...value,
   user_stake_amount: new BigNumber(value.user_stake_amount),
   user_reward_amount: new BigNumber(value.user_reward_amount),
-  ...value,
+  user_stake_amount_per_nonce: value.user_stake_amount_per_nonce.map((v: any) => ({
+    amount: v.amount.toNumber(),
+    nonce: v.nonce.toNumber(),
+  })),
 })
diff --git a/src/extensions/artcpaclub/src/nft/_Unstaker.tsx b/src/extensions/artcpaclub/src/nft/_Unstaker.tsx
index 99a2e81..30b7669 100644
--- a/src/extensions/artcpaclub/src/nft/_Unstaker.tsx
+++ b/src/extensions/artcpaclub/src/nft/_Unstaker.tsx
@@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js'
 import { Contracts } from '../contracts'
 import { Button, Input } from '@peerme/web-ui'
 import { sanitizeNumeric } from '@peerme/core-ts'
-import { NftPool, NftPoolOnChain } from '../types'
-import React, { SyntheticEvent, useState } from 'react'
 import { useApp } from '../../../../shared/hooks/useApp'
 import { AppSection } from '../../../../shared/ui/elements'
+import { NftPool, NftPoolOnChain, StakedNftInfo } from '../types'
+import React, { SyntheticEvent, useEffect, useState } from 'react'
 
 type Props = {
   pool: NftPool
@@ -15,8 +15,18 @@ type Props = {
 
 export function _Unstaker(props: Props) {
   const app = useApp()
+  const [unstakableInfo, setUnstakableInfo] = useState<StakedNftInfo | null>(null)
+  const [nfts, setNfts] = useState<any[]>([])
   const [amount, setAmount] = useState('0')
 
+  useEffect(() => {
+    const identifiers = props.poolOnChain.user_stake_amount_per_nonce
+      .map((nft) => `${props.pool.stake_token_id}-${nonceToHex(nft.nonce)}`)
+      .join(',')
+
+    app.networkProvider.doGetGeneric(`nfts?size=500&identifiers=${identifiers}`).then((data) => setNfts(data))
+  }, [props.poolOnChain.user_stake_amount_per_nonce])
+
   const handleSubmit = (e: SyntheticEvent) => {
     e.preventDefault()
     const amountBig = new BigNumber(amount)
@@ -29,41 +39,73 @@ export function _Unstaker(props: Props) {
     )
   }
 
-  // TODO: implement unstaking
-  return null
-
   return (
     <AppSection title="Unstake" className={props.className}>
-      <form onSubmit={handleSubmit}>
-        <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"
-          />
-          {+amount !== +props.poolOnChain.user_stake_amount && (
-            <div className="absolute bottom-1/2 right-4 translate-y-1/2 transform">
-              <button
-                type="button"
-                onClick={() => setAmount(props.poolOnChain.user_stake_amount.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" disabled={+amount === 0} submit>
-          Add Unstake Action
-        </Button>
-      </form>
+      {unstakableInfo === null ? (
+        <ul className="flex gap-4">
+          {props.poolOnChain.user_stake_amount_per_nonce.map((unstakableInfo) => (
+            <li key={unstakableInfo.nonce}>
+              <_UnstakablePreview
+                onClick={() => setUnstakableInfo(unstakableInfo)}
+                unstakableInfo={unstakableInfo}
+                nft={nfts.find((n) => n.nonce === unstakableInfo.nonce)}
+              />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <div className="flex mb-4">
+            <button onClick={() => setUnstakableInfo(null)} className="text-blue-500 dark:text-blue-400">
+              {'< Go back'}
+            </button>
+          </div>
+          <label htmlFor="amount" className="mb-2 pl-1 text-xl text-gray-800 dark:text-gray-200">
+            Unstake Amount
+          </label>
+          <div className="relative">
+            <Input
+              id="amount"
+              type="number"
+              placeholder="Amount"
+              value={amount}
+              onChange={(val) => setAmount(sanitizeNumeric(val))}
+              className="mb-2"
+              autoComplete="off"
+            />
+            {+amount !== unstakableInfo.amount && (
+              <div className="absolute bottom-1/2 right-4 translate-y-1/2 transform">
+                <button
+                  type="button"
+                  onClick={() => setAmount(unstakableInfo.amount.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" disabled={+amount === 0} submit>
+            Add Unstake Action
+          </Button>
+        </form>
+      )}
     </AppSection>
   )
 }
+
+function _UnstakablePreview(props: { onClick: () => void; unstakableInfo: StakedNftInfo; nft: any }) {
+  if (!props.nft) return null
+
+  return (
+    <button onClick={props.onClick}>
+      <img src={props.nft.media[0].url} alt={props.nft.name} className="block mb-1 w-16 h-16 rounded-xl" />
+      <strong className="block text-center text-gray-800 dark:text-gray-100">{props.unstakableInfo.amount}</strong>
+    </button>
+  )
+}
+
+export const nonceToHex = (nonce: any) => {
+  const hexString = nonce.toString(16)
+  return hexString.length % 2 ? '0' + hexString : hexString
+}
diff --git a/src/extensions/artcpaclub/src/types.ts b/src/extensions/artcpaclub/src/types.ts
index 5e4f43b..cf62668 100644
--- a/src/extensions/artcpaclub/src/types.ts
+++ b/src/extensions/artcpaclub/src/types.ts
@@ -83,8 +83,13 @@ export type NftPoolOnChain = {
   staker_count: string
   user_stake_amount: BigNumber
   user_reward_amount: BigNumber
-  user_stake_amount_per_nonce: any[]
+  user_stake_amount_per_nonce: StakedNftInfo[]
   is_paired: boolean
   pair_token_id: string
   stake_capacity_max: string
 }
+
+export type StakedNftInfo = {
+  nonce: number
+  amount: number
+}