(bond & tokenomics) feat: bond migration final

.env.example

@@ -19,7 +19,7 @@ NEXT_PUBLIC_GNOSIS_TEST_RPC=__URL__
 NEXT_PUBLIC_POLYGON_TEST_RPC=__URL__
 NEXT_PUBLIC_IS_CONNECTED_TO_TEST_NET=
 
-# autonolas-registry-frontend
+# registry
 NEXT_PUBLIC_REGISTRY_URL=__value__
 NEXT_PUBLIC_AUTONOLAS_URL=__value__
 NEXT_PUBLIC_GNOSIS_SAFE_API_MAINNET=__value__
@@ -30,8 +30,13 @@ NEXT_PUBLIC_ETHERSCAN_API_KEY=__value__
 NEXT_PUBLIC_SOLANA_MAINNET_BETA_URL=__value__
 NEXT_PUBLIC_SVM_PUBLIC_KEY=__value__
 
-# autonolas-tokenomics-frontend
+# tokenomics
 NEXT_PUBLIC_GRAPH_ENDPOINT_MAINNET=__URL__
 NEXT_PUBLIC_SHYFT_API_KEY=__KEY__
-NEXT_PUBLIC_IS_CONNECTED_TO_LOCAL=__TRUE_OR_FALSE__
 
+# bond
+NEXT_PUBLIC_MAINNET_BALANCER_URL=__URL__
+NEXT_PUBLIC_OPTIMISM_BALANCER_URL=__URL__
+NEXT_PUBLIC_GNOSIS_BALANCER_URL=__URL__
+NEXT_PUBLIC_POLYGON_BALANCER_URL=__URL__
+NEXT_PUBLIC_ARBITRUM_BALANCER_URL=__URL__

apps/bond/common-util/graphql/clients.js

@@ -1,4 +1,13 @@
 import { GraphQLClient } from 'graphql-request';
