diff --git a/components/ChatRoom/ChatRoom.tsx b/components/ChatRoom/ChatRoom.tsx
new file mode 100644
index 0000000000..cc0f32f33c
--- /dev/null
+++ b/components/ChatRoom/ChatRoom.tsx
@@ -0,0 +1,40 @@
+import Widgetbot from '@widgetbot/react-embed';
+import { useState } from 'react';
+
+import { Body } from 'components/Text';
+
+export default function ChatRoom() {
+ const [showChat, setShowChat] = useState(false);
+ return (
+ <>
+ {
+ e.preventDefault();
+ setShowChat(!showChat);
+ }}
+ >
+
+ Chat
+
+
+
+ {showChat && (
+
+ )}
+
+ );
+}
diff --git a/components/Media/Media.tsx b/components/Media/Media.tsx
index 0f7a98f02b..58d2fd186a 100644
--- a/components/Media/Media.tsx
+++ b/components/Media/Media.tsx
@@ -1,27 +1,40 @@
+import dynamic from 'next/dynamic';
import { FC, ReactNode, memo } from 'react';
-import { Media } from 'styles/media';
+import { BREAKPOINTS } from 'styles/media';
type MediaProps = {
children: ReactNode;
};
+const MediaQuery = dynamic(() => import('react-responsive'), {
+ ssr: false,
+});
+
export const DesktopOnlyView: FC = memo(({ children }) => (
- {children}
+ {children}
));
export const TabletOnlyView: FC = memo(({ children }) => (
- {children}
+
+ {children}
+
));
export const MobileOrTabletView: FC = memo(({ children }) => (
- {children}
+ {children}
));
export const MobileHiddenView: FC = memo(({ children }) => (
- {children}
+ {children}
));
export const MobileOnlyView: FC = memo(({ children }) => (
- {children}
+
+ {children}
+
+));
+
+export const NotMobileView: FC = memo(({ children }) => (
+ {children}
));
diff --git a/package-lock.json b/package-lock.json
index 1467e36156..bfbe07408b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,14 @@
{
"name": "kwenta",
- "version": "7.2.1",
+ "version": "7.2.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "kwenta",
- "version": "7.2.1",
+ "version": "7.2.2",
"hasInstallScript": true,
"dependencies": {
- "@artsy/fresnel": "1.7.0",
"@eth-optimism/contracts": "0.5.37",
"@gnosis.pm/safe-apps-provider": "^0.14.0",
"@gnosis.pm/safe-apps-sdk": "^7.7.0",
@@ -25,6 +24,7 @@
"@socket.tech/plugin": "1.0.3",
"@synthetixio/optimism-networks": "2.74.6",
"@synthetixio/wei": "2.74.4",
+ "@widgetbot/react-embed": "^1.7.0",
"axios": "0.27.2",
"bignumber.js": "9.0.0",
"codegen-graph-ts": "^0.1.4",
@@ -57,6 +57,7 @@
"react-is": "^18.0.0",
"react-query": "3.39.3",
"react-redux": "8.0.5",
+ "react-responsive": "^9.0.2",
"react-rnd": "^10.3.7",
"react-select": "4.3.1",
"react-slick": "0.29.0",
@@ -112,7 +113,7 @@
"eslint-plugin-chai-friendly": "^0.7.2",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-flowtype": "5.2.0",
- "eslint-plugin-import": "2.26.0",
+ "eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.21.5",
@@ -173,14 +174,6 @@
"node": ">=6.0.0"
}
},
- "node_modules/@artsy/fresnel": {
- "version": "1.7.0",
- "resolved": "https://registry.npmjs.org/@artsy/fresnel/-/fresnel-1.7.0.tgz",
- "integrity": "sha512-TXIFVwMXE8GHe2c6NEJ6FFhB8+6gCIfU6lwd/MeSIwYw7QzpyYrcaOjvLh33ZmuD7HWSnQ0kdK9TErj7l9BrUQ==",
- "peerDependencies": {
- "react": ">=16.3.0 <18.0.0"
- }
- },
"node_modules/@babel/code-frame": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -19369,6 +19362,54 @@
"node": "^12.20.0 || >=14"
}
},
+ "node_modules/@synthetixio/synpress/node_modules/debug": {
+ "version": "2.6.9",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+ "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "dev": true,
+ "dependencies": {
+ "ms": "2.0.0"
+ }
+ },
+ "node_modules/@synthetixio/synpress/node_modules/doctrine": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+ "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+ "dev": true,
+ "dependencies": {
+ "esutils": "^2.0.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/@synthetixio/synpress/node_modules/eslint-plugin-import": {
+ "version": "2.26.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+ "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+ "dev": true,
+ "dependencies": {
+ "array-includes": "^3.1.4",
+ "array.prototype.flat": "^1.2.5",
+ "debug": "^2.6.9",
+ "doctrine": "^2.1.0",
+ "eslint-import-resolver-node": "^0.3.6",
+ "eslint-module-utils": "^2.7.3",
+ "has": "^1.0.3",
+ "is-core-module": "^2.8.1",
+ "is-glob": "^4.0.3",
+ "minimatch": "^3.1.2",
+ "object.values": "^1.1.5",
+ "resolve": "^1.22.0",
+ "tsconfig-paths": "^3.14.1"
+ },
+ "engines": {
+ "node": ">=4"
+ },
+ "peerDependencies": {
+ "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+ }
+ },
"node_modules/@synthetixio/synpress/node_modules/eslint-plugin-prettier": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
@@ -19418,6 +19459,12 @@
"eslint": "^7.5.0 || ^8.0.0"
}
},
+ "node_modules/@synthetixio/synpress/node_modules/ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+ "dev": true
+ },
"node_modules/@synthetixio/synpress/node_modules/node-fetch": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -23689,6 +23736,26 @@
"@xtuc/long": "4.2.2"
}
},
+ "node_modules/@widgetbot/embed-api": {
+ "version": "1.2.9",
+ "resolved": "https://registry.npmjs.org/@widgetbot/embed-api/-/embed-api-1.2.9.tgz",
+ "integrity": "sha512-do6kfNLAc6zRgWXBjg6H/wXOeBmSCXAcy3e1tvoN6YXPncKNO5atTrMLlysU68XMuw6QOaIjRQKCIDHCf3dEQg==",
+ "dependencies": {
+ "post-robot": "^8.0.28"
+ }
+ },
+ "node_modules/@widgetbot/react-embed": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/@widgetbot/react-embed/-/react-embed-1.7.0.tgz",
+ "integrity": "sha512-usVCBLKQsVFQYm3pzSR5gRp6dq4sU0r79lIO/KLtaDrGe4/Rik5iNsQcUKl1q48I6Kru/pLTgQT3vMGpG5HSOw==",
+ "dependencies": {
+ "@widgetbot/embed-api": "^1.1.3",
+ "react": "^18.2.0"
+ },
+ "peerDependencies": {
+ "react": ">= 15"
+ }
+ },
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -24275,13 +24342,13 @@
}
},
"node_modules/array.prototype.flat": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
- "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+ "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
"dependencies": {
"call-bind": "^1.0.2",
- "define-properties": "^1.1.3",
- "es-abstract": "^1.19.2",
+ "define-properties": "^1.1.4",
+ "es-abstract": "^1.20.4",
"es-shim-unscopables": "^1.0.0"
},
"engines": {
@@ -30205,6 +30272,22 @@
"sha.js": "^2.4.8"
}
},
+ "node_modules/cross-domain-safe-weakmap": {
+ "version": "1.0.29",
+ "resolved": "https://registry.npmjs.org/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-1.0.29.tgz",
+ "integrity": "sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==",
+ "dependencies": {
+ "cross-domain-utils": "^2.0.0"
+ }
+ },
+ "node_modules/cross-domain-utils": {
+ "version": "2.0.38",
+ "resolved": "https://registry.npmjs.org/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz",
+ "integrity": "sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==",
+ "dependencies": {
+ "zalgo-promise": "^1.0.11"
+ }
+ },
"node_modules/cross-fetch": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -32868,12 +32951,13 @@
}
},
"node_modules/eslint-import-resolver-node": {
- "version": "0.3.6",
- "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
- "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+ "version": "0.3.7",
+ "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+ "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
"dependencies": {
"debug": "^3.2.7",
- "resolve": "^1.20.0"
+ "is-core-module": "^2.11.0",
+ "resolve": "^1.22.1"
}
},
"node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -33046,22 +33130,24 @@
}
},
"node_modules/eslint-plugin-import": {
- "version": "2.26.0",
- "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
- "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+ "version": "2.27.5",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+ "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
"dependencies": {
- "array-includes": "^3.1.4",
- "array.prototype.flat": "^1.2.5",
- "debug": "^2.6.9",
+ "array-includes": "^3.1.6",
+ "array.prototype.flat": "^1.3.1",
+ "array.prototype.flatmap": "^1.3.1",
+ "debug": "^3.2.7",
"doctrine": "^2.1.0",
- "eslint-import-resolver-node": "^0.3.6",
- "eslint-module-utils": "^2.7.3",
+ "eslint-import-resolver-node": "^0.3.7",
+ "eslint-module-utils": "^2.7.4",
"has": "^1.0.3",
- "is-core-module": "^2.8.1",
+ "is-core-module": "^2.11.0",
"is-glob": "^4.0.3",
"minimatch": "^3.1.2",
- "object.values": "^1.1.5",
- "resolve": "^1.22.0",
+ "object.values": "^1.1.6",
+ "resolve": "^1.22.1",
+ "semver": "^6.3.0",
"tsconfig-paths": "^3.14.1"
},
"engines": {
@@ -33072,11 +33158,11 @@
}
},
"node_modules/eslint-plugin-import/node_modules/debug": {
- "version": "2.6.9",
- "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
- "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"dependencies": {
- "ms": "2.0.0"
+ "ms": "^2.1.1"
}
},
"node_modules/eslint-plugin-import/node_modules/doctrine": {
@@ -33090,11 +33176,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/eslint-plugin-import/node_modules/ms": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
- "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
- },
"node_modules/eslint-plugin-jsx-a11y": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz",
@@ -45074,6 +45155,14 @@
"remove-accents": "0.4.2"
}
},
+ "node_modules/matchmediaquery": {
+ "version": "0.3.1",
+ "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+ "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+ "dependencies": {
+ "css-mediaquery": "^0.1.2"
+ }
+ },
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -48116,6 +48205,16 @@
"node": ">=0.10.0"
}
},
+ "node_modules/post-robot": {
+ "version": "8.0.31",
+ "resolved": "https://registry.npmjs.org/post-robot/-/post-robot-8.0.31.tgz",
+ "integrity": "sha512-nUhtKgtmcgyuPm4RnIhUB3gsDYJBHOgFry3TvOxhIHpgfwYY/T69d4oB90tw4YUllFZUUwqLEv1Wgyg6eOoJ7A==",
+ "dependencies": {
+ "cross-domain-safe-weakmap": "^1.0.1",
+ "cross-domain-utils": "^2.0.0",
+ "zalgo-promise": "^1.0.3"
+ }
+ },
"node_modules/postcss": {
"version": "8.4.24",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -49664,6 +49763,23 @@
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/react-responsive": {
+ "version": "9.0.2",
+ "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz",
+ "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==",
+ "dependencies": {
+ "hyphenate-style-name": "^1.0.0",
+ "matchmediaquery": "^0.3.0",
+ "prop-types": "^15.6.1",
+ "shallow-equal": "^1.2.1"
+ },
+ "engines": {
+ "node": ">=0.10"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+ },
"node_modules/react-rnd": {
"version": "10.3.7",
"resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.3.7.tgz",
@@ -51959,6 +52075,11 @@
"node": ">=8"
}
},
+ "node_modules/shallow-equal": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+ "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+ },
"node_modules/shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -59548,6 +59669,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/zalgo-promise": {
+ "version": "1.0.48",
+ "resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.48.tgz",
+ "integrity": "sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ=="
+ },
"node_modules/zrender": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
@@ -59624,11 +59750,6 @@
}
}
},
- "@artsy/fresnel": {
- "version": "1.7.0",
- "resolved": "https://registry.npmjs.org/@artsy/fresnel/-/fresnel-1.7.0.tgz",
- "integrity": "sha512-TXIFVwMXE8GHe2c6NEJ6FFhB8+6gCIfU6lwd/MeSIwYw7QzpyYrcaOjvLh33ZmuD7HWSnQ0kdK9TErj7l9BrUQ=="
- },
"@babel/code-frame": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -74013,6 +74134,45 @@
"integrity": "sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==",
"dev": true
},
+ "debug": {
+ "version": "2.6.9",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+ "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "dev": true,
+ "requires": {
+ "ms": "2.0.0"
+ }
+ },
+ "doctrine": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+ "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+ "dev": true,
+ "requires": {
+ "esutils": "^2.0.2"
+ }
+ },
+ "eslint-plugin-import": {
+ "version": "2.26.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+ "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+ "dev": true,
+ "requires": {
+ "array-includes": "^3.1.4",
+ "array.prototype.flat": "^1.2.5",
+ "debug": "^2.6.9",
+ "doctrine": "^2.1.0",
+ "eslint-import-resolver-node": "^0.3.6",
+ "eslint-module-utils": "^2.7.3",
+ "has": "^1.0.3",
+ "is-core-module": "^2.8.1",
+ "is-glob": "^4.0.3",
+ "minimatch": "^3.1.2",
+ "object.values": "^1.1.5",
+ "resolve": "^1.22.0",
+ "tsconfig-paths": "^3.14.1"
+ }
+ },
"eslint-plugin-prettier": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
@@ -74037,6 +74197,12 @@
"@typescript-eslint/utils": "^5.13.0"
}
},
+ "ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+ "dev": true
+ },
"node-fetch": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -77563,6 +77729,23 @@
"@xtuc/long": "4.2.2"
}
},
+ "@widgetbot/embed-api": {
+ "version": "1.2.9",
+ "resolved": "https://registry.npmjs.org/@widgetbot/embed-api/-/embed-api-1.2.9.tgz",
+ "integrity": "sha512-do6kfNLAc6zRgWXBjg6H/wXOeBmSCXAcy3e1tvoN6YXPncKNO5atTrMLlysU68XMuw6QOaIjRQKCIDHCf3dEQg==",
+ "requires": {
+ "post-robot": "^8.0.28"
+ }
+ },
+ "@widgetbot/react-embed": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/@widgetbot/react-embed/-/react-embed-1.7.0.tgz",
+ "integrity": "sha512-usVCBLKQsVFQYm3pzSR5gRp6dq4sU0r79lIO/KLtaDrGe4/Rik5iNsQcUKl1q48I6Kru/pLTgQT3vMGpG5HSOw==",
+ "requires": {
+ "@widgetbot/embed-api": "^1.1.3",
+ "react": "^18.2.0"
+ }
+ },
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -78001,13 +78184,13 @@
"dev": true
},
"array.prototype.flat": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
- "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+ "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
"requires": {
"call-bind": "^1.0.2",
- "define-properties": "^1.1.3",
- "es-abstract": "^1.19.2",
+ "define-properties": "^1.1.4",
+ "es-abstract": "^1.20.4",
"es-shim-unscopables": "^1.0.0"
}
},
@@ -82876,6 +83059,22 @@
"sha.js": "^2.4.8"
}
},
+ "cross-domain-safe-weakmap": {
+ "version": "1.0.29",
+ "resolved": "https://registry.npmjs.org/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-1.0.29.tgz",
+ "integrity": "sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==",
+ "requires": {
+ "cross-domain-utils": "^2.0.0"
+ }
+ },
+ "cross-domain-utils": {
+ "version": "2.0.38",
+ "resolved": "https://registry.npmjs.org/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz",
+ "integrity": "sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==",
+ "requires": {
+ "zalgo-promise": "^1.0.11"
+ }
+ },
"cross-fetch": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -84980,12 +85179,13 @@
"dev": true
},
"eslint-import-resolver-node": {
- "version": "0.3.6",
- "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
- "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+ "version": "0.3.7",
+ "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+ "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
"requires": {
"debug": "^3.2.7",
- "resolve": "^1.20.0"
+ "is-core-module": "^2.11.0",
+ "resolve": "^1.22.1"
},
"dependencies": {
"debug": {
@@ -85103,31 +85303,33 @@
}
},
"eslint-plugin-import": {
- "version": "2.26.0",
- "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
- "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+ "version": "2.27.5",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+ "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
"requires": {
- "array-includes": "^3.1.4",
- "array.prototype.flat": "^1.2.5",
- "debug": "^2.6.9",
+ "array-includes": "^3.1.6",
+ "array.prototype.flat": "^1.3.1",
+ "array.prototype.flatmap": "^1.3.1",
+ "debug": "^3.2.7",
"doctrine": "^2.1.0",
- "eslint-import-resolver-node": "^0.3.6",
- "eslint-module-utils": "^2.7.3",
+ "eslint-import-resolver-node": "^0.3.7",
+ "eslint-module-utils": "^2.7.4",
"has": "^1.0.3",
- "is-core-module": "^2.8.1",
+ "is-core-module": "^2.11.0",
"is-glob": "^4.0.3",
"minimatch": "^3.1.2",
- "object.values": "^1.1.5",
- "resolve": "^1.22.0",
+ "object.values": "^1.1.6",
+ "resolve": "^1.22.1",
+ "semver": "^6.3.0",
"tsconfig-paths": "^3.14.1"
},
"dependencies": {
"debug": {
- "version": "2.6.9",
- "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
- "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"requires": {
- "ms": "2.0.0"
+ "ms": "^2.1.1"
}
},
"doctrine": {
@@ -85137,11 +85339,6 @@
"requires": {
"esutils": "^2.0.2"
}
- },
- "ms": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
- "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
}
}
},
@@ -94311,6 +94508,14 @@
"remove-accents": "0.4.2"
}
},
+ "matchmediaquery": {
+ "version": "0.3.1",
+ "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+ "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+ "requires": {
+ "css-mediaquery": "^0.1.2"
+ }
+ },
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -96687,6 +96892,16 @@
"integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==",
"dev": true
},
+ "post-robot": {
+ "version": "8.0.31",
+ "resolved": "https://registry.npmjs.org/post-robot/-/post-robot-8.0.31.tgz",
+ "integrity": "sha512-nUhtKgtmcgyuPm4RnIhUB3gsDYJBHOgFry3TvOxhIHpgfwYY/T69d4oB90tw4YUllFZUUwqLEv1Wgyg6eOoJ7A==",
+ "requires": {
+ "cross-domain-safe-weakmap": "^1.0.1",
+ "cross-domain-utils": "^2.0.0",
+ "zalgo-promise": "^1.0.3"
+ }
+ },
"postcss": {
"version": "8.4.24",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -97784,6 +97999,17 @@
"lodash": "^4.17.21"
}
},
+ "react-responsive": {
+ "version": "9.0.2",
+ "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz",
+ "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==",
+ "requires": {
+ "hyphenate-style-name": "^1.0.0",
+ "matchmediaquery": "^0.3.0",
+ "prop-types": "^15.6.1",
+ "shallow-equal": "^1.2.1"
+ }
+ },
"react-rnd": {
"version": "10.3.7",
"resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.3.7.tgz",
@@ -99609,6 +99835,11 @@
"kind-of": "^6.0.2"
}
},
+ "shallow-equal": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+ "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+ },
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -105670,6 +105901,11 @@
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
"dev": true
},
+ "zalgo-promise": {
+ "version": "1.0.48",
+ "resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.48.tgz",
+ "integrity": "sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ=="
+ },
"zrender": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
diff --git a/package.json b/package.json
index 76c21a26ee..3e5f076485 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "kwenta",
- "version": "7.2.1",
+ "version": "7.2.2",
"scripts": {
"dev": "next",
"build": "next build",
@@ -25,7 +25,6 @@
"generate-contract-types": "typechain --target ethers-v5 --out-dir ./sdk/contracts/types './sdk/contracts/abis/*.json' --show-stack-traces"
},
"dependencies": {
- "@artsy/fresnel": "1.7.0",
"@eth-optimism/contracts": "0.5.37",
"@gnosis.pm/safe-apps-provider": "^0.14.0",
"@gnosis.pm/safe-apps-sdk": "^7.7.0",
@@ -41,6 +40,7 @@
"@socket.tech/plugin": "1.0.3",
"@synthetixio/optimism-networks": "2.74.6",
"@synthetixio/wei": "2.74.4",
+ "@widgetbot/react-embed": "^1.7.0",
"axios": "0.27.2",
"bignumber.js": "9.0.0",
"codegen-graph-ts": "^0.1.4",
@@ -73,6 +73,7 @@
"react-is": "^18.0.0",
"react-query": "3.39.3",
"react-redux": "8.0.5",
+ "react-responsive": "^9.0.2",
"react-rnd": "^10.3.7",
"react-select": "4.3.1",
"react-slick": "0.29.0",
@@ -128,7 +129,7 @@
"eslint-plugin-chai-friendly": "^0.7.2",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-flowtype": "5.2.0",
- "eslint-plugin-import": "2.26.0",
+ "eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.21.5",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9201e5a4ce..56e62c3a8b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -24,7 +24,6 @@ import { useAppData } from 'state/app/hooks';
import { useAppSelector } from 'state/hooks';
import { selectCurrentTheme } from 'state/preferences/selectors';
import store from 'state/store';
-import { MediaContextProvider } from 'styles/media';
import { themes } from 'styles/theme';
import { IGNORE_ERRORS } from 'utils/logError';
import { getDesignTokens } from 'utils/theme';
@@ -82,14 +81,12 @@ const InnerApp: FC = ({ Component, pageProps }) => {
>
-
-
-
- {getLayout()}
-
-
-
-
+
+
+ {getLayout()}
+
+
+
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 0856b165e3..a8875233cd 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,8 +1,6 @@
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
-import { mediaStyles } from 'styles/media';
-
export default class MyDocument extends Document {
static async getInitialProps(ctx: any) {
const styledComponentsSheet = new ServerStyleSheet();
@@ -34,7 +32,6 @@ export default class MyDocument extends Document {
return (
-
{
const SearchBarContainer = styled.div`
display: flex;
- height: 100%;
- width: 100%;
`;
MarketsPage.getLayout = (page) => {page};
diff --git a/pages/leaderboard/index.tsx b/pages/leaderboard/index.tsx
index ad743412da..2f57a9a35e 100644
--- a/pages/leaderboard/index.tsx
+++ b/pages/leaderboard/index.tsx
@@ -37,7 +37,7 @@ const Leader: LeaderComponent = () => {
};
const MobileMainContent = styled.div`
- width: 100vw;
+ width: 100%;
padding: 15px;
`;
diff --git a/pages/market.tsx b/pages/market.tsx
index eccc6aabbf..5988f398cc 100644
--- a/pages/market.tsx
+++ b/pages/market.tsx
@@ -178,6 +178,7 @@ Market.getLayout = (page) => {page};
export default Market;
const StyledFullHeightContainer = styled.div`
+ border-top: ${(props) => props.theme.colors.selectedTheme.border};
display: grid;
grid-gap: 0;
flex: 1;
@@ -196,6 +197,7 @@ const LoaderContainer = styled.div`
`;
const TabletContainer = styled.div`
+ border-top: ${(props) => props.theme.colors.selectedTheme.border};
display: grid;
grid-template-columns: ${TRADE_PANEL_WIDTH_MD}px 1fr;
height: 100%;
diff --git a/sdk/constants/futures.ts b/sdk/constants/futures.ts
index 1b5d5286b2..2cce97ba9b 100644
--- a/sdk/constants/futures.ts
+++ b/sdk/constants/futures.ts
@@ -19,9 +19,9 @@ export const KWENTA_TRACKING_CODE = formatBytes32String('KWENTA');
export const DEFAULT_NUMBER_OF_TRADES = 32;
export const DEFAULT_PRICE_IMPACT_DELTA_PERCENT = {
- MARKET: '4',
- STOP: '2',
- LIMIT: '2',
+ MARKET: '1',
+ STOP: '4',
+ LIMIT: '4',
STOP_LOSS: '5',
TAKE_PROFIT: '5',
};
diff --git a/sections/futures/EditPositionModal/EditStopLossAndTakeProfitInput.tsx b/sections/futures/EditPositionModal/EditStopLossAndTakeProfitInput.tsx
index 4fa8a7aa0c..33e805c000 100644
--- a/sections/futures/EditPositionModal/EditStopLossAndTakeProfitInput.tsx
+++ b/sections/futures/EditPositionModal/EditStopLossAndTakeProfitInput.tsx
@@ -13,10 +13,11 @@ type Props = {
invalid: boolean;
currentPrice: string;
onChange: (_: ChangeEvent, v: string) => void;
+ right?: React.ReactNode;
};
const EditStopLossAndTakeProfitInput: React.FC = memo(
- ({ isMobile, type, value, invalid, currentPrice, onChange }) => {
+ ({ isMobile, type, value, invalid, currentPrice, onChange, right }) => {
const { t } = useTranslation();
return (
@@ -40,6 +41,7 @@ const EditStopLossAndTakeProfitInput: React.FC = memo(
? t('futures.market.trade.edit-sl-tp.no-tp')
: t('futures.market.trade.edit-sl-tp.no-sl')
}
+ right={right}
/>
);
diff --git a/sections/futures/EditPositionModal/EditStopLossAndTakeProfitModal.tsx b/sections/futures/EditPositionModal/EditStopLossAndTakeProfitModal.tsx
index 95cd229be2..06fba89eb8 100644
--- a/sections/futures/EditPositionModal/EditStopLossAndTakeProfitModal.tsx
+++ b/sections/futures/EditPositionModal/EditStopLossAndTakeProfitModal.tsx
@@ -15,7 +15,11 @@ import { ConditionalOrderTypeEnum, PositionSide } from 'sdk/types/futures';
import { formatDollars, stripZeros, suggestedDecimals } from 'sdk/utils/number';
import { setShowPositionModal } from 'state/app/reducer';
import { selectAckedOrdersWarning, selectTransaction } from 'state/app/selectors';
-import { calculateKeeperDeposit, updateStopLossAndTakeProfit } from 'state/futures/actions';
+import {
+ calculateKeeperDeposit,
+ clearTradeInputs,
+ updateStopLossAndTakeProfit,
+} from 'state/futures/actions';
import { setSLTPModalStopLoss, setSLTPModalTakeProfit } from 'state/futures/reducer';
import {
selectAllSLTPOrders,
@@ -30,6 +34,7 @@ import { useAppDispatch, useAppSelector } from 'state/hooks';
import { KeeperDepositRow } from '../FeeInfoBox/FeesRow';
import PositionType from '../PositionType';
import OrderAcknowledgement from '../Trade/OrderAcknowledgement';
+import ShowPercentage from '../Trade/ShowPercentage';
import EditStopLossAndTakeProfitInput from './EditStopLossAndTakeProfitInput';
const TP_OPTIONS = ['none', '5%', '10%', '25%', '50%', '100%'];
@@ -125,6 +130,8 @@ export default function EditStopLossAndTakeProfitModal() {
const existingTP = exsistingSLTPOrders.find(
(o) => o.marketKey === market?.marketKey && o.orderType === ConditionalOrderTypeEnum.LIMIT
);
+ dispatch(clearTradeInputs());
+
dispatch(
setSLTPModalStopLoss(
existingSL?.targetPrice ? stripZeros(existingSL.targetPrice.toString()) : ''
@@ -226,6 +233,14 @@ export default function EditStopLossAndTakeProfitModal() {
}
value={takeProfitPrice}
onChange={onChangeTakeProfit}
+ right={
+
+ }
/>
+ }
/>
{
marketName,
rate: formatCurrency('sUSD', latestPrice, {
currencyKey: 'sUSD',
- minDecimals:
- marketName != null && isDecimalFour(marketName)
- ? DEFAULT_CRYPTO_DECIMALS
- : undefined,
+ suggestDecimals: true,
}),
})
: t('futures.market.page-title')}
diff --git a/sections/futures/Trade/SLTPInputs.tsx b/sections/futures/Trade/SLTPInputs.tsx
index da117e5f28..6151590298 100644
--- a/sections/futures/Trade/SLTPInputs.tsx
+++ b/sections/futures/Trade/SLTPInputs.tsx
@@ -22,6 +22,7 @@ import {
import { useAppDispatch, useAppSelector } from 'state/hooks';
import OrderAcknowledgement from './OrderAcknowledgement';
+import ShowPercentage from './ShowPercentage';
const TP_OPTIONS = ['5%', '10%', '25%', '50%', '100%'];
const SL_OPTIONS = ['2%', '5%', '10%', '20%', '50%'];
@@ -145,8 +146,16 @@ export default function SLTPInputs() {
value={stopLossPrice}
placeholder={'0.00'}
onChange={onChangeStopLoss}
+ right={
+
+ }
/>
-
+ }
/>
)
diff --git a/sections/futures/Trade/ShowPercentage.tsx b/sections/futures/Trade/ShowPercentage.tsx
new file mode 100644
index 0000000000..127638e51f
--- /dev/null
+++ b/sections/futures/Trade/ShowPercentage.tsx
@@ -0,0 +1,49 @@
+import Wei, { wei } from '@synthetixio/wei';
+import { useMemo } from 'react';
+
+import { Body } from 'components/Text';
+import { PositionSide } from 'sdk/types/futures';
+import { formatPercent } from 'sdk/utils/number';
+
+type ShowPercentageProps = {
+ targetPrice: string;
+ isStopLoss?: boolean;
+ currentPrice: Wei;
+ leverageSide: PositionSide | string | undefined;
+ leverageWei: Wei;
+};
+
+const ShowPercentage: React.FC = ({
+ targetPrice,
+ isStopLoss = false,
+ currentPrice,
+ leverageSide,
+ leverageWei,
+}) => {
+ const calculatePercentage = useMemo(() => {
+ // eslint-disable-next-line no-console
+ console.log(
+ `targetPrice: ${targetPrice}, currentPrice: ${currentPrice}, leverageSide: ${leverageSide}`
+ );
+ if (!targetPrice || !currentPrice || !leverageSide) return '';
+ const priceWei = wei(targetPrice);
+ const diff =
+ leverageSide === 'short'
+ ? isStopLoss
+ ? priceWei.sub(currentPrice)
+ : currentPrice.sub(priceWei)
+ : isStopLoss
+ ? currentPrice.sub(priceWei)
+ : priceWei.sub(currentPrice);
+
+ return formatPercent(diff.div(currentPrice).mul(leverageWei));
+ }, [currentPrice, isStopLoss, leverageSide, leverageWei, targetPrice]);
+
+ return (
+
+ {calculatePercentage}
+
+ );
+};
+
+export default ShowPercentage;
diff --git a/sections/homepage/Assets.tsx b/sections/homepage/Assets.tsx
index 2fc6c08d88..c3fc2648a5 100644
--- a/sections/homepage/Assets.tsx
+++ b/sections/homepage/Assets.tsx
@@ -11,6 +11,8 @@ import Button from 'components/Button';
import ChangePercent from 'components/ChangePercent';
import Currency from 'components/Currency';
import { FlexDiv, FlexDivColCentered, FlexDivRow } from 'components/layout/flex';
+import { MobileOnlyView } from 'components/Media';
+import { NotMobileView } from 'components/Media/Media';
import { TabPanel } from 'components/Tab';
import { DEFAULT_FUTURES_MARGIN_TYPE } from 'constants/defaults';
import Connector from 'containers/Connector';
@@ -22,7 +24,7 @@ import { selectOptimismMarkets } from 'state/home/selectors';
import { useAppSelector, usePollAction } from 'state/hooks';
import { selectPreviousDayPrices, selectPrices } from 'state/prices/selectors';
import { SmallGoldenHeader, WhiteHeader } from 'styles/common';
-import media, { Media } from 'styles/media';
+import media from 'styles/media';
import { getSynthDescription } from 'utils/futures';
enum MarketsTab {
@@ -177,7 +179,7 @@ const Assets = () => {
return (
-
+
{title}
@@ -228,8 +230,8 @@ const Assets = () => {
-
-
+
+
{title}
@@ -281,7 +283,7 @@ const Assets = () => {
-
+
);
};
diff --git a/sections/homepage/Earning.tsx b/sections/homepage/Earning.tsx
index 861ade276a..93c4c330e3 100644
--- a/sections/homepage/Earning.tsx
+++ b/sections/homepage/Earning.tsx
@@ -12,10 +12,12 @@ import {
FlexDivRow,
} from 'components/layout/flex';
import { GridDiv } from 'components/layout/grid';
+import { MobileOnlyView } from 'components/Media';
+import { NotMobileView } from 'components/Media/Media';
import { StackSection } from 'sections/homepage/section';
import { Copy, Title } from 'sections/homepage/text';
import { SmallGoldenHeader, WhiteHeader } from 'styles/common';
-import media, { Media } from 'styles/media';
+import media from 'styles/media';
const EARNINGS = [
{
@@ -55,7 +57,7 @@ const Earning = () => {
{title}
-
+
{EARNINGS.map(({ id, title, copy, image }) => (
@@ -67,8 +69,8 @@ const Earning = () => {
))}
-
-
+
+
{EARNINGS.map(({ id, title, copy, image }) => (
@@ -80,7 +82,7 @@ const Earning = () => {
))}
-
+
);
diff --git a/sections/homepage/ShortList.tsx b/sections/homepage/ShortList.tsx
index 3ec3b302b1..03982f436b 100644
--- a/sections/homepage/ShortList.tsx
+++ b/sections/homepage/ShortList.tsx
@@ -9,6 +9,7 @@ import Button from 'components/Button';
import Currency from 'components/Currency';
import { FlexDivColCentered, FlexDivRow } from 'components/layout/flex';
import Loader from 'components/Loader';
+import { MobileOnlyView, NotMobileView } from 'components/Media/Media';
import Table, { TableHeader } from 'components/Table';
import { Body } from 'components/Text';
import ROUTES from 'constants/routes';
@@ -20,7 +21,7 @@ import { formatDollars, formatNumber } from 'sdk/utils/number';
import { StackSection } from 'sections/homepage/section';
import { Title } from 'sections/homepage/text';
import { SmallGoldenHeader, WhiteHeader } from 'styles/common';
-import media, { Media } from 'styles/media';
+import media from 'styles/media';
const ShortList = () => {
const { t } = useTranslation();
@@ -65,7 +66,7 @@ const ShortList = () => {
{title}
-
+
{
},
]}
/>
-
-
+
+
{
},
]}
/>
-
+
{sectionTitle}
diff --git a/sections/shared/Layout/AppLayout/Header/Header.tsx b/sections/shared/Layout/AppLayout/Header/Header.tsx
index f1891c59b8..871ae5567c 100644
--- a/sections/shared/Layout/AppLayout/Header/Header.tsx
+++ b/sections/shared/Layout/AppLayout/Header/Header.tsx
@@ -27,7 +27,6 @@ const Container = styled.header`
display: flex;
justify-content: space-between;
padding: 15px;
- border-bottom: ${(props) => props.theme.colors.selectedTheme.border};
`;
const LogoNav = styled.div`
diff --git a/state/futures/actions.ts b/state/futures/actions.ts
index b8b3855bbc..2754ec643c 100644
--- a/state/futures/actions.ts
+++ b/state/futures/actions.ts
@@ -125,14 +125,11 @@ import {
selectCrossMarginEditPosInputs,
selectCrossPreviewCount,
selectTradePreview,
- selectEditPosDesiredFillPrice,
selectClosePositionOrderInputs,
selectFuturesPositions,
selectEditPositionModalInfo,
- selectClosePosDesiredFillPrice,
selectOpenDelayedOrders,
selectSlTpModalInputs,
- selectDesiredTradeFillPrice,
selectSmartMarginKeeperDeposit,
selectSkewAdjustedPrice,
selectEditPositionPreview,
@@ -1259,7 +1256,8 @@ export const modifyIsolatedPosition = createAsyncThunk(
async (_, { getState, dispatch, extra: { sdk } }) => {
const account = selectFuturesAccount(getState());
const marketInfo = selectMarketInfo(getState());
- const desiredFill = selectDesiredTradeFillPrice(getState());
+ const editPreview = selectEditPositionPreview(getState());
+ const desiredFillPrice = editPreview?.desiredFillPrice ?? wei(0);
const { nativeSizeDelta } = selectTradeSizeInputs(getState());
try {
if (!marketInfo) throw new Error('Market info not found');
@@ -1276,7 +1274,7 @@ export const modifyIsolatedPosition = createAsyncThunk(
const tx = await sdk.futures.submitIsolatedMarginOrder(
marketInfo.market,
wei(nativeSizeDelta),
- desiredFill
+ desiredFillPrice
);
await monitorAndAwaitTransaction(dispatch, tx);
dispatch(fetchIsolatedOpenOrders());
@@ -1343,7 +1341,8 @@ export const closeIsolatedMarginPosition = createAsyncThunk {
const marketInfo = selectMarketInfo(getState());
- const desiredFillPrice = selectDesiredTradeFillPrice(getState());
+ const closePreview = selectClosePositionPreview(getState());
+ const desiredFillPrice = closePreview?.desiredFillPrice ?? wei(0);
if (!marketInfo) throw new Error('Market info not found');
try {
dispatch(
@@ -1395,7 +1394,7 @@ export const submitCrossMarginOrder = createAsyncThunk {
const { market } = selectEditPositionModalInfo(getState());
- const desiredFillPrice = selectClosePosDesiredFillPrice(getState());
+ const closePreview = selectClosePositionPreview(getState());
+ const desiredFillPrice = closePreview?.price ?? wei(0);
const { nativeSizeDelta } = selectClosePositionOrderInputs(getState());
const wallet = selectWallet(getState());
@@ -1699,7 +1699,8 @@ export const closeCrossMarginPosition = createAsyncThunk {
const { position, market } = selectEditPositionModalInfo(getState());
const crossMarginAccount = selectCrossMarginAccount(getState());
- const desiredFillPrice = selectClosePosDesiredFillPrice(getState());
+ const closePreview = selectClosePositionPreview(getState());
+ const desiredFillPrice = closePreview?.price ?? wei(0);
try {
if (!position?.position) throw new Error('No position to close');
diff --git a/state/futures/selectors.ts b/state/futures/selectors.ts
index fc3d8b4e02..b310be9c54 100644
--- a/state/futures/selectors.ts
+++ b/state/futures/selectors.ts
@@ -878,47 +878,91 @@ export const selectSlTpModalInputs = createSelector(
export const selectCrossMarginOrderPrice = (state: RootState) =>
state.futures.crossMargin.orderPrice.price ?? '';
-export const selectDesiredTradeFillPrice = createSelector(
+export const selectTradePreview = createSelector(
+ selectFuturesType,
selectTradeSizeInputs,
selectCrossMarginOrderPrice,
selectOrderType,
- selectMarketPrice,
- ({ nativeSizeDelta }, orderPrice, orderType, marketPrice) => {
- const priceImpact = getDefaultPriceImpact(orderType);
- const conditionalOrderPrice = wei(orderPrice || 0);
- const price =
- orderType !== 'market' && conditionalOrderPrice.gt(0) ? conditionalOrderPrice : marketPrice;
- const impactDecimalPercent = priceImpact.div(100);
- return nativeSizeDelta.lt(0)
- ? price.mul(wei(1).sub(impactDecimalPercent))
- : price.mul(impactDecimalPercent.add(1));
+ (state: RootState) => state.futures,
+ (type, { nativeSizeDelta }, orderPrice, orderType, futures) => {
+ const preview = futures[accountType(type)].previews.trade;
+ const unserialized = preview ? unserializePotentialTrade(preview) : null;
+ if (unserialized) {
+ const priceImpact = getDefaultPriceImpact(orderType);
+ const conditionalOrderPrice = wei(orderPrice || 0);
+ const price =
+ orderType !== 'market' && conditionalOrderPrice.gt(0)
+ ? conditionalOrderPrice
+ : unserialized.price;
+ const impactDecimalPercent = priceImpact.div(100);
+ const desiredFillPrice = nativeSizeDelta.lt(0)
+ ? price.mul(wei(1).sub(impactDecimalPercent))
+ : price.mul(impactDecimalPercent.add(1));
+
+ return {
+ ...unserialized,
+ desiredFillPrice,
+ leverage: unserialized.margin.gt(0)
+ ? unserialized.notionalValue.div(unserialized.margin).abs()
+ : wei(0),
+ };
+ }
+ return null;
}
);
-export const selectEditPosDesiredFillPrice = createSelector(
+export const selectEditPositionPreview = createSelector(
+ selectFuturesType,
selectEditPositionInputs,
- selectMarketPrice,
- ({ nativeSizeDelta }, marketPrice) => {
- const priceImpact = getDefaultPriceImpact('market');
- const impactDecimalPercent = priceImpact.div(100);
- return Number(nativeSizeDelta) < 0
- ? marketPrice.mul(wei(1).sub(impactDecimalPercent))
- : marketPrice.mul(impactDecimalPercent.add(1));
+ (state: RootState) => state.futures,
+ (type, { nativeSizeDelta }, futures) => {
+ const preview = futures[accountType(type)].previews.edit;
+ const unserialized = preview ? unserializePotentialTrade(preview) : null;
+ if (unserialized) {
+ const priceImpact = getDefaultPriceImpact('market');
+ const impactDecimalPercent = priceImpact.div(100);
+ const desiredFillPrice =
+ Number(nativeSizeDelta) < 0
+ ? unserialized.price.mul(wei(1).sub(impactDecimalPercent))
+ : unserialized.price.mul(impactDecimalPercent.add(1));
+ return {
+ ...unserialized,
+ desiredFillPrice,
+ leverage: unserialized.margin.gt(0)
+ ? unserialized.notionalValue.div(unserialized.margin).abs()
+ : wei(0),
+ };
+ }
+ return null;
}
);
-export const selectClosePosDesiredFillPrice = createSelector(
+export const selectClosePositionPreview = createSelector(
+ selectFuturesType,
selectEditPositionModalInfo,
selectClosePositionOrderInputs,
- ({ position, marketPrice }, { price, orderType }) => {
- const priceImpact = getDefaultPriceImpact(orderType);
-
- const impactDecimalPercent = priceImpact.div(100);
- let orderPrice = orderType === 'market' ? marketPrice : wei(price?.value || 0);
- orderPrice = orderPrice ?? wei(0);
- return position?.position?.side === PositionSide.LONG
- ? orderPrice.mul(wei(1).sub(impactDecimalPercent))
- : orderPrice.mul(impactDecimalPercent.add(1));
+ (state: RootState) => state.futures,
+ (type, { position }, { price, orderType }, futures) => {
+ const preview = futures[accountType(type)].previews.close;
+ const unserialized = preview ? unserializePotentialTrade(preview) : null;
+ if (unserialized) {
+ const priceImpact = getDefaultPriceImpact(orderType);
+ const impactDecimalPercent = priceImpact.div(100);
+ let orderPrice =
+ (orderType === 'market' ? unserialized.price : wei(price?.value || 0)) ?? wei(0);
+ const desiredFillPrice =
+ position?.position?.side === PositionSide.LONG
+ ? orderPrice.mul(wei(1).sub(impactDecimalPercent))
+ : orderPrice.mul(impactDecimalPercent.add(1));
+ return {
+ ...unserialized,
+ desiredFillPrice,
+ leverage: unserialized.margin.gt(0)
+ ? unserialized.notionalValue.div(unserialized.margin).abs()
+ : wei(0),
+ };
+ }
+ return null;
}
);
@@ -1052,57 +1096,6 @@ export const selectOpenDelayedOrders = createSelector(selectAccountData, (accoun
unserializeDelayedOrders(account?.delayedOrders ?? [])
);
-export const selectTradePreview = createSelector(
- selectFuturesType,
- (state: RootState) => state.futures,
- (type, futures) => {
- const preview = futures[accountType(type)].previews.trade;
- const unserialized = preview ? unserializePotentialTrade(preview) : null;
- return unserialized
- ? {
- ...unserialized,
- leverage: unserialized.margin.gt(0)
- ? unserialized.notionalValue.div(unserialized.margin).abs()
- : wei(0),
- }
- : null;
- }
-);
-
-export const selectEditPositionPreview = createSelector(
- selectFuturesType,
- (state: RootState) => state.futures,
- (type, futures) => {
- const preview = futures[accountType(type)].previews.edit;
- const unserialized = preview ? unserializePotentialTrade(preview) : null;
- return unserialized
- ? {
- ...unserialized,
- leverage: unserialized.margin.gt(0)
- ? unserialized.notionalValue.div(unserialized.margin).abs()
- : wei(0),
- }
- : null;
- }
-);
-
-export const selectClosePositionPreview = createSelector(
- selectFuturesType,
- (state: RootState) => state.futures,
- (type, futures) => {
- const preview = futures[accountType(type)].previews.close;
- const unserialized = preview ? unserializePotentialTrade(preview) : null;
- return unserialized
- ? {
- ...unserialized,
- leverage: unserialized.margin.gt(0)
- ? unserialized.notionalValue.div(unserialized.margin).abs()
- : wei(0),
- }
- : null;
- }
-);
-
export const selectTradePreviewError = createSelector(
selectFuturesType,
(state: RootState) => state.futures,
diff --git a/styles/media.ts b/styles/media.ts
index e2eeadb4e3..dd184a9e01 100644
--- a/styles/media.ts
+++ b/styles/media.ts
@@ -1,5 +1,3 @@
-import { createMedia } from '@artsy/fresnel';
-import mapValues from 'lodash/mapValues';
import { generateMedia } from 'styled-media-query';
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -14,15 +12,6 @@ export const BREAKPOINTS: Breakpoints = {
xxl: 1500,
};
-// match fresnel media queries behavior with styled-media-query (e.g - 480 will be 479 using fresnel, so we +1)
-const normalizeFresnelBreakpoint = (breakpoints: Breakpoints) =>
- // '0' needs to be ignored.
- mapValues(breakpoints, (breakpoint) => (breakpoint > 0 ? breakpoint + 1 : breakpoint));
-
-const AppMedia = createMedia({
- breakpoints: normalizeFresnelBreakpoint(BREAKPOINTS),
-});
-
// TODO: consider swapping this library, its a bit confusing to use "lessThan" and "greaterThan" when it doesn't actually do it... ("lessThan 768px, matches 768px...")
export const media = generateMedia({
sm: `${BREAKPOINTS.sm}px`,
@@ -33,8 +22,4 @@ export const media = generateMedia({
xxl: `${BREAKPOINTS.xxl}px`,
});
-export const mediaStyles = AppMedia.createMediaStyle();
-
-export const { Media, MediaContextProvider } = AppMedia;
-
export default media;