diff --git a/.github/workflows/audit_build_verify.yml b/.github/workflows/audit_build_verify.yml index b80ade5ba6..49abbd2641 100644 --- a/.github/workflows/audit_build_verify.yml +++ b/.github/workflows/audit_build_verify.yml @@ -70,7 +70,7 @@ jobs: - name: Upload lint results # run if lint failed and only on main/dev branch and pull requests if: always() && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.event_name == 'pull_request') - uses: github/codeql-action/upload-sarif@904260d7d935dff982205cbdb42025ce30b7a34f # pin@codeql-bundle-20220322 + uses: github/codeql-action/upload-sarif@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322 with: sarif_file: lint-results.sarif continue-on-error: true diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 9f401f2703..67eedc4983 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -21,13 +21,13 @@ jobs: uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # pin@v2 - name: Initialize CodeQL - uses: github/codeql-action/init@904260d7d935dff982205cbdb42025ce30b7a34f # pin@codeql-bundle-20220322 + uses: github/codeql-action/init@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322 with: queries: security-and-quality languages: javascript - name: Autobuild - uses: github/codeql-action/autobuild@904260d7d935dff982205cbdb42025ce30b7a34f # pin@codeql-bundle-20220322 + uses: github/codeql-action/autobuild@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322 - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@904260d7d935dff982205cbdb42025ce30b7a34f # pin@codeql-bundle-20220322 + uses: github/codeql-action/analyze@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322 diff --git a/README.md b/README.md index 059d9c0904..4307c050a7 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ ![Kwenta CI](https://github.com/kwenta/kwenta/workflows/Kwenta%20CI/badge.svg?branch=main) [![Discord](https://img.shields.io/discord/413890591840272394.svg?color=768AD4&label=discord&logo=https%3A%2F%2Fdiscordapp.com%2Fassets%2F8c9701b98ad4372b58f13fd9f65f966e.svg)](https://discordapp.com/channels/413890591840272394/) [![Twitter Follow](https://img.shields.io/twitter/follow/kwenta_io.svg?label=kwenta_io&style=social)](https://twitter.com/kwenta_io) +[![GitPOAP Badge](https://public-api.gitpoap.io/v1/repo/Kwenta/kwenta/badge)](https://www.gitpoap.io/gh/Kwenta/kwenta) # Kwenta diff --git a/components/Tooltip/StyledTooltip.tsx b/components/Tooltip/StyledTooltip.tsx index f8d0f8eb4f..11c0a0b530 100644 --- a/components/Tooltip/StyledTooltip.tsx +++ b/components/Tooltip/StyledTooltip.tsx @@ -16,6 +16,7 @@ interface ToolTipProps { right?: string; style?: React.CSSProperties; position?: string; + visible?: boolean; } const StyledTooltip = (props: ToolTipProps) => { @@ -23,6 +24,8 @@ const StyledTooltip = (props: ToolTipProps) => { const [position, setPosition] = useState({}); const myRef = useRef(null); + const isVisible = props.visible === undefined ? true : props.visible; + const setFixedPosition = () => { const isFirefox = /firefox/i.test(navigator.userAgent); if (myRef.current !== null) { @@ -45,10 +48,11 @@ const StyledTooltip = (props: ToolTipProps) => { const closeToolTip = () => { setActiveMouse(false); }; + return ( {props.children} - {activeMouse && ( + {activeMouse && isVisible && (

