diff --git a/README.md b/README.md index fa85feadb..181e2c65f 100644 --- a/README.md +++ b/README.md @@ -44,4 +44,3 @@ The interface will not work on other networks. ## Attribution This code was adapted from this Uniswap repo: [uniswap-interface](https://github.com/Uniswap/uniswap-interface) - diff --git a/package-lock.json b/package-lock.json index 5611bced4..7c58bd8f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@pangolindex/interface", - "version": "1.0.55", + "version": "1.0.56-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@pangolindex/interface", - "version": "1.0.54-dev.0", + "version": "1.0.54-dev.6", "hasInstallScript": true, "license": "GPL-3.0-or-later", "dependencies": { @@ -88,6 +88,7 @@ "ajv": "6.12.6", "lint-staged": "12.3.7", "react-use": "15.3.8", + "recharts": "2.1.13", "multihashes": "3.1.2", "@typescript-eslint/eslint-plugin": "4.6.0", "react-router-dom": "5.3.0", @@ -100,7 +101,7 @@ "@types/testing-library__cypress": "5.0.9", "@ethersproject/strings": "5.6.1", "graphql-tag": "2.12.6", - "@pangolindex/components": "4.2.0-rc.0", + "@pangolindex/components": "4.2.0", "styled-components": "4.4.1", "@types/multicodec": "1.0.0", "numeral": "2.0.6", @@ -210,12 +211,6 @@ "node": ">=0.10.0" } }, - "node_modules/@pangolindex/components/node_modules/recharts/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - }, "node_modules/istanbul-lib-instrument/node_modules/semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -1711,6 +1706,19 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/cache": { + "version": "11.10.3", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz", + "integrity": "sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==", + "dev": true, + "dependencies": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.0.13" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -2391,6 +2399,19 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/recharts/node_modules/react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "dev": true, + "dependencies": { + "lodash": "^4.17.21" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/is-reference": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", @@ -2730,6 +2751,19 @@ "npm": ">=2.0.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/serialize": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz", + "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==", + "dev": true, + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, "node_modules/cli-table3/node_modules/strip-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", @@ -3185,6 +3219,15 @@ "node": ">=4" } }, + "node_modules/@pangolindex/components/node_modules/uuid": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz", + "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz", @@ -3623,6 +3666,21 @@ "semver": "bin/semver.js" } }, + "node_modules/recharts/node_modules/react-smooth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.1.tgz", + "integrity": "sha512-Own9TA0GPPf3as4vSwFhDouVfXP15ie/wIHklhyKBH5AN6NFtdk0UpHBnonV11BtqDkAWlt40MOUc+5srmW7NA==", + "dev": true, + "dependencies": { + "fast-equals": "^2.0.0", + "react-transition-group": "2.9.0" + }, + "peerDependencies": { + "prop-types": "^15.6.0", + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@types/sinonjs__fake-timers": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz", @@ -4023,6 +4081,29 @@ "node": ">= 10.14.2" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.10.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz", + "integrity": "sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.0", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -4614,6 +4695,12 @@ "node": ">=7.0.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", + "dev": true + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -7098,6 +7185,12 @@ "node": ">=8" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", + "dev": true + }, "node_modules/colorette": { "version": "2.0.19", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz", @@ -7888,6 +7981,12 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==", + "dev": true + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -8484,6 +8583,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==", + "dev": true + }, "node_modules/@ethersproject/pbkdf2": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/@ethersproject/pbkdf2/-/pbkdf2-5.6.0.tgz", @@ -8726,6 +8831,12 @@ "node": ">= 10.14.2" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==", + "dev": true + }, "node_modules/react-universal-interface": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", @@ -9516,6 +9627,19 @@ "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==", "dev": true }, + "node_modules/@pangolindex/components/node_modules/react-tabs": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.2.1.tgz", + "integrity": "sha512-nQcEN3KrAsSry6f9Jz2oyMQsnh+sLEy31YjlskL/mnI3KU/c7BeyD1VzHZmmcJ15UEFu12pYOXYkdTzZ0uyIbw==", + "dev": true, + "dependencies": { + "clsx": "^1.1.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0" + } + }, "node_modules/unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", @@ -11043,6 +11167,12 @@ "node": ">=4.0.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", + "dev": true + }, "node_modules/@ethersproject/strings": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/@ethersproject/strings/-/strings-5.6.1.tgz", @@ -12134,6 +12264,25 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/@pangolindex/components/node_modules/react-select": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.4.0.tgz", + "integrity": "sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@uniswap/v2-sdk": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@uniswap/v2-sdk/-/v2-sdk-3.0.1.tgz", @@ -12331,6 +12480,18 @@ "process": "^0.11.10" } }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/object-is": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", @@ -15949,22 +16110,6 @@ "safe-event-emitter": "^1.0.1" } }, - "node_modules/@pangolindex/components/node_modules/recharts/node_modules/react-smooth/node_modules/react-transition-group": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", - "dev": true, - "dependencies": { - "dom-helpers": "^3.4.0", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": ">=15.0.0", - "react-dom": ">=15.0.0" - } - }, "node_modules/log-update/node_modules/ansi-escapes": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", @@ -16565,6 +16710,12 @@ "node": ">=8" } }, + "node_modules/@emotion/babel-plugin/node_modules/stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==", + "dev": true + }, "node_modules/find-cache-dir/node_modules/p-try": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", @@ -18215,9 +18366,9 @@ "dev": true }, "node_modules/@pangolindex/components": { - "version": "4.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@pangolindex/components/-/components-4.2.0-rc.0.tgz", - "integrity": "sha512-5dK/mP1n9BRE84VYScr4IBucJwUZBlt3KF/LinYAXsPybODGrZML4/Rv9ZBAFgnrSBwc/j1HmIYD6gbVEF9gvA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@pangolindex/components/-/components-4.2.0.tgz", + "integrity": "sha512-PaL6P/o4YqeqdDIlK44HZUvyy5eM5XS/S2L9HYEL6xmkWuGwX1DBOi7IUzevKvbFt9QQWnUP4+XHu96c2ZNiIg==", "dev": true, "dependencies": { "react-html-parser": "2.0.2", @@ -18228,6 +18379,7 @@ "react-paginate": "^8.1.3", "react-i18next": "10.13.2", "redux-localstorage-simple": "2.4.1", + "react-tooltip": "^4.2.21", "@web3-react/walletconnect-connector": "6.1.1", "lodash.merge": "^4.6.2", "axios": "^0.26.0", @@ -18238,6 +18390,7 @@ "react-markdown": "^8.0.0", "react-query": "^3.34.16", "tslib": "^2.3.1", + "react-tabs": "4.2.1", "@gnosis.pm/safe-apps-web3-react": "^0.6.7", "apollo-client": "^2.6.10", "lodash.isequal": "4.5.0", @@ -18246,6 +18399,7 @@ "@ethersproject/constants": "5.6.1", "i18next": "20.6.1", "react-virtualized-auto-sizer": "^1.0.2", + "react-select": "^5.4.0", "lru-cache": "^7.13.2", "@ethersproject/address": "5.6.1", "ethers": "^5.5.4", @@ -18276,6 +18430,7 @@ "react-use": "15.3.8", "recharts": "2.1.13", "remark-gfm": "^3.0.1", + "react-collapsed": "^3.4.0", "i18next-browser-languagedetector": "^6.1.4", "@ethersproject/strings": "5.6.1", "graphql-tag": "^2.11.0", @@ -18526,12 +18681,13 @@ } }, "node_modules/dom-helpers": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", - "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "dev": true, "dependencies": { - "@babel/runtime": "^7.1.2" + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" } }, "node_modules/lodash.truncate": { @@ -19004,6 +19160,12 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==", + "dev": true + }, "node_modules/shell-quote": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", @@ -20443,21 +20605,6 @@ "@types/yargs-parser": "*" } }, - "node_modules/@pangolindex/components/node_modules/recharts/node_modules/react-smooth": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.1.tgz", - "integrity": "sha512-Own9TA0GPPf3as4vSwFhDouVfXP15ie/wIHklhyKBH5AN6NFtdk0UpHBnonV11BtqDkAWlt40MOUc+5srmW7NA==", - "dev": true, - "dependencies": { - "fast-equals": "^2.0.0", - "react-transition-group": "2.9.0" - }, - "peerDependencies": { - "prop-types": "^15.6.0", - "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/level-ws/node_modules/string_decoder": { "version": "0.10.31", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", @@ -20671,6 +20818,22 @@ "node": ">= 0.6" } }, + "node_modules/@pangolindex/components/node_modules/react-select/node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/tsdx/node_modules/eslint/node_modules/which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -21415,6 +21578,12 @@ "node": ">=0.10.0" } }, + "node_modules/@pangolindex/components/node_modules/stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==", + "dev": true + }, "node_modules/mdast-util-to-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz", @@ -21748,6 +21917,33 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, + "node_modules/recharts": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.1.13.tgz", + "integrity": "sha512-9VWu2nzExmfiMFDHKqRFhYlJVmjzQGVKH5rBetXR4EuyEXuu3Y6cVxQuNEdusHhbm4SoPPrVDCwlBdREL3sQPA==", + "dev": true, + "dependencies": { + "classnames": "^2.2.5", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.19", + "react-is": "^16.10.2", + "react-resize-detector": "^7.1.2", + "react-smooth": "^2.0.1", + "recharts-scale": "^0.4.4", + "reduce-css-calc": "^2.1.8" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "prop-types": "^15.6.0", + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/is-number-object": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", @@ -23257,6 +23453,19 @@ "node": ">=4" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/serialize": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz", + "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==", + "dev": true, + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, "node_modules/@babel/helper-environment-visitor": { "version": "7.18.2", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz", @@ -23905,6 +24114,22 @@ "node": ">=0.4.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", @@ -24038,6 +24263,15 @@ "renderkid": "^2.0.4" } }, + "node_modules/recharts/node_modules/dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.1.2" + } + }, "node_modules/eslint-plugin-jsx-a11y": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz", @@ -29553,6 +29787,15 @@ "fancy-canvas": "0.2.2" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@nodelib/fs.walk": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", @@ -29842,33 +30085,6 @@ "node": "*" } }, - "node_modules/@pangolindex/components/node_modules/recharts": { - "version": "2.1.13", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.1.13.tgz", - "integrity": "sha512-9VWu2nzExmfiMFDHKqRFhYlJVmjzQGVKH5rBetXR4EuyEXuu3Y6cVxQuNEdusHhbm4SoPPrVDCwlBdREL3sQPA==", - "dev": true, - "dependencies": { - "classnames": "^2.2.5", - "d3-interpolate": "^3.0.1", - "d3-scale": "^4.0.2", - "d3-shape": "^3.1.0", - "eventemitter3": "^4.0.1", - "lodash": "^4.17.19", - "react-is": "^16.10.2", - "react-resize-detector": "^7.1.2", - "react-smooth": "^2.0.1", - "recharts-scale": "^0.4.4", - "reduce-css-calc": "^2.1.8" - }, - "engines": { - "node": ">=12" - }, - "peerDependencies": { - "prop-types": "^15.6.0", - "react": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/@jest/globals/node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -30317,6 +30533,12 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/sheet": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz", + "integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==", + "dev": true + }, "node_modules/postcss": { "version": "7.0.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", @@ -30393,6 +30615,20 @@ "node": ">= 6" } }, + "node_modules/@pangolindex/components/node_modules/react-collapsed": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-3.4.0.tgz", + "integrity": "sha512-v/xsvxGb7bOGHb+zkAeSjb4VAP+P5CDyvhGkIqKwHuHDHCnEjnFFRHgfPz/y3N4mLsWyOZ1QWH27EDz5/mRHXQ==", + "dev": true, + "dependencies": { + "raf": "^3.4.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", @@ -32732,6 +32968,23 @@ "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" } }, + "node_modules/@pangolindex/components/node_modules/react-tooltip": { + "version": "4.2.21", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", + "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==", + "dev": true, + "dependencies": { + "prop-types": "^15.7.2", + "uuid": "^7.0.3" + }, + "engines": { + "npm": ">=6.13" + }, + "peerDependencies": { + "react": ">=16.0.0", + "react-dom": ">=16.0.0" + } + }, "node_modules/term-size/node_modules/cross-spawn": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", @@ -33148,6 +33401,22 @@ "react": "^15.6.2 || ^16.0" } }, + "node_modules/recharts/node_modules/react-smooth/node_modules/react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "dev": true, + "dependencies": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0", + "react-dom": ">=15.0.0" + } + }, "node_modules/listr2/node_modules/p-map": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", @@ -33215,19 +33484,6 @@ "node": ">=8" } }, - "node_modules/@pangolindex/components/node_modules/recharts/node_modules/react-resize-detector": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", - "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", - "dev": true, - "dependencies": { - "lodash": "^4.17.21" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/d": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", @@ -34448,6 +34704,21 @@ "node": ">= 10.14.2" } }, + "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/utila": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", @@ -35013,6 +35284,15 @@ "node": ">= 10.14.2" } }, + "node_modules/@pangolindex/components/node_modules/react-select/node_modules/@emotion/react/node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "dev": true, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/data-urls": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", @@ -35292,6 +35572,12 @@ "node": ">=4.0.0" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", + "dev": true + }, "node_modules/expand-brackets/node_modules/extend-shallow": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", @@ -36203,6 +36489,12 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/@pangolindex/components/node_modules/@emotion/serialize/node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==", + "dev": true + }, "node_modules/jest-changed-files/node_modules/shebang-regex": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", @@ -38400,6 +38692,34 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@pangolindex/components/node_modules/react-select/node_modules/@emotion/react": { + "version": "11.10.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.4.tgz", + "integrity": "sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.0", + "@emotion/cache": "^11.10.0", + "@emotion/serialize": "^1.1.0", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, "node_modules/gifwrap": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/gifwrap/-/gifwrap-0.9.4.tgz", @@ -43216,6 +43536,101 @@ } } }, + "@emotion/babel-plugin": { + "version": "11.10.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz", + "integrity": "sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.0", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", + "dev": true + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", + "dev": true + }, + "@emotion/serialize": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz", + "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==", + "dev": true, + "requires": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==", + "dev": true + }, + "@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==", + "dev": true + }, + "babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + } + }, + "cosmiconfig": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true + }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==", + "dev": true + } + } + }, "@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -46072,9 +46487,9 @@ } }, "@pangolindex/components": { - "version": "4.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@pangolindex/components/-/components-4.2.0-rc.0.tgz", - "integrity": "sha512-5dK/mP1n9BRE84VYScr4IBucJwUZBlt3KF/LinYAXsPybODGrZML4/Rv9ZBAFgnrSBwc/j1HmIYD6gbVEF9gvA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@pangolindex/components/-/components-4.2.0.tgz", + "integrity": "sha512-PaL6P/o4YqeqdDIlK44HZUvyy5eM5XS/S2L9HYEL6xmkWuGwX1DBOi7IUzevKvbFt9QQWnUP4+XHu96c2ZNiIg==", "dev": true, "requires": { "@ethersproject/abi": "5.6.4", @@ -46122,6 +46537,7 @@ "polished": "^4.1.3", "prop-types": "^15.7.2", "qs": "^6.10.3", + "react-collapsed": "^3.4.0", "react-custom-scrollbars": "^4.2.1", "react-device-detect": "^1.6.2", "react-feather": "^2.0.9", @@ -46134,8 +46550,11 @@ "react-portal": "^4.2.1", "react-query": "^3.34.16", "react-redux": "7.2.6", + "react-select": "^5.4.0", "react-slick": "0.28.1", "react-switch": "^6.0.0", + "react-tabs": "4.2.1", + "react-tooltip": "^4.2.21", "react-use": "15.3.8", "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.5", @@ -46148,6 +46567,70 @@ "tslib": "^2.3.1" }, "dependencies": { + "@emotion/cache": { + "version": "11.10.3", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz", + "integrity": "sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==", + "dev": true, + "requires": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.0.13" + } + }, + "@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", + "dev": true + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", + "dev": true + }, + "@emotion/serialize": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz", + "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==", + "dev": true, + "requires": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + }, + "dependencies": { + "@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==", + "dev": true + } + } + }, + "@emotion/sheet": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz", + "integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==", + "dev": true + }, + "@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==", + "dev": true + }, + "@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==", + "dev": true + }, "@ethersproject/experimental": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/@ethersproject/experimental/-/experimental-5.5.0.tgz", @@ -46231,6 +46714,16 @@ "@babel/runtime": "^7.17.8" } }, + "react-collapsed": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-3.4.0.tgz", + "integrity": "sha512-v/xsvxGb7bOGHb+zkAeSjb4VAP+P5CDyvhGkIqKwHuHDHCnEjnFFRHgfPz/y3N4mLsWyOZ1QWH27EDz5/mRHXQ==", + "dev": true, + "requires": { + "raf": "^3.4.1", + "tiny-warning": "^1.0.3" + } + }, "react-ga": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz", @@ -46243,66 +46736,79 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "recharts": { - "version": "2.1.13", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.1.13.tgz", - "integrity": "sha512-9VWu2nzExmfiMFDHKqRFhYlJVmjzQGVKH5rBetXR4EuyEXuu3Y6cVxQuNEdusHhbm4SoPPrVDCwlBdREL3sQPA==", + "react-select": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.4.0.tgz", + "integrity": "sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==", "dev": true, "requires": { - "classnames": "^2.2.5", - "d3-interpolate": "^3.0.1", - "d3-scale": "^4.0.2", - "d3-shape": "^3.1.0", - "eventemitter3": "^4.0.1", - "lodash": "^4.17.19", - "react-is": "^16.10.2", - "react-resize-detector": "^7.1.2", - "react-smooth": "^2.0.1", - "recharts-scale": "^0.4.4", - "reduce-css-calc": "^2.1.8" + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0" }, "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - }, - "react-resize-detector": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", - "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "@emotion/react": { + "version": "11.10.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.4.tgz", + "integrity": "sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==", "dev": true, "requires": { - "lodash": "^4.17.21" + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.0", + "@emotion/cache": "^11.10.0", + "@emotion/serialize": "^1.1.0", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "dev": true + } } }, - "react-smooth": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.1.tgz", - "integrity": "sha512-Own9TA0GPPf3as4vSwFhDouVfXP15ie/wIHklhyKBH5AN6NFtdk0UpHBnonV11BtqDkAWlt40MOUc+5srmW7NA==", + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "dev": true, "requires": { - "fast-equals": "^2.0.0", - "react-transition-group": "2.9.0" - }, - "dependencies": { - "react-transition-group": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", - "dev": true, - "requires": { - "dom-helpers": "^3.4.0", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" - } - } + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" } } } }, + "react-tabs": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.2.1.tgz", + "integrity": "sha512-nQcEN3KrAsSry6f9Jz2oyMQsnh+sLEy31YjlskL/mnI3KU/c7BeyD1VzHZmmcJ15UEFu12pYOXYkdTzZ0uyIbw==", + "dev": true, + "requires": { + "clsx": "^1.1.0", + "prop-types": "^15.5.0" + } + }, + "react-tooltip": { + "version": "4.2.21", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", + "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==", + "dev": true, + "requires": { + "prop-types": "^15.7.2", + "uuid": "^7.0.3" + } + }, "styled-components": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", @@ -46321,11 +46827,23 @@ "supports-color": "^5.5.0" } }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==", + "dev": true + }, "tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", "dev": true + }, + "uuid": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz", + "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==", + "dev": true } } }, @@ -47940,6 +48458,22 @@ } } }, + "@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dev": true, + "requires": { + "@types/react": "16.14.24" + }, + "dependencies": { + "@types/react": { + "version": "16.14.24", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.24.tgz", + "integrity": "sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==" + } + } + }, "@types/react-virtualized-auto-sizer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz", @@ -53414,12 +53948,13 @@ } }, "dom-helpers": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", - "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "dev": true, "requires": { - "@babel/runtime": "^7.1.2" + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" } }, "dom-serializer": { @@ -67171,6 +67706,69 @@ "reflexbox": "^4.0.6" } }, + "recharts": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.1.13.tgz", + "integrity": "sha512-9VWu2nzExmfiMFDHKqRFhYlJVmjzQGVKH5rBetXR4EuyEXuu3Y6cVxQuNEdusHhbm4SoPPrVDCwlBdREL3sQPA==", + "dev": true, + "requires": { + "classnames": "^2.2.5", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.19", + "react-is": "^16.10.2", + "react-resize-detector": "^7.1.2", + "react-smooth": "^2.0.1", + "recharts-scale": "^0.4.4", + "reduce-css-calc": "^2.1.8" + }, + "dependencies": { + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2" + } + }, + "react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "dev": true, + "requires": { + "lodash": "^4.17.21" + } + }, + "react-smooth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.1.tgz", + "integrity": "sha512-Own9TA0GPPf3as4vSwFhDouVfXP15ie/wIHklhyKBH5AN6NFtdk0UpHBnonV11BtqDkAWlt40MOUc+5srmW7NA==", + "dev": true, + "requires": { + "fast-equals": "^2.0.0", + "react-transition-group": "2.9.0" + }, + "dependencies": { + "react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "dev": true, + "requires": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + } + } + } + } + }, "recharts-scale": { "version": "0.4.5", "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", diff --git a/package.json b/package.json index 85893b382..82501a5be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pangolindex/interface", - "version": "1.0.55", + "version": "1.0.56-dev.0", "description": "Pangolin Interface", "homepage": ".", "engines": { @@ -19,7 +19,7 @@ "@ethersproject/wallet": "5.6.2", "@gnosis.pm/safe-apps-web3-react": "0.6.8", "@metamask/jazzicon": "2.0.0", - "@pangolindex/components": "4.2.0-rc.0", + "@pangolindex/components": "4.2.0", "@pangolindex/exchange-contracts": "2.1.6", "@pangolindex/governance": "1.2.0", "@pangolindex/sdk": "3.1.3", @@ -77,6 +77,7 @@ "luxon": "1.28.0", "multicodec": "2.1.3", "multihashes": "3.1.2", + "recharts": "2.1.13", "numeral": "2.0.6", "polished": "3.7.2", "prettier": "1.19.1", diff --git a/src/components/AccountDetails/Transaction.tsx b/src/components/AccountDetails/Transaction.tsx index b7aee324e..93b3454f9 100644 --- a/src/components/AccountDetails/Transaction.tsx +++ b/src/components/AccountDetails/Transaction.tsx @@ -1,12 +1,13 @@ -import React from 'react' +import React, { useMemo } from 'react' import styled from 'styled-components' import { CheckCircle, Triangle } from 'react-feather' -import { getEtherscanLink } from '@pangolindex/components' +import { getEtherscanLink, useAllTransactions as useAllTransactionsComponents } from '@pangolindex/components' import { useChainId } from '../../hooks' import { ExternalLink } from '../../theme' import { useAllTransactions } from '../../state/transactions/hooks' import { RowFixed } from '../Row' import Loader from '../Loader' +import { TransactionDetails } from 'src/state/transactions/reducer' const TransactionWrapper = styled.div`` @@ -40,7 +41,13 @@ const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>` export default function Transaction({ hash }: { hash: string }) { const chainId = useChainId() - const allTransactions = useAllTransactions() + const allTransactionsInterface = useAllTransactions() + const allTransactionsComponents = useAllTransactionsComponents() + + const allTransactions: { [txHash: string]: TransactionDetails } = useMemo(() => { + return { ...allTransactionsInterface, ...allTransactionsComponents } + }, [allTransactionsInterface, allTransactionsComponents]) + const tx = allTransactions?.[hash] const summary = tx?.summary const pending = !tx?.receipt diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx index d262a9e6c..c50319902 100644 --- a/src/components/AccountDetails/index.tsx +++ b/src/components/AccountDetails/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useContext } from 'react' -import styled, { ThemeContext } from 'styled-components' +import { ThemeContext } from 'styled-components' import { useActiveWeb3React, useChainId } from '../../hooks' import { useDispatch } from '../../state' import { clearAllTransactions } from '../../state/transactions/actions' @@ -10,7 +10,6 @@ import CoinbaseWalletIcon from '../../assets/svg/coinbaseWalletIcon.svg' import WalletConnectIcon from '../../assets/svg/walletConnectIcon.svg' import GnosisSafeIcon from '../../assets/images/gnosis_safe.png' import BitKeep from '../../assets/svg/bitkeep.svg' -import { ReactComponent as Close } from '../../assets/svg/x.svg' import NearIcon from '../../assets/svg/near.svg' import { gnosisSafe, @@ -27,198 +26,28 @@ import { bitKeep } from '@pangolindex/components' import Identicon from '../Identicon' -import { ButtonSecondary } from '../Button' import { ExternalLink as LinkIcon } from 'react-feather' -import { ExternalLink, LinkStyledButton, TYPE } from '../../theme' +import { LinkStyledButton, TYPE } from '../../theme' import { WalletLinkConnector } from '@web3-react/walletlink-connector' import { WalletConnectConnector } from '@web3-react/walletconnect-connector' - -const HeaderRow = styled.div` - ${({ theme }) => theme.flexRowNoWrap}; - padding: 1rem 1rem; - font-weight: 500; - color: ${props => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')}; - ${({ theme }) => theme.mediaWidth.upToMedium` - padding: 1rem; - `}; -` - -const UpperSection = styled.div` - position: relative; - - h5 { - margin: 0; - margin-bottom: 0.5rem; - font-size: 1rem; - font-weight: 400; - } - - h5:last-child { - margin-bottom: 0px; - } - - h4 { - margin-top: 0; - font-weight: 500; - } -` - -const InfoCard = styled.div` - padding: 1rem; - border: 1px solid ${({ theme }) => theme.bg3}; - border-radius: 20px; - position: relative; - display: grid; - grid-row-gap: 12px; - margin-bottom: 20px; -` - -const AccountGroupingRow = styled.div` - ${({ theme }) => theme.flexRowNoWrap}; - justify-content: space-between; - align-items: center; - font-weight: 400; - color: ${({ theme }) => theme.text1}; - - div { - ${({ theme }) => theme.flexRowNoWrap} - align-items: center; - } -` - -const AccountSection = styled.div` - background-color: ${({ theme }) => theme.bg1}; - padding: 0rem 1rem; - ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1.5rem 1rem;`}; -` - -const YourAccount = styled.div` - h5 { - margin: 0 0 1rem 0; - font-weight: 400; - } - - h4 { - margin: 0; - font-weight: 500; - } -` - -const LowerSection = styled.div` - ${({ theme }) => theme.flexColumnNoWrap} - padding: 1.5rem; - flex-grow: 1; - overflow: auto; - background-color: ${({ theme }) => theme.bg2}; - border-bottom-left-radius: 25px; - border-bottom-right-radius: 20px; - - h5 { - margin: 0; - font-weight: 400; - color: ${({ theme }) => theme.text3}; - } -` - -const AccountControl = styled.div` - display: flex; - justify-content: space-between; - min-width: 0; - width: 100%; - - font-weight: 500; - font-size: 1.25rem; - - a:hover { - text-decoration: underline; - } - - p { - min-width: 0; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -` - -const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>` - font-size: 0.825rem; - color: ${({ theme }) => theme.text3}; - margin-left: 1rem; - font-size: 0.825rem; - display: flex; - :hover { - color: ${({ theme }) => theme.text2}; - } -` - -const CloseIcon = styled.div` - position: absolute; - right: 1rem; - top: 14px; - &:hover { - cursor: pointer; - opacity: 0.6; - } -` - -const CloseColor = styled(Close)` - path { - stroke: ${({ theme }) => theme.text4}; - } -` - -const WalletName = styled.div` - width: initial; - font-size: 0.825rem; - font-weight: 500; - color: ${({ theme }) => theme.text3}; -` - -const IconWrapper = styled.div<{ size?: number }>` - ${({ theme }) => theme.flexColumnNoWrap}; - align-items: center; - justify-content: center; - margin-right: 8px; - & > img, - span { - height: ${({ size }) => (size ? size + 'px' : '32px')}; - width: ${({ size }) => (size ? size + 'px' : '32px')}; - } - ${({ theme }) => theme.mediaWidth.upToMedium` - align-items: flex-end; - `}; -` - -const TransactionListWrapper = styled.div` - ${({ theme }) => theme.flexColumnNoWrap}; -` - -const WalletAction = styled(ButtonSecondary)` - color: ${({ theme }) => theme.primary}; - width: fit-content; - font-weight: 400; - margin-left: 8px; - font-size: 0.825rem; - padding: 4px 6px; - :hover { - cursor: pointer; - text-decoration: underline; - } - - &:focus { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary}; - border: 1px solid ${({ theme }) => theme.primary}; - } - &:hover { - border: 1px solid ${({ theme }) => theme.primary}; - } - &:active { - box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary}; - border: 1px solid ${({ theme }) => theme.primary}; - } -` +import { + AccountControl, + AccountGroupingRow, + AccountSection, + AddressLink, + CloseColor, + CloseIcon, + HeaderRow, + IconWrapper, + InfoCard, + LowerSection, + TransactionListWrapper, + UpperSection, + WalletAction, + WalletName, + YourAccount +} from './styled' +import Scrollbars from 'react-custom-scrollbars' function renderTransactions(transactions: string[]) { return ( @@ -258,7 +87,6 @@ export default function AccountDetails({ const isMetaMask = !!(ethereum && ethereum.isMetaMask) const isXDEFI = !!(ethereum && ethereum.isXDEFI) const isRabby = !!(ethereum && ethereum.isRabby) - const isBitKeep = !!(ethereum && ethereum.isBitKeep) || !!(window.isBitKeep && window.bitkeep) const isCoinbase = !!(ethereum && ethereum.isCoinbaseWallet) let name = Object.keys(SUPPORTED_WALLETS) @@ -270,7 +98,6 @@ export default function AccountDetails({ if (isXDEFI) name = SUPPORTED_WALLETS.XDEFI.name else if (isTalisman) name = SUPPORTED_WALLETS.TALISMAN.name else if (isRabby) name = SUPPORTED_WALLETS.RABBY.name - else if (isBitKeep) name = SUPPORTED_WALLETS.BITKEEP.name else if (isCoinbase) name = SUPPORTED_WALLETS.WALLET_LINK.name // metamask as last check, because most of the wallets above are likely to set isMetaMask to true too else if (isMetaMask) name = SUPPORTED_WALLETS.METAMASK.name @@ -444,8 +271,10 @@ export default function AccountDetails({ {t('accountDetails.recentTransactions')} {t('accountDetails.clearAll')} - {renderTransactions(pendingTransactions)} - {renderTransactions(confirmedTransactions)} + + {renderTransactions(pendingTransactions)} + {renderTransactions(confirmedTransactions)} + ) : ( diff --git a/src/components/AccountDetails/styled.tsx b/src/components/AccountDetails/styled.tsx new file mode 100644 index 000000000..4b5c60539 --- /dev/null +++ b/src/components/AccountDetails/styled.tsx @@ -0,0 +1,191 @@ +import styled from 'styled-components' +import { ReactComponent as Close } from '../../assets/svg/x.svg' +import { ButtonSecondary } from '../Button' +import { ExternalLink } from '../../theme' + +export const HeaderRow = styled.div` + ${({ theme }) => theme.flexRowNoWrap}; + padding: 1rem 1rem; + font-weight: 500; + color: ${props => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')}; + ${({ theme }) => theme.mediaWidth.upToMedium` + padding: 1rem; +`}; +` + +export const UpperSection = styled.div` + position: relative; + + h5 { + margin: 0; + margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: 400; + } + + h5:last-child { + margin-bottom: 0px; + } + + h4 { + margin-top: 0; + font-weight: 500; + } +` + +export const InfoCard = styled.div` + padding: 1rem; + border: 1px solid ${({ theme }) => theme.bg3}; + border-radius: 20px; + position: relative; + display: grid; + grid-row-gap: 12px; + margin-bottom: 20px; +` + +export const AccountGroupingRow = styled.div` + ${({ theme }) => theme.flexRowNoWrap}; + justify-content: space-between; + align-items: center; + font-weight: 400; + color: ${({ theme }) => theme.text1}; + + div { + ${({ theme }) => theme.flexRowNoWrap} + align-items: center; + } +` + +export const AccountSection = styled.div` + background-color: ${({ theme }) => theme.bg1}; + padding: 0rem 1rem; + ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1.5rem 1rem;`}; +` + +export const YourAccount = styled.div` + h5 { + margin: 0 0 1rem 0; + font-weight: 400; + } + + h4 { + margin: 0; + font-weight: 500; + } +` + +export const LowerSection = styled.div` + ${({ theme }) => theme.flexColumnNoWrap} + padding: 1.5rem; + flex-grow: 1; + overflow: auto; + background-color: ${({ theme }) => theme.bg2}; + border-radius: 10px; + + h5 { + margin: 0; + font-weight: 400; + color: ${({ theme }) => theme.text3}; + } +` + +export const AccountControl = styled.div` + display: flex; + justify-content: space-between; + min-width: 0; + width: 100%; + + font-weight: 500; + font-size: 1.25rem; + + a:hover { + text-decoration: underline; + } + + p { + min-width: 0; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +` + +export const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>` + font-size: 0.825rem; + color: ${({ theme }) => theme.text3}; + margin-left: 1rem; + font-size: 0.825rem; + display: flex; + :hover { + color: ${({ theme }) => theme.text2}; + } +` + +export const CloseIcon = styled.div` + position: absolute; + right: 1rem; + top: 14px; + &:hover { + cursor: pointer; + opacity: 0.6; + } +` + +export const CloseColor = styled(Close)` + path { + stroke: ${({ theme }) => theme.text4}; + } +` + +export const WalletName = styled.div` + width: initial; + font-size: 0.825rem; + font-weight: 500; + color: ${({ theme }) => theme.text3}; +` + +export const IconWrapper = styled.div<{ size?: number }>` + ${({ theme }) => theme.flexColumnNoWrap}; + align-items: center; + justify-content: center; + margin-right: 8px; + & > img, + span { + height: ${({ size }) => (size ? size + 'px' : '32px')}; + width: ${({ size }) => (size ? size + 'px' : '32px')}; + } + ${({ theme }) => theme.mediaWidth.upToMedium` + align-items: flex-end; +`}; +` + +export const TransactionListWrapper = styled.div` + ${({ theme }) => theme.flexColumnNoWrap}; + line-heigth: 20px; +` + +export const WalletAction = styled(ButtonSecondary)` + color: ${({ theme }) => theme.primary}; + width: fit-content; + font-weight: 400; + margin-left: 8px; + font-size: 0.825rem; + padding: 4px 6px; + :hover { + cursor: pointer; + text-decoration: underline; + } + + &:focus { + box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary}; + border: 1px solid ${({ theme }) => theme.primary}; + } + &:hover { + border: 1px solid ${({ theme }) => theme.primary}; + } + &:active { + box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary}; + border: 1px solid ${({ theme }) => theme.primary}; + } +` diff --git a/src/pages/Beta/Bridge/index.tsx b/src/pages/Beta/Bridge/index.tsx index c8d46a957..9468e128a 100644 --- a/src/pages/Beta/Bridge/index.tsx +++ b/src/pages/Beta/Bridge/index.tsx @@ -1,71 +1,13 @@ import React from 'react' -import { PageWrapper, Ibridge, ChainSelect, Separator, MaxButton, WrapButton } from './styleds' -import { Text, Box, ToggleButtons, Button, useTranslation } from '@pangolindex/components' -import { useActiveWeb3React } from 'src/hooks' -import { useWalletModalToggle } from 'src/state/application/hooks' -import { QuestionAnswer } from './TabulationBox' +import { Bridge } from '@pangolindex/components' +import { PageWrapper } from './styleds' +// import { QuestionAnswer } from './TabulationBox' const BridgeUI = () => { - const { account } = useActiveWeb3React() - const { t } = useTranslation() - const toggleWalletModal = useWalletModalToggle() - - const renderButton = () => { - if (!account) { - return ( - - ) - } else { - return ( - - ) - } - } - return ( - - - - - - Cross Chain - - - - - - - - From - - - - - Destination - - - - - - Amount - - - 25% - 50% - 75% - 100% - - - - - {renderButton()} - - + {/* */} + ) } diff --git a/src/pages/Beta/Swap/LimitOrderList/index.tsx b/src/pages/Beta/Swap/LimitOrderList/index.tsx index 41d081870..c771383d5 100644 --- a/src/pages/Beta/Swap/LimitOrderList/index.tsx +++ b/src/pages/Beta/Swap/LimitOrderList/index.tsx @@ -40,7 +40,7 @@ export const LimitOrderTypeOptions = [ const LimitOrderList = () => { const { t } = useTranslation() - const [activeTab, setActiveTab] = useState(TabType.open as string) + const [activeTab, setActiveTab] = useState(TabType.open as string) const [showMore, setShowMore] = useState(false as boolean) @@ -94,9 +94,9 @@ const LimitOrderList = () => { { - setActiveTab(value) + defaultValue={activeTab} + onSelect={selected => { + setActiveTab(selected as string) }} /> diff --git a/src/pages/Beta/Swap/styleds.tsx b/src/pages/Beta/Swap/styleds.tsx index e55dfb03c..29c8aa4af 100644 --- a/src/pages/Beta/Swap/styleds.tsx +++ b/src/pages/Beta/Swap/styleds.tsx @@ -19,11 +19,13 @@ export const SwapWidgetWrapper = styled(Box)` flex-direction: column; justify-content: center; flex: 1; - min-width: 320px; - width: 400px; + min-width: 280px; + max-width: 400px margin: auto; ${({ theme }) => theme.mediaWidth.upToSmall` margin: initial; + margin-right: auto; + margin-left: auto; flex:0; `}; ` diff --git a/src/pages/SarStake/StakeStat/index.tsx b/src/pages/SarStake/StakeStat/index.tsx index 3d70a3fbc..b683d0c89 100644 --- a/src/pages/SarStake/StakeStat/index.tsx +++ b/src/pages/SarStake/StakeStat/index.tsx @@ -11,7 +11,7 @@ import { formatEther } from 'ethers/lib/utils' const StakeStat: React.FC = () => { const chainId = useChainId() const { apr, totalStaked } = useSarStakeInfo() - const { data: positions = [] as Position[] } = useSarPositions() + const { positions = [] as Position[] } = useSarPositions() const filteredPositions = positions.filter(position => !position.balance.isZero()) // remove zero balances diff --git a/src/pages/SarStake/index.tsx b/src/pages/SarStake/index.tsx index 426eef8fb..919e18837 100644 --- a/src/pages/SarStake/index.tsx +++ b/src/pages/SarStake/index.tsx @@ -16,7 +16,7 @@ import Confetti from 'src/components/Confetti' import { useChainId } from 'src/hooks' import useParsedQueryString from 'src/hooks/useParsedQueryString' import StakeStat from './StakeStat' -import { CloseButton, PageWrapper } from './styleds' +import { CloseButton, PageWrapper, StyledSVG } from './styleds' export default function SarStaking() { const [selectedPosition, setSelectedPosition] = useState(null) @@ -26,7 +26,7 @@ export default function SarStaking() { const { t } = useTranslation() - const { data: positions, isLoading } = useSarPositions() + const { positions, isLoading } = useSarPositions() const onSelectPosition = (position: Position | null) => { setSelectedPosition(position) @@ -58,7 +58,7 @@ export default function SarStaking() { - + @@ -73,7 +73,13 @@ export default function SarStaking() { {isLoading ? ( ) : ( - NFT + )} diff --git a/src/pages/SarStake/styleds.tsx b/src/pages/SarStake/styleds.tsx index 0c1d88f6f..797d9dcc3 100644 --- a/src/pages/SarStake/styleds.tsx +++ b/src/pages/SarStake/styleds.tsx @@ -36,3 +36,12 @@ export const CloseButton = styled(CloseIcon)` right: 9px; top: 9px; ` + +export const StyledSVG = styled(Box)` + svg { + width: 100%; + height: 100%; + } + + height: 400px; +` diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 675e34b16..3365e44fa 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -18,7 +18,6 @@ interface Window { isXDEFI?: true isRabby?: true isTalisman?: true - isBitKeep?: true on?: (...args: any[]) => void removeListener?: (...args: any[]) => void request: (...args: any[]) => Promise diff --git a/src/state/airdrop/hooks.ts b/src/state/airdrop/hooks.ts index e9381767d..29449c6ed 100644 --- a/src/state/airdrop/hooks.ts +++ b/src/state/airdrop/hooks.ts @@ -97,11 +97,21 @@ export function useClaimAirdrop(account: string | null | undefined, airdropAddre const message = 'By signing this transaction, I hereby acknowledge that I am not a US resident or citizen. (Citizens or residents of the United States of America are not allowed to the PSB token airdrop due to applicable law.)' - const signature = await provider?.request({ + let signature = await provider?.request({ method: 'personal_sign', params: [message, account] }) + const v = parseInt(signature.slice(130, 132), 16) + + // Ensure v is 27+ (generally 27|28) + // Ledger and perhaps other signing methods utilize a 'v' of 0|1 instead of 27|28 + if (v < 27) { + const vAdjusted = v + 27 + console.log(`Adjusting ECDSA 'v' from ${v} to ${vAdjusted}`) + signature = signature.slice(0, -2).concat(vAdjusted.toString(16)) + } + const estimedGas = await merkledropContract.estimateGas.claim(data.amount.raw.toString(), data.proof, signature) const response: TransactionResponse = await merkledropContract.claim( data.amount.raw.toString(), diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 1707f5a6f..7ae262764 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -304,6 +304,25 @@ export function betaColors(darkMode: boolean): BetaColors { color: oceanBlue, borderColor: oceanBlue } + }, + bridge: { + primaryBgColor: darkMode ? eerieBlack : white, + secondaryBgColor: darkMode ? chineseBlack : ghostWhite, + text: darkMode ? white : black, + infoIconColor: darkMode ? white : black, + routeInfoColor: darkMode ? darkSilver : platinum, + transferKeyColor: darkMode ? darkSilver : quickSilver, + loaderCloseIconColor: mustardYellow, + informationBoxesBackgroundColor: chineseBlack + }, + tabs: { + tabColor: darkMode ? darkSilver : quickSilver, + tabListColor: darkMode ? white : black, + tabPanelBorderColor: darkMode ? darkSilver : quickSilver + }, + dropdown: { + color: darkMode ? white : black, + primaryBgColor: darkMode ? darkGunmetal : white } } } diff --git a/src/theme/styled.d.ts b/src/theme/styled.d.ts index eb14a4aa1..ce866fd16 100644 --- a/src/theme/styled.d.ts +++ b/src/theme/styled.d.ts @@ -181,6 +181,25 @@ export interface BetaColors extends Colors { borderColor?: Color } } + bridge?: { + primaryBgColor?: Color + secondaryBgColor?: Color + text?: Color + infoIconColor?: Color + routeInfoColor?: Color + transferKeyColor?: Color + loaderCloseIconColor?: Color + informationBoxesBackgroundColor?: Color + } + tabs?: { + tabColor?: Color + tabListColor?: Color + tabPanelBorderColor?: Color + } + dropdown?: { + color?: Color + primaryBgColor?: Color + } } export interface Grids {