From 41e926f2bc69922957dc6fb0712e6a61df6e7fb4 Mon Sep 17 00:00:00 2001
From: Micha Vie <micha@freeiam.com>
Date: Tue, 28 Nov 2023 18:09:04 +0100
Subject: [PATCH 1/3] add artcpaclub app tabs

---
 src/extensions/artcpaclub/src/App.tsx         | 31 +++++++++++--------
 .../artcpaclub/src/esdt/EsdtTab.tsx           | 10 ++++++
 .../artcpaclub/src/esdt/_Staker.tsx           | 13 ++++++++
 3 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 src/extensions/artcpaclub/src/esdt/EsdtTab.tsx
 create mode 100644 src/extensions/artcpaclub/src/esdt/_Staker.tsx

diff --git a/src/extensions/artcpaclub/src/App.tsx b/src/extensions/artcpaclub/src/App.tsx
index 712f4fe..56aa3ff 100644
--- a/src/extensions/artcpaclub/src/App.tsx
+++ b/src/extensions/artcpaclub/src/App.tsx
@@ -1,19 +1,24 @@
 import React from 'react'
-import { useApp } from '../../../shared/hooks/useApp'
-import { AppSection } from '../../../shared/ui/elements'
+import { Tab } from '@headlessui/react'
+import { EsdtTab } from './esdt/EsdtTab'
+import { TabButton } from '../../../shared/ui/elements'
+import { faCoins, faSquare } from '@fortawesome/free-solid-svg-icons'
 
 export const App = () => {
-  const app = useApp()
-
-  // The app hook provides access to the extension configuration
-  // and useful methods for interacting with DAOs.
-  console.log(app)
-
   return (
-    <div>
-      <AppSection title="Example Section">
-        <p>Example paragraph</p>
-      </AppSection>
-    </div>
+    <Tab.Group>
+      <Tab.List className="flex items-center space-x-2 md:space-x-4 mb-4">
+        <TabButton icon={faCoins}>ESDT Staking</TabButton>
+        <TabButton icon={faSquare}>NFT Staking</TabButton>
+      </Tab.List>
+      <Tab.Panels>
+        <Tab.Panel>
+          <EsdtTab />
+        </Tab.Panel>
+        <Tab.Panel>
+          <p>Coming soon.</p>
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
   )
 }
diff --git a/src/extensions/artcpaclub/src/esdt/EsdtTab.tsx b/src/extensions/artcpaclub/src/esdt/EsdtTab.tsx
new file mode 100644
index 0000000..77f9759
--- /dev/null
+++ b/src/extensions/artcpaclub/src/esdt/EsdtTab.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { _Staker } from './_Staker'
+
+export function EsdtTab() {
+  return (
+    <>
+      <_Staker />
+    </>
+  )
+}
diff --git a/src/extensions/artcpaclub/src/esdt/_Staker.tsx b/src/extensions/artcpaclub/src/esdt/_Staker.tsx
new file mode 100644
index 0000000..b760276
--- /dev/null
+++ b/src/extensions/artcpaclub/src/esdt/_Staker.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useApp } from '../../../../shared/hooks/useApp'
+import { AppSection } from '../../../../shared/ui/elements'
+
+export function _Staker() {
+  const app = useApp()
+
+  return (
+    <AppSection title="Stake now">
+      <p>Coming soon.</p>
+    </AppSection>
+  )
+}

From 6a402aea9467f8ae0db2123263a400291601965c Mon Sep 17 00:00:00 2001
From: Micha Vie <micha@freeiam.com>
Date: Tue, 28 Nov 2023 21:30:34 +0100
Subject: [PATCH 2/3] add artcpaclub esdt staking

---
 src/extensions/artcpaclub/src/config.ts       | 12 ++-
 src/extensions/artcpaclub/src/contracts.tsx   |  8 +-
 .../artcpaclub/src/esdt/_Staker.tsx           | 92 ++++++++++++++++++-
 src/extensions/artcpaclub/src/types.ts        | 18 ++++
 4 files changed, 120 insertions(+), 10 deletions(-)
 create mode 100644 src/extensions/artcpaclub/src/types.ts

