update allocation

package.json

@@ -26,11 +26,7 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-<<<<<<< HEAD
-    "@oceanprotocol/lib": "^2.0.0",
-=======
-    "@oceanprotocol/lib": "^2.2.1",
->>>>>>> main
+    "@oceanprotocol/lib": "^2.2.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@oceanprotocol/use-dark-mode": "^2.4.3",
     "@tippyjs/react": "^4.2.6",

src/@utils/veAllocation.ts

@@ -2,7 +2,12 @@ import { AllLocked } from 'src/@types/subgraph/AllLocked'
 import { gql, OperationResult } from 'urql'
 import { fetchData, getQueryContext } from './subgraph'
 import axios from 'axios'
-
+import networkdata from '../../content/networks-metadata.json'
+import {
+  getNetworkDataById,
+  getNetworkType,
+  NetworkType
+} from '@hooks/useNetworkMetadata'
 const AllLocked = gql`
   query AllLocked {
     veOCEANs(first: 1000) {
@@ -16,6 +21,13 @@ interface TotalVe {
   totalAllocated: number
 }
 
+export function getVeChainNetworkId(assetNetworkId: number): number {
+  const networkData = getNetworkDataById(networkdata, assetNetworkId)
+  const networkType = getNetworkType(networkData)
+  if (networkType === NetworkType.Mainnet) return 1
+  else return 5
+}
+
 export async function getTotalAllocatedAndLocked(): Promise<TotalVe> {
   const totals = {
     totalLocked: 0,

src/components/Asset/AssetActions/VeAllocation/FormAdd.tsx

@@ -1,66 +1,63 @@
-import React, { ReactElement, useEffect } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './FormAdd.module.css'
 import Input from '@shared/FormInput'
 import Error from '@shared/FormInput/Error'
 import { FormikContextType, useField, useFormikContext } from 'formik'
 import Button from '@shared/atoms/Button'
-import { FormAddLiquidity } from '.'
 import { useWeb3 } from '@context/Web3'
-import { isValidNumber } from '@utils/numbers'
-import Decimal from 'decimal.js'
+import { FormAddAllocation } from '.'
 import { useAsset } from '@context/Asset'
+import { getOceanConfig } from '@utils/ocean'
+import { VeAllocate } from '@oceanprotocol/lib'
 
-export default function FormAdd({
-  amountMax,
-  setNewPoolTokens,
-  setNewPoolShare
-}: {
-  amountMax: string
-  setNewPoolTokens: (value: string) => void
-  setNewPoolShare: (value: string) => void
-}): ReactElement {
-  const { balance, web3 } = useWeb3()
-
+export default function FormAdd({ amount }: { amount: number }): ReactElement {
+  const [isOnCorrectNetwork, setIsOnCorrectNetwork] = useState(true)
+  const { web3, accountId } = useWeb3()
+  const { asset } = useAsset()
   // Connect with form
-  const {
-    setFieldValue,
-    values,
-    isSubmitting
-  }: FormikContextType<FormAddLiquidity> = useFormikContext()
+  const { setFieldValue, isSubmitting }: FormikContextType<FormAddAllocation> =
+    useFormikContext()
   const [field, meta] = useField('amount')
   useEffect(() => {
-    console.log('effect')
+    async function init() {
+      const config = getOceanConfig(5)
+      const veAllocation = new VeAllocate(
+        '0x3EFDD8f728c8e774aB81D14d0B2F07a8238960f4',
+        web3
+      )
+      const allocation = await veAllocation.getVeAllocation(
+        accountId,
+        asset.nftAddress,
+        asset.chainId.toString()
+      )
+      setFieldValue('amount', allocation / 100)
+      console.log('allocation', allocation)
+    }
+    init()
   }, [])
 
   return (
     <>
-      <UserLiquidity
-        amount={balance.ocean}
-        amountMax={amountMax}
-        symbol={poolInfo?.baseTokenSymbol}
-      />
-
       <Input
         type="number"
         min="0"
-        prefix={poolInfo?.baseTokenSymbol}
+        max="100"
+        prefix="Allocation"
+        step="10"
         placeholder="0"
-        disabled={!isAssetNetwork || isSubmitting}
+        disabled={!isOnCorrectNetwork || isSubmitting}
         {...field}
         additionalComponent={<Error meta={meta} />}
       />
-
-      {Number(balance.ocean) > 0 && (
-        <Button
-          className={styles.buttonMax}
-          style="text"
-          size="small"
-          disabled={!web3 || isSubmitting}
-          onClick={() => setFieldValue('amount', amountMax)}
-        >
-          Use Max
-        </Button>
-      )}
+      <Button
+        className={styles.buttonMax}
+        style="text"
+        size="small"
+        disabled={!web3 || isSubmitting}
+        onClick={() => setFieldValue('amount', amount)}
+      >
+        Use Max
+      </Button>
     </>
   )
 }

src/components/Asset/AssetActions/VeAllocation/index.module.css

@@ -0,0 +1,25 @@
+.actions {
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-left: var(--spacer);
+  padding-right: var(--spacer);
+  padding-top: calc(var(--spacer) / 1.5);
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.success {
+  margin-top: calc(var(--spacer) / 2);
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.actions button {
+  margin-left: calc(var(--spacer) / 4);
+  margin-right: calc(var(--spacer) / 4);
+}
+
+.actions button svg {
+  fill: currentColor;
+}

src/components/Asset/AssetActions/VeAllocation/index.tsx

@@ -1,10 +1,80 @@
+import { useAsset } from '@context/Asset'
+import { useWeb3 } from '@context/Web3'
 import { VeAllocate } from '@oceanprotocol/lib'
-import React, { ReactElement, useEffect } from 'react'
+import { getOceanConfig } from '@utils/ocean'
+import { Formik } from 'formik'
+import React, { ReactElement, useEffect, useState } from 'react'
+import FormAdd from './FormAdd'
+import * as Yup from 'yup'
+import styles from './index.module.css'
+import Loader from '@shared/atoms/Loader'
+import Button from '@shared/atoms/Button'
+export interface FormAddAllocation {
+  amount: number
+}
+
+const initialValues: FormAddAllocation = {
+  amount: 0
+}
+
+const validationSchema: Yup.SchemaOf<FormAddAllocation> = Yup.object().shape({
+  amount: Yup.number()
+    .min(0, (param) => `Must be more or equal to ${param.min}`)
+    .max(100, `Maximum you can allocate is 100%`)
+    .required('Required')
+})
 
 export default function VeAllocation(): ReactElement {
-  useEffect(() => {
-    const veAllocation = new VeAllocate()
-  }, [])
+  const { web3, accountId } = useWeb3()
+  const { asset } = useAsset()
+  const [allocation, setAllocation] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
 
-  return <div>Ve Allocation</div>
+  async function handleUpdateAllocation(amount: number, resetForm: () => void) {
+    console.log('submit')
+
+    const config = getOceanConfig(5)
+    const veAllocation = new VeAllocate(
+      '0x3EFDD8f728c8e774aB81D14d0B2F07a8238960f4',
+      web3
+    )
+    const tx = await veAllocation.setAllocation(
+      accountId,
+      (amount * 100).toString(),
+      asset.nftAddress,
+      asset.chainId
+    )
+  }
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting, resetForm }) => {
+        await handleUpdateAllocation(values.amount, resetForm)
+        setSubmitting(false)
+      }}
+    >
+      {({ isSubmitting, setSubmitting, submitForm, values, isValid }) => (
+        <>
+          <div>
+            <FormAdd amount={allocation} />
+          </div>
+          <div className={styles.actions}>
+            {isLoading ? (
+              <Loader message="Updating allocation ..." />
+            ) : (
+              <Button
+                style="primary"
+                size="small"
+                onClick={() => submitForm()}
+                disabled={isSubmitting}
+              >
+                Update allocation{' '}
+              </Button>
+            )}
+          </div>
+        </>
+      )}
+    </Formik>
+  )
 }

src/components/Asset/AssetActions/index.tsx

@@ -151,7 +151,7 @@ export default function AssetActions({
 
   const tabs: TabsItem[] = [
     { title: 'Use', content: UseContent },
-    { title: 'VeAllocation', content: <VeAllocation /> }
+    { title: 'VeOCEAN', content: <VeAllocation /> }
   ]
 
   return (