Merge pull request #14 from PeerMeHQ/artcpaclub-impl

ArtCPAClub ESDT Staking

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>
   )
 }

src/extensions/artcpaclub/src/config.ts

@@ -1 +1,6 @@
-export const Config = {}
+export const Config = {
+  Urls: {
+    ApiBase: 'https://api.artcpaclub.com/api',
+    Marketplace: 'https://marketplace.artcpaclub.com',
+  },
+}

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',
   },
 })

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { _Staker } from './_Staker'
+
+export function EsdtTab() {
+  return (
+    <>
+      <_Staker />
+    </>
+  )
+}

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

@@ -0,0 +1,95 @@
+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
+
+  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>
+  )
+}

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
+}