+import {
+  arbitrum,
+  base,
+  gnosis,
+  goerli,
+  mainnet,
+  optimism,
+  polygon,
+} from 'viem/chains';
 
 const requestConfig = {
   jsonSerializer: {
@@ -16,32 +25,32 @@ export const AUTONOLAS_GRAPH_CLIENTS = {
 
 // https://docs.balancer.fi/reference/subgraph/ for future subgraph endpoints
 export const BALANCER_GRAPH_CLIENTS = {
-  1: new GraphQLClient(
-    'https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-v2',
+  [mainnet.id]: new GraphQLClient(
+    process.env.NEXT_PUBLIC_MAINNET_BALANCER_URL,
     requestConfig,
   ),
-  5: new GraphQLClient(
+  [goerli.id]: new GraphQLClient(
     'https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-goerli-v2',
     requestConfig,
   ),
-  10: new GraphQLClient(
-    'https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-optimism-v2',
+  [optimism.id]: new GraphQLClient(
+    process.env.NEXT_PUBLIC_OPTIMISM_BALANCER_URL,
     requestConfig,
   ),
-  100: new GraphQLClient(
-    'https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-gnosis-chain-v2',
+  [gnosis.id]: new GraphQLClient(
+    process.env.NEXT_PUBLIC_GNOSIS_BALANCER_URL,
     requestConfig,
   ),
-  137: new GraphQLClient(
-    'https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-polygon-v2',
+  [polygon.id]: new GraphQLClient(
+    process.env.NEXT_PUBLIC_POLYGON_BALANCER_URL,
     requestConfig,
   ),
-  8453: new GraphQLClient(
+  [base.id]: new GraphQLClient(
     'https://api.studio.thegraph.com/query/24660/balancer-base-v2/version/latest',
     requestConfig,
   ),
-  42161: new GraphQLClient(
-    'https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-arbitrum-v2',
+  [arbitrum.id]: new GraphQLClient(
+    process.env.NEXT_PUBLIC_ARBITRUM_BALANCER_URL,
     requestConfig,
   ),
 };

apps/bond/components/BondingProducts/Bonding/BondingList/BondingList.jsx

@@ -3,7 +3,7 @@ import {
   QuestionCircleOutlined,
   UnorderedListOutlined,
 } from '@ant-design/icons';
-import { Button, Empty, Popconfirm, Spin, Table, Tag, Tooltip, Typography } from 'antd';
+import { Button, Empty, Popconfirm, Skeleton, Spin, Table, Tag, Tooltip, Typography } from 'antd';
 import { isNaN, remove, round } from 'lodash';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
@@ -33,6 +33,10 @@ const Container = styled.div`
   }
 `;
 
+const Loader = () => <Skeleton.Button size="small" className="full-width" active block />;
+
+const isCurrentPriceLpZero = (currentPrice) => Number(currentPrice) === 0;
+
 const getTitle = (title, tooltipDesc) => (
   <Tooltip title={tooltipDesc}>
     <span>
@@ -86,11 +90,17 @@ const getColumns = (onClick, isActive, acc, depositoryAddress, hideEmptyProducts
       dataIndex: 'fullCurrentPriceLp',
       key: 'fullCurrentPriceLp',
       width: 140,
-      render: (x, details) => (
-        <a href={details.currentPriceLpLink} rel="noopener noreferrer" target="_blank">
-          {x}
-        </a>
-      ),
+      render: (currentPriceLp, details) => {
+        if (isCurrentPriceLpZero(currentPriceLp)) {
+          return <Loader />;
+        }
+
+        return (
+          <a href={details.currentPriceLpLink} rel="noopener noreferrer" target="_blank">
+            {currentPriceLp}
+          </a>
+        );
+      },
     },
     {
       title: getTitle(
@@ -223,8 +233,16 @@ const getColumns = (onClick, isActive, acc, depositoryAddress, hideEmptyProducts
   return columns;
 };
 
-const sortList = (list) =>
+const sortProducts = (list) =>
   list.sort((a, b) => {
+    // if the current price of the LP token is zero, then move it to the end of the list
+    // NOTE: It can be zero because
+    // - the API returns zero (shouldn't happen) OR
+    // - has error OR
+    // - not fetched yet
+    const isSvm = a.lpChainId === VM_TYPE.SVM || b.lpChainId === VM_TYPE.SVM;
+    if (isSvm && isCurrentPriceLpZero(a.fullCurrentPriceLp)) return 1;
+
     if (isNaN(a.projectedChange)) return 1;
     if (isNaN(b.projectedChange)) return -1;
     return b.projectedChange - a.projectedChange;
@@ -282,7 +300,7 @@ export const BondingList = ({ bondingProgramType, hideEmptyProducts }) => {
   }, [handleProductDetails]);
 
   const getProductsDataSource = useCallback(() => {
-    const sortedList = sortList(filteredProducts);
+    const sortedList = sortProducts(filteredProducts);
     const processedList = hideEmptyProducts
       ? sortedList.filter((x) => x.supplyLeft > 0.00001)
       : sortedList;
@@ -308,16 +326,17 @@ export const BondingList = ({ bondingProgramType, hideEmptyProducts }) => {
         pagination={false}
         scroll={{ x: 400 }}
         className="mb-16"
+        rowHoverable={false}
       />
 
       {!!productDetails && (
         <Deposit
           productId={productDetails?.id}
           productToken={productDetails?.token}
-          productLpPriceInBg={getLpTokenWithDiscount(
+          productLpPriceAfterDiscount={getLpTokenWithDiscount(
             productDetails?.priceLp,
             productDetails?.discount,
-          )}
+          ).toString()}
           productSupply={productDetails?.supply}
           getProducts={refetch}
           closeModal={handleModalClose}

apps/bond/components/BondingProducts/Bonding/BondingList/useBondingList.jsx

@@ -6,6 +6,7 @@ import { usePublicClient } from 'wagmi';
 import { VM_TYPE, areAddressesEqual } from '@autonolas/frontend-library';
 
 import { DEPOSITORY } from 'libs/util-contracts/src/lib/abiAndAddresses';
+
 import { ADDRESSES } from 'common-util/constants/addresses';
 import { ADDRESS_ZERO, ONE_ETH } from 'common-util/constants/numbers';
 import { DEX } from 'common-util/enums';

apps/bond/components/BondingProducts/Bonding/Deposit/Deposit.jsx

@@ -5,12 +5,10 @@ import { isNil } from 'lodash';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState } from 'react';
 
-import {
-  COLOR,
-  getCommaSeparatedNumber,
-  notifyError,
-  notifySuccess,
-} from '@autonolas/frontend-library';
+import { getCommaSeparatedNumber } from '@autonolas/frontend-library';
+
+import { COLOR } from 'libs/ui-theme/src';
+import { notifyError, notifySuccess } from 'libs/util-functions/src';
 
 import { ONE_ETH_IN_STRING } from 'common-util/constants/numbers';
 import {
@@ -30,7 +28,7 @@ const fullWidth = { width: '100%' };
 export const Deposit = ({
   productId,
   productToken,
-  productLpPriceInBg,
+  productLpPriceAfterDiscount,
   productSupply,
   getProducts,
   closeModal,
@@ -43,6 +41,9 @@ export const Deposit = ({
 
   const isSvmProduct = isSvmLpAddress(productToken);
 
+  // convert to BigNumber of bignumber.js and not ethers
+  const productLpPriceAfterDiscountInBg = new BigNumber(productLpPriceAfterDiscount);
+
   const { getLpBalanceRequest, depositRequest, approveRequest, hasSufficientTokenRequest } =
     useDeposit();
 
@@ -82,7 +83,7 @@ export const Deposit = ({
       notifySuccess('Deposited successfully!', `Transaction Hash: ${txHash}`);
 
       // fetch the products details again
-      getProducts();
+      await getProducts();
 
       // close the modal after successful deposit
       closeModal();
@@ -126,13 +127,14 @@ export const Deposit = ({
   };
 
   const getRemainingLpSupplyInEth = () => {
-    const supplyInWei = new BigNumber(productSupply || '0');
+    const productSupplyInWei = new BigNumber(productSupply || '0');
+    const lpBalanceInBg = new BigNumber(lpBalance);
 
-    const remainingSupply = supplyInWei
+    const remainingSupply = productSupplyInWei
       .multipliedBy(ONE_ETH_IN_STRING)
-      .dividedBy(productLpPriceInBg);
+      .dividedBy(productLpPriceAfterDiscountInBg);
 
-    const remainingSupplyInWei = remainingSupply.lt(lpBalance) ? remainingSupply : lpBalance;
+    const remainingSupplyInWei = remainingSupply.lt(lpBalanceInBg) ? remainingSupply : lpBalance;
     return parseToEth(remainingSupplyInWei);
   };
 
@@ -147,8 +149,7 @@ export const Deposit = ({
       ? tokenAmountInputValue
       : new BigNumber(parseToWei(tokenAmountInputValue));
 
-    const payoutInBg = new BigNumber(productLpPriceInBg.toString()).multipliedBy(tokenAmountValue);
-
+    const payoutInBg = productLpPriceAfterDiscountInBg.multipliedBy(tokenAmountValue);
     const payout = isSvmProduct
       ? payoutInBg.dividedBy(BigNumber(`1${'0'.repeat(28)}`)).toFixed(2)
       : Number(payoutInBg.dividedBy(ONE_ETH_IN_STRING).dividedBy(ONE_ETH_IN_STRING).toFixed(2));
@@ -178,8 +179,8 @@ export const Deposit = ({
           autoComplete="off"
           className="mt-16"
         >
-          <Tag color={COLOR.PRIMARY} className="deposit-tag">
-            <Text>{`Bonding Product ID: ${productId}`}</Text>
+          <Tag color={COLOR.PRIMARY} className="deposit-tag mb-12">
+            {`Bonding Product ID: ${productId}`}
           </Tag>
 
           <Form.Item
@@ -222,7 +223,6 @@ export const Deposit = ({
                   form.setFieldsValue({ tokenAmount: remainingLpSupplyInEth });
                   form.validateFields(['tokenAmount']);
                 }}
-                className="pl-0"
               >
                 Max
               </Button>
@@ -255,12 +255,12 @@ export const Deposit = ({
               htmlType="submit"
               loading={isLoading}
               onClick={async () => {
-                try {
-                  if (!account) {
-                    notifyError('Please connect your wallet');
-                    return;
-                  }
+                if (!account) {
+                  notifyError('Please connect your wallet');
+                  return;
+                }
 
+                try {
                   setIsLoading(true);
                   await approveRequest({
                     token: productToken,
@@ -291,16 +291,22 @@ export const Deposit = ({
 Deposit.propTypes = {
   productId: PropTypes.string,
   productToken: PropTypes.string,
-  productSupply: PropTypes.string,
-  productLpPriceInBg: PropTypes.shape({}),
+  productSupply: PropTypes.oneOfType([
+    PropTypes.instanceOf(PropTypes.string),
+    PropTypes.instanceOf(BigInt),
+  ]),
+  productLpPriceAfterDiscount: PropTypes.oneOfType([
+    PropTypes.instanceOf(PropTypes.string),
+    PropTypes.instanceOf(BigInt),
+  ]),
   closeModal: PropTypes.func,
   getProducts: PropTypes.func,
 };
 
 Deposit.defaultProps = {
   productId: undefined,
   productToken: null,
-  productLpPriceInBg: null,
+  productLpPriceAfterDiscount: null,
   productSupply: null,
   closeModal: () => {},
   getProducts: () => {},

apps/bond/components/BondingProducts/Bonding/Deposit/useDeposit.jsx

@@ -45,10 +45,7 @@ export const useDeposit = () => {
       const treasuryAddress = ADDRESSES[chainId].treasury;
       const fnApprove = contract.methods.approve(treasuryAddress, amountToApprove);
       const estimatedGas = await getEstimatedGasLimit(fnApprove, account);
-      const fn = await fnApprove.send({
-        from: account,
-        gasLimit: estimatedGas,
-      });
+      const fn = await fnApprove.send({ from: account, gasLimit: estimatedGas });
 
       const response = await sendTransaction(fn, account);
       return response;