From 0cc58b6e84cd2ea70f4d87a094c396cc50345db2 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Thu, 23 Nov 2023 09:29:31 +0100 Subject: [PATCH 1/5] fix: added clickaway handler and fixed z-index issues (#646) --- .../Navigation/DesktopNavigation.tsx | 75 ++++--- tailwind.config.js | 4 +- yarn.lock | 212 +----------------- 3 files changed, 46 insertions(+), 245 deletions(-) diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx index c53860bd..859b1b80 100644 --- a/src/components/Navigation/DesktopNavigation.tsx +++ b/src/components/Navigation/DesktopNavigation.tsx @@ -31,7 +31,9 @@ export default function DesktopNavigation() { return (
@@ -63,38 +65,45 @@ export default function DesktopNavigation() { text='More' className='!text-base !p-0 !min-h-0' /> -
-
    - {menu.map((item, index) => ( -
  • - setShowMenu(false)} - isActive={getIsActive(item.pages)} - className='w-full px-4 whitespace-nowrap' - target={item.externalUrl ? '_blank' : undefined} - > - {item.label} - -
    • - ))} -
-
+ {showMenu && ( + <> +
+
    + {menu.map((item, index) => ( +
  • + setShowMenu(false)} + isActive={getIsActive(item.pages)} + className='w-full px-4 whitespace-nowrap' + target={item.externalUrl ? '_blank' : undefined} + > + {item.label} + +
    • + ))} +
+
+
setShowMenu(false)} + role='button' + /> + + )}
)} diff --git a/tailwind.config.js b/tailwind.config.js index 493a5781..5c1ff0a6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -136,8 +136,8 @@ module.exports = { }, containers: { 'nav-0': '100px', - 'nav-1': '160px', - 'nav-2': '250px', + 'nav-1': '185px', + 'nav-2': '270px', 'nav-3': '400px', 'nav-4': '500px', 'nav-5': '600px', diff --git a/yarn.lock b/yarn.lock index ef124123..735d00d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1574,13 +1574,6 @@ resolved "https://registry.npmjs.org/@cosmjs/utils/-/utils-0.31.1.tgz" integrity sha512-n4Se1wu4GnKwztQHNFfJvUeWcpvx3o8cWhSbNs9JQShEuB3nv3R5lqFBtDCgHZF/emFQAP+ZjF8bTfCs9UBGhA== -"@cspotcode/source-map-support@^0.8.0": - version "0.8.1" - resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1" - integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw== - dependencies: - "@jridgewell/trace-mapping" "0.3.9" - "@delphi-labs/shuttle-react@^3.10.0": version "3.10.0" resolved "https://registry.yarnpkg.com/@delphi-labs/shuttle-react/-/shuttle-react-3.10.0.tgz#1f4a81cfa4039f2fe548b6671919d0d66893af85" @@ -1615,32 +1608,6 @@ tslib "^2.6.0" tsup "^7.1.0" -"@dfinity/agent@^0.12.0": - version "0.12.2" - resolved "https://registry.yarnpkg.com/@dfinity/agent/-/agent-0.12.2.tgz#3317c80ed9888c1e9000765968bb942e01c1b119" - integrity sha512-yEgotz3lOt4906k0V0L91szYnYPEE4dotVzsTU6UnxtOwYBFsOL1J1COjx+FLAUDQ4s7zCa+VlS3WU69PvaxsA== - dependencies: - base64-arraybuffer "^0.2.0" - bignumber.js "^9.0.0" - borc "^2.1.1" - js-sha256 "0.9.0" - simple-cbor "^0.4.1" - ts-node "^10.8.2" - -"@dfinity/candid@^0.12.0": - version "0.12.2" - resolved "https://registry.yarnpkg.com/@dfinity/candid/-/candid-0.12.2.tgz#9170304d7fbce50d29b5fd602d988fc23c5b333d" - integrity sha512-2wlFetzNr6iXQrtOSSDaxBG6HgOZv3eDATZVvuGEdS1gkAR8jnLynDQevl0j50BEccO2Sk05W+iVDtSfeRvhSA== - dependencies: - ts-node "^10.8.2" - -"@dfinity/principal@^0.12.0": - version "0.12.2" - resolved "https://registry.yarnpkg.com/@dfinity/principal/-/principal-0.12.2.tgz#2d767e966eaf98d5d05e81db0bc81b9d5d004ebd" - integrity sha512-VXB2itNAwcwI2Cegt7gxj342ixFxF8Ps+rb74yTZBf8CPv5K20dUOt6MkhqbagjV8NASMWUWYpvsLM84ukVNfw== - dependencies: - ts-node "^10.8.2" - "@esbuild/android-arm64@0.18.14": version "0.18.14" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.14.tgz#d86197e6ff965a187b2ea2704915f596a040ed4b" @@ -2590,11 +2557,6 @@ resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz" integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== -"@jridgewell/resolve-uri@^3.0.3": - version "3.1.1" - resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" - integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== - "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1": version "1.1.2" resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz" @@ -2605,14 +2567,6 @@ resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz" integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== -"@jridgewell/trace-mapping@0.3.9": - version "0.3.9" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9" - integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ== - dependencies: - "@jridgewell/resolve-uri" "^3.0.3" - "@jridgewell/sourcemap-codec" "^1.4.10" - "@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.18": version "0.3.18" resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz" @@ -2888,17 +2842,6 @@ resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== -"@psychedelic/sonic-js@^0.4.0": - version "0.4.0" - resolved "https://registry.yarnpkg.com/@psychedelic/sonic-js/-/sonic-js-0.4.0.tgz#9ba31f2edb3aa82950bf29550d4611d524c63c72" - integrity sha512-jOaxghdGeyuENNlKEIBsFcScU8n1BdF77PAIif0JEIRJ4OXO7ltg4ApVTkXP2pplaGnZ+vwN1ZV7+b10RbyMHQ== - dependencies: - "@dfinity/agent" "^0.12.0" - "@dfinity/candid" "^0.12.0" - "@dfinity/principal" "^0.12.0" - bignumber.js "^9.0.2" - cross-fetch "^3.1.5" - "@react-spring/animated@~9.7.3": version "9.7.3" resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz" @@ -3524,26 +3467,6 @@ resolved "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz" integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== -"@tsconfig/node10@^1.0.7": - version "1.0.9" - resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2" - integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA== - -"@tsconfig/node12@^1.0.7": - version "1.0.11" - resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d" - integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag== - -"@tsconfig/node14@^1.0.0": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1" - integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow== - -"@tsconfig/node16@^1.0.2": - version "1.0.4" - resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9" - integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA== - "@types/aria-query@^5.0.1": version "5.0.1" resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz" @@ -4121,11 +4044,6 @@ acorn-walk@^8.0.2: resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz" integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA== -acorn-walk@^8.1.1: - version "8.3.0" - resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.0.tgz#2097665af50fd0cf7a2dfccd2b9368964e66540f" - integrity sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA== - acorn@7.1.1: version "7.1.1" resolved "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz" @@ -4136,11 +4054,6 @@ acorn@^8.1.0, acorn@^8.8.1: resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz" integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw== -acorn@^8.4.1: - version "8.11.2" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b" - integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w== - acorn@^8.9.0: version "8.10.0" resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz" @@ -4229,11 +4142,6 @@ anymatch@^3.0.3, anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" -arg@^4.1.0: - version "4.1.3" - resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089" - integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA== - arg@^5.0.2: version "5.0.2" resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz" @@ -4499,11 +4407,6 @@ base-x@^3.0.2: dependencies: safe-buffer "^5.0.1" -base64-arraybuffer@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45" - integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ== - base64-js@^1.3.0, base64-js@^1.3.1: version "1.5.1" resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz" @@ -4524,7 +4427,7 @@ big-integer@^1.6.48: resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz" integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg== -bignumber.js@^9.0.0, bignumber.js@^9.0.1, bignumber.js@^9.0.2, bignumber.js@^9.1.2: +bignumber.js@^9.0.1, bignumber.js@^9.1.2: version "9.1.2" resolved "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz" integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug== @@ -4593,19 +4496,6 @@ boolbase@^1.0.0: resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz" integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== -borc@^2.1.1: - version "2.1.2" - resolved "https://registry.yarnpkg.com/borc/-/borc-2.1.2.tgz#6ce75e7da5ce711b963755117dd1b187f6f8cf19" - integrity sha512-Sy9eoUi4OiKzq7VovMn246iTo17kzuyHJKomCfpWMlI6RpfN1gk95w7d7gH264nApVLg0HZfcpz62/g4VH1Y4w== - dependencies: - bignumber.js "^9.0.0" - buffer "^5.5.0" - commander "^2.15.0" - ieee754 "^1.1.13" - iso-url "~0.4.7" - json-text-sequence "~0.1.0" - readable-stream "^3.6.0" - brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz" @@ -4693,14 +4583,6 @@ buffer-xor@^1.0.3: resolved "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz" integrity sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ== -buffer@^5.5.0: - version "5.7.1" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0" - integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ== - dependencies: - base64-js "^1.3.1" - ieee754 "^1.1.13" - buffer@^6.0.3: version "6.0.3" resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz" @@ -4933,11 +4815,6 @@ commander@11.1.0: resolved "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz" integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ== -commander@^2.15.0: - version "2.20.3" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" - integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== - commander@^4.0.0: version "4.1.1" resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz" @@ -5075,18 +4952,6 @@ create-jest@^29.7.0: jest-util "^29.7.0" prompts "^2.0.1" -create-require@^1.1.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333" - integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ== - -cross-fetch@^3.1.5: - version "3.1.8" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82" - integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg== - dependencies: - node-fetch "^2.6.12" - cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz" @@ -5370,11 +5235,6 @@ delayed-stream@~1.0.0: resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz" integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== -delimit-stream@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/delimit-stream/-/delimit-stream-0.1.0.tgz#9b8319477c0e5f8aeb3ce357ae305fc25ea1cd2b" - integrity sha512-a02fiQ7poS5CnjiJBAsjGLPp5EwVoGHNeu9sziBd9huppRfsAFIpv5zNLv0V1gbop53ilngAf5Kf331AwcoRBQ== - detect-browser@5.3.0: version "5.3.0" resolved "https://registry.npmjs.org/detect-browser/-/detect-browser-5.3.0.tgz" @@ -5395,11 +5255,6 @@ diff-sequences@^29.6.3: resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz" integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q== -diff@^4.0.1: - version "4.0.2" - resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" - integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A== - dir-glob@^3.0.1: version "3.0.1" resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz" @@ -6775,7 +6630,7 @@ identity-obj-proxy@^3.0.0: dependencies: harmony-reflect "^1.4.6" -ieee754@^1.1.13, ieee754@^1.2.1: +ieee754@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== @@ -7124,11 +6979,6 @@ isexe@^2.0.0: resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz" integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== -iso-url@~0.4.7: - version "0.4.7" - resolved "https://registry.yarnpkg.com/iso-url/-/iso-url-0.4.7.tgz#de7e48120dae46921079fe78f325ac9e9217a385" - integrity sha512-27fFRDnPAMnHGLq36bWTpKET+eiXct3ENlCcdcMdk+mjXrb2kw3mhBUg1B7ewAC0kVzlOPhADzQgz1SE6Tglog== - isomorphic-ws@^4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz" @@ -7580,11 +7430,6 @@ joycon@^3.0.1: resolved "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz" integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw== -js-sha256@0.9.0: - version "0.9.0" - resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966" - integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA== - js-sha3@0.8.0, js-sha3@^0.8.0: version "0.8.0" resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz" @@ -7672,13 +7517,6 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== -json-text-sequence@~0.1.0: - version "0.1.1" - resolved "https://registry.yarnpkg.com/json-text-sequence/-/json-text-sequence-0.1.1.tgz#a72f217dc4afc4629fff5feb304dc1bd51a2f3d2" - integrity sha512-L3mEegEWHRekSHjc7+sc8eJhba9Clq1PZ8kMkzf8OxElhXc8O4TS5MwcVlj9aEbm5dr81N90WHC5nAz3UO971w== - dependencies: - delimit-stream "0.1.0" - json5@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz" @@ -7970,11 +7808,6 @@ make-dir@^3.0.0: dependencies: semver "^6.0.0" -make-error@^1.1.1: - version "1.3.6" - resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2" - integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== - makeerror@1.0.12: version "1.0.12" resolved "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz" @@ -8197,13 +8030,6 @@ node-addon-api@^5.0.0: resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz" integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA== -node-fetch@^2.6.12: - version "2.7.0" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d" - integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A== - dependencies: - whatwg-url "^5.0.0" - node-fetch@^2.6.7: version "2.6.9" resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz" @@ -9437,11 +9263,6 @@ signal-exit@^4.1.0: resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== -simple-cbor@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/simple-cbor/-/simple-cbor-0.4.1.tgz#0c88312e87db52b94e0e92f6bd1cf634e86f8a22" - integrity sha512-rijcxtwx2b4Bje3sqeIqw5EeW7UlOIC4YfOdwqIKacpvRQ/D78bWg/4/0m5e0U91oKvlGh7LlJuZCu07ISCC7w== - sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz" @@ -10024,25 +9845,6 @@ ts-invariant@^0.10.3: dependencies: tslib "^2.1.0" -ts-node@^10.8.2: - version "10.9.1" - resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b" - integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw== - dependencies: - "@cspotcode/source-map-support" "^0.8.0" - "@tsconfig/node10" "^1.0.7" - "@tsconfig/node12" "^1.0.7" - "@tsconfig/node14" "^1.0.0" - "@tsconfig/node16" "^1.0.2" - acorn "^8.4.1" - acorn-walk "^8.1.1" - arg "^4.1.0" - create-require "^1.1.0" - diff "^4.0.1" - make-error "^1.1.1" - v8-compile-cache-lib "^3.0.1" - yn "3.1.1" - tsconfig-paths@^3.14.2: version "3.14.2" resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz" @@ -10294,11 +10096,6 @@ utility-types@^3.10.0: resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz" integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg== -v8-compile-cache-lib@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf" - integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg== - v8-to-istanbul@^9.0.1: version "9.1.0" resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz" @@ -10627,11 +10424,6 @@ yargs@^17.3.1: y18n "^5.0.5" yargs-parser "^21.1.1" -yn@3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" - integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q== - yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz" From 5469d708cbe74cff848ad7f3fbd26bc9184696f7 Mon Sep 17 00:00:00 2001 From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> Date: Thu, 23 Nov 2023 15:38:47 +0100 Subject: [PATCH 2/5] v2.0.6 and use feature flag for auto repay (#650) --- package.json | 2 +- src/components/Trade/TradeModule/SwapForm/index.tsx | 8 +++++--- src/utils/constants.ts | 1 + 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 1aa5f1ff..c6a2d52e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mars-v2-frontend", - "version": "2.0.5", + "version": "2.0.6", "private": true, "scripts": { "build": "yarn validate-env && next build", diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx index a52d9e17..4c47d6be 100644 --- a/src/components/Trade/TradeModule/SwapForm/index.tsx +++ b/src/components/Trade/TradeModule/SwapForm/index.tsx @@ -27,7 +27,7 @@ import { useUpdatedAccount } from 'hooks/useUpdatedAccount' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' -import { defaultFee } from 'utils/constants' +import { defaultFee, ENABLE_AUTO_REPAY } from 'utils/constants' import { getCapLeftWithBuffer } from 'utils/generic' import { asyncThrottle, BN } from 'utils/helpers' @@ -50,7 +50,9 @@ export default function SwapForm(props: Props) { const isBorrowEnabled = !!marketAssets.find(byDenom(sellAsset.denom))?.borrowEnabled const isRepayable = !!account?.debts.find(byDenom(buyAsset.denom)) const [isMarginChecked, setMarginChecked] = useToggle(isBorrowEnabled ? useMargin : false) - const [isAutoRepayChecked, setAutoRepayChecked] = useToggle(isRepayable ? useAutoRepay : false) + const [isAutoRepayChecked, setAutoRepayChecked] = useToggle( + isRepayable && ENABLE_AUTO_REPAY ? useAutoRepay : false, + ) const [buyAssetAmount, setBuyAssetAmount] = useState(BN_ZERO) const [sellAssetAmount, setSellAssetAmount] = useState(BN_ZERO) const [maxBuyableAmountEstimation, setMaxBuyableAmountEstimation] = useState(BN_ZERO) @@ -314,7 +316,7 @@ export default function SwapForm(props: Props) { /> - {isRepayable && ( + {isRepayable && ENABLE_AUTO_REPAY && ( Date: Thu, 23 Nov 2023 15:39:57 +0100 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=90=9Bincorrect=20deposit=20cap=20uti?= =?UTF-8?q?lization=20(#647)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useLendingMarketAssetsTableData.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/hooks/useLendingMarketAssetsTableData.ts b/src/hooks/useLendingMarketAssetsTableData.ts index 189eafb4..a80c5f47 100644 --- a/src/hooks/useLendingMarketAssetsTableData.ts +++ b/src/hooks/useLendingMarketAssetsTableData.ts @@ -3,7 +3,6 @@ import { useMemo } from 'react' import useCurrentAccountLends from 'hooks/useCurrentAccountLends' import useDepositEnabledMarkets from 'hooks/useDepositEnabledMarkets' import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice' -import useMarketDeposits from 'hooks/useMarketDeposits' import useMarketLiquidities from 'hooks/useMarketLiquidities' import { byDenom } from 'utils/array' import { getAssetByDenom } from 'utils/assets' @@ -16,7 +15,6 @@ function useLendingMarketAssetsTableData(): { } { const markets = useDepositEnabledMarkets() const accountLentAmounts = useCurrentAccountLends() - const { data: marketDeposits } = useMarketDeposits() const { data: marketLiquidities } = useMarketLiquidities() const { convertAmount } = useDisplayCurrencyPrice() @@ -27,7 +25,6 @@ function useLendingMarketAssetsTableData(): { markets.forEach( ({ denom, cap, liquidityRate, liquidationThreshold, maxLtv, borrowEnabled }) => { const asset = getAssetByDenom(denom) as Asset - const marketDepositAmount = BN(marketDeposits.find(byDenom(denom))?.amount ?? 0) const marketLiquidityAmount = BN(marketLiquidities.find(byDenom(denom))?.amount ?? 0) const accountLentAmount = accountLentAmounts.find(byDenom(denom))?.amount const accountLentValue = accountLentAmount @@ -36,7 +33,7 @@ function useLendingMarketAssetsTableData(): { const lendingMarketAsset: LendingMarketTableData = { asset, - marketDepositAmount, + marketDepositAmount: cap.used, accountLentValue, accountLentAmount, marketLiquidityAmount, @@ -58,7 +55,7 @@ function useLendingMarketAssetsTableData(): { availableAssets, allAssets: [...accountLentAssets, ...availableAssets], } - }, [markets, marketDeposits, marketLiquidities, accountLentAmounts, convertAmount]) + }, [markets, marketLiquidities, accountLentAmounts, convertAmount]) } export default useLendingMarketAssetsTableData From a4bbf92ced7f1c2bafa49a26e6db314f76a5fe82 Mon Sep 17 00:00:00 2001 From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> Date: Thu, 23 Nov 2023 15:42:08 +0100 Subject: [PATCH 4/5] Initialize perps (#648) * setup routing * add basic perps interface * small fix --- src/components/Divider.tsx | 2 +- src/components/Header/DesktopHeader.tsx | 3 +- .../Perps/Module/LeverageButtons.tsx | 15 +++++ src/components/Perps/Module/Or.tsx | 14 +++++ src/components/Perps/Module/PerpsModule.tsx | 59 ++++++++++++++++++ .../Perps/Module/SelectLongShort.tsx | 62 +++++++++++++++++++ src/components/Perps/PerpsChart.tsx | 12 ++++ src/components/Perps/PerpsInfo.tsx | 47 ++++++++++++++ src/components/Perps/PerpsPositions.tsx | 5 ++ src/components/Routes.tsx | 4 ++ src/components/Spacer.tsx | 3 + .../Trade/TradeChart/TVChartContainer.tsx | 4 +- .../SwapForm/OrderTypeSelector/index.tsx | 2 +- .../Trade/TradeModule/SwapForm/index.tsx | 4 +- src/hooks/useUpdatedAccount/index.ts | 2 +- src/pages/PerpsPage.tsx | 19 ++++++ src/pages/_layout.tsx | 5 +- src/types/interfaces/perps.d.ts | 1 + src/types/interfaces/route.d.ts | 1 + src/utils/route.ts | 11 +++- tailwind.config.js | 1 + 21 files changed, 267 insertions(+), 9 deletions(-) create mode 100644 src/components/Perps/Module/LeverageButtons.tsx create mode 100644 src/components/Perps/Module/Or.tsx create mode 100644 src/components/Perps/Module/PerpsModule.tsx create mode 100644 src/components/Perps/Module/SelectLongShort.tsx create mode 100644 src/components/Perps/PerpsChart.tsx create mode 100644 src/components/Perps/PerpsInfo.tsx create mode 100644 src/components/Perps/PerpsPositions.tsx create mode 100644 src/components/Spacer.tsx create mode 100644 src/pages/PerpsPage.tsx create mode 100644 src/types/interfaces/perps.d.ts diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index cd57f1df..efd9fcca 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -7,7 +7,7 @@ interface Props { export default function Divider(props: Props) { if (props.orientation === 'vertical') { - return
+ return
} return
} diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx index 6ec89232..555d40c0 100644 --- a/src/components/Header/DesktopHeader.tsx +++ b/src/components/Header/DesktopHeader.tsx @@ -10,12 +10,13 @@ import Settings from 'components/Settings' import Wallet from 'components/Wallet' import useAccountId from 'hooks/useAccountId' import useStore from 'store' +import { ENABLE_HLS, ENABLE_PERPS } from 'utils/constants' import { WalletID } from 'types/enums/wallet' -import { ENABLE_HLS } from 'utils/constants' import { getGovernanceUrl } from 'utils/helpers' export const menuTree = (walletId: WalletID): MenuTreeEntry[] => [ { pages: ['trade'], label: 'Trade' }, + ...(ENABLE_PERPS ? [{ pages: ['perps'] as Page[], label: 'Perps' }] : []), { pages: ['lend', 'farm'], label: 'Earn' }, { pages: ['borrow'], label: 'Borrow' }, ...(ENABLE_HLS ? [{ pages: ['hls-staking'] as Page[], label: 'High Leverage' }] : []), diff --git a/src/components/Perps/Module/LeverageButtons.tsx b/src/components/Perps/Module/LeverageButtons.tsx new file mode 100644 index 00000000..66a61bb9 --- /dev/null +++ b/src/components/Perps/Module/LeverageButtons.tsx @@ -0,0 +1,15 @@ +import Button from 'components/Button' + +const LEVERAGE_PRESETS = [1, 2, 3, 5, 10] + +export function LeverageButtons() { + return ( +
+ {LEVERAGE_PRESETS.map((leverage) => ( + + ))} +
+ ) +} diff --git a/src/components/Perps/Module/Or.tsx b/src/components/Perps/Module/Or.tsx new file mode 100644 index 00000000..cb5fb5d6 --- /dev/null +++ b/src/components/Perps/Module/Or.tsx @@ -0,0 +1,14 @@ +import Divider from 'components/Divider' +import Text from 'components/Text' + +export function Or() { + return ( +
+ + + OR + + +
+ ) +} diff --git a/src/components/Perps/Module/PerpsModule.tsx b/src/components/Perps/Module/PerpsModule.tsx new file mode 100644 index 00000000..29636a1c --- /dev/null +++ b/src/components/Perps/Module/PerpsModule.tsx @@ -0,0 +1,59 @@ +import { useState } from 'react' + +import Button from 'components/Button' +import Card from 'components/Card' +import { ChevronDown } from 'components/Icons' +import { LeverageButtons } from 'components/Perps/Module/LeverageButtons' +import { Or } from 'components/Perps/Module/Or' +import { SelectLongShort } from 'components/Perps/Module/SelectLongShort' +import RangeInput from 'components/RangeInput' +import { Spacer } from 'components/Spacer' +import Text from 'components/Text' +import AssetAmountInput from 'components/Trade/TradeModule/SwapForm/AssetAmountInput' +import OrderTypeSelector from 'components/Trade/TradeModule/SwapForm/OrderTypeSelector' +import { AvailableOrderType } from 'components/Trade/TradeModule/SwapForm/OrderTypeSelector/types' +import { ASSETS } from 'constants/assets' +import { BN_ZERO } from 'constants/math' + +export function PerpsModule() { + const [selectedOrderType, setSelectedOrderType] = useState('Market') + const [selectedOrderDirection, setSelectedOrderDirection] = useState('long') + + return ( + + + ETH/USD + + + + } + className='mb-4' + > + + + {}} + asset={ASSETS[0]} + maxButtonLabel='Max:' + disabled={false} + /> + + Position Leverage + {}} /> + + + + + ) +} diff --git a/src/components/Perps/Module/SelectLongShort.tsx b/src/components/Perps/Module/SelectLongShort.tsx new file mode 100644 index 00000000..6988ba6f --- /dev/null +++ b/src/components/Perps/Module/SelectLongShort.tsx @@ -0,0 +1,62 @@ +import classNames from 'classnames' + +import Text from 'components/Text' + +interface Props { + direction: OrderDirection + onChangeDirection: (direction: OrderDirection) => void +} + +export function SelectLongShort(props: Props) { + return ( +
+ props.onChangeDirection('long')} + direction='long' + isActive={props.direction === 'long'} + /> + props.onChangeDirection('short')} + direction='short' + isActive={props.direction === 'short'} + /> +
+ ) +} + +interface DirectionProps { + direction: 'long' | 'short' + isActive: boolean + onClick: () => void +} +function Direction(props: DirectionProps) { + return ( + + ) +} + +const directionColors = { + long: 'text-success', + short: 'text-error', +} + +const borderColors = { + long: 'border-success', + short: 'border-error', +} diff --git a/src/components/Perps/PerpsChart.tsx b/src/components/Perps/PerpsChart.tsx new file mode 100644 index 00000000..f6d52fae --- /dev/null +++ b/src/components/Perps/PerpsChart.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +import TradeChart from 'components/Trade/TradeChart' +import { ASSETS } from 'constants/assets' + +export function PerpsChart() { + return ( +
+ +
+ ) +} diff --git a/src/components/Perps/PerpsInfo.tsx b/src/components/Perps/PerpsInfo.tsx new file mode 100644 index 00000000..13e9c4c4 --- /dev/null +++ b/src/components/Perps/PerpsInfo.tsx @@ -0,0 +1,47 @@ +import React, { useMemo } from 'react' + +import Card from 'components/Card' +import Divider from 'components/Divider' +import Text from 'components/Text' + +export function PerpsInfo() { + const items = useMemo( + () => [ + $6,735, + Value} />, + Value} />, + Value} />, + Value} />, + ], + [], + ) + + return ( + +
+ {items.map((item, index) => ( + + {item} + {index !== items.length - 1 && } + + ))} +
+ + ) +} + +interface InfoItemProps { + item: React.ReactNode + label: string +} + +function InfoItem(props: InfoItemProps) { + return ( +
+ + {props.label} + + {props.item} +
+ ) +} diff --git a/src/components/Perps/PerpsPositions.tsx b/src/components/Perps/PerpsPositions.tsx new file mode 100644 index 00000000..03cb490e --- /dev/null +++ b/src/components/Perps/PerpsPositions.tsx @@ -0,0 +1,5 @@ +import AccountDetailsCard from 'components/Trade/AccountDetailsCard' + +export function PerpsPositions() { + return +} diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx index c93eaa87..5ad3abf9 100644 --- a/src/components/Routes.tsx +++ b/src/components/Routes.tsx @@ -7,9 +7,11 @@ import HLSFarmPage from 'pages/HLSFarmPage' import HLSStakingPage from 'pages/HLSStakingPage' import LendPage from 'pages/LendPage' import MobilePage from 'pages/MobilePage' +import PerpsPage from 'pages/PerpsPage' import PortfolioAccountPage from 'pages/PortfolioAccountPage' import PortfolioPage from 'pages/PortfolioPage' import TradePage from 'pages/TradePage' +import { ENABLE_PERPS } from 'utils/constants' import { ENABLE_HLS } from 'utils/constants' export default function Routes() { @@ -23,6 +25,7 @@ export default function Routes() { } > } /> + {ENABLE_PERPS && } />} } /> } /> } /> @@ -33,6 +36,7 @@ export default function Routes() { } /> } /> + {ENABLE_PERPS && } />} } /> } /> } /> diff --git a/src/components/Spacer.tsx b/src/components/Spacer.tsx new file mode 100644 index 00000000..87ec3d34 --- /dev/null +++ b/src/components/Spacer.tsx @@ -0,0 +1,3 @@ +export function Spacer() { + return
+} diff --git a/src/components/Trade/TradeChart/TVChartContainer.tsx b/src/components/Trade/TradeChart/TVChartContainer.tsx index b8497d68..45abea40 100644 --- a/src/components/Trade/TradeChart/TVChartContainer.tsx +++ b/src/components/Trade/TradeChart/TVChartContainer.tsx @@ -1,8 +1,8 @@ import { useEffect, useMemo, useRef } from 'react' import Card from 'components/Card' -import { DataFeed, PAIR_SEPARATOR } from 'components/Trade/TradeChart/DataFeed' import { disabledFeatures, enabledFeatures, overrides } from 'components/Trade/TradeChart/constants' +import { DataFeed, PAIR_SEPARATOR } from 'components/Trade/TradeChart/DataFeed' import useStore from 'store' import { ChartingLibraryWidgetOptions, @@ -102,7 +102,7 @@ export const TVChartContainer = (props: Props) => { }, [props.buyAsset.denom, props.sellAsset.denom]) return ( - +
) diff --git a/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx b/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx index 956719ba..c5527818 100644 --- a/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx +++ b/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx @@ -16,7 +16,7 @@ export default function OrderTypeSelector(props: Props) { const { selected, onChange } = props return ( -
+
{ORDER_TYPE_TABS.map((tab) => { const isSelected = tab.type === selected const classes = classNames( diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx index 4c47d6be..3c62d04d 100644 --- a/src/components/Trade/TradeModule/SwapForm/index.tsx +++ b/src/components/Trade/TradeModule/SwapForm/index.tsx @@ -324,7 +324,9 @@ export default function SwapForm(props: Props) { /> )} - +
+ +
+
+
+ + + +
+ +
+
+ ) +} diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx index 63ab7c5e..bb71f862 100644 --- a/src/pages/_layout.tsx +++ b/src/pages/_layout.tsx @@ -47,7 +47,10 @@ export default function Layout({ children }: { children: React.ReactNode }) { DEFAULT_SETTINGS.reduceMotion, ) const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded) - const isFullWidth = location.pathname.includes('trade') || location.pathname === '/' + const isFullWidth = + location.pathname.includes('trade') || + location.pathname === '/' || + location.pathname.includes('perps') const accountId = useAccountId() return ( diff --git a/src/types/interfaces/perps.d.ts b/src/types/interfaces/perps.d.ts new file mode 100644 index 00000000..16d6cd20 --- /dev/null +++ b/src/types/interfaces/perps.d.ts @@ -0,0 +1 @@ +type OrderDirection = 'long' | 'short' diff --git a/src/types/interfaces/route.d.ts b/src/types/interfaces/route.d.ts index d1563795..7b025aab 100644 --- a/src/types/interfaces/route.d.ts +++ b/src/types/interfaces/route.d.ts @@ -1,5 +1,6 @@ type Page = | 'trade' + | 'perps' | 'borrow' | 'farm' | 'lend' diff --git a/src/utils/route.ts b/src/utils/route.ts index 80207bdc..df38bd2f 100644 --- a/src/utils/route.ts +++ b/src/utils/route.ts @@ -19,7 +19,16 @@ export function getRoute(page: Page, address?: string, accountId?: string | null } export function getPage(pathname: string): Page { - const pages: Page[] = ['trade', 'borrow', 'farm', 'lend', 'portfolio', 'hls-farm', 'hls-staking'] + const pages: Page[] = [ + 'trade', + 'perps', + 'borrow', + 'farm', + 'lend', + 'portfolio', + 'hls-farm', + 'hls-staking', + ] const segments = pathname.split('/') const page = segments.find((segment) => pages.includes(segment as Page)) diff --git a/tailwind.config.js b/tailwind.config.js index 5c1ff0a6..f8e3f952 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -166,6 +166,7 @@ module.exports = { }, height: { 4.5: '18px', + 9: '36px', 15: '60px', 45: '180px', 50: '200px', From e7ce4f600aad8b3abf8b73895cc0f199eb203cc5 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Thu, 23 Nov 2023 16:56:59 +0100 Subject: [PATCH 5/5] feat: listed dydx and AKT (#652) --- src/components/MarketDetails.tsx | 8 +++++-- src/constants/assets.ts | 36 ++++++++++++++++++++++++++++++++ src/types/interfaces/asset.d.ts | 4 ++++ 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/src/components/MarketDetails.tsx b/src/components/MarketDetails.tsx index 219fe65f..607a8a65 100644 --- a/src/components/MarketDetails.tsx +++ b/src/components/MarketDetails.tsx @@ -68,7 +68,9 @@ export default function MarketDetails({ row, type }: Props) { title: 'Oracle Price', }, { - amount: totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), + amount: totalBorrowed.isZero() + ? 0 + : totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, title: 'Utilization Rate', }, @@ -97,7 +99,9 @@ export default function MarketDetails({ row, type }: Props) { title: 'Oracle Price', }, { - amount: totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), + amount: totalBorrowed.isZero() + ? 0 + : totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, title: 'Utilization Rate', }, diff --git a/src/constants/assets.ts b/src/constants/assets.ts index bee4f54d..387946c0 100644 --- a/src/constants/assets.ts +++ b/src/constants/assets.ts @@ -229,6 +229,42 @@ export const ASSETS: Asset[] = [ poolId: 1249, pythHistoryFeedId: 'Crypto.TIA/USD', }, + { + symbol: 'AKT', + id: 'AKT', + name: 'Akash', + denom: 'ibc/1480B8FD20AD5FCAE81EA87584D269547DD4D436843C1D20F15E00EB64743EF4', + color: '#F34C2D', + logo: '/images/tokens/akt.svg', + decimals: 6, + hasOraclePrice: true, + isEnabled: true, + isMarket: true, + isDisplayCurrency: true, + isAutoLendEnabled: true, + isBorrowEnabled: true, + pythPriceFeedId: '4ea5bb4d2f5900cc2e97ba534240950740b4d3b89fe712a94a7304fd2fd92702', + poolId: 1093, + pythHistoryFeedId: 'Crypto.AKT/USD', + }, + { + symbol: 'DYDX', + id: 'DYDX', + name: 'dYdX', + denom: 'ibc/831F0B1BBB1D08A2B75311892876D71565478C532967545476DF4C2D7492E48C', + color: '#6966ff', + logo: '/images/tokens/dydx.svg', + decimals: 18, + hasOraclePrice: true, + isEnabled: true, + isMarket: true, + isDisplayCurrency: true, + isAutoLendEnabled: true, + isBorrowEnabled: true, + pythPriceFeedId: '6489800bb8974169adfe35937bf6736507097d13c190d760c557108c7e93a81b', + poolId: 1245, + pythHistoryFeedId: 'Crypto.DYDX/USD', + }, { symbol: '$', name: 'US Dollar', diff --git a/src/types/interfaces/asset.d.ts b/src/types/interfaces/asset.d.ts index ddc1bbf4..3f441f7f 100644 --- a/src/types/interfaces/asset.d.ts +++ b/src/types/interfaces/asset.d.ts @@ -3,8 +3,10 @@ interface Asset { name: string denom: string symbol: + | 'AKT' | 'ATOM' | 'AXL' + | 'DYDX' | 'INJ' | 'MARS' | 'OSMO' @@ -24,8 +26,10 @@ interface Asset { | 'stATOM-ATOM' | '$' id: + | 'AKT' | 'ATOM' | 'AXL' + | 'DYDX' | 'INJ' | 'axlUSDC' | 'axlWBTC'