Merge pull request #1264 from Kwenta/dev

.eslintrc

@@ -51,6 +51,10 @@
 						"pattern": "containers/**",
 						"group": "internal"
 					},
+					{
+						"pattern": "contexts/**",
+						"group": "internal"
+					},
 					{
 						"pattern": "hooks/**",
 						"group": "internal"
@@ -78,6 +82,10 @@
 					{
 						"pattern": "utils/**",
 						"group": "internal"
+					},
+					{
+						"pattern": "lib/**",
+						"group": "internal"
 					}
 				],
 				"pathGroupsExcludedImportTypes": []

.github/workflows/audit_build_verify.yml

@@ -42,7 +42,7 @@ jobs:
         continue-on-error: true
 
       - name: Cache node modules
-        uses: actions/cache@0865c47f36e68161719c5b124609996bb5c40129 # pin@v3
+        uses: actions/cache@a7c34adf76222e77931dedbf4a45b2e4648ced19 # pin@v3
         with:
           path: |
             .npm-cache
@@ -98,7 +98,7 @@ jobs:
         continue-on-error: true
 
       - name: Cache node modules
-        uses: actions/cache@0865c47f36e68161719c5b124609996bb5c40129 # pin@v3
+        uses: actions/cache@a7c34adf76222e77931dedbf4a45b2e4648ced19 # pin@v3
         with:
           path: |
             .npm-cache
@@ -119,7 +119,7 @@ jobs:
           npm install --prefer-offline --no-audit --legacy-peer-deps
 
       - name: Cache next.js build cache
-        uses: actions/cache@0865c47f36e68161719c5b124609996bb5c40129 # pin@v2
+        uses: actions/cache@a7c34adf76222e77931dedbf4a45b2e4648ced19 # pin@v2
         with:
           path: .next/cache
           key: ${{ runner.os }}-next-cache-${{ hashFiles('**/package-lock.json') }}

SECURITY.md

