oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

merge v4 into v4-c2d

Browse Source
This commit is contained in:
Bogdan Fazakas 2022-03-03 17:45:47 +02:00
commit 2c05e1f945
23 changed files with 502 additions and 592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
package-lock.json generated
View File

@ -13,7 +13,7 @@
"@coingecko/cryptoformat": "^0.4.4", "@coingecko/cryptoformat": "^0.4.4",
"@loadable/component": "^5.15.2", "@loadable/component": "^5.15.2",
"@oceanprotocol/art": "^3.2.0", "@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/lib": "^1.0.0-next.21", "@oceanprotocol/lib": "^1.0.0-next.24",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@portis/web3": "^4.0.6", "@portis/web3": "^4.0.6",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
@ -26,7 +26,6 @@
"decimal.js": "^10.3.1", "decimal.js": "^10.3.1",
"dom-confetti": "^0.2.2", "dom-confetti": "^0.2.2",
"dotenv": "^15.0.0", "dotenv": "^15.0.0",
"ethereum-blockies": "github:MyEtherWallet/blockies",
"filesize": "^8.0.6", "filesize": "^8.0.6",
"formik": "^2.2.9", "formik": "^2.2.9",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
@ -35,6 +34,7 @@
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.omit": "^4.5.0", "lodash.omit": "^4.5.0",
"myetherwallet-blockies": "^0.1.1",
"next": "^12.1.0", "next": "^12.1.0",
"query-string": "^7.1.0", "query-string": "^7.1.0",
"react": "^17.0.2", "react": "^17.0.2",
@ -2937,46 +2937,14 @@
}, },
"node_modules/@next/env": { "node_modules/@next/env": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz", "license": "MIT"
"integrity": "sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ=="
},
"node_modules/@next/swc-android-arm64": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.0.tgz",
"integrity": "sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.0.tgz",
"integrity": "sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
}, },
"node_modules/@next/swc-darwin-x64": { "node_modules/@next/swc-darwin-x64": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.0.tgz",
"integrity": "sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
"license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
"darwin" "darwin"
@ -2985,126 +2953,6 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@next/swc-linux-arm-gnueabihf": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.0.tgz",
"integrity": "sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.0.tgz",
"integrity": "sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.0.tgz",
"integrity": "sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz",
"integrity": "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz",
"integrity": "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.0.tgz",
"integrity": "sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.0.tgz",
"integrity": "sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz",
"integrity": "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"dev": true, "dev": true,
@ -3162,8 +3010,9 @@
} }
}, },
"node_modules/@oceanprotocol/lib": { "node_modules/@oceanprotocol/lib": {
"version": "1.0.0-next.21", "version": "1.0.0-next.24",
"license": "Apache-2.0", "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.24.tgz",
"integrity": "sha512-T46pU320AHLd9iSTYX5YGr6qFilf0+2oTzuuNaCXWNon1CF+9M+n2W5E+afSwqd6xHnEuX/IIFsQpc3RUzo55g==",
"dependencies": { "dependencies": {
"@oceanprotocol/contracts": "1.0.0-alpha.21", "@oceanprotocol/contracts": "1.0.0-alpha.21",
"bignumber.js": "^9.0.2", "bignumber.js": "^9.0.2",
@ -4668,8 +4517,6 @@
}, },
"node_modules/@truffle/abi-utils": { "node_modules/@truffle/abi-utils": {
"version": "0.2.9", "version": "0.2.9",
"resolved": "https://registry.npmjs.org/@truffle/abi-utils/-/abi-utils-0.2.9.tgz",
"integrity": "sha512-Nv4MGsA2vdI7G34nI0DfR/eSd5pbAUu+5EafYNqzgrS46y0LWhbIrSZ1NcM7cbhIrkpUn6OfNk49AjNM67TkSg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"change-case": "3.0.2", "change-case": "3.0.2",
@ -4683,8 +4530,6 @@
}, },
"node_modules/@truffle/codec": { "node_modules/@truffle/codec": {
"version": "0.11.27", "version": "0.11.27",
"resolved": "https://registry.npmjs.org/@truffle/codec/-/codec-0.11.27.tgz",
"integrity": "sha512-zPlbrGSZ975jscoJ4NhQpaJGwJXkasnpSoUAEjzppr6FCLKtutxssy6yfz4EUHaQDTg1SqxlVBfBhqYcrCyjvw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@truffle/abi-utils": "^0.2.9", "@truffle/abi-utils": "^0.2.9",
@ -4754,8 +4599,6 @@
}, },
"node_modules/@truffle/compile-common": { "node_modules/@truffle/compile-common": {
"version": "0.7.28", "version": "0.7.28",
"resolved": "https://registry.npmjs.org/@truffle/compile-common/-/compile-common-0.7.28.tgz",
"integrity": "sha512-mZCEQ6fkOqbKYCJDT82q0vZCxOEsKRQ0zrPfKuSJEb0gF9DXIQcnMkyJpBSWzmyvien9/A7/jPiGQoC7PmNEUg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@truffle/error": "^0.1.0", "@truffle/error": "^0.1.0",
@ -4764,8 +4607,6 @@
}, },
"node_modules/@truffle/contract": { "node_modules/@truffle/contract": {
"version": "4.4.9", "version": "4.4.9",
"resolved": "https://registry.npmjs.org/@truffle/contract/-/contract-4.4.9.tgz",
"integrity": "sha512-LSIxnpFDr824wUp4tiw2UHmDPr8io5UnzjlZX/QKuNIq+BB+JPRmkzItjwtvWzzIG3QOAGiqjtIgp1U6Mab/bw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ensdomains/ensjs": "^2.0.1", "@ensdomains/ensjs": "^2.0.1",
@ -4786,8 +4627,6 @@
}, },
"node_modules/@truffle/contract-schema": { "node_modules/@truffle/contract-schema": {
"version": "3.4.5", "version": "3.4.5",
"resolved": "https://registry.npmjs.org/@truffle/contract-schema/-/contract-schema-3.4.5.tgz",
"integrity": "sha512-heaGV9QWqef259HaF+0is/tsmhlZIbUSWhqvj0iwKmxoN92fghKijWwdVYhPIbsmGlrQuwPTZHSCnaOlO+gsFg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"ajv": "^6.10.0", "ajv": "^6.10.0",
@ -5093,8 +4932,6 @@
}, },
"node_modules/@truffle/debug-utils": { "node_modules/@truffle/debug-utils": {
"version": "6.0.9", "version": "6.0.9",
"resolved": "https://registry.npmjs.org/@truffle/debug-utils/-/debug-utils-6.0.9.tgz",
"integrity": "sha512-CVKVsbEWE0TzmTdGcxEeQvNhTKxkojIRox3LWh2Z8ZARtPiWwYl/lmPqfugh1665xmc2NVLI9qyP4ygVFPkvIQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@truffle/codec": "^0.11.27", "@truffle/codec": "^0.11.27",
@ -5555,8 +5392,6 @@
}, },
"node_modules/@trufflesuite/chromafi": { "node_modules/@trufflesuite/chromafi": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/@trufflesuite/chromafi/-/chromafi-3.0.0.tgz",
"integrity": "sha512-oqWcOqn8nT1bwlPPfidfzS55vqcIDdpfzo3HbU9EnUmcSTX+I8z0UyUFI3tZQjByVJulbzxHxUGS3ZJPwK/GPQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"camelcase": "^4.1.0", "camelcase": "^4.1.0",
@ -11673,10 +11508,6 @@
"safe-buffer": "^5.1.1" "safe-buffer": "^5.1.1"
} }
}, },
"node_modules/ethereum-blockies": {
"version": "0.1.1",
"license": "MIT"
},
"node_modules/ethereum-bloom-filters": { "node_modules/ethereum-bloom-filters": {
"version": "1.0.10", "version": "1.0.10",
"license": "MIT", "license": "MIT",
@ -13465,8 +13296,6 @@
}, },
"node_modules/he": { "node_modules/he": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"license": "MIT", "license": "MIT",
"peer": true, "peer": true,
"bin": { "bin": {
@ -16233,6 +16062,11 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/myetherwallet-blockies": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/myetherwallet-blockies/-/myetherwallet-blockies-0.1.1.tgz",
"integrity": "sha512-2UPR88/+L7rTVLqTM1Fu3Er9+m6XLMGaanP5wyq5+dGyv9TFbB5ohXRJA0jeYf+30gtlOlhlvzAWtwB6BiHWxQ=="
},
"node_modules/nan": { "node_modules/nan": {
"version": "2.15.0", "version": "2.15.0",
"license": "MIT" "license": "MIT"
@ -16281,8 +16115,7 @@
}, },
"node_modules/next": { "node_modules/next": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/next/-/next-12.1.0.tgz", "license": "MIT",
"integrity": "sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q==",
"dependencies": { "dependencies": {
"@next/env": "12.1.0", "@next/env": "12.1.0",
"caniuse-lite": "^1.0.30001283", "caniuse-lite": "^1.0.30001283",
@ -18760,8 +18593,6 @@
}, },
"node_modules/simple-get": { "node_modules/simple-get": {
"version": "2.8.1", "version": "2.8.1",
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
"integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"decompress-response": "^3.3.0", "decompress-response": "^3.3.0",
@ -23578,74 +23409,10 @@
"version": "2.0.0" "version": "2.0.0"
}, },
"@next/env": { "@next/env": {
"version": "12.1.0", "version": "12.1.0"
"resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz",
"integrity": "sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ=="
},
"@next/swc-android-arm64": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.0.tgz",
"integrity": "sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA==",
"optional": true
},
"@next/swc-darwin-arm64": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.0.tgz",
"integrity": "sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg==",
"optional": true
}, },
"@next/swc-darwin-x64": { "@next/swc-darwin-x64": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.0.tgz",
"integrity": "sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug==",
"optional": true
},
"@next/swc-linux-arm-gnueabihf": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.0.tgz",
"integrity": "sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog==",
"optional": true
},
"@next/swc-linux-arm64-gnu": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.0.tgz",
"integrity": "sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q==",
"optional": true
},
"@next/swc-linux-arm64-musl": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.0.tgz",
"integrity": "sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA==",
"optional": true
},
"@next/swc-linux-x64-gnu": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz",
"integrity": "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==",
"optional": true
},
"@next/swc-linux-x64-musl": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz",
"integrity": "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==",
"optional": true
},
"@next/swc-win32-arm64-msvc": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.0.tgz",
"integrity": "sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw==",
"optional": true
},
"@next/swc-win32-ia32-msvc": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.0.tgz",
"integrity": "sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q==",
"optional": true
},
"@next/swc-win32-x64-msvc": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz",
"integrity": "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==",
"optional": true "optional": true
}, },
"@nodelib/fs.scandir": { "@nodelib/fs.scandir": {
@ -23689,7 +23456,9 @@
} }
}, },
"@oceanprotocol/lib": { "@oceanprotocol/lib": {
"version": "1.0.0-next.21", "version": "1.0.0-next.24",
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.24.tgz",
"integrity": "sha512-T46pU320AHLd9iSTYX5YGr6qFilf0+2oTzuuNaCXWNon1CF+9M+n2W5E+afSwqd6xHnEuX/IIFsQpc3RUzo55g==",
"requires": { "requires": {
"@oceanprotocol/contracts": "1.0.0-alpha.21", "@oceanprotocol/contracts": "1.0.0-alpha.21",
"bignumber.js": "^9.0.2", "bignumber.js": "^9.0.2",
@ -24653,8 +24422,6 @@
}, },
"@truffle/abi-utils": { "@truffle/abi-utils": {
"version": "0.2.9", "version": "0.2.9",
"resolved": "https://registry.npmjs.org/@truffle/abi-utils/-/abi-utils-0.2.9.tgz",
"integrity": "sha512-Nv4MGsA2vdI7G34nI0DfR/eSd5pbAUu+5EafYNqzgrS46y0LWhbIrSZ1NcM7cbhIrkpUn6OfNk49AjNM67TkSg==",
"requires": { "requires": {
"change-case": "3.0.2", "change-case": "3.0.2",
"faker": "^5.3.1", "faker": "^5.3.1",
@ -24666,8 +24433,6 @@
}, },
"@truffle/codec": { "@truffle/codec": {
"version": "0.11.27", "version": "0.11.27",
"resolved": "https://registry.npmjs.org/@truffle/codec/-/codec-0.11.27.tgz",
"integrity": "sha512-zPlbrGSZ975jscoJ4NhQpaJGwJXkasnpSoUAEjzppr6FCLKtutxssy6yfz4EUHaQDTg1SqxlVBfBhqYcrCyjvw==",
"requires": { "requires": {
"@truffle/abi-utils": "^0.2.9", "@truffle/abi-utils": "^0.2.9",
"@truffle/compile-common": "^0.7.28", "@truffle/compile-common": "^0.7.28",
@ -24727,8 +24492,6 @@
}, },
"@truffle/compile-common": { "@truffle/compile-common": {
"version": "0.7.28", "version": "0.7.28",
"resolved": "https://registry.npmjs.org/@truffle/compile-common/-/compile-common-0.7.28.tgz",
"integrity": "sha512-mZCEQ6fkOqbKYCJDT82q0vZCxOEsKRQ0zrPfKuSJEb0gF9DXIQcnMkyJpBSWzmyvien9/A7/jPiGQoC7PmNEUg==",
"requires": { "requires": {
"@truffle/error": "^0.1.0", "@truffle/error": "^0.1.0",
"colors": "1.4.0" "colors": "1.4.0"
@ -24736,8 +24499,6 @@
}, },
"@truffle/contract": { "@truffle/contract": {
"version": "4.4.9", "version": "4.4.9",
"resolved": "https://registry.npmjs.org/@truffle/contract/-/contract-4.4.9.tgz",
"integrity": "sha512-LSIxnpFDr824wUp4tiw2UHmDPr8io5UnzjlZX/QKuNIq+BB+JPRmkzItjwtvWzzIG3QOAGiqjtIgp1U6Mab/bw==",
"requires": { "requires": {
"@ensdomains/ensjs": "^2.0.1", "@ensdomains/ensjs": "^2.0.1",
"@truffle/blockchain-utils": "^0.1.0", "@truffle/blockchain-utils": "^0.1.0",
@ -24971,8 +24732,6 @@
}, },
"@truffle/contract-schema": { "@truffle/contract-schema": {
"version": "3.4.5", "version": "3.4.5",
"resolved": "https://registry.npmjs.org/@truffle/contract-schema/-/contract-schema-3.4.5.tgz",
"integrity": "sha512-heaGV9QWqef259HaF+0is/tsmhlZIbUSWhqvj0iwKmxoN92fghKijWwdVYhPIbsmGlrQuwPTZHSCnaOlO+gsFg==",
"requires": { "requires": {
"ajv": "^6.10.0", "ajv": "^6.10.0",
"debug": "^4.3.1" "debug": "^4.3.1"
@ -24980,8 +24739,6 @@
}, },
"@truffle/debug-utils": { "@truffle/debug-utils": {
"version": "6.0.9", "version": "6.0.9",
"resolved": "https://registry.npmjs.org/@truffle/debug-utils/-/debug-utils-6.0.9.tgz",
"integrity": "sha512-CVKVsbEWE0TzmTdGcxEeQvNhTKxkojIRox3LWh2Z8ZARtPiWwYl/lmPqfugh1665xmc2NVLI9qyP4ygVFPkvIQ==",
"requires": { "requires": {
"@truffle/codec": "^0.11.27", "@truffle/codec": "^0.11.27",
"@trufflesuite/chromafi": "^3.0.0", "@trufflesuite/chromafi": "^3.0.0",
@ -25349,8 +25106,6 @@
}, },
"@trufflesuite/chromafi": { "@trufflesuite/chromafi": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/@trufflesuite/chromafi/-/chromafi-3.0.0.tgz",
"integrity": "sha512-oqWcOqn8nT1bwlPPfidfzS55vqcIDdpfzo3HbU9EnUmcSTX+I8z0UyUFI3tZQjByVJulbzxHxUGS3ZJPwK/GPQ==",
"requires": { "requires": {
"camelcase": "^4.1.0", "camelcase": "^4.1.0",
"chalk": "^2.3.2", "chalk": "^2.3.2",
@ -29649,9 +29404,6 @@
} }
} }
}, },
"ethereum-blockies": {
"version": "0.1.1"
},
"ethereum-bloom-filters": { "ethereum-bloom-filters": {
"version": "1.0.10", "version": "1.0.10",
"requires": { "requires": {
@ -30904,8 +30656,6 @@
}, },
"he": { "he": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"peer": true "peer": true
}, },
"header-case": { "header-case": {
@ -32687,6 +32437,11 @@
"version": "0.0.8", "version": "0.0.8",
"dev": true "dev": true
}, },
"myetherwallet-blockies": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/myetherwallet-blockies/-/myetherwallet-blockies-0.1.1.tgz",
"integrity": "sha512-2UPR88/+L7rTVLqTM1Fu3Er9+m6XLMGaanP5wyq5+dGyv9TFbB5ohXRJA0jeYf+30gtlOlhlvzAWtwB6BiHWxQ=="
},
"nan": { "nan": {
"version": "2.15.0" "version": "2.15.0"
}, },
@ -32715,8 +32470,6 @@
}, },
"next": { "next": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/next/-/next-12.1.0.tgz",
"integrity": "sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q==",
"requires": { "requires": {
"@next/env": "12.1.0", "@next/env": "12.1.0",
"@next/swc-android-arm64": "12.1.0", "@next/swc-android-arm64": "12.1.0",
@ -34271,8 +34024,6 @@
}, },
"simple-get": { "simple-get": {
"version": "2.8.1", "version": "2.8.1",
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
"integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
"requires": { "requires": {
"decompress-response": "^3.3.0", "decompress-response": "^3.3.0",
"once": "^1.3.1", "once": "^1.3.1",

4
package.json
View File

@ -21,7 +21,7 @@
"@coingecko/cryptoformat": "^0.4.4", "@coingecko/cryptoformat": "^0.4.4",
"@loadable/component": "^5.15.2", "@loadable/component": "^5.15.2",
"@oceanprotocol/art": "^3.2.0", "@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/lib": "^1.0.0-next.21", "@oceanprotocol/lib": "^1.0.0-next.24",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@portis/web3": "^4.0.6", "@portis/web3": "^4.0.6",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
@ -34,7 +34,6 @@
"decimal.js": "^10.3.1", "decimal.js": "^10.3.1",
"dom-confetti": "^0.2.2", "dom-confetti": "^0.2.2",
"dotenv": "^15.0.0", "dotenv": "^15.0.0",
"ethereum-blockies": "github:MyEtherWallet/blockies",
"filesize": "^8.0.6", "filesize": "^8.0.6",
"formik": "^2.2.9", "formik": "^2.2.9",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
@ -43,6 +42,7 @@
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.omit": "^4.5.0", "lodash.omit": "^4.5.0",
"myetherwallet-blockies": "^0.1.1",
"next": "^12.1.0", "next": "^12.1.0",
"query-string": "^7.1.0", "query-string": "^7.1.0",
"react": "^17.0.2", "react": "^17.0.2",

12
src/@context/Pool/_queries.ts
View File

@ -10,9 +10,9 @@ export const poolDataQuery = gql`
poolData: pool(id: $pool) { poolData: pool(id: $pool) {
id id
totalShares totalShares
liquidityProviderFee liquidityProviderSwapFee
opcFee opcFee
marketSwapFee publishMarketSwapFee
spotPrice spotPrice
baseToken { baseToken {
address address
@ -41,6 +41,14 @@ export const poolDataQuery = gql`
baseTokenLiquidity baseTokenLiquidity
datatokenLiquidity datatokenLiquidity
swapVolume swapVolume
baseToken {
address
symbol
}
datatoken {
address
symbol
}
} }
} }
` `

7
src/@context/Pool/_types.ts
View File

@ -5,12 +5,13 @@ import {
} from 'src/@types/subgraph/PoolData' } from 'src/@types/subgraph/PoolData'
export interface PoolInfo { export interface PoolInfo {
poolFee: string liquidityProviderSwapFee: string
marketFee: string publishMarketSwapFee: string
opfFee: string opcFee: string
weightBaseToken: string weightBaseToken: string
weightDt: string weightDt: string
datatokenSymbol: string datatokenSymbol: string
datatokenAddress: string
baseTokenSymbol: string baseTokenSymbol: string
baseTokenAddress: string baseTokenAddress: string
totalPoolTokens: string totalPoolTokens: string

13
src/@context/Pool/index.tsx
View File

@ -118,11 +118,6 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
useEffect(() => { useEffect(() => {
if (!poolData) return if (!poolData) return
// Fees - this will be renamed again in subgraph
const poolFee = getFee(poolData.liquidityProviderFee)
const marketFee = getFee(poolData.marketSwapFee)
const opfFee = getFee(poolData.opcFee)
// Total Liquidity // Total Liquidity
const totalLiquidityInOcean = isValidNumber(poolData.spotPrice) const totalLiquidityInOcean = isValidNumber(poolData.spotPrice)
? new Decimal(poolData.baseTokenLiquidity).add( ? new Decimal(poolData.baseTokenLiquidity).add(
@ -131,12 +126,13 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
: new Decimal(0) : new Decimal(0)
const newPoolInfo = { const newPoolInfo = {
poolFee, liquidityProviderSwapFee: getFee(poolData.liquidityProviderSwapFee),
marketFee, publishMarketSwapFee: getFee(poolData.publishMarketSwapFee),
opfFee, opcFee: getFee(poolData.opcFee),
weightBaseToken: getWeight(poolData.baseTokenWeight), weightBaseToken: getWeight(poolData.baseTokenWeight),
weightDt: getWeight(poolData.datatokenWeight), weightDt: getWeight(poolData.datatokenWeight),
datatokenSymbol: poolData.datatoken.symbol, datatokenSymbol: poolData.datatoken.symbol,
datatokenAddress: poolData.datatoken.address,
baseTokenSymbol: poolData.baseToken.symbol, baseTokenSymbol: poolData.baseToken.symbol,
baseTokenAddress: poolData.baseToken.address, baseTokenAddress: poolData.baseToken.address,
totalPoolTokens: poolData.totalShares, totalPoolTokens: poolData.totalShares,
@ -193,6 +189,7 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
if ( if (
!poolData || !poolData ||
!poolInfo?.totalPoolTokens || !poolInfo?.totalPoolTokens ||
!poolInfoUser?.poolShares ||
!asset?.chainId || !asset?.chainId ||
!accountId || !accountId ||
!poolInfoUser !poolInfoUser

2
src/@types/node_modules.d.ts vendored
View File

@ -1,3 +1,3 @@
declare module 'ethereum-blockies' { declare module 'myetherwallet-blockies' {
export function toDataUrl(address: string): string export function toDataUrl(address: string): string
} }

1
src/@utils/constants.ts Normal file
View File

@ -0,0 +1 @@
export const MAX_DECIMALS = 5

1
src/@utils/nft.ts
View File

@ -112,7 +112,6 @@ export async function setNftMetadata(
'0x' + metadataHash, '0x' + metadataHash,
[] []
) )
const setMetadataTx = await nft.setMetadata( const setMetadataTx = await nft.setMetadata(
asset.nftAddress, asset.nftAddress,
accountId, accountId,

2
src/components/@shared/atoms/Blockies.tsx
View File

@ -1,4 +1,4 @@
import { toDataUrl } from 'ethereum-blockies' import { toDataUrl } from 'myetherwallet-blockies'
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import styles from './Blockies.module.css' import styles from './Blockies.module.css'

7
src/components/Asset/AssetActions/Pool/Add/index.tsx
View File

@ -13,7 +13,7 @@ import DebugOutput from '@shared/DebugOutput'
import { useWeb3 } from '@context/Web3' import { useWeb3 } from '@context/Web3'
import { useAsset } from '@context/Asset' import { useAsset } from '@context/Asset'
import content from '../../../../../../content/price.json' import content from '../../../../../../content/price.json'
import { LoggerInstance, Pool } from '@oceanprotocol/lib' import { calcMaxExactIn, LoggerInstance, Pool } from '@oceanprotocol/lib'
export interface FormAddLiquidity { export interface FormAddLiquidity {
amount: string amount: string
@ -73,11 +73,12 @@ export default function Add({
try { try {
const poolInstance = new Pool(web3) const poolInstance = new Pool(web3)
const amountMaxPool = await poolInstance.getReserve( const poolReserve = await poolInstance.getReserve(
poolAddress, poolAddress,
tokenInAddress tokenInAddress
) )
const amountMaxPool = calcMaxExactIn(poolReserve)
const amountMax = const amountMax =
Number(balance.ocean) > Number(amountMaxPool) Number(balance.ocean) > Number(amountMaxPool)
? amountMaxPool ? amountMaxPool
@ -100,7 +101,7 @@ export default function Add({
// Submit // Submit
async function handleAddLiquidity(amount: string, resetForm: () => void) { async function handleAddLiquidity(amount: string, resetForm: () => void) {
const poolInstance = new Pool(web3) const poolInstance = new Pool(web3)
const minPoolAmountOut = '0' // ? TODO: how to get? const minPoolAmountOut = '0' // ? how to get? : you would get this value by using `calcPoolOutGivenSingleIn` and substracting slippage from that , like we don in trade. it is ok to be 0 here. We can change after we implement global slippage
try { try {
const result = await poolInstance.joinswapExternAmountIn( const result = await poolInstance.joinswapExternAmountIn(

4
src/components/Asset/AssetActions/Pool/Graph/_constants.ts
View File

@ -13,9 +13,9 @@ import {
defaults defaults
} from 'chart.js' } from 'chart.js'
export declare type GraphType = 'liquidity' | 'price' | 'volume' export declare type GraphType = 'tvl' | 'price' | 'volume'
export const graphTypes = ['Liquidity', 'Price', 'Volume'] export const graphTypes = ['TVL', 'Price', 'Volume']
// Chart.js global defaults // Chart.js global defaults
ChartJS.register( ChartJS.register(

36
src/components/Asset/AssetActions/Pool/Graph/index.tsx
View File

@ -13,6 +13,7 @@ import Nav from './Nav'
import { getOptions } from './_utils' import { getOptions } from './_utils'
import { PoolData_poolSnapshots as PoolDataPoolSnapshots } from 'src/@types/subgraph/PoolData' import { PoolData_poolSnapshots as PoolDataPoolSnapshots } from 'src/@types/subgraph/PoolData'
import { usePrices } from '@context/Prices' import { usePrices } from '@context/Prices'
import { MAX_DECIMALS } from '@utils/constants'
export default function Graph({ export default function Graph({
poolSnapshots poolSnapshots
@ -24,7 +25,7 @@ export default function Graph({
const darkMode = useDarkMode(false, darkModeConfig) const darkMode = useDarkMode(false, darkModeConfig)
const [options, setOptions] = useState<ChartOptions<any>>() const [options, setOptions] = useState<ChartOptions<any>>()
const [graphType, setGraphType] = useState<GraphType>('liquidity') const [graphType, setGraphType] = useState<GraphType>('tvl')
const [graphData, setGraphData] = useState<ChartData<any>>() const [graphData, setGraphData] = useState<ChartData<any>>()
// //
@ -35,11 +36,7 @@ export default function Graph({
LoggerInstance.log('[pool graph] Fired getOptions().') LoggerInstance.log('[pool graph] Fired getOptions().')
const symbol = const symbol =
graphType === 'liquidity' graphType === 'tvl' ? currency : poolSnapshots[0]?.baseToken?.symbol
? currency
: // TODO: remove any once baseToken works
// see https://github.com/oceanprotocol/ocean-subgraph/issues/312
(poolSnapshots[0] as any)?.baseToken?.symbol
const options = getOptions(locale, darkMode.value, symbol) const options = getOptions(locale, darkMode.value, symbol)
setOptions(options) setOptions(options)
}, [locale, darkMode.value, graphType, currency, poolSnapshots]) }, [locale, darkMode.value, graphType, currency, poolSnapshots])
@ -52,32 +49,25 @@ export default function Graph({
const timestamps = poolSnapshots.map((item) => { const timestamps = poolSnapshots.map((item) => {
const date = new Date(item.date * 1000) const date = new Date(item.date * 1000)
return `${date.toLocaleDateString(locale)} ${date.toLocaleTimeString( return `${date.toLocaleDateString(locale)}`
locale,
{ hour: '2-digit', minute: '2-digit' }
)}`
}) })
let baseTokenLiquidityCumulative = '0' const tvlHistory = poolSnapshots.map((item) => {
const liquidityHistory = poolSnapshots.map((item) => {
const conversionSpotPrice = prices[currency.toLowerCase()] const conversionSpotPrice = prices[currency.toLowerCase()]
baseTokenLiquidityCumulative = new Decimal(baseTokenLiquidityCumulative)
.add(item.baseTokenLiquidity) const tvl = new Decimal(item.baseTokenLiquidity)
.mul(2) // double baseTokenLiquidity as we have 50/50 weight .mul(2)
.mul(conversionSpotPrice) // convert to user currency .mul(conversionSpotPrice) // convert to user currency
.toString() .toString()
return tvl
return baseTokenLiquidityCumulative
}) })
const priceHistory = poolSnapshots.map((item) => item.spotPrice) const priceHistory = poolSnapshots.map((item) => item.spotPrice)
let volumeCumulative = '0'
const volumeHistory = poolSnapshots.map((item) => { const volumeHistory = poolSnapshots.map((item) => {
volumeCumulative = new Decimal(volumeCumulative) const volume = new Decimal(item.swapVolume)
.add(item.swapVolume) .toDecimalPlaces(MAX_DECIMALS)
.toString() .toString()
return volumeCumulative return volume
}) })
let data let data
@ -89,7 +79,7 @@ export default function Graph({
data = volumeHistory data = volumeHistory
break break
default: default:
data = liquidityHistory data = tvlHistory
break break
} }

24
src/components/Asset/AssetActions/Pool/Remove/index.tsx
View File

@ -9,11 +9,10 @@ import styles from './index.module.css'
import Header from '../Header' import Header from '../Header'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import Actions from '../Actions' import Actions from '../Actions'
import { LoggerInstance, Pool } from '@oceanprotocol/lib' import { LoggerInstance, Pool, calcMaxExactOut } from '@oceanprotocol/lib'
import Token from '../Token' import Token from '../Token'
import FormHelp from '@shared/FormInput/Help' import FormHelp from '@shared/FormInput/Help'
import Button from '@shared/atoms/Button' import Button from '@shared/atoms/Button'
import { getMaxPercentRemove } from '../utils'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import UserLiquidity from '../../UserLiquidity' import UserLiquidity from '../../UserLiquidity'
import InputElement from '@shared/FormInput/InputElement' import InputElement from '@shared/FormInput/InputElement'
@ -77,16 +76,27 @@ export default function Remove({
} }
} }
// TODO: Get and set max percentage
useEffect(() => { useEffect(() => {
if (!accountId || !poolTokens) return if (!accountId || !poolTokens) return
async function getMax() { async function getMax() {
// const amountMaxPercent = await getMaxPercentRemove(poolAddress, poolTokens) const maxTokensToRemoveFromPool = calcMaxExactOut(totalPoolTokens)
// setAmountMaxPercent(amountMaxPercent) const poolTokensDecimal = new Decimal(poolTokens)
const maxTokensToRemoveForUser = maxTokensToRemoveFromPool.greaterThan(
poolTokensDecimal
)
? poolTokensDecimal
: maxTokensToRemoveFromPool
const maxPercent = new Decimal(100)
.mul(maxTokensToRemoveForUser)
.div(poolTokensDecimal)
setAmountMaxPercent(
maxPercent.toDecimalPlaces(0, Decimal.ROUND_DOWN).toString()
)
} }
getMax() getMax()
}, [accountId, poolAddress, poolTokens]) }, [accountId, poolAddress, poolTokens, totalPoolTokens])
const getValues = useRef( const getValues = useRef(
debounce(async (newAmountPoolShares) => { debounce(async (newAmountPoolShares) => {
@ -188,7 +198,7 @@ export default function Remove({
</div> */} </div> */}
</div> </div>
<div className={styles.slippage}> <div className={styles.slippage}>
<strong>Expected price impact</strong> <strong>Slippage Tolerance</strong>
<InputElement <InputElement
name="slippage" name="slippage"
type="select" type="select"

6
src/components/Asset/AssetActions/Pool/index.tsx
View File

@ -46,7 +46,7 @@ export default function Pool(): ReactElement {
baseToken: new Decimal(poolData?.baseTokenLiquidity).toString(), baseToken: new Decimal(poolData?.baseTokenLiquidity).toString(),
datatoken: new Decimal(poolData?.datatokenLiquidity).toString() datatoken: new Decimal(poolData?.datatokenLiquidity).toString()
}} }}
swapFee={poolInfo?.poolFee} swapFee={poolInfo?.liquidityProviderSwapFee}
datatokenSymbol={poolInfo?.datatokenSymbol} datatokenSymbol={poolInfo?.datatokenSymbol}
tokenInAddress={poolInfo?.baseTokenAddress} tokenInAddress={poolInfo?.baseTokenAddress}
tokenInSymbol={poolInfo?.baseTokenSymbol} tokenInSymbol={poolInfo?.baseTokenSymbol}
@ -94,11 +94,11 @@ export default function Pool(): ReactElement {
<TokenList <TokenList
title={ title={
<> <>
Your Liquidity Your Value Locked
<Tooltip <Tooltip
content={content.pool.tooltips.liquidity.replace( content={content.pool.tooltips.liquidity.replace(
'SWAPFEE', 'SWAPFEE',
poolInfo?.poolFee poolInfo?.liquidityProviderSwapFee
)} )}
/> />
{poolInfoUser?.poolShare && ( {poolInfoUser?.poolShare && (

146
src/components/Asset/AssetActions/Trade/FormTrade.tsx
View File

@ -1,5 +1,11 @@
import React, { ReactElement, useState } from 'react' import React, { ReactElement, useState } from 'react'
import { Asset, LoggerInstance } from '@oceanprotocol/lib' import {
AmountsInMaxFee,
AmountsOutMaxFee,
LoggerInstance,
Pool,
TokenInOutMarket
} from '@oceanprotocol/lib'
import * as Yup from 'yup' import * as Yup from 'yup'
import { Formik } from 'formik' import { Formik } from 'formik'
import Actions from '../Pool/Actions' import Actions from '../Pool/Actions'
@ -15,36 +21,33 @@ import { FormTradeData } from './_types'
import { initialValues } from './_constants' import { initialValues } from './_constants'
import content from '../../../../../content/price.json' import content from '../../../../../content/price.json'
import { AssetExtended } from 'src/@types/AssetExtended' import { AssetExtended } from 'src/@types/AssetExtended'
import { usePool } from '@context/Pool'
import { useSiteMetadata } from '@hooks/useSiteMetadata'
export default function FormTrade({ export default function FormTrade({
asset, asset,
balance, balance
maxDt,
maxOcean
}: { }: {
asset: AssetExtended asset: AssetExtended
balance: PoolBalance balance: PoolBalance
maxDt: string
maxOcean: string
}): ReactElement { }): ReactElement {
const { accountId } = useWeb3() const { web3, accountId } = useWeb3()
const { isAssetNetwork } = useAsset() const { isAssetNetwork } = useAsset()
const { debug } = useUserPreferences() const { debug } = useUserPreferences()
const { appConfig } = useSiteMetadata()
const { poolInfo } = usePool()
const [txId, setTxId] = useState<string>() const [txId, setTxId] = useState<string>()
const [coinFrom, setCoinFrom] = useState<string>('OCEAN') const [coinFrom, setCoinFrom] = useState<string>('OCEAN')
const [maximumOcean, setMaximumOcean] = useState(maxOcean) const [maximumBaseToken, setMaximumBaseToken] = useState('0')
const [maximumDt, setMaximumDt] = useState(maxDt) const [maximumDt, setMaximumDt] = useState('0')
const [isWarningAccepted, setIsWarningAccepted] = useState(false) const [isWarningAccepted, setIsWarningAccepted] = useState(false)
const tokenAddress = ''
const tokenSymbol = ''
const validationSchema: Yup.SchemaOf<FormTradeData> = Yup.object() const validationSchema: Yup.SchemaOf<FormTradeData> = Yup.object()
.shape({ .shape({
ocean: Yup.number() baseToken: Yup.number()
.max( .max(
Number(maximumOcean), Number(maximumBaseToken),
(param) => `Must be less or equal to ${param.max}` (param) => `Must be less or equal to ${param.max}`
) )
.min(0.001, (param) => `Must be more or equal to ${param.min}`) .min(0.001, (param) => `Must be more or equal to ${param.min}`)
@ -64,32 +67,81 @@ export default function FormTrade({
.defined() .defined()
async function handleTrade(values: FormTradeData) { async function handleTrade(values: FormTradeData) {
if (!web3 || !asset || !poolInfo || !values) return
try { try {
const impact = new Decimal( const poolInstance = new Pool(web3)
new Decimal(100).sub(new Decimal(values.slippage)) let tx
).div(100) if (values.output === 'exactIn') {
const precision = 15 const tokenInOutMarket: TokenInOutMarket = {
// const tx = tokenIn:
// values.type === 'buy' values.type === 'sell'
// ? await ocean.pool.buyDTWithExactOcean( ? poolInfo.datatokenAddress
// accountId, : poolInfo.baseTokenAddress,
// price.address, tokenOut:
// new Decimal(values.datatoken) values.type === 'sell'
// .mul(impact) ? poolInfo.baseTokenAddress
// .toFixed(precision) : poolInfo.datatokenAddress,
// .toString(), marketFeeAddress: appConfig.marketFeeAddress
// new Decimal(values.ocean).toFixed(precision).toString() }
// )
// : await ocean.pool.sellDT( const amountsInOutMaxFee: AmountsInMaxFee = {
// accountId, tokenAmountIn:
// price.address, values.type === 'sell' ? values.datatoken : values.baseToken,
// new Decimal(values.datatoken).toFixed(precision).toString(), minAmountOut: new Decimal(
// new Decimal(values.ocean) values.type === 'sell' ? values.baseToken : values.datatoken
// .mul(impact) )
// .toFixed(precision) .mul(
// .toString() new Decimal(1)
// ) .minus(new Decimal(values.slippage).div(new Decimal(100)))
// setTxId(tx?.transactionHash) .toString()
)
.toString(),
swapMarketFee: appConfig.consumeMarketPoolSwapFee
}
tx = await poolInstance.swapExactAmountIn(
accountId,
asset.accessDetails.addressOrId,
tokenInOutMarket,
amountsInOutMaxFee
)
}
if (values.output === 'exactOut') {
const tokenOutMarket: TokenInOutMarket = {
tokenIn:
values.type === 'sell'
? poolInfo.datatokenAddress
: poolInfo.baseTokenAddress,
tokenOut:
values.type === 'sell'
? poolInfo.baseTokenAddress
: poolInfo.datatokenAddress,
marketFeeAddress: appConfig.marketFeeAddress
}
const amountsOutMaxFee: AmountsOutMaxFee = {
maxAmountIn: new Decimal(
values.type === 'sell' ? values.datatoken : values.baseToken
)
.mul(
new Decimal(1)
.plus(new Decimal(values.slippage).div(new Decimal(100)))
.toString()
)
.toString(),
tokenAmountOut:
values.type === 'sell' ? values.baseToken : values.datatoken,
swapMarketFee: appConfig.consumeMarketPoolSwapFee
}
tx = await poolInstance.swapExactAmountOut(
accountId,
asset.accessDetails.addressOrId,
tokenOutMarket,
amountsOutMaxFee
)
}
setTxId(tx?.transactionHash)
} catch (error) { } catch (error) {
LoggerInstance.error(error.message) LoggerInstance.error(error.message)
toast.error(error.message) toast.error(error.message)
@ -112,10 +164,8 @@ export default function FormTrade({
<Swap <Swap
asset={asset} asset={asset}
balance={balance} balance={balance}
maxDt={maxDt}
maxOcean={maxOcean}
setCoin={setCoinFrom} setCoin={setCoinFrom}
setMaximumOcean={setMaximumOcean} setMaximumBaseToken={setMaximumBaseToken}
setMaximumDt={setMaximumDt} setMaximumDt={setMaximumDt}
/> />
) : ( ) : (
@ -154,8 +204,16 @@ export default function FormTrade({
} }
action={submitForm} action={submitForm}
txId={txId} txId={txId}
tokenAddress={tokenAddress} tokenAddress={
tokenSymbol={tokenSymbol} values.type === 'buy'
? poolInfo.baseTokenAddress
: poolInfo.datatokenAddress
}
tokenSymbol={
values.type === 'buy'
? poolInfo.baseTokenSymbol
: poolInfo.datatokenSymbol
}
setSubmitting={setSubmitting} setSubmitting={setSubmitting}
/> />

105
src/components/Asset/AssetActions/Trade/Output.tsx
View File

@ -4,73 +4,54 @@ import { useAsset } from '@context/Asset'
import Token from '../Pool/Token' import Token from '../Pool/Token'
import styles from './Output.module.css' import styles from './Output.module.css'
import { isValidNumber } from '@utils/numbers'
import Decimal from 'decimal.js' import Decimal from 'decimal.js'
import { FormTradeData } from './_types' import { FormTradeData } from './_types'
import { usePool } from '@context/Pool'
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 }) Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
export default function Output({ export default function Output({
dtSymbol, poolAddress,
oceanSymbol, lpSwapFee
poolAddress
}: { }: {
dtSymbol: string
oceanSymbol: string
poolAddress: string poolAddress: string
lpSwapFee: string
}): ReactElement { }): ReactElement {
const { isAssetNetwork } = useAsset() const { isAssetNetwork } = useAsset()
const [maxOutput, setMaxOutput] = useState<string>() const { poolInfo } = usePool()
const [swapFee, setSwapFee] = useState<string>() const [outputWithSlippage, setOutputWithSlippage] = useState<string>('0')
const [swapFeeValue, setSwapFeeValue] = useState<string>()
// Connect with form // Connect with form
const { values }: FormikContextType<FormTradeData> = useFormikContext() const { values }: FormikContextType<FormTradeData> = useFormikContext()
// Get swap fee
useEffect(() => {
if (!poolAddress || !isAssetNetwork) return
async function getSwapFee() {
// const swapFee = await ocean.pool.getSwapFee(poolAddress)
// // swapFee is tricky: to get 0.1% you need to convert from 0.001
// setSwapFee(
// isValidNumber(swapFee) ? new Decimal(swapFee).mul(100).toString() : '0'
// )
const value =
values.type === 'buy'
? isValidNumber(swapFee) && isValidNumber(values.baseToken)
? new Decimal(swapFee).mul(new Decimal(values.baseToken))
: 0
: isValidNumber(swapFee) && isValidNumber(values.datatoken)
? new Decimal(swapFee).mul(new Decimal(values.datatoken))
: 0
setSwapFeeValue(value.toString())
}
getSwapFee()
}, [poolAddress, values, isAssetNetwork, swapFee])
// Get output values // Get output values
useEffect(() => { useEffect(() => {
if (!poolAddress || !isAssetNetwork) return if (!poolAddress || !isAssetNetwork) return
async function getOutput() { async function getOutput() {
// Minimum received if (!values.baseToken || !values.datatoken || !values.output) return
// TODO: check if this here is redundant cause we call some of that already in Swap.tsx
const maxImpact = 1 - Number(values.slippage) / 100
const maxPrice =
values.type === 'buy'
? isValidNumber(values.datatoken) && isValidNumber(maxImpact)
? new Decimal(values.datatoken)
.mul(new Decimal(maxImpact))
.toString()
: '0'
: isValidNumber(values.baseToken) && isValidNumber(maxImpact)
? new Decimal(values.baseToken).mul(new Decimal(maxImpact)).toString()
: '0'
setMaxOutput(maxPrice) const output =
values.output === 'exactIn'
? new Decimal(
values.type === 'sell' ? values.baseToken : values.datatoken
)
.mul(
new Decimal(1)
.minus(new Decimal(values.slippage).div(new Decimal(100)))
.toString()
)
.toString()
: new Decimal(
values.type === 'sell' ? values.datatoken : values.baseToken
)
.mul(
new Decimal(1)
.plus(new Decimal(values.slippage).div(new Decimal(100)))
.toString()
)
.toString()
setOutputWithSlippage(output)
} }
getOutput() getOutput()
}, [poolAddress, values, isAssetNetwork]) }, [poolAddress, values, isAssetNetwork])
@ -78,19 +59,35 @@ export default function Output({
return ( return (
<div className={styles.output}> <div className={styles.output}>
<div> <div>
<p>Minimum Received</p> <p>
{values.output === 'exactIn' ? 'Minimum Received' : 'Maximum Sent'}
</p>
<Token <Token
symbol={values.type === 'buy' ? dtSymbol : oceanSymbol} symbol={
balance={maxOutput} values.type === 'buy'
? values.output === 'exactIn'
? poolInfo.datatokenSymbol
: poolInfo.baseTokenSymbol
: values.output === 'exactIn'
? poolInfo.baseTokenSymbol
: poolInfo.datatokenSymbol
}
balance={outputWithSlippage}
/> />
</div> </div>
<div> <div>
<p>Swap fee</p> <p>Swap fee</p>
<Token <Token
symbol={`${values.type === 'buy' ? oceanSymbol : dtSymbol} ${ symbol={`${
swapFee ? `(${swapFee}%)` : '' values.type === 'buy'
? poolInfo.baseTokenSymbol
: poolInfo.datatokenSymbol
} ${
poolInfo.liquidityProviderSwapFee
? `(${poolInfo.liquidityProviderSwapFee}%)`
: ''
}`} }`}
balance={swapFeeValue} balance={lpSwapFee}
/> />
</div> </div>
</div> </div>

357
src/components/Asset/AssetActions/Trade/Swap.tsx
View File

@ -7,44 +7,54 @@ import { FormikContextType, useFormikContext } from 'formik'
import Output from './Output' import Output from './Output'
import Slippage from './Slippage' import Slippage from './Slippage'
import PriceImpact from './PriceImpact' import PriceImpact from './PriceImpact'
import Decimal from 'decimal.js' import Decimal from 'decimal.js'
import { useAsset } from '@context/Asset' import { useAsset } from '@context/Asset'
import { useWeb3 } from '@context/Web3'
import { FormTradeData, TradeItem } from './_types' import { FormTradeData, TradeItem } from './_types'
import { Asset } from '@oceanprotocol/lib' import {
calcMaxExactIn,
calcMaxExactOut,
LoggerInstance,
Pool,
PoolPriceAndFees
} from '@oceanprotocol/lib'
import { AssetExtended } from 'src/@types/AssetExtended' import { AssetExtended } from 'src/@types/AssetExtended'
import { usePool } from '@context/Pool'
import { useSiteMetadata } from '@hooks/useSiteMetadata'
import { MAX_DECIMALS } from '@utils/constants'
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 }) // Decimal.set({ toExpNeg: -15, precision: 5, rounding: Decimal.ROUND_DOWN })
export default function Swap({ export default function Swap({
asset, asset,
maxDt,
maxOcean,
balance, balance,
setMaximumDt, setMaximumDt,
setMaximumOcean, setMaximumBaseToken,
setCoin setCoin
}: { }: {
asset: AssetExtended asset: AssetExtended
maxDt: string
maxOcean: string
balance: PoolBalance balance: PoolBalance
setMaximumDt: (value: string) => void setMaximumDt: (value: string) => void
setMaximumOcean: (value: string) => void setMaximumBaseToken: (value: string) => void
setCoin: (value: string) => void setCoin: (value: string) => void
}): ReactElement { }): ReactElement {
const { isAssetNetwork } = useAsset() const { isAssetNetwork } = useAsset()
const [oceanItem, setOceanItem] = useState<TradeItem>({ const { web3 } = useWeb3()
const { poolInfo, poolData } = usePool()
const { appConfig } = useSiteMetadata()
const [baseTokenItem, setBaseTokenItem] = useState<TradeItem>({
amount: '0', amount: '0',
token: asset.accessDetails.baseToken?.symbol, token: poolInfo?.baseTokenSymbol,
maxAmount: '0' maxAmount: '0',
address: poolInfo?.baseTokenAddress
}) })
const [dtItem, setDtItem] = useState<TradeItem>({ const [dtItem, setDtItem] = useState<TradeItem>({
amount: '0', amount: '0',
token: asset.accessDetails.datatoken.symbol, token: poolInfo?.datatokenSymbol,
maxAmount: '0' maxAmount: '0',
address: poolInfo?.datatokenAddress
}) })
const { const {
setFieldValue, setFieldValue,
values, values,
@ -56,148 +66,260 @@ export default function Swap({
const [spotPrice, setSpotPrice] = useState<string>() const [spotPrice, setSpotPrice] = useState<string>()
const [totalValue, setTotalValue] = useState<string>() const [totalValue, setTotalValue] = useState<string>()
const [tokenAmount, setTokenAmount] = useState<string>() const [tokenAmount, setTokenAmount] = useState<string>()
const [lpSwapFee, setLpSwapFee] = useState<string>()
useEffect(() => { useEffect(() => {
if (!asset || !balance || !values?.type) return if (!asset || !balance || !values?.type || !web3) return
const poolInstance = new Pool(web3)
async function calculateMaximum() { async function calculateMaximum() {
const maxDtFromPool =
values.type === 'buy'
? calcMaxExactIn(poolData.datatokenLiquidity)
: calcMaxExactOut(poolData.datatokenLiquidity)
const maxBaseTokenFromPool =
values.type === 'buy'
? calcMaxExactOut(poolData.baseTokenLiquidity)
: calcMaxExactIn(poolData.baseTokenLiquidity)
const amountDataToken = const amountDataToken =
values.type === 'buy' values.type === 'buy'
? new Decimal(maxDt) ? maxDtFromPool
: new Decimal(balance.baseToken).greaterThan(
calcMaxExactIn(poolData.datatokenLiquidity)
)
? calcMaxExactIn(poolData.datatokenLiquidity)
: new Decimal(balance.datatoken) : new Decimal(balance.datatoken)
const amountOcean =
const amountBaseToken =
values.type === 'buy' values.type === 'buy'
? new Decimal(balance.baseToken) ? new Decimal(balance.baseToken).greaterThan(
: new Decimal(maxOcean) calcMaxExactIn(poolData.baseTokenLiquidity)
)
? calcMaxExactIn(poolData.baseTokenLiquidity)
: new Decimal(balance.baseToken)
: maxBaseTokenFromPool
// const maxBuyOcean = await ocean.pool.getOceanReceived( try {
// price.address, const maxBuyBaseToken: PoolPriceAndFees =
// `${amountDataToken.toString()}` await poolInstance.getAmountOutExactIn(
// ) asset.accessDetails.addressOrId,
// const maxBuyDt = await ocean.pool.getDTReceived( poolInfo.datatokenAddress,
// price.address, poolInfo.baseTokenAddress,
// `${amountOcean.toString()}` amountDataToken.toString(),
// ) appConfig.consumeMarketPoolSwapFee
)
// const maximumDt = const maxBuyDt: PoolPriceAndFees =
// values.type === 'buy' await poolInstance.getAmountOutExactIn(
// ? amountDataToken.greaterThan(new Decimal(maxBuyDt)) asset.accessDetails?.addressOrId,
// ? maxBuyDt poolInfo.baseTokenAddress,
// : amountDataToken poolInfo.datatokenAddress,
// : amountDataToken.greaterThan(new Decimal(balance.datatoken)) amountBaseToken.toString(),
// ? balance.datatoken appConfig.consumeMarketPoolSwapFee
// : amountDataToken )
const maximumDt =
values.type === 'buy'
? amountDataToken.greaterThan(new Decimal(maxBuyDt.tokenAmount))
? maxBuyDt.tokenAmount
: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString()
: amountDataToken.greaterThan(new Decimal(balance.datatoken))
? balance.datatoken
: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString()
// const maximumOcean = const maximumBaseToken =
// values.type === 'sell' values.type === 'sell'
// ? amountOcean.greaterThan(new Decimal(maxBuyOcean)) ? amountBaseToken.greaterThan(
// ? maxBuyOcean new Decimal(maxBuyBaseToken.tokenAmount)
// : amountOcean )
// : amountOcean.greaterThan(new Decimal(balance.ocean)) ? maxBuyBaseToken.tokenAmount
// ? balance.ocean : amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString()
// : amountOcean : amountBaseToken.greaterThan(new Decimal(balance.baseToken))
? balance.baseToken
: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString()
// setMaximumDt(maximumDt.toString()) setMaximumDt(maximumDt)
// setMaximumOcean(maximumOcean.toString()) setMaximumBaseToken(maximumBaseToken)
// setOceanItem((prevState) => ({ setBaseTokenItem((prevState) => ({
// ...prevState, ...prevState,
// amount: amountOcean.toString(), amount: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString(),
// maxAmount: maximumOcean.toString() maxAmount: maximumBaseToken
// })) }))
// setDtItem((prevState) => ({ setDtItem((prevState) => ({
// ...prevState, ...prevState,
// amount: amountDataToken.toString(), amount: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString(),
// maxAmount: maximumDt.toString() maxAmount: maximumDt
// })) }))
} catch (error) {
LoggerInstance.error(error.message)
}
} }
calculateMaximum() calculateMaximum()
}, [ }, [
asset, poolData,
maxOcean,
maxDt,
balance, balance,
values?.type, values.type,
setMaximumDt, setMaximumDt,
setMaximumOcean setMaximumBaseToken,
asset,
web3,
dtItem.token,
baseTokenItem.token,
poolInfo.liquidityProviderSwapFee,
poolInfo.datatokenAddress,
poolInfo.baseTokenAddress,
appConfig.consumeMarketPoolSwapFee
]) ])
const switchTokens = () => { const switchTokens = () => {
setFieldValue('type', values.type === 'buy' ? 'sell' : 'buy') setFieldValue('type', values.type === 'buy' ? 'sell' : 'buy')
setCoin(values.type === 'sell' ? 'OCEAN' : asset.datatokens[0].symbol) setCoin(
values.type === 'sell'
? poolInfo.baseTokenSymbol
: poolInfo.datatokenSymbol
)
// don't reset form because we don't want to reset type // don't reset form because we don't want to reset type
setFieldValue('datatoken', 0) setFieldValue('datatoken', 0)
setFieldValue('ocean', 0) setFieldValue('baseToken', 0)
setErrors({}) setErrors({})
} }
const handleValueChange = async (name: string, value: number) => { const handleValueChange = async (name: string, value: number) => {
const tokenIn = '' try {
const tokenOut = '' let tokenIn = ''
let newValue let tokenOut = ''
const poolInstance = new Pool(web3)
let newValue: PoolPriceAndFees
// if (name === 'ocean') { if (name === 'baseToken') {
// if (values.type === 'sell') { if (values.type === 'sell') {
// newValue = await ocean.pool.getDTNeeded(price.address, value.toString()) newValue = await poolInstance.getAmountInExactOut(
asset.accessDetails.addressOrId,
dtItem.address,
baseTokenItem.address,
value.toString(),
appConfig.consumeMarketPoolSwapFee
)
// setTotalValue(newValue) setFieldValue('output', 'exactOut')
// setTokenAmount(value.toString())
// tokenIn = ddo.services[0].datatokenAddress setTotalValue(
// tokenOut = ocean.pool.oceanAddress new Decimal(newValue.tokenAmount)
// } else { .toDecimalPlaces(MAX_DECIMALS)
// newValue = await ocean.pool.getDTReceived( .toString()
// price.address, )
// value.toString() setLpSwapFee(
// ) new Decimal(newValue.liquidityProviderSwapFeeAmount)
.toDecimalPlaces(MAX_DECIMALS)
.toString()
)
setTokenAmount(value.toString())
// setTotalValue(value.toString()) tokenIn = poolInfo.datatokenAddress
// setTokenAmount(newValue) tokenOut = poolInfo.baseTokenAddress
// tokenIn = ocean.pool.oceanAddress } else {
// tokenOut = ddo.services[0].datatokenAddress newValue = await poolInstance.getAmountOutExactIn(
// } asset.accessDetails.addressOrId,
// } else { baseTokenItem.address,
// if (values.type === 'sell') { dtItem.address,
// newValue = await ocean.pool.getOceanReceived( value.toString(),
// price.address, appConfig.consumeMarketPoolSwapFee
// value.toString() )
// )
// setTotalValue(value.toString()) setFieldValue('output', 'exactIn')
// setTokenAmount(newValue) setTotalValue(value.toString())
// tokenIn = ddo.services[0].datatokenAddress setTokenAmount(
// tokenOut = ocean.pool.oceanAddress new Decimal(newValue.tokenAmount)
// } else { .toDecimalPlaces(MAX_DECIMALS)
// newValue = await ocean.pool.getOceanNeeded( .toString()
// price.address, )
// value.toString() setLpSwapFee(
// ) new Decimal(newValue.liquidityProviderSwapFeeAmount)
.toDecimalPlaces(MAX_DECIMALS)
.toString()
)
tokenIn = poolInfo.baseTokenAddress
tokenOut = poolInfo.datatokenAddress
}
} else {
if (values.type === 'sell') {
newValue = await poolInstance.getAmountOutExactIn(
asset.accessDetails.addressOrId,
dtItem.address,
baseTokenItem.address,
value.toString(),
appConfig.consumeMarketPoolSwapFee
)
// setTotalValue(newValue) setFieldValue('output', 'exactIn')
// setTokenAmount(value.toString()) setTotalValue(value.toString())
// tokenIn = ocean.pool.oceanAddress setTokenAmount(
// tokenOut = ddo.services[0].datatokenAddress new Decimal(newValue.tokenAmount)
// } .toDecimalPlaces(MAX_DECIMALS)
// } .toString()
)
setLpSwapFee(
new Decimal(newValue.liquidityProviderSwapFeeAmount)
.toDecimalPlaces(MAX_DECIMALS)
.toString()
)
tokenIn = poolInfo.datatokenAddress
tokenOut = poolInfo.baseTokenAddress
} else {
newValue = await poolInstance.getAmountInExactOut(
asset.accessDetails.addressOrId,
baseTokenItem.address,
dtItem.address,
value.toString(),
appConfig.consumeMarketPoolSwapFee
)
await setFieldValue(name === 'ocean' ? 'datatoken' : 'ocean', newValue) setFieldValue('output', 'exactOut')
// const spotPrice = await ocean.pool.getSpotPrice( setTotalValue(
// price.address, new Decimal(newValue.tokenAmount)
// tokenIn, .toDecimalPlaces(MAX_DECIMALS)
// tokenOut .toString()
// ) )
setTokenAmount(value.toString())
setLpSwapFee(
new Decimal(newValue.liquidityProviderSwapFeeAmount)
.toDecimalPlaces(MAX_DECIMALS)
.toString()
)
tokenIn = poolInfo.baseTokenAddress
tokenOut = poolInfo.datatokenAddress
}
}
// setSpotPrice(spotPrice) await setFieldValue(
validateForm() name === 'baseToken' ? 'datatoken' : 'baseToken',
new Decimal(newValue.tokenAmount)
.toDecimalPlaces(MAX_DECIMALS)
.toString()
)
const spotPrice = await poolInstance.getSpotPrice(
asset.accessDetails.addressOrId,
tokenIn,
tokenOut,
appConfig.consumeMarketPoolSwapFee
)
setSpotPrice(spotPrice)
validateForm()
} catch (ex) {
LoggerInstance.error(ex)
}
} }
return ( return (
<div className={styles.swap}> <div className={styles.swap}>
<TradeInput <TradeInput
name={values.type === 'sell' ? 'datatoken' : 'ocean'} name={values.type === 'sell' ? 'datatoken' : 'baseToken'}
item={values.type === 'sell' ? dtItem : oceanItem} item={values.type === 'sell' ? dtItem : baseTokenItem}
disabled={!isAssetNetwork} disabled={!isAssetNetwork}
handleValueChange={handleValueChange} handleValueChange={handleValueChange}
/> />
@ -212,16 +334,15 @@ export default function Swap({
</Button> </Button>
<TradeInput <TradeInput
name={values.type === 'sell' ? 'ocean' : 'datatoken'} name={values.type === 'sell' ? 'baseToken' : 'datatoken'}
item={values.type === 'sell' ? oceanItem : dtItem} item={values.type === 'sell' ? baseTokenItem : dtItem}
disabled={!isAssetNetwork} disabled={!isAssetNetwork}
handleValueChange={handleValueChange} handleValueChange={handleValueChange}
/> />
<Output <Output
dtSymbol={dtItem.token}
oceanSymbol={oceanItem.token}
poolAddress={asset.accessDetails?.addressOrId} poolAddress={asset.accessDetails?.addressOrId}
lpSwapFee={lpSwapFee}
/> />
<PriceImpact <PriceImpact

1
src/components/Asset/AssetActions/Trade/TradeInput.module.css
View File

@ -16,7 +16,6 @@
.tradeInput div[class*='prefix'] { .tradeInput div[class*='prefix'] {
min-width: 6.5rem; min-width: 6.5rem;
width: fit-content;
justify-content: center; justify-content: center;
} }

8
src/components/Asset/AssetActions/Trade/TradeInput.tsx
View File

@ -34,7 +34,7 @@ export default function TradeInput({
}: FormikContextType<FormTradeData> = useFormikContext() }: FormikContextType<FormTradeData> = useFormikContext()
const isTopField = const isTopField =
(name === 'ocean' && values.type === 'buy') || (name === 'baseToken' && values.type === 'buy') ||
(name === 'datatoken' && values.type === 'sell') (name === 'datatoken' && values.type === 'sell')
const titleAvailable = isTopField ? `Balance` : `Available from pool` const titleAvailable = isTopField ? `Balance` : `Available from pool`
const titleMaximum = isTopField ? `Maximum to spend` : `Maximum to receive` const titleMaximum = isTopField ? `Maximum to spend` : `Maximum to receive`
@ -54,6 +54,7 @@ export default function TradeInput({
<Input <Input
type="number" type="number"
max={`${item?.maxAmount}`} max={`${item?.maxAmount}`}
min="0"
prefix={item?.token} prefix={item?.token}
placeholder="0" placeholder="0"
field={field} field={field}
@ -68,7 +69,8 @@ export default function TradeInput({
/> />
)} )}
</Field> </Field>
{!isTopField && (
{/* {!isTopField && (
<Button <Button
className={styles.buttonMax} className={styles.buttonMax}
disabled={disabled} disabled={disabled}
@ -81,7 +83,7 @@ export default function TradeInput({
> >
Use Max Use Max
</Button> </Button>
)} )} */}
</section> </section>
) )
} }

1
src/components/Asset/AssetActions/Trade/_constants.ts
View File

@ -4,6 +4,7 @@ export const initialValues: FormTradeData = {
baseToken: undefined, baseToken: undefined,
datatoken: undefined, datatoken: undefined,
type: 'buy', type: 'buy',
output: 'exactIn',
slippage: '5' slippage: '5'
} }

3
src/components/Asset/AssetActions/Trade/_types.ts
View File

@ -1,6 +1,8 @@
export interface FormTradeData extends PoolBalance { export interface FormTradeData extends PoolBalance {
// in reference to datatoken, buy = swap from ocean to dt ( buy dt) , sell = swap from dt to ocean (sell dt) // in reference to datatoken, buy = swap from ocean to dt ( buy dt) , sell = swap from dt to ocean (sell dt)
type: 'buy' | 'sell' type: 'buy' | 'sell'
// based on what the user inputs, if he fill the top input it is 'exactIn'
output: 'exactIn' | 'exactOut'
slippage: string slippage: string
} }
@ -8,4 +10,5 @@ export interface TradeItem {
amount: string amount: string
token: string token: string
maxAmount: string maxAmount: string
address: string
} }

58
src/components/Asset/AssetActions/Trade/index.tsx
View File

@ -2,8 +2,10 @@ import React, { ReactElement, useEffect, useState } from 'react'
import FormTrade from './FormTrade' import FormTrade from './FormTrade'
import { useAsset } from '@context/Asset' import { useAsset } from '@context/Asset'
import { useWeb3 } from '@context/Web3' import { useWeb3 } from '@context/Web3'
import { isValidNumber } from '@utils/numbers'
import Decimal from 'decimal.js' import Decimal from 'decimal.js'
import { Datatoken } from '@oceanprotocol/lib' import { Datatoken, LoggerInstance, Pool } from '@oceanprotocol/lib'
import { usePool } from '@context/Pool'
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 }) Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
@ -12,8 +14,7 @@ export default function Trade(): ReactElement {
const { isAssetNetwork } = useAsset() const { isAssetNetwork } = useAsset()
const [tokenBalance, setTokenBalance] = useState<PoolBalance>() const [tokenBalance, setTokenBalance] = useState<PoolBalance>()
const { asset } = useAsset() const { asset } = useAsset()
const [maxDt, setMaxDt] = useState('0') const { poolInfo } = usePool()
const [maxOcean, setMaxOcean] = useState('0')
// Get datatoken balance, and combine with OCEAN balance from hooks into one object // Get datatoken balance, and combine with OCEAN balance from hooks into one object
useEffect(() => { useEffect(() => {
@ -23,14 +24,14 @@ export default function Trade(): ReactElement {
!isAssetNetwork || !isAssetNetwork ||
!balance?.ocean || !balance?.ocean ||
!accountId || !accountId ||
!asset?.services[0].datatokenAddress !poolInfo?.datatokenAddress
) )
return return
async function getTokenBalance() { async function getTokenBalance() {
const datatokenInstance = new Datatoken(web3) const datatokenInstance = new Datatoken(web3)
const dtBalance = await datatokenInstance.balance( const dtBalance = await datatokenInstance.balance(
asset.services[0].datatokenAddress, poolInfo.datatokenAddress,
accountId accountId
) )
setTokenBalance({ setTokenBalance({
@ -39,44 +40,13 @@ export default function Trade(): ReactElement {
}) })
} }
getTokenBalance() getTokenBalance()
}, [web3, balance.ocean, accountId, asset, isAssetNetwork]) }, [
web3,
balance.ocean,
accountId,
poolInfo?.datatokenAddress,
isAssetNetwork
])
// Get maximum amount for either OCEAN or datatoken return <FormTrade asset={asset} balance={tokenBalance} />
useEffect(() => {
if (
!isAssetNetwork ||
!asset.accessDetails ||
asset.accessDetails.price === 0
)
return
async function getMaximum() {
// const maxTokensInPool = await ocean.pool.getDTMaxBuyQuantity(
// price.address
// )
// setMaxDt(
// isValidNumber(maxTokensInPool)
// ? new Decimal(maxTokensInPool).toString()
// : '0'
// )
// const maxOceanInPool = await ocean.pool.getOceanMaxBuyQuantity(
// price.address
// )
// setMaxOcean(
// isValidNumber(maxOceanInPool)
// ? new Decimal(maxOceanInPool).toString()
// : '0'
// )
}
getMaximum()
}, [isAssetNetwork, balance.ocean, asset])
return (
<FormTrade
asset={asset}
balance={tokenBalance}
maxDt={maxDt}
maxOcean={maxOcean}
/>
)
} }

3
src/components/Publish/_utils.ts
View File

@ -211,7 +211,8 @@ export async function createTokensAndPricing(
mpFeeAddress: appConfig.marketFeeAddress, mpFeeAddress: appConfig.marketFeeAddress,
feeToken: config.oceanTokenAddress, feeToken: config.oceanTokenAddress,
feeAmount: appConfig.publisherMarketOrderFee, feeAmount: appConfig.publisherMarketOrderFee,
cap: '1000', // max number
cap: '115792089237316195423570985008687907853269984665640564039457',
name: values.services[0].dataTokenOptions.name, name: values.services[0].dataTokenOptions.name,
symbol: values.services[0].dataTokenOptions.symbol symbol: values.services[0].dataTokenOptions.symbol
} }