Merge pull request #88 from oceanprotocol/feature/swapfee

liquidityProviderFee → swapFee

content/pages/publish.json

@@ -107,7 +107,7 @@
       "info": "Let's create a decentralized, automated market for your data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a OCEAN/Datatoken liquidity pool with Balancer.",
       "tooltips": {
         "poolInfo": "Explain what is going on here...",
-        "liquidityProviderFee": "Explain liquidity provider fee...",
+        "swapFee": "Explain liquidity provider fee...",
         "communityFee": "Explain community fee...",
         "marketplaceFee": "Explain marketplace fee..."
       }

package.json

@@ -22,11 +22,11 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.2.5",
+    "@oceanprotocol/lib": "^0.3.1",
-    "@oceanprotocol/react": "^0.0.45",
+    "@oceanprotocol/react": "^0.0.46",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
-    "@tippyjs/react": "^4.1.0",
+    "@tippyjs/react": "^4.2.0",
     "@toruslabs/torus-embed": "^1.8.5",
     "@types/classnames": "^2.2.10",
     "@vercel/node": "^1.8.3",
@@ -34,58 +34,58 @@
     "axios": "^0.20.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
-    "decimal.js": "^10.2.0",
+    "decimal.js": "^10.2.1",
     "dotenv": "^8.2.0",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
     "formik": "^2.1.5",
-    "gatsby": "^2.24.63",
+    "gatsby": "^2.24.66",
-    "gatsby-image": "^2.4.19",
+    "gatsby-image": "^2.4.20",
-    "gatsby-plugin-manifest": "^2.4.30",
+    "gatsby-plugin-manifest": "^2.4.32",
-    "gatsby-plugin-react-helmet": "^3.3.11",
+    "gatsby-plugin-react-helmet": "^3.3.12",
-    "gatsby-plugin-remove-trailing-slashes": "^2.3.12",
+    "gatsby-plugin-remove-trailing-slashes": "^2.3.13",
-    "gatsby-plugin-sharp": "^2.6.36",
+    "gatsby-plugin-sharp": "^2.6.37",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-webpack-size": "^1.0.0",
-    "gatsby-source-filesystem": "^2.3.30",
+    "gatsby-source-filesystem": "^2.3.31",
-    "gatsby-source-graphql": "^2.7.4",
+    "gatsby-source-graphql": "^2.7.5",
-    "gatsby-transformer-json": "^2.4.12",
+    "gatsby-transformer-json": "^2.4.13",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby-transformer-remark": "^2.8.36",
-    "gatsby-transformer-sharp": "^2.5.15",
+    "gatsby-transformer-sharp": "^2.5.16",
     "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
-    "query-string": "^6.13.2",
+    "query-string": "^6.13.4",
     "react": "^16.13.1",
     "react-data-table-component": "^6.11.5",
-    "react-datepicker": "^3.1.3",
+    "react-datepicker": "^3.2.2",
     "react-dom": "^16.13.1",
     "react-dotdotdot": "^1.3.1",
     "react-dropzone": "^11.2.0",
     "react-helmet": "^6.1.0",
     "react-markdown": "^4.3.1",
     "react-paginate": "^6.5.0",
-    "react-responsive-modal": "^5.1.0",
+    "react-responsive-modal": "^5.1.1",
     "react-spring": "^8.0.27",
     "react-tabs": "^3.1.1",
     "react-toastify": "^6.0.8",
     "shortid": "^2.2.15",
     "slugify": "^1.4.5",
-    "swr": "^0.3.3",
+    "swr": "^0.3.5",
     "yup": "^0.29.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/preset-typescript": "^7.10.1",
-    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-actions": "^6.0.22",
-    "@storybook/addon-storyshots": "^6.0.21",
+    "@storybook/addon-storyshots": "^6.0.22",
-    "@storybook/react": "^6.0.21",
+    "@storybook/react": "^6.0.22",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
     "@types/jest": "^26.0.14",
-    "@types/loadable__component": "^5.13.0",
+    "@types/loadable__component": "^5.13.1",
     "@types/lodash.debounce": "^4.0.3",
     "@types/lodash.omit": "^4.5.6",
     "@types/node": "^14.11.2",
@@ -96,15 +96,15 @@
     "@types/react-tabs": "^2.3.2",
     "@types/shortid": "0.0.29",
     "@types/yup": "^0.29.7",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "@typescript-eslint/parser": "^4.2.0",
+    "@typescript-eslint/parser": "^4.3.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "eslint": "^7.9.0",
+    "eslint": "^7.10.0",
     "eslint-config-oceanprotocol": "^1.5.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",

src/@types/MetaData.d.ts

@@ -21,7 +21,7 @@ export interface MetadataMarket extends Metadata {
 
 export interface PriceOptionsMarket extends PriceOptions {
   // easier to keep this as number for Yup input validation
-  liquidityProviderFee: number
+  swapFee: number
   // collect datatoken info for publishing
   datatoken?: DataTokenOptions
 }

src/components/molecules/FormFields/Price/Fees.tsx

@@ -12,7 +12,7 @@ export default function Fees({
   tooltips: { [key: string]: string }
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const [field, meta] = useField('price.liquidityProviderFee')
+  const [field, meta] = useField('price.swapFee')
 
   return (
     <>
@@ -20,8 +20,8 @@ export default function Fees({
         <Input
           label={
             <>
-              Liquidity Provider Fee
+              Swap Fee
-              <Tooltip content={tooltips.liquidityProviderFee} />
+              <Tooltip content={tooltips.swapFee} />
             </>
           }
           type="number"

src/components/molecules/FormFields/Price/index.tsx

@@ -26,7 +26,7 @@ const query = graphql`
                 info
                 tooltips {
                   poolInfo
-                  liquidityProviderFee
+                  swapFee
                   communityFee
                   marketplaceFee
                 }

src/components/molecules/Wallet/Account.tsx

@@ -1,10 +1,10 @@
-import React, { FormEvent } from 'react'
-import styles from './Account.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
+import React, { FormEvent } from 'react'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
-import Status from '../../atoms/Status'
 import { accountTruncate, isCorrectNetwork } from '../../../utils/wallet'
+import Status from '../../atoms/Status'
+import styles from './Account.module.css'
 
 const Blockies = ({ account }: { account: string | undefined }) => {
   if (!account) return null
@@ -32,13 +32,17 @@ const Account = React.forwardRef((props, ref: any) => {
     await connect()
   }
 
+  // prevent accidentially submitting a form the button might be in
+  function handleButton(e: FormEvent<HTMLButtonElement>) {
+    e.preventDefault()
+  }
+
   return accountId ? (
     <button
       className={styles.button}
       aria-label="Account"
       ref={ref}
-      // prevent accidentially submitting a form the button might be in
+      onClick={(e) => handleButton(e)}
-      onClick={(e) => e.preventDefault()}
     >
       <Blockies account={accountId} />
       <span className={styles.address} title={accountId}>

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -16,13 +16,13 @@ export default function Add({
   poolAddress,
   totalPoolTokens,
   totalBalance,
-  liquidityProviderFee
+  swapFee
 }: {
   setShowAdd: (show: boolean) => void
   poolAddress: string
   totalPoolTokens: string
   totalBalance: Balance
-  liquidityProviderFee: string
+  swapFee: string
 }): ReactElement {
   const { debug } = useUserPreferences()
   const { ocean, accountId, balance } = useOcean()
@@ -103,10 +103,7 @@ export default function Add({
         </div>
         <div>
           <p>You will earn</p>
-          <Token
+          <Token symbol="% swap fee" balance={swapFee} />
-            symbol="% of each pool transaction"
-            balance={liquidityProviderFee}
-          />
         </div>
       </div>
 

src/components/organisms/AssetActions/Pool/index.tsx

@@ -33,7 +33,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [totalBalance, setTotalBalance] = useState<Balance>()
   const [dtSymbol, setDtSymbol] = useState<string>()
   const [userBalance, setUserBalance] = useState<Balance>()
-  const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>()
+  const [swapFee, setSwapFee] = useState<string>()
 
   const [showAdd, setShowAdd] = useState(false)
   const [showRemove, setShowRemove] = useState(false)
@@ -106,11 +106,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         setUserBalance(userBalance)
 
         // Get liquidity provider fee
-        const liquidityProviderFee = await ocean.pool.getSwapFee(
+        const swapFee = await ocean.pool.getSwapFee(accountId, price.address)
-          accountId,
+        setSwapFee(swapFee)
-          price.address
-        )
-        setLiquidityProviderFee(liquidityProviderFee)
       } catch (error) {
         console.error(error.message)
       } finally {
@@ -130,7 +127,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           poolAddress={price.address}
           totalPoolTokens={totalPoolTokens}
           totalBalance={totalBalance}
-          liquidityProviderFee={liquidityProviderFee}
+          swapFee={swapFee}
         />
       ) : showRemove ? (
         <Remove
@@ -177,10 +174,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               {debug === true && (
                 <Token symbol="BPT" balance={totalPoolTokens} />
               )}
-              <Token
+              <Token symbol="% swap fee" balance={swapFee} />
-                symbol="% liquidity provider fee"
-                balance={liquidityProviderFee}
-              />
             </div>
           </div>
 

src/components/pages/Publish/index.tsx

@@ -38,7 +38,7 @@ export default function PublishPage({
         (metadata as unknown) as Metadata,
         {
           ...price,
-          liquidityProviderFee: `${price.liquidityProviderFee}`
+          swapFee: `${price.swapFee}`
         },
         serviceType,
         price.datatoken

src/models/FormPublish.ts

@@ -16,7 +16,7 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
         .matches(/fixed|dynamic/g)
         .required('Required'),
       weightOnDataToken: Yup.string().required('Required'),
-      liquidityProviderFee: Yup.number()
+      swapFee: Yup.number()
         .min(0.1, 'Must be more or equal to 0.1')
         .max(0.9, 'Must be less or equal to 0.9')
         .required('Required'),
@@ -50,7 +50,7 @@ export const initialValues: Partial<MetadataPublishForm> = {
     type: 'fixed',
     tokensToMint: 1,
     weightOnDataToken: '9', // 90% on data token
-    liquidityProviderFee: 0.1 // in %
+    swapFee: 0.1 // in %
   },
   files: '',
   description: '',

tests/unit/__fixtures__/testFormData.ts

@@ -9,7 +9,7 @@ const testFormData: MetadataPublishForm = {
     tokensToMint: 9,
     type: 'fixed',
     weightOnDataToken: '1',
-    liquidityProviderFee: 0.1
+    swapFee: 0.1
   },
   name: '',
   description: 'description',