@@ -0,0 +1,35 @@
+# Security Policy
+
+## Supported Versions
+
+Please have a look at [Releases](https://github.com/Kwenta/kwenta/releases). We recommend using the most recently released version.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 3.x.x   | :white_check_mark: |
+| 2.x.x   | :x:                |
+
+## Reporting a Vulnerability
+
+Please send vulnerability reports to [email protected] and encrypt sensitive messages using our PGP key.
+
+Please do not file a public ticket mentioning the vulnerability, as doing so could increase the likelihood of the vulnerability being exploited before a fix has been created and released.
+
+```
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+Version: OpenPGP.js v4.10.10
+Comment: https://openpgpjs.org
+
+xjMEYvEiWBYJKwYBBAHaRw8BAQdAjs0DpOJQm/bTF9aKJjEFsKR177julOvK
+SBqeFmalkA7NI2t3ZW50YUBwcm90b24ubWUgPGt3ZW50YUBwcm90b24ubWU+
+wo8EEBYKACAFAmLxIlgGCwkHCAMCBBUICgIEFgIBAAIZAQIbAwIeAQAhCRBH
+cLXaun2i+xYhBDfYNsrP0erBkj2H1kdwtdq6faL7l00BAKrtIsTseUz8PjRg
+5dqx3GvsBa6y5uyw72DnXe0YTzC3AQDAor8OFqN0EyrbjzY+wCtWF2RA8euM
+afA1rqbkuJZGAc44BGLxIlgSCisGAQQBl1UBBQEBB0C5vwKrTj95esmVlepe
+QSIPlHPbMRn9ORCdme1x+gTiTwMBCAfCeAQYFggACQUCYvEiWAIbDAAhCRBH
+cLXaun2i+xYhBDfYNsrP0erBkj2H1kdwtdq6faL7v0UBAJ4R3Z1EPonxQOu/
+l0tKx8gqT/qpmIZ8EaQJqBr/RLc5AQCoYaggo4MZh0Bg+K0rXrszLF/FnzZY
+Owcx56Dt6XQ9Bw==
+=vWd9
+-----END PGP PUBLIC KEY BLOCK-----
+```

components/ChangePercent/ChangePercent.tsx

@@ -11,14 +11,20 @@ type ChangePercentProps = {
 	value: WeiSource;
 	className?: string;
 	decimals?: number;
+	showArrow?: boolean;
 };
 
-export const ChangePercent: FC<ChangePercentProps> = ({ value, decimals = 2, ...rest }) => {
+export const ChangePercent: FC<ChangePercentProps> = ({
+	value,
+	decimals = 2,
+	showArrow = true,
+	...rest
+}) => {
 	const isPositive = wei(value ?? 0).gt(0);
 
 	return (
 		<CurrencyChange isPositive={isPositive} {...rest}>
-			{isPositive ? <ChangePositiveIcon /> : <ChangeNegativeIcon />}
+			{showArrow ? isPositive ? <ChangePositiveIcon /> : <ChangeNegativeIcon /> : ''}
 			{formatPercent(wei(value ?? 0).abs(), { minDecimals: decimals })}
 		</CurrencyChange>
 	);

components/InfoBox/InfoBox.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { NO_VALUE } from 'constants/placeholder';
 
-type DetailedInfo = {
+export type DetailedInfo = {
 	value: string;
 	keyNode?: React.ReactNode;
 	valueNode?: React.ReactNode;

components/PoweredBySynthetix/PoweredBySynthetix.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import TextLogo from 'assets/svg/brand/text-logo-white.svg';
-import OptimismIcon from 'assets/svg/partners/optimism.svg';
 import { EXTERNAL_LINKS } from 'constants/links';
 import { ExternalLink, FlexDivColCentered, Paragraph } from 'styles/common';
 
@@ -15,9 +14,6 @@ const PoweredBySynthetix = () => {
 			<ExternalLink href={EXTERNAL_LINKS.Synthetix.Home}>
 				<TextLogo height="10.5px" />
 			</ExternalLink>
-			<ExternalLink href={EXTERNAL_LINKS.Optimism.Home}>
-				<OptimismIcon height="13px" />
-			</ExternalLink>
 		</Container>
 	);
 };

components/Table/Search.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import SearchIconPath from 'assets/svg/app/search.svg';
 import SearchInput from 'components/Input/SearchInput';
+import media from 'styles/media';
 
 type Props = {
 	value: string | undefined;
@@ -38,6 +39,10 @@ const StyledSearchInput = styled(SearchInput)`
 	text-indent: 16px;
 	border-radius: 8px;
 	padding: 10px 15px;
+
+	${media.lessThan('sm')`
+		font-size: 13px;
+	`}
 `;
 
 const SearchBar = styled.div`

components/Table/Table.tsx

@@ -118,6 +118,15 @@ export const Table: FC<TableProps> = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
+	// reset to the first page
+	// this fires when filters are applied that change the data
+	// if a filter is applied that reduces the data size below max pages for that filter, reset to the first page
+	useEffect(() => {
+		if (pageIndex > pageCount) {
+			gotoPage(0);
+		}
+	}, [pageIndex, pageCount, gotoPage]);
+
 	const defaultRef = useRef(null);
 
 	return (
@@ -185,7 +194,7 @@ export const Table: FC<TableProps> = ({
 					{!!noResultsMessage && !isLoading && data.length === 0 && noResultsMessage}
 				</ReactTable>
 			</TableContainer>
-			{!showShortList && showPagination && data.length > (pageSize ? pageSize : MAX_PAGE_ROWS) ? (
+			{!showShortList && data.length > (pageSize ? pageSize : MAX_PAGE_ROWS) ? (
 				<Pagination
 					pageIndex={pageIndex}
 					pageCount={pageCount}
@@ -260,7 +269,8 @@ const TableCellHead = styled(TableCell)<{ hideHeaders: boolean }>`
 `;
 
 export const TableNoResults = styled(GridDivCenteredRow)`
-	padding: 50px 0;
+	padding: 50px 40px;
+	text-align: center;
 	justify-content: center;
 	margin-top: -2px;
 	justify-items: center;

components/Tooltip/StyledTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 
 import { Tooltip, ToolTipWrapper } from './TooltipStyles';
 
@@ -15,23 +15,41 @@ interface ToolTipProps {
 	left?: string;
 	right?: string;
 	style?: React.CSSProperties;
+	position?: string;
 }
 
 const StyledTooltip = (props: ToolTipProps) => {
 	const [activeMouse, setActiveMouse] = useState(false);
+	const [position, setPosition] = useState({});
+	const myRef = useRef<HTMLDivElement>(null);
+
+	const setFixedPosition = () => {
+		const isFirefox = /firefox/i.test(navigator.userAgent);
+		if (myRef.current !== null) {
+			const { left, bottom, top } = myRef.current.getBoundingClientRect();
+			if (isFirefox) {
+				setPosition({ left: `${left - 24}px`, top: `${top - 36}px` });
+			} else {
+				setPosition({ left: `${left}px`, top: `${bottom + 20}px` });
+			}
+		}
+	};
 
 	const openToolTip = () => {
 		setActiveMouse(true);
+		if (props.position === 'fixed') {
+			setFixedPosition();
+		}
 	};
 
 	const closeToolTip = () => {
 		setActiveMouse(false);
 	};
 	return (
-		<ToolTipWrapper onMouseEnter={openToolTip} onMouseLeave={closeToolTip}>
+		<ToolTipWrapper ref={myRef} onMouseEnter={openToolTip} onMouseLeave={closeToolTip}>
 			{props.children}
 			{activeMouse && (
-				<Tooltip {...props} style={props.style}>
+				<Tooltip {...position} {...props} style={props.style}>
 					<p>{props.content}</p>
 				</Tooltip>
 			)}

components/Tooltip/TimerTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -15,6 +15,8 @@ interface ToolTipProps {
 	bottom?: string;
 	left?: string;
 	right?: string;
+	style?: React.CSSProperties;
+	position?: string;
 }
 
 const formatTimeUnit = (value: number) => {
@@ -24,9 +26,26 @@ const formatTimeUnit = (value: number) => {
 const TimerTooltip = (props: ToolTipProps) => {
 	const { t } = useTranslation();
 	const [activeMouse, setActiveMouse] = useState(false);
+	const [position, setPosition] = useState({});
+	const myRef = useRef<HTMLDivElement>(null);
+
+	const setFixedPosition = () => {
+		const isFirefox = /firefox/i.test(navigator.userAgent);
+		if (myRef.current !== null) {
+			const { left, bottom, top } = myRef.current.getBoundingClientRect();
+			if (isFirefox) {
+				setPosition({ left: `${left - 24}px`, top: `${top - 36}px` });
+			} else {
+				setPosition({ left: `${left}px`, top: `${bottom + 20}px` });
+			}
+		}
+	};
 
 	const openToolTip = () => {
 		setActiveMouse(true);
+		if (props.position === 'fixed') {
+			setFixedPosition();
+		}
 	};
 
 	const closeToolTip = () => {
@@ -74,10 +93,10 @@ const TimerTooltip = (props: ToolTipProps) => {
 	if (minutes < 1) timeUnitsFormat = `exchange.market-details-card.timer-tooltip.seconds-ago`;
 
 	return (
-		<ToolTipWrapper onMouseEnter={openToolTip} onMouseLeave={closeToolTip}>
+		<ToolTipWrapper ref={myRef} onMouseEnter={openToolTip} onMouseLeave={closeToolTip}>
 			{props.children}
 			{activeMouse && (
-				<Tooltip {...props}>
+				<Tooltip {...props} {...position}>
 					<Container>
 						<span>{t(`exchange.market-details-card.timer-tooltip.last-update`)}</span>
 						<p>
@@ -94,8 +113,6 @@ const TimerTooltip = (props: ToolTipProps) => {
 export default TimerTooltip;
 
 const Container = styled.div`
-	padding-top: 10px;
-	padding-bottom: 10px;
 	p {
 		font-family: ${(props) => props.theme.fonts.mono};
 		span {

components/Tooltip/TooltipStyles.tsx

@@ -12,6 +12,7 @@ interface ToolTipStyleProps {
 	bottom?: string;
 	left?: string;
 	right?: string;
+	position?: string;
 }
 
 export const Tooltip = styled.div<ToolTipStyleProps>`
@@ -23,7 +24,7 @@ export const Tooltip = styled.div<ToolTipStyleProps>`
 	border-radius: 8px;
 	padding: 10px;
 	margin: 0;
-	position: absolute;
+	position: ${(props) => props.position || 'absolute'};
 	top: ${(props) => props.top};
 	bottom: ${(props) => props.bottom};
 	left: ${(props) => props.left};

constants/address.ts

@@ -3,3 +3,13 @@ export const KWENTA_REFERRAL_ADDRESS = '0x08e30BFEE9B73c18F9770288DDd13203A48874
 export const ENS_REVERSE_LOOKUP = '0x3671aE578E63FdF66ad4F3E12CC0c0d71Ac7510C';
 
 export const SYNTH_SWAP_OPTIMISM_ADDRESS = '0x6d6273f52b0C8eaB388141393c1e8cfDB3311De6';
+
+export const CROSS_MARGIN_ACCOUNT_FACTORY: Record<string, string> = {
+	69: '0xB2e8d9832C8a22C6fB6D2c92c7E2a69d654749CB',
+	// 10: awaiting mainnet
+};
+
+export const CROSS_MARGIN_BASE_SETTINGS: Record<string, string> = {
+	69: '0x026B0DA8B453967D39227748066Eb094a415b696',
+	// 10: awaiting mainnet
+};

constants/competition.ts

@@ -0,0 +1,9 @@
+/**
+ * Competitions will most start and end at 00:00 UTC on the respective days.
+ * eg, if startDate is 2022/08/18, it means competition starts at 00:00 UTC 2022/08/18,  and endDate is 00:00 UTC 2022/08/22
+ */
+export const COMPETITION_DATES = {
+	// note: month starts at 0, not 1.
+	START_DATE: new Date(2022, 7, 16),
+	END_DATE: new Date(2022, 7, 23),
+};

constants/links.ts

@@ -54,4 +54,7 @@ export const EXTERNAL_LINKS = {
 	Kips: {
 		Home: 'https://kips.kwenta.io/all-kip/',
 	},
+	Competition: {
+		LearnMore: 'https://mirror.xyz/kwenta.eth/WghvQFjEslsC0kwnGVP0QZnY1F7ZU3w5hpWxDPLbBsE',
+	},
 };