diff --git a/src/extensions/artcpaclub/src/config.ts b/src/extensions/artcpaclub/src/config.ts
index 6c5fc9e..6ce4f85 100644
--- a/src/extensions/artcpaclub/src/config.ts
+++ b/src/extensions/artcpaclub/src/config.ts
@@ -1 +1,11 @@
-export const Config = {}
+export const Config = {
+  Urls: {
+    ApiBase: 'https://api.artcpaclub.com/api',
+    Marketplace: 'https://marketplace.artcpaclub.com',
+  },
+
+  Abis: {
+    StakingEsdt: 'https://peerme.io/abis/itheum/claims.abi.json',
+    StakingNft: '',
+  },
+}
diff --git a/src/extensions/artcpaclub/src/contracts.tsx b/src/extensions/artcpaclub/src/contracts.tsx
index feda24b..3811bd5 100644
--- a/src/extensions/artcpaclub/src/contracts.tsx
+++ b/src/extensions/artcpaclub/src/contracts.tsx
@@ -1,14 +1,14 @@
 import { Network, ExtensionScInfo, ExtensionConfig } from '../../../shared/types'
 
 const getContractAddress = (network: Network) => {
-  if (network === 'devnet') return '#'
+  if (network === 'devnet') return 'erd1qqqqqqqqqqqqqpgqagtkct3gswr62z3p2qdqlf5l2ukseu2ql3tsjl02gh'
   if (network === 'testnet') return '#'
-  return '#'
+  return 'erd1qqqqqqqqqqqqqpgqj8exjpz38agu78sxh5rlxcp2kmxy35m6kqysscypf3'
 }
 
 export const Contracts = (config: ExtensionConfig): ExtensionScInfo => ({
-  YourCustomScEndpoint: {
+  UserStake: {
     Address: getContractAddress(config.network),
-    Endpoint: 'yourCustomScEndpoint',
+    Endpoint: 'userStake',
   },
 })
diff --git a/src/extensions/artcpaclub/src/esdt/_Staker.tsx b/src/extensions/artcpaclub/src/esdt/_Staker.tsx
index b760276..c6ac2de 100644
--- a/src/extensions/artcpaclub/src/esdt/_Staker.tsx
+++ b/src/extensions/artcpaclub/src/esdt/_Staker.tsx
@@ -1,13 +1,95 @@
-import React from 'react'
+import { Config } from '../config'
+import { EsdtPool } from '../types'
+import { Contracts } from '../contracts'
+import { TokenTransfer } from '@multiversx/sdk-core/out'
 import { useApp } from '../../../../shared/hooks/useApp'
 import { AppSection } from '../../../../shared/ui/elements'
+import React, { SyntheticEvent, useEffect, useState } from 'react'
+import { Button, EntityTransferSelector, Input } from '@peerme/web-ui'
 
 export function _Staker() {
   const app = useApp()
+  const [poolUrl, setPoolUrl] = useState('')
+  const [poolId, setPoolId] = useState<number | null>(null)
+  const [selectedPool, setSelectedPool] = useState<EsdtPool | null>(null)
+  const [payment, setPayment] = useState<TokenTransfer | null>(null)
+  const isSubmitDisabled = !poolId || !payment
 
-  return (
-    <AppSection title="Stake now">
-      <p>Coming soon.</p>
-    </AppSection>
+  useEffect(() => {
+    if (!poolUrl) return
+    const match = poolUrl.match(/\/staking\/token\/(\d+)/)
+    if (match) {
+      setPoolId(parseInt(match[1]))
+    } else {
+      app.showToast('Invalid pool URL', 'error')
+      setPoolUrl('')
+    }
+  }, [poolUrl])
+
+  useEffect(() => {
+    if (!poolId) return
+    fetch(Config.Urls.ApiBase + '/tokenstaking/' + poolId).then(async (res) => {
+      const data = await res.json()
+      setSelectedPool(data)
+    })
+  }, [poolId])
+
+  const handleSubmit = (e: SyntheticEvent) => {
+    e.preventDefault()
+    if (!poolId || !payment) return
+    const value = payment.isEgld() ? payment.amountAsBigInteger : 0
+    const tokenTransfers = payment.isEgld() ? [] : [payment]
+
+    app.requestProposalAction(
+      Contracts(app.config).UserStake.Address,
+      Contracts(app.config).UserStake.Endpoint,
+      value,
+      [poolId],
+      tokenTransfers
+    )
+  }
+
+  return selectedPool === null ? (
+    <div>
+      <AppSection title="Paste the link of a Pool">
+        <label htmlFor="starting_date" className="pl-1 text-xl mb-2 text-gray-800 dark:text-gray-200">
+          Link to Staking Pool
+        </label>
+        <Input
+          placeholder="https://marketplace.artcpaclub.com/staking/token/x"
+          value={poolUrl}
+          onChange={(val) => setPoolUrl(val)}
+        />
+      </AppSection>
+    </div>
+  ) : (
+    <div>
+      <a
+        href={Config.Urls.Marketplace + '/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>
+        </div>
+      </a>
+      <AppSection title="Stake now">
+        <form onSubmit={handleSubmit}>
+          <EntityTransferSelector
+            config={app.config.walletConfig}
+            entity={app.config.entity}
+            permissions={[]}
+            onSelected={(val) => setPayment(val)}
+            tokenIdWhitelist={[selectedPool.stake_token_id]}
+            className="mb-8"
+          />
+          <Button color="blue" className="block w-full" disabled={isSubmitDisabled} submit>
+            Add Stake Action to Proposal
+          </Button>
+        </form>
+      </AppSection>
+    </div>
   )
 }
diff --git a/src/extensions/artcpaclub/src/types.ts b/src/extensions/artcpaclub/src/types.ts
new file mode 100644
index 0000000..17b5b0d
--- /dev/null
+++ b/src/extensions/artcpaclub/src/types.ts
@@ -0,0 +1,18 @@
+export type EsdtPool = {
+  id: number
+  pool_id: number
+  title: string
+  stake_token_id: string
+  stake_token_decimal: number
+  reward_token_id: string
+  reward_token_decimal: number
+  annual_reward_amount: string
+  fee_type: number
+  owner: string
+  paused: boolean
+  pool_paused: boolean
+  pool_initial_deposited: boolean
+  total_stake_amount: string
+  reward_pool_size: string
+  staker_count: number
+}

From c373eafa1efa6083c380acdb930c56049a7e81b6 Mon Sep 17 00:00:00 2001
From: Micha Vie <micha@freeiam.com>
Date: Wed, 29 Nov 2023 10:44:25 +0100
Subject: [PATCH 3/3] remove artcpa config abi

---
 src/extensions/artcpaclub/src/config.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/extensions/artcpaclub/src/config.ts b/src/extensions/artcpaclub/src/config.ts
index 6ce4f85..11e3e9d 100644
--- a/src/extensions/artcpaclub/src/config.ts
+++ b/src/extensions/artcpaclub/src/config.ts
@@ -3,9 +3,4 @@ export const Config = {
     ApiBase: 'https://api.artcpaclub.com/api',
     Marketplace: 'https://marketplace.artcpaclub.com',
   },
-
-  Abis: {
-    StakingEsdt: 'https://peerme.io/abis/itheum/claims.abi.json',
-    StakingNft: '',
-  },
 }