{props.content}

 diff --git a/containers/Connector/Connector.tsx b/containers/Connector/Connector.tsx index 677f355e37..85bd61f12e 100644 --- a/containers/Connector/Connector.tsx +++ b/containers/Connector/Connector.tsx @@ -8,6 +8,10 @@ import { chain, useAccount, useNetwork, useProvider, useSigner } from 'wagmi'; const useConnector = () => { const { chain: activeChain } = useNetwork(); const { address, isConnected: isWalletConnected } = useAccount(); + const unsupportedNetwork = useMemo( + () => (isWalletConnected ? activeChain?.unsupported ?? false : false), + [activeChain, isWalletConnected] + ); const network = useMemo( () => (activeChain?.unsupported ? chain.optimism : activeChain ?? chain.optimism), [activeChain] @@ -44,6 +48,8 @@ const useConnector = () => { }, [l2Synthetixjs]); return { + activeChain, + unsupportedNetwork, isWalletConnected, walletAddress, provider, diff --git a/containers/Connector/config.ts b/containers/Connector/config.ts index 1137ff75a6..f2a61cd93d 100644 --- a/containers/Connector/config.ts +++ b/containers/Connector/config.ts @@ -23,10 +23,10 @@ export const initRainbowkit = () => { }`, }; }, - stallTimeout: 1000, + stallTimeout: 5000, priority: 0, }), - publicProvider({ stallTimeout: 1000, priority: 5 }), + publicProvider({ stallTimeout: 5000, priority: 5 }), ] ); diff --git a/hooks/useIsL2.ts b/hooks/useIsL2.ts index 9e4b9464f6..aeb89fcf5c 100644 --- a/hooks/useIsL2.ts +++ b/hooks/useIsL2.ts @@ -5,11 +5,13 @@ import Connector from 'containers/Connector'; import { notNill } from 'queries/synths/utils'; const useIsL2 = () => { - const { network } = Connector.useContainer(); + const { activeChain } = Connector.useContainer(); const isL2 = useMemo( () => - notNill(network) ? [chain.optimism.id, chain.optimismGoerli.id].includes(network.id) : true, - [network] + notNill(activeChain) + ? [chain.optimism.id, chain.optimismGoerli.id].includes(activeChain.id) + : false, + [activeChain] ); return isL2; }; diff --git a/next.config.js b/next.config.js index 05f46619b8..4935e87570 100644 --- a/next.config.js +++ b/next.config.js @@ -99,5 +99,6 @@ module.exports = withPlugins([ }, ]; }, + productionBrowserSourceMaps: true, }, ]); diff --git a/package-lock.json b/package-lock.json index 8e340dc7d6..b370ede319 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "kwenta", - "version": "3.2.3", + "version": "3.2.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "kwenta", - "version": "3.2.3", + "version": "3.2.4", "hasInstallScript": true, "dependencies": { "@artsy/fresnel": "1.7.0", - "@eth-optimism/contracts": "^0.5.1", + "@eth-optimism/contracts": "0.5.37", "@gnosis.pm/safe-apps-wagmi": "^1.0.3", "@kwenta/synthswap": "^1.0.3", "@material-ui/core": "^4.12.3", @@ -19,12 +19,11 @@ "@reach/accordion": "0.15.1", "@reach/dialog": "0.15.0", "@synthetixio/contracts-interface": "2.76.3", - "@synthetixio/optimism-networks": "2.74.5", + "@synthetixio/optimism-networks": "2.74.6", "@synthetixio/providers": "2.74.10", "@synthetixio/queries": "3.0.11", "@synthetixio/transaction-notifier": "2.74.12", "@synthetixio/wei": "2.74.4", - "@tippyjs/react": "4.1.0", "axios": "0.27.2", "bignumber.js": "9.0.0", "codegen-graph-ts": "^0.1.4", @@ -2916,31 +2915,39 @@ } }, "node_modules/@eth-optimism/contracts": { - "version": "0.5.33", - "resolved": "https://registry.npmjs.org/@eth-optimism/contracts/-/contracts-0.5.33.tgz", - "integrity": "sha512-lOj0psjl/7oydUXuSXhZ3P55zAXBNSgK6OzZeCW6JQ+drN+1OEdyp/MYKrSh8Cw8fW2k9MMdWbOuTa7/Blb0hA==", + "version": "0.5.37", + "resolved": "https://registry.npmjs.org/@eth-optimism/contracts/-/contracts-0.5.37.tgz", + "integrity": "sha512-HbNUUDIM1dUAM0hWPfGp3l9/Zte40zi8QhVbUSIwdYRA7jG7cZgbteqavrjW8wwFqxkWX9IrtA0KAR7pNlSAIQ==", "dependencies": { - "@eth-optimism/core-utils": "0.9.3", - "@ethersproject/abstract-provider": "^5.6.1", - "@ethersproject/abstract-signer": "^5.6.2" + "@eth-optimism/core-utils": "0.10.1", + "@ethersproject/abstract-provider": "^5.7.0", + "@ethersproject/abstract-signer": "^5.7.0" }, "peerDependencies": { "ethers": "^5" } }, "node_modules/@eth-optimism/core-utils": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@eth-optimism/core-utils/-/core-utils-0.9.3.tgz", - "integrity": "sha512-b3V8qBgM0e85wdp3CNdJ6iSUvjT2k86F9oCAYeCIXQcQ6+EPaetjxP0T6ct6jLVepnJjoPRlW/lvWslKk1UBGg==", + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@eth-optimism/core-utils/-/core-utils-0.10.1.tgz", + "integrity": "sha512-IJvG5UtYvyz6An9QdohlCLoeB3NBFxx2lRJKlPzvYYlfugUNNCHsajRIWIwJTcPRRma0WPd46JUsKACLJDdNrA==", "dependencies": { - "@ethersproject/abstract-provider": "^5.6.1", - "@ethersproject/properties": "^5.6.0", - "@ethersproject/providers": "^5.6.8", - "@ethersproject/transactions": "^5.6.2", - "@ethersproject/web": "^5.6.1", + "@ethersproject/abi": "^5.7.0", + "@ethersproject/abstract-provider": "^5.7.0", + "@ethersproject/address": "^5.7.0", + "@ethersproject/bignumber": "^5.7.0", + "@ethersproject/bytes": "^5.7.0", + "@ethersproject/constants": "^5.7.0", + "@ethersproject/contracts": "^5.7.0", + "@ethersproject/hash": "^5.7.0", + "@ethersproject/keccak256": "^5.7.0", + "@ethersproject/properties": "^5.7.0", + "@ethersproject/providers": "^5.7.0", + "@ethersproject/rlp": "^5.7.0", + "@ethersproject/transactions": "^5.7.0", + "@ethersproject/web": "^5.7.0", "bufio": "^1.0.7", - "chai": "^4.3.4", - "ethers": "^5.6.8" + "chai": "^4.3.4" } }, "node_modules/@eth-optimism/watcher": { @@ -6509,15 +6516,6 @@ "node": ">= 8" } }, - "node_modules/@popperjs/core": { - "version": "2.11.6", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", - "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@portis/web3": { "version": "2.0.0-beta.59", "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-2.0.0-beta.59.tgz", @@ -9750,9 +9748,9 @@ } }, "node_modules/@synthetixio/optimism-networks": { - "version": "2.74.5", - "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.5.tgz", - "integrity": "sha512-g6Ndi5MWy0qHYlgK7VWavxEah0YwP6NJVBA2kKQXBuGjFlvo3u8NYk93vWwd/u9UaL6jdVcNz23staQkTTDjiQ==", + "version": "2.74.6", + "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.6.tgz", + "integrity": "sha512-sczSMdAXhWBrPoZLm7fnM3lLalopHoRQeu9eUdZAmojNs/8+34DzhCOirPoPVqewZzKCR4wmKOIXRsSXQgcA6w==", "dependencies": { "@ethersproject/bignumber": "^5.6.2", "@ethersproject/bytes": "^5.6.1", @@ -9771,6 +9769,16 @@ "@synthetixio/optimism-networks": "2.74.5" } }, + "node_modules/@synthetixio/providers/node_modules/@synthetixio/optimism-networks": { + "version": "2.74.5", + "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.5.tgz", + "integrity": "sha512-g6Ndi5MWy0qHYlgK7VWavxEah0YwP6NJVBA2kKQXBuGjFlvo3u8NYk93vWwd/u9UaL6jdVcNz23staQkTTDjiQ==", + "dependencies": { + "@ethersproject/bignumber": "^5.6.2", + "@ethersproject/bytes": "^5.6.1", + "@metamask/providers": "^8.1.1" + } + }, "node_modules/@synthetixio/queries": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/@synthetixio/queries/-/queries-3.0.11.tgz", @@ -9803,6 +9811,16 @@ "react-query": "3.16.x" } }, + "node_modules/@synthetixio/queries/node_modules/@synthetixio/optimism-networks": { + "version": "2.74.5", + "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.5.tgz", + "integrity": "sha512-g6Ndi5MWy0qHYlgK7VWavxEah0YwP6NJVBA2kKQXBuGjFlvo3u8NYk93vWwd/u9UaL6jdVcNz23staQkTTDjiQ==", + "dependencies": { + "@ethersproject/bignumber": "^5.6.2", + "@ethersproject/bytes": "^5.6.1", + "@metamask/providers": "^8.1.1" + } + }, "node_modules/@synthetixio/queries/node_modules/axios": { "version": "0.21.4", "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", @@ -10291,18 +10309,6 @@ "@testing-library/dom": ">=7.21.4" } }, - "node_modules/@tippyjs/react": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.1.0.tgz", - "integrity": "sha512-g6Dpm46edr9T9z+BYxd/eJZa6QMFc4T4z5xrztxVlkti7AhNYf7OaE6b3Nh+boUZZ9wn8xkNq9VrQM5K4huwnQ==", - "dependencies": { - "tippy.js": "^6.2.0" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -43458,14 +43464,6 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, - "node_modules/tippy.js": { - "version": "6.3.7", - "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", - "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", - "dependencies": { - "@popperjs/core": "^2.9.0" - } - }, "node_modules/title-case": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz", @@ -50142,28 +50140,36 @@ } }, "@eth-optimism/contracts": { - "version": "0.5.33", - "resolved": "https://registry.npmjs.org/@eth-optimism/contracts/-/contracts-0.5.33.tgz", - "integrity": "sha512-lOj0psjl/7oydUXuSXhZ3P55zAXBNSgK6OzZeCW6JQ+drN+1OEdyp/MYKrSh8Cw8fW2k9MMdWbOuTa7/Blb0hA==", + "version": "0.5.37", + "resolved": "https://registry.npmjs.org/@eth-optimism/contracts/-/contracts-0.5.37.tgz", + "integrity": "sha512-HbNUUDIM1dUAM0hWPfGp3l9/Zte40zi8QhVbUSIwdYRA7jG7cZgbteqavrjW8wwFqxkWX9IrtA0KAR7pNlSAIQ==", "requires": { - "@eth-optimism/core-utils": "0.9.3", - "@ethersproject/abstract-provider": "^5.6.1", - "@ethersproject/abstract-signer": "^5.6.2" + "@eth-optimism/core-utils": "0.10.1", + "@ethersproject/abstract-provider": "^5.7.0", + "@ethersproject/abstract-signer": "^5.7.0" } }, "@eth-optimism/core-utils": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@eth-optimism/core-utils/-/core-utils-0.9.3.tgz", - "integrity": "sha512-b3V8qBgM0e85wdp3CNdJ6iSUvjT2k86F9oCAYeCIXQcQ6+EPaetjxP0T6ct6jLVepnJjoPRlW/lvWslKk1UBGg==", + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@eth-optimism/core-utils/-/core-utils-0.10.1.tgz", + "integrity": "sha512-IJvG5UtYvyz6An9QdohlCLoeB3NBFxx2lRJKlPzvYYlfugUNNCHsajRIWIwJTcPRRma0WPd46JUsKACLJDdNrA==", "requires": { - "@ethersproject/abstract-provider": "^5.6.1", - "@ethersproject/properties": "^5.6.0", - "@ethersproject/providers": "^5.6.8", - "@ethersproject/transactions": "^5.6.2", - "@ethersproject/web": "^5.6.1", + "@ethersproject/abi": "^5.7.0", + "@ethersproject/abstract-provider": "^5.7.0", + "@ethersproject/address": "^5.7.0", + "@ethersproject/bignumber": "^5.7.0", + "@ethersproject/bytes": "^5.7.0", + "@ethersproject/constants": "^5.7.0", + "@ethersproject/contracts": "^5.7.0", + "@ethersproject/hash": "^5.7.0", + "@ethersproject/keccak256": "^5.7.0", + "@ethersproject/properties": "^5.7.0", + "@ethersproject/providers": "^5.7.0", + "@ethersproject/rlp": "^5.7.0", + "@ethersproject/transactions": "^5.7.0", + "@ethersproject/web": "^5.7.0", "bufio": "^1.0.7", - "chai": "^4.3.4", - "ethers": "^5.6.8" + "chai": "^4.3.4" } }, "@eth-optimism/watcher": { @@ -52721,11 +52727,6 @@ } } }, - "@popperjs/core": { - "version": "2.11.6", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", - "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==" - }, "@portis/web3": { "version": "2.0.0-beta.59", "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-2.0.0-beta.59.tgz", @@ -54962,9 +54963,9 @@ } }, "@synthetixio/optimism-networks": { - "version": "2.74.5", - "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.5.tgz", - "integrity": "sha512-g6Ndi5MWy0qHYlgK7VWavxEah0YwP6NJVBA2kKQXBuGjFlvo3u8NYk93vWwd/u9UaL6jdVcNz23staQkTTDjiQ==", + "version": "2.74.6", + "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.6.tgz", + "integrity": "sha512-sczSMdAXhWBrPoZLm7fnM3lLalopHoRQeu9eUdZAmojNs/8+34DzhCOirPoPVqewZzKCR4wmKOIXRsSXQgcA6w==", "requires": { "@ethersproject/bignumber": "^5.6.2", "@ethersproject/bytes": "^5.6.1", @@ -54981,6 +54982,18 @@ "@ethersproject/providers": "^5.6.8", "@synthetixio/contracts-interface": "2.76.3", "@synthetixio/optimism-networks": "2.74.5" + }, + "dependencies": { + "@synthetixio/optimism-networks": { + "version": "2.74.5", + "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.5.tgz", + "integrity": "sha512-g6Ndi5MWy0qHYlgK7VWavxEah0YwP6NJVBA2kKQXBuGjFlvo3u8NYk93vWwd/u9UaL6jdVcNz23staQkTTDjiQ==", + "requires": { + "@ethersproject/bignumber": "^5.6.2", + "@ethersproject/bytes": "^5.6.1", + "@metamask/providers": "^8.1.1" + } + } } }, "@synthetixio/queries": { @@ -55010,6 +55023,16 @@ "lodash": "^4.17.21" }, "dependencies": { + "@synthetixio/optimism-networks": { + "version": "2.74.5", + "resolved": "https://registry.npmjs.org/@synthetixio/optimism-networks/-/optimism-networks-2.74.5.tgz", + "integrity": "sha512-g6Ndi5MWy0qHYlgK7VWavxEah0YwP6NJVBA2kKQXBuGjFlvo3u8NYk93vWwd/u9UaL6jdVcNz23staQkTTDjiQ==", + "requires": { + "@ethersproject/bignumber": "^5.6.2", + "@ethersproject/bytes": "^5.6.1", + "@metamask/providers": "^8.1.1" + } + }, "axios": { "version": "0.21.4", "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", @@ -55356,14 +55379,6 @@ "@babel/runtime": "^7.12.5" } }, - "@tippyjs/react": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.1.0.tgz", - "integrity": "sha512-g6Dpm46edr9T9z+BYxd/eJZa6QMFc4T4z5xrztxVlkti7AhNYf7OaE6b3Nh+boUZZ9wn8xkNq9VrQM5K4huwnQ==", - "requires": { - "tippy.js": "^6.2.0" - } - }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -81808,14 +81823,6 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, - "tippy.js": { - "version": "6.3.7", - "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", - "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", - "requires": { - "@popperjs/core": "^2.9.0" - } - }, "title-case": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz", diff --git a/package.json b/package.json index 0b8878a08d..5785fb0f03 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kwenta", - "version": "3.2.3", + "version": "3.2.4", "scripts": { "dev": "next", "build": "next build", @@ -25,7 +25,7 @@ }, "dependencies": { "@artsy/fresnel": "1.7.0", - "@eth-optimism/contracts": "^0.5.1", + "@eth-optimism/contracts": "0.5.37", "@gnosis.pm/safe-apps-wagmi": "^1.0.3", "@kwenta/synthswap": "^1.0.3", "@material-ui/core": "^4.12.3", @@ -34,12 +34,11 @@ "@reach/accordion": "0.15.1", "@reach/dialog": "0.15.0", "@synthetixio/contracts-interface": "2.76.3", - "@synthetixio/optimism-networks": "2.74.5", + "@synthetixio/optimism-networks": "2.74.6", "@synthetixio/providers": "2.74.10", "@synthetixio/queries": "3.0.11", "@synthetixio/transaction-notifier": "2.74.12", "@synthetixio/wei": "2.74.4", - "@tippyjs/react": "4.1.0", "axios": "0.27.2", "bignumber.js": "9.0.0", "codegen-graph-ts": "^0.1.4", diff --git a/pages/_app.tsx b/pages/_app.tsx index 9d5d96969d..deb6c8f3e7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -24,7 +24,6 @@ import 'styles/main.css'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import '@reach/dialog/styles.css'; -import 'tippy.js/dist/tippy.css'; import '@rainbow-me/rainbowkit/styles.css'; import '../i18n'; diff --git a/pages/market.tsx b/pages/market.tsx index 1bf481e84d..f810dfde16 100644 --- a/pages/market.tsx +++ b/pages/market.tsx @@ -10,9 +10,11 @@ import { DesktopOnlyView, MobileOrTabletView } from 'components/Media'; import Connector from 'containers/Connector'; import { FuturesContext } from 'contexts/FuturesContext'; import useFuturesData from 'hooks/useFuturesData'; +import useIsL1 from 'hooks/useIsL1'; import LeftSidebar from 'sections/futures/LeftSidebar/LeftSidebar'; import MarketInfo from 'sections/futures/MarketInfo'; import MobileTrade from 'sections/futures/MobileTrade/MobileTrade'; +import FuturesUnsupported from 'sections/futures/Trade/FuturesUnsupported'; import TradeIsolatedMargin from 'sections/futures/Trade/TradeIsolatedMargin'; import TradeCrossMargin from 'sections/futures/TradeCrossMargin'; import AppLayout from 'sections/shared/Layout/AppLayout'; @@ -26,7 +28,8 @@ type MarketComponent = FC & { getLayout: (page: HTMLElement) => JSX.Element }; const Market: MarketComponent = () => { const { t } = useTranslation(); const router = useRouter(); - const { walletAddress } = Connector.useContainer(); + const { walletAddress, isWalletConnected, unsupportedNetwork } = Connector.useContainer(); + const isL1 = useIsL1(); const marketAsset = router.query.asset as FuturesMarketAsset; @@ -51,7 +54,9 @@ const Market: MarketComponent = () => { - {walletAddress && !ready ? ( + {!isWalletConnected || unsupportedNetwork || isL1 ? ( + + ) : walletAddress && !ready ? ( ) : selectedAccountType === 'cross_margin' ? ( diff --git a/queries/futures/useGetFuturesMarginTransfers.ts b/queries/futures/useGetFuturesMarginTransfers.ts index 9876436c36..7a61161f75 100644 --- a/queries/futures/useGetFuturesMarginTransfers.ts +++ b/queries/futures/useGetFuturesMarginTransfers.ts @@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil'; import QUERY_KEYS from 'constants/queryKeys'; import Connector from 'containers/Connector'; +import useIsL2 from 'hooks/useIsL2'; import { futuresAccountState } from 'store/futures'; import { getDisplayAsset } from 'utils/futures'; import logError from 'utils/logError'; @@ -17,8 +18,9 @@ const useGetFuturesMarginTransfers = ( options?: UseQueryOptions ) => { const { selectedFuturesAddress } = useRecoilValue(futuresAccountState); - const { defaultSynthetixjs: synthetixjs, network } = Connector.useContainer(); + const { defaultSynthetixjs: synthetixjs, network, isWalletConnected } = Connector.useContainer(); const futuresEndpoint = getFuturesEndpoint(network?.id as NetworkId); + const isL2 = useIsL2(); const gqlQuery = gql` query userFuturesMarginTransfers($market: String!, $walletAddress: String!) { @@ -46,7 +48,7 @@ const useGetFuturesMarginTransfers = ( currencyKey || null ), async () => { - if (!currencyKey || !synthetixjs) return []; + if (!currencyKey || !synthetixjs || !isL2 || !isWalletConnected) return []; const { contracts } = synthetixjs!; const marketAddress = contracts[`FuturesMarket${getDisplayAsset(currencyKey)}`].address; if (!marketAddress || !selectedFuturesAddress) return []; diff --git a/queries/futures/useGetFuturesTradesForAccount.ts b/queries/futures/useGetFuturesTradesForAccount.ts index bab8084065..82db0b38b6 100644 --- a/queries/futures/useGetFuturesTradesForAccount.ts +++ b/queries/futures/useGetFuturesTradesForAccount.ts @@ -32,7 +32,7 @@ const useGetFuturesTradesForAccount = ( selectedAccountType ), async () => { - if (!currencyKey || !account) return null; + if (!currencyKey || !account || !isL2) return null; try { const response = await getFuturesTrades( diff --git a/sections/exchange/FooterCard/SettleTransactionsCard/SettleTransactionsCard.tsx b/sections/exchange/FooterCard/SettleTransactionsCard/SettleTransactionsCard.tsx index d1bd73ce1a..3b2130d2e7 100644 --- a/sections/exchange/FooterCard/SettleTransactionsCard/SettleTransactionsCard.tsx +++ b/sections/exchange/FooterCard/SettleTransactionsCard/SettleTransactionsCard.tsx @@ -1,5 +1,4 @@ import useSynthetixQueries from '@synthetixio/queries'; -import Tippy from '@tippyjs/react'; import { FC, useEffect } from 'react'; import { useTranslation, Trans } from 'react-i18next'; import { useRecoilState, useRecoilValue } from 'recoil'; @@ -7,6 +6,7 @@ import styled from 'styled-components'; import Button from 'components/Button'; import { MobileOrTabletView } from 'components/Media'; +import StyledTooltip from 'components/Tooltip/StyledTooltip'; import { EXTERNAL_LINKS } from 'constants/links'; import Connector from 'containers/Connector'; import TransactionNotifier from 'containers/TransactionNotifier'; @@ -106,7 +106,7 @@ const SettleTransactionsCard: FC = ({ numEntries }) 0} - placement="top" + preset="top" content={
{t('exchange.errors.settlement-waiting', { @@ -156,7 +156,7 @@ export const MessageItems = styled.span` display: grid; `; -export const ErrorTooltip = styled(Tippy)` +export const ErrorTooltip = styled(StyledTooltip)` font-size: 12px; background-color: ${(props) => props.theme.colors.red}; color: ${(props) => props.theme.colors.selectedTheme.button.text.primary}; diff --git a/sections/exchange/FooterCard/TradeSummaryCard/GasPriceSummaryItem.tsx b/sections/exchange/FooterCard/TradeSummaryCard/GasPriceSummaryItem.tsx deleted file mode 100644 index d5d31636e9..0000000000 --- a/sections/exchange/FooterCard/TradeSummaryCard/GasPriceSummaryItem.tsx +++ /dev/null @@ -1,223 +0,0 @@ -import { GasPrices, GAS_SPEEDS } from '@synthetixio/queries'; -import Tippy from '@tippyjs/react'; -import { FC } from 'react'; -import { useTranslation } from 'react-i18next'; -import styled from 'styled-components'; - -import InfoIcon from 'assets/svg/app/info.svg'; -import Button from 'components/Button'; -import NumericInput from 'components/Input/NumericInput'; -import { CurrencyKey } from 'constants/currency'; -import { NO_VALUE, ESTIMATE_VALUE } from 'constants/placeholder'; -import useGas, { parseGasPriceObject } from 'hooks/useGas'; -import useIsL1 from 'hooks/useIsL1'; -import useIsL2 from 'hooks/useIsL2'; -import useSelectedPriceCurrency from 'hooks/useSelectedPriceCurrency'; -import { NumericValue } from 'styles/common'; -import { formatCurrency, formatNumber } from 'utils/formatters/number'; - -import { SummaryItem, SummaryItemValue, SummaryItemLabel } from '../common'; - -type GasPriceSummaryItemProps = { - gasPrices: GasPrices | undefined; - transactionFee?: number | null; - className?: string; -}; - -const GasPriceSummaryItem: FC = ({ - gasPrices, - transactionFee, - ...rest -}) => { - const { t } = useTranslation(); - const { selectedPriceCurrency } = useSelectedPriceCurrency(); - const isL2 = useIsL2(); - const isMainnet = useIsL1(); - const { - gasPrice, - gasSpeed, - setGasSpeed, - isCustomGasPrice, - customGasPrice, - setCustomGasPrice, - } = useGas(); - - const gasEstimateInfo = isMainnet ? ( - - It is recommended to not edit the Max Fee. The difference between Max Fee and Current Gas - Price will be refunded to the user - - ) : null; - - const gasPriceItem = isCustomGasPrice ? ( - {formatNumber(customGasPrice, { minDecimals: 4 })} - ) : ( - - {ESTIMATE_VALUE} {formatNumber(gasPrice ?? 0, { minDecimals: 4 })} - - ); - - return ( - - - {isMainnet || !isCustomGasPrice - ? t('exchange.summary-info.max-fee-gwei') - : t('exchange.summary-info.gas-price-gwei')} - - - {gasPrice != null ? ( - <> - {transactionFee != null ? ( - - - {formatCurrency(selectedPriceCurrency.name as CurrencyKey, transactionFee, { - sign: selectedPriceCurrency.sign, - maxDecimals: 1, - })} - - {gasEstimateInfo} - - } - arrow={false} - > - - {gasPriceItem} - - - - ) : ( - gasPriceItem - )} - {isL2 ? null : ( - - - setCustomGasPrice(value)} - placeholder={t('common.custom')} - /> - - {GAS_SPEEDS.map((speed) => ( - { - setCustomGasPrice(''); - setGasSpeed(speed); - }} - isActive={isCustomGasPrice ? false : gasSpeed === speed} - > - {t(`common.gas-prices.${speed}`)} - - {formatNumber(parseGasPriceObject(gasPrices![speed]) ?? 0, { - maxDecimals: 1, - })} - - - ))} - - } - interactive - > - {t('common.edit')} - - )} - - ) : ( - NO_VALUE - )} - - - ); -}; - -export const GasPriceTooltip = styled(Tippy)` - background: ${(props) => props.theme.colors.elderberry}; - border: 0.5px solid ${(props) => props.theme.colors.navy}; - border-radius: 4px; - width: 120px; - .tippy-content { - padding: 0; - } -`; - -export const GasPriceCostTooltip = styled(GasPriceTooltip)` - width: auto; - font-size: 12px; - .tippy-content { - padding: 5px; - font-family: ${(props) => props.theme.fonts.mono}; - } -`; - -export const GasSelectContainer = styled.div` - padding: 16px 0 8px 0; -`; - -export const CustomGasPriceContainer = styled.div` - margin: 0 10px 5px 10px; -`; - -export const GasEstimateUSD = styled.span` - text-align: center; -`; - -export const GasEstimateUSDAmount = styled.p` - color: #ffdf6d; -`; - -export const GasEstimateInfo = styled.p` - text-align: center; -`; - -export const CustomGasPrice = styled(NumericInput)` - width: 100%; - border: 0; - font-size: 12px; - ::placeholder { - font-family: ${(props) => props.theme.fonts.mono}; - } -`; - -export const StyledGasButton = styled(Button)` - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding-left: 10px; - padding-right: 10px; -`; - -export const GasPriceItem = styled.span` - display: inline-flex; - align-items: center; - cursor: pointer; - svg { - margin-left: 5px; - } -`; - -export const StyledGasEditButton = styled.span` - font-family: ${(props) => props.theme.fonts.bold}; - padding-left: 5px; - cursor: pointer; - color: ${(props) => props.theme.colors.goldColors.color3}; - text-transform: uppercase; -`; - -export const ErrorTooltip = styled(Tippy)` - font-size: 12px; - background-color: ${(props) => props.theme.colors.red}; - color: ${(props) => props.theme.colors.selectedTheme.button.text}; - .tippy-arrow { - color: ${(props) => props.theme.colors.red}; - } -`; - -export default GasPriceSummaryItem; diff --git a/sections/exchange/FooterCard/TradeSummaryCard/TradeSummaryCard.tsx b/sections/exchange/FooterCard/TradeSummaryCard/TradeSummaryCard.tsx index 7dd1de0ce4..dda03c96f9 100644 --- a/sections/exchange/FooterCard/TradeSummaryCard/TradeSummaryCard.tsx +++ b/sections/exchange/FooterCard/TradeSummaryCard/TradeSummaryCard.tsx @@ -1,6 +1,5 @@ import useSynthetixQueries from '@synthetixio/queries'; import Wei from '@synthetixio/wei'; -import Tippy from '@tippyjs/react'; import { FC, ReactNode, useMemo, memo } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; @@ -8,6 +7,7 @@ import styled from 'styled-components'; import Button from 'components/Button'; import Card from 'components/Card'; import { DesktopOnlyView, MobileOrTabletView } from 'components/Media'; +import StyledTooltip from 'components/Tooltip/StyledTooltip'; import { CurrencyKey } from 'constants/currency'; import FeeCostSummaryItem from 'sections/shared/components/FeeCostSummary'; import FeeRateSummaryItem from 'sections/shared/components/FeeRateSummary'; @@ -82,7 +82,7 @@ const TradeSummaryCard: FC = memo( {summaryItems} 0} - placement="top" + preset="top" content={
{t('exchange.errors.fee-reclamation', { @@ -114,7 +114,7 @@ const TradeSummaryCard: FC = memo( } ); -export const ErrorTooltip = styled(Tippy)` +export const ErrorTooltip = styled(StyledTooltip)` font-size: 12px; background-color: ${(props) => props.theme.colors.red}; color: ${(props) => props.theme.colors.selectedTheme.button.text.primary}; diff --git a/sections/futures/Trade/FuturesUnsupported.tsx b/sections/futures/Trade/FuturesUnsupported.tsx new file mode 100644 index 0000000000..ae1c49378d --- /dev/null +++ b/sections/futures/Trade/FuturesUnsupported.tsx @@ -0,0 +1,63 @@ +import { useConnectModal } from '@rainbow-me/rainbowkit'; +import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; + +import useNetworkSwitcher from 'hooks/useNetworkSwitcher'; +import { BorderedPanel } from 'styles/common'; + +type FuturesUnsupportedProps = { + isWalletConnected: boolean; +}; + +const FuturesUnsupported: React.FC = ({ isWalletConnected }) => { + const { t } = useTranslation(); + const { switchToL2 } = useNetworkSwitcher(); + const { openConnectModal: connectWallet } = useConnectModal(); + return ( + + {t('futures.page-title')} + {isWalletConnected ? ( + <> + {t('common.l2-cta')} + +
{t('homepage.l2.cta-buttons.switch-l2')}
+ + + ) : ( + <> + {t('common.perp-cta')} + +
{t('common.wallet.connect-wallet')}
+ + + )} + + ); +}; + +const UnsupportedMessage = styled.div` + margin-top: 12px; +`; + +const LinkContainer = styled.div` + margin-top: 12px; + div { + cursor: pointer; + font-size: 12px; + color: ${(props) => props.theme.colors.selectedTheme.button.text.primary}; + } +`; + +const Title = styled.div` + font-family: ${(props) => props.theme.fonts.monoBold}; + font-size: 23px; + color: ${(props) => props.theme.colors.selectedTheme.button.text.primary}; +`; + +const MessageContainer = styled(BorderedPanel)` + text-align: center; + padding: 20px; + color: ${(props) => props.theme.colors.selectedTheme.gray}; +`; + +export default FuturesUnsupported; diff --git a/sections/futures/Trades/Trades.tsx b/sections/futures/Trades/Trades.tsx index d8ea78d64e..4ad0cb75c7 100644 --- a/sections/futures/Trades/Trades.tsx +++ b/sections/futures/Trades/Trades.tsx @@ -10,6 +10,8 @@ import Table, { TableNoResults } from 'components/Table'; import { DEFAULT_CRYPTO_DECIMALS } from 'constants/defaults'; import { ETH_UNIT } from 'constants/network'; import BlockExplorer from 'containers/BlockExplorer'; +import useIsL2 from 'hooks/useIsL2'; +import useNetworkSwitcher from 'hooks/useNetworkSwitcher'; import { FuturesTrade } from 'queries/futures/types'; import { ExternalLink, GridDivCenteredRow } from 'styles/common'; import { formatCryptoCurrency, formatDollars } from 'utils/formatters/number'; @@ -28,6 +30,9 @@ type TradesProps = { const Trades: React.FC = ({ history, isLoading, isLoaded, marketAsset }) => { const { t } = useTranslation(); const { blockExplorerInstance } = BlockExplorer.useContainer(); + const { switchToL2 } = useNetworkSwitcher(); + + const isL2 = useIsL2(); const historyData = React.useMemo(() => { return history.map((trade: FuturesTrade) => { @@ -161,7 +166,12 @@ const Trades: React.FC = ({ history, isLoading, isLoaded, marketAss data={historyData} isLoading={isLoading && isLoaded} noResultsMessage={ - isLoaded && historyData?.length === 0 ? ( + !isL2 ? ( + + {t('common.l2-cta')} +
{t('homepage.l2.cta-buttons.switch-l2')}
+ + ) : isLoaded && historyData?.length === 0 ? ( {t('futures.market.user.trades.table.no-results')} ) : undefined } diff --git a/sections/futures/Transfers/Transfers.tsx b/sections/futures/Transfers/Transfers.tsx index 8d7444daea..47583e8f8d 100644 --- a/sections/futures/Transfers/Transfers.tsx +++ b/sections/futures/Transfers/Transfers.tsx @@ -4,6 +4,8 @@ import styled from 'styled-components'; import Table, { TableNoResults } from 'components/Table'; import BlockExplorer from 'containers/BlockExplorer'; +import useIsL2 from 'hooks/useIsL2'; +import useNetworkSwitcher from 'hooks/useNetworkSwitcher'; import { MarginTransfer } from 'queries/futures/types'; import { ExternalLink } from 'styles/common'; import { timePresentation } from 'utils/formatters/date'; @@ -18,6 +20,9 @@ type TransferProps = { const Transfers: FC = ({ marginTransfers, isLoading, isLoaded }: TransferProps) => { const { t } = useTranslation(); const { blockExplorerInstance } = BlockExplorer.useContainer(); + const { switchToL2 } = useNetworkSwitcher(); + + const isL2 = useIsL2(); const columnsDeps = useMemo(() => [marginTransfers], [marginTransfers]); return ( @@ -79,9 +84,16 @@ const Transfers: FC = ({ marginTransfers, isLoading, isLoaded }: columnsDeps={columnsDeps} isLoading={isLoading && !isLoaded} noResultsMessage={ - - {t('futures.market.user.transfers.table.no-results')} - + !isL2 ? ( + + {t('common.l2-cta')} +
{t('homepage.l2.cta-buttons.switch-l2')}
+ + ) : ( + + {t('futures.market.user.transfers.table.no-results')} + + ) } showPagination /> diff --git a/sections/futures/UserInfo/OpenOrdersTable.tsx b/sections/futures/UserInfo/OpenOrdersTable.tsx index 2329c3d787..5607eae9bb 100644 --- a/sections/futures/UserInfo/OpenOrdersTable.tsx +++ b/sections/futures/UserInfo/OpenOrdersTable.tsx @@ -12,6 +12,8 @@ import Table, { TableNoResults } from 'components/Table'; import PositionType from 'components/Text/PositionType'; import TransactionNotifier from 'containers/TransactionNotifier'; import { useRefetchContext } from 'contexts/RefetchContext'; +import useIsL2 from 'hooks/useIsL2'; +import useNetworkSwitcher from 'hooks/useNetworkSwitcher'; import { FuturesOrder, PositionSide } from 'queries/futures/types'; import { currentMarketState, futuresAccountState, openOrdersState } from 'store/futures'; import { gasSpeedState } from 'store/wallet'; @@ -23,7 +25,9 @@ const OpenOrdersTable: React.FC = () => { const { t } = useTranslation(); const { monitorTransaction } = TransactionNotifier.useContainer(); const { useSynthetixTxn, useEthGasPriceQuery } = useSynthetixQueries(); + const { switchToL2 } = useNetworkSwitcher(); + const isL2 = useIsL2(); const gasSpeed = useRecoilValue(gasSpeedState); const currencyKey = useRecoilValue(currentMarketState); const openOrders = useRecoilValue(openOrdersState); @@ -79,7 +83,16 @@ const OpenOrdersTable: React.FC = () => { highlightRowsOnHover showPagination noResultsMessage={ - {t('futures.market.user.open-orders.table.no-result')} + !isL2 ? ( + + {t('common.l2-cta')} +
{t('homepage.l2.cta-buttons.switch-l2')}
+ + ) : ( + + {t('futures.market.user.open-orders.table.no-result')} + + ) } columns={[ { @@ -190,7 +203,16 @@ const OpenOrdersTable: React.FC = () => { {t('futures.market.user.open-orders.table.no-result')} + !isL2 ? ( + + {t('common.l2-cta')} +
{t('homepage.l2.cta-buttons.switch-l2')}
+ + ) : ( + + {t('futures.market.user.open-orders.table.no-result')} + + ) } onTableRowClick={(row) => setSelectedOrder(row.original)} columns={[ diff --git a/sections/shared/Layout/AppLayout/Header/WalletButtons.tsx b/sections/shared/Layout/AppLayout/Header/WalletButtons.tsx index 97674a4c21..e0f147c89f 100644 --- a/sections/shared/Layout/AppLayout/Header/WalletButtons.tsx +++ b/sections/shared/Layout/AppLayout/Header/WalletButtons.tsx @@ -50,7 +50,7 @@ const WalletButtons: React.FC = () => { const walletIsConnectedButNotSupported = ( <> - + {t('homepage.l2.cta-buttons.switch-networks')} @@ -125,7 +125,6 @@ const ConnectButton = styled(Button)` const SwitchNetworkButton = styled(Button)` font-size: 13px; - color: ${(props) => props.theme.colors.common.primaryWhite}; font-family: ${(props) => props.theme.fonts.mono}; `; diff --git a/sections/shared/components/FeeRateSummary/FeeRateSummary.tsx b/sections/shared/components/FeeRateSummary/FeeRateSummary.tsx index e79307d58f..4b64c6ec58 100644 --- a/sections/shared/components/FeeRateSummary/FeeRateSummary.tsx +++ b/sections/shared/components/FeeRateSummary/FeeRateSummary.tsx @@ -1,10 +1,10 @@ import Wei from '@synthetixio/wei'; -import Tippy from '@tippyjs/react'; import { FC, memo } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import TimerIcon from 'assets/svg/app/timer.svg'; +import StyledTooltip from 'components/Tooltip/StyledTooltip'; import { NO_VALUE } from 'constants/placeholder'; import { formatPercent } from 'utils/formatters/number'; @@ -34,17 +34,15 @@ const FeeRateSummaryItem: FC = memo(({ totalFeeRate, ba totalFeeRate.sub(baseFeeRate).gt(0) ? ( <> + - {formatPercent(totalFeeRate.sub(baseFeeRate), { minDecimals: 2 })} - + ) : null ) : null} @@ -64,16 +62,6 @@ export const DynamicFeeLabel = styled.span` color: ${(props) => props.theme.colors.common.secondaryGray}; `; -export const DynamicFeeRateTooltip = styled(Tippy)` - width: auto; - text-align: justify; - font-size: 12px; - .tippy-content { - padding: 15px; - font-family: ${(props) => props.theme.fonts.mono}; - } -`; - export const DynamicFeeRateItem = styled.span` color: ${(props) => props.theme.colors.selectedTheme.gold}; display: flex; @@ -88,4 +76,10 @@ export const DynamicFeeRateItem = styled.span` } `; +const CustomStyledTooltip = styled(StyledTooltip)` + width: 300px; + padding: 0px 4px; + text-align: center; +`; + export default FeeRateSummaryItem; diff --git a/sections/shared/components/SlippageSelect/SlippageSelect.tsx b/sections/shared/components/SlippageSelect/SlippageSelect.tsx index 711562dca3..02e1d5c85e 100644 --- a/sections/shared/components/SlippageSelect/SlippageSelect.tsx +++ b/sections/shared/components/SlippageSelect/SlippageSelect.tsx @@ -1,4 +1,3 @@ -import Tippy from '@tippyjs/react'; import React, { useMemo } from 'react'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -7,7 +6,8 @@ import styled from 'styled-components'; import InfoIcon from 'assets/svg/app/info.svg'; import Button from 'components/Button'; import NumericInput from 'components/Input/NumericInput'; -import { Tooltip, NumericValue, FlexDivRowCentered } from 'styles/common'; +import StyledTooltip from 'components/Tooltip/StyledTooltip'; +import { NumericValue, FlexDivRowCentered } from 'styles/common'; import { formatPercent } from 'utils/formatters/number'; import { SummaryItem, SummaryItemLabel, SummaryItemValue } from '../common'; @@ -58,7 +58,6 @@ const SlippageSelect: React.FC = ({ {t('common.summary.max-slippage-tolerance.title')} {t('common.summary.max-slippage-tolerance.helper')}} - arrow={false} > @@ -67,9 +66,7 @@ const SlippageSelect: React.FC = ({ {slippageItem} - @@ -95,10 +92,9 @@ const SlippageSelect: React.FC = ({ ))} } - interactive > {t('common.edit')} - + ); @@ -113,14 +109,11 @@ const CustomSlippageContainer = styled.div` margin: 0 10px 5px 10px; `; -const SlippageHelperTooltip = styled(Tippy)` +const SlippageHelperTooltip = styled(StyledTooltip)` background: ${(props) => props.theme.colors.elderberry}; border: 0.5px solid ${(props) => props.theme.colors.navy}; border-radius: 4px; width: 120px; - .tippy-content { - padding: 0; - } `; const CustomSlippage = styled(NumericInput)` diff --git a/sections/shared/modals/TxConfirmationModal/TxConfirmationModal.tsx b/sections/shared/modals/TxConfirmationModal/TxConfirmationModal.tsx index 3a2b96afd4..a277c57770 100644 --- a/sections/shared/modals/TxConfirmationModal/TxConfirmationModal.tsx +++ b/sections/shared/modals/TxConfirmationModal/TxConfirmationModal.tsx @@ -10,6 +10,7 @@ import OneInchImage from 'assets/svg/providers/1inch.svg'; import BaseModal from 'components/BaseModal'; import Currency from 'components/Currency'; import Error from 'components/Error'; +import StyledTooltip from 'components/Tooltip/StyledTooltip'; import { ESTIMATE_VALUE } from 'constants/placeholder'; import Connector from 'containers/Connector'; import useCurrencyPrice from 'hooks/useCurrencyPrice'; @@ -21,8 +22,6 @@ import { numericValueCSS, NoTextTransform, FlexDivColCentered, - Tooltip, - ExternalLink, } from 'styles/common'; import { formatCurrency, LONG_CRYPTO_CURRENCY_DECIMALS } from 'utils/formatters/number'; @@ -150,15 +149,14 @@ export const TxConfirmationModal: FC = ({ /> - {getBaseCurrencyAmount(LONG_CRYPTO_CURRENCY_DECIMALS)}} - arrow={false} > {ESTIMATE_VALUE} {getBaseCurrencyAmount()} - + {feeCost && ( @@ -169,25 +167,20 @@ export const TxConfirmationModal: FC = ({ values={{ currencyKey: baseCurrencyKey }} components={[]} /> - , - , - ]} + components={[]} /> } - arrow={false} - interactive > - + @@ -223,22 +216,19 @@ export const TxConfirmationModal: FC = ({ components={[]} />   - ]} /> } - arrow={false} - interactive > - + @@ -337,12 +327,22 @@ const TxProviderContainer = styled.div` } `; -const StyledTooltip = styled(Tooltip)` - .tippy-content { - padding: 5px; - font-family: ${(props) => props.theme.fonts.mono}; - font-size: 12px; - } +const CustomStyledTooltip = styled(StyledTooltip)` + padding: 10px; + width: 100%; + word-break: all; +`; + +const ExchangeFeeHintTooltip = styled(StyledTooltip)` + width: 240px; + padding: 0px 10px; + margin: 0px 0px 0px 40px; +`; + +const PriceAdjustmentTooltip = styled(StyledTooltip)` + width: 240px; + padding: 0px 10px; + margin: 0px; `; export const TooltipItem = styled.span` diff --git a/styles/common.tsx b/styles/common.tsx index e4fa847ff8..5de0d70e38 100644 --- a/styles/common.tsx +++ b/styles/common.tsx @@ -1,8 +1,8 @@ -import Tippy from '@tippyjs/react'; import styled, { css } from 'styled-components'; import Button, { border } from 'components/Button'; import NumericInput from 'components/Input/NumericInput'; +import { Tooltip as DefaultTooltip } from 'components/Tooltip/TooltipStyles'; import { zIndex } from 'constants/ui'; import media from 'styles/media'; @@ -181,13 +181,13 @@ export const MobileScreenContainer = styled.div` padding-bottom: 80px; `; -export const Tooltip = styled(Tippy)` +export const Tooltip = styled(DefaultTooltip)` background-color: ${(props) => props.theme.colors.cellGradient}; border: 0.5px solid ${(props) => props.theme.colors.navy}; border-radius: 4px; `; -export const InfoTooltip = styled(Tippy)` +export const InfoTooltip = styled(DefaultTooltip)` font-size: 12px; background-color: ${(props) => props.theme.colors.navy}; color: ${(props) => props.theme.colors.selectedTheme.button.text.primary}; @@ -208,9 +208,6 @@ export const SolidTooltip = styled(Tooltip).attrs({ interactive: true, })` width: 150px; - .tippy-content { - padding: 0; - } `; export const SolidTooltipContent = styled.div` diff --git a/translations/en.json b/translations/en.json index 275a96f6e8..236616419d 100644 --- a/translations/en.json +++ b/translations/en.json @@ -515,7 +515,7 @@ "page-title": "Trade History | Kwenta" }, "futures": { - "page-title": "Futures | Kwenta", + "page-title": "Kwenta Futures", "wallet-overview": { "no-positions": "You have no open positions. Open a position now: ", "title": "wallet overview", @@ -554,8 +554,8 @@ "position-card": { "position-side": "Side", "position-size": "Size", - "r-pnl": "Realized PnL", - "u-pnl": "Unrealized PnL", + "r-pnl": "Realized P&L", + "u-pnl": "Unrealized P&L", "leverage": "Leverage", "liquidation-price": "Liq Price", "net-funding": "Net Funding", @@ -865,10 +865,10 @@ "total-trades": "Total Trades", "total-volume": "Total Volume", "liquidations": "Liquidations", - "24h-pnl": "24H PnL", - "pnl": "PnL", - "total-pnl": "PnL ($)", - "percent-pnl": "PnL (%)", + "24h-pnl": "24H P&L", + "pnl": "P&L", + "total-pnl": "P&L ($)", + "percent-pnl": "P&L (%)", "rank-mobile": "#" } }, @@ -881,7 +881,7 @@ "liquidated": "Liquidated", "total-trades": "Trades", "total-volume": "Total Volume", - "total-pnl": "Realized PnL" + "total-pnl": "Realized P&L" } }, "competition": { @@ -941,7 +941,7 @@ "title": "confirm transaction", "confirm-with-provider": "Confirm your transaction through your wallet.", "exchange-fee-hint": "The Synthetix protocol exchange fee for <0>{{currencyKey}}.", - "price-adjustment-hint": "This transaction is subject to a price adjustment period. <0>Learn more." + "price-adjustment-hint": "This transaction is subject to a price adjustment period." }, "approve-transaction": { "title": "approve transaction", @@ -1066,7 +1066,7 @@ "coming-soon": "Soon" }, "wallet": { - "connect-wallet": "connect wallet", + "connect-wallet": "Connect Wallet", "account-info": "Account Info", "switch-accounts": "Switch Accounts", "disconnect-wallet": "Disconnect Wallet",