v4.0.0

v4.0.0

.eslintrc

@@ -95,11 +95,15 @@
 					{
 						"pattern": "lib/**",
 						"group": "internal"
+					},
+					{
+						"pattern": "testing/**",
+						"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@56461b9eb0f8438fd15c7a9968e3c9ebb18ceff1 # pin@v3
+        uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # pin@v3
         with:
           path: |
             .npm-cache
@@ -70,7 +70,7 @@ jobs:
       - name: Upload lint results
         # run if lint failed and only on main/dev branch and pull requests
         if: always() && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.event_name == 'pull_request')
-        uses: github/codeql-action/upload-sarif@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/upload-sarif@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
         with:
           sarif_file: lint-results.sarif
         continue-on-error: true
@@ -98,7 +98,7 @@ jobs:
         continue-on-error: true
 
       - name: Cache node modules
-        uses: actions/cache@56461b9eb0f8438fd15c7a9968e3c9ebb18ceff1 # pin@v3
+        uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # 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@56461b9eb0f8438fd15c7a9968e3c9ebb18ceff1 # pin@v2
+        uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # pin@v2
         with:
           path: .next/cache
           key: ${{ runner.os }}-next-cache-${{ hashFiles('**/package-lock.json') }}
@@ -135,7 +135,7 @@ jobs:
 
       - name: Archive build
         if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.event_name == 'pull_request'
-        uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # pin@v3
+        uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # pin@v3
         with:
           name: build
           path: build.tar.gz

.github/workflows/codeql.yml

@@ -21,13 +21,13 @@ jobs:
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/init@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
         with:
           queries: security-and-quality
           languages: javascript
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/autobuild@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/analyze@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322

.github/workflows/lighthouse.yml

@@ -29,7 +29,7 @@ jobs:
         continue-on-error: true
 
       - name: Archive lighthouse artifacts
-        uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # pin@v2
+        uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # pin@v2
         # run on lighthouse fail
         if: always()
         with:

README.md

@@ -4,7 +4,7 @@
 
 # Kwenta
 
-A dApp enabling derivatives trading with infinite liquidity — powered by the Synthetix protocol.
+A dApp enabling derivatives trading — powered by the Synthetix protocol.
 
 The decentralized trading UI is available at [kwenta.eth.limo](https://kwenta.eth.limo).<br />
 ENS link: [kwenta.eth](https://app.ens.domains/name/kwenta.eth).
@@ -47,11 +47,13 @@ cp .env.local.example .env.local
 Then, open `.env.local` and add the missing environment variables:
 
 Required:
+
 - `NEXT_PUBLIC_PORTIS_APP_ID` - Portis app id (get it from [portis.io](https://www.portis.io/))
 - `NEXT_PUBLIC_BN_ONBOARD_API_KEY` - Blocknative Onboard API key (get it from [blocknative.com](https://blocknative.com/))
 - `NEXT_PUBLIC_PROVIDER_ID` - Specifies the default provider, options are `INFURA` or `BLAST_API`
 
 Optional:
+
 - `NEXT_PUBLIC_INFURA_PROJECT_ID` - Infura project id (get it from [infura.io](https://infura.io/))
 - `NEXT_PUBLIC_BLASTAPI_PROJECT_ID` - Blast API project id (get it from [blastapi.io](https://blastapi.io/))
 
@@ -70,16 +72,29 @@ npm run build
 npm start
 ```
 
+### Unit Testing
+
+```bash
+npm run test:unit
+```
+
+For unit tests we use a combination of Jest and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+
+Page tests should be added to the \_\_tests\_\_ folder at the root as it is not possible co-locate tests and pages in nextjs. Other tests should be co-located in a \_\_tests\_\_ folder next to their related file.
+
 ### End-2-End testing
-In order to run fully automated end-2-end (e2e) tests Kwenta uses [Synpress](https://github.com/Synthetixio/synpress) (a wrapper around [Cynpress](https://www.cypress.io/)).  
 
-#### Constraints 
+In order to run fully automated end-2-end (e2e) tests Kwenta uses [Synpress](https://github.com/Synthetixio/synpress) (a wrapper around [Cynpress](https://www.cypress.io/)).
+
+#### Constraints
+
 The current e2e tests are written to be run on Optimistic Kovan using Chrome as the browser.
 
 #### Setup
-- Download and install Google Chrome 
+
+- Download and install Google Chrome
 - Setup a test wallet on Optimistic Kovan and fund it with plenty of ETH (to pay for gas) and sUSD
-- Prior to running the tests you must set the environment variables below in the shell from which npm is started. Unfortunately, at this time other methods to set said environment variables (eg. through `.env.local`) don't work in conjunction with Synpress. 
+- Prior to running the tests you must set the environment variables below in the shell from which npm is started. Unfortunately, at this time other methods to set said environment variables (eg. through `.env.local`) don't work in conjunction with Synpress.
 
 ```bash
 PRIVATE_KEY=<INSERTPRIVATEKEY>
@@ -91,9 +106,11 @@ IS_TESTNET=true
 ```
 
 ##### Bash convenience script for setting up the environment
-A Bash convenience script [has been made available here](https://gist.github.com/raffiegang/b24a6b97bcd054645abf59be852bc88d). 
-- Open bash 
-- Copy the private key of the test wallet into the file `SYNPRESS_PRIVATEKEY` into the same folder location as the script. While using this method, please don't forget to update your .gitignore file to prevent your private key to be leaked.   
+
+A Bash convenience script [has been made available here](https://gist.github.com/raffiegang/b24a6b97bcd054645abf59be852bc88d).
+
+- Open bash
+- Copy the private key of the test wallet into the file `SYNPRESS_PRIVATEKEY` into the same folder location as the script. While using this method, please don't forget to update your .gitignore file to prevent your private key to be leaked.
 - Run the following command `source ./synpress-envsetter.sh`
 
 #### Run the tests

__tests__/pages/market.test.tsx

@@ -0,0 +1,59 @@
+import { render, waitFor } from '@testing-library/react';
+
+import mockConnector from 'testing/unit/__mocks__/mockConnector';
+import MockProviders from 'testing/unit/__mocks__/MockProviders';
+import { mockGrapqhlRequest, mockReactQuery } from 'testing/unit/__mocks__/mockQueries';
+import { TEST_ADDR } from 'testing/unit/constants';
+
+import Market from '../../pages/market';
+
+describe('Futures market page - cross margin', () => {
+	beforeAll(() => {
+		// TODO: remove this when we return to writing tests
+		jest.spyOn(console, 'error').mockImplementation(() => {});
+		mockReactQuery();
+	});
+	test('Displays cross margin not available when unsupported network', async () => {
+		mockGrapqhlRequest({ crossMarginAccounts: [] });
+		mockConnector({ network: { id: 1, name: 'ethereum' } });
+
+		const { findAllByTestId } = render(
+			<MockProviders>
+				<Market />
+			</MockProviders>
+		);
+
+		const components = await findAllByTestId('cross-margin-unsupported-network');
+		// Mobile and Desktop both get rendered
+		expect(components.length).toEqual(2);
+	});
+	test('Displays cross margin onboard prompt when no cross margin account', async () => {
+		mockGrapqhlRequest({ crossMarginAccounts: [] });
+		mockConnector();
+
+		const { findAllByTestId } = render(
+			<MockProviders>
+				<Market />
+			</MockProviders>
+		);
+
+		const components = await findAllByTestId('cross-margin-create-account');
+		// Mobile and Desktop both get rendered
+		expect(components.length).toEqual(2);
+	});
+	test('Trade panel input is disabled when wallet not connected', async () => {
+		mockGrapqhlRequest({ crossMarginAccounts: [{ id: TEST_ADDR }] });
+		mockConnector();
+
+		const { findByTestId } = render(
+			<MockProviders>
+				<Market />
+			</MockProviders>
+		);
+
+		await waitFor(async () => {
+			const component = await findByTestId('set-order-size-amount-susd-desktop');
+			expect(component.hasAttribute('disabled'));
+		});
+	});
+});

components/Badge/Badge.tsx

@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 
-const Badge = styled.span`
+const Badge = styled.span<{ color: 'yellow' | 'red' }>`
 	text-transform: uppercase;
-	padding: 1.6px 3px 1px 5px;
+	padding: 1.6px 3px 1px 3px;
 	text-align: center;
 	font-family: ${(props) => props.theme.fonts.black};
-	color: ${(props) => props.theme.colors.selectedTheme.badge.text};
-	background: ${(props) => props.theme.colors.selectedTheme.badge.background};
+	color: ${(props) => props.theme.colors.selectedTheme.badge[props.color].text};
+	background: ${(props) => props.theme.colors.selectedTheme.badge[props.color].background};
 	border-radius: 100px;
-	letter-spacing: 1px;
-	margin-left: 4px;
+	margin-left: 5px;
 	line-height: unset;
 	font-size: 10px;
 	font-variant: all-small-caps;

components/Badge/MarketBadge.tsx

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { CurrencyKey } from 'constants/currency';
 import { FuturesClosureReason } from 'hooks/useFuturesMarketClosed';
 import useIsMarketTransitioning from 'hooks/useIsMarketTransitioning';
-import theme from 'styles/theme';
 import { FuturesMarketAsset } from 'utils/futures';
 import { marketIsOpen, marketNextOpen, marketNextTransition } from 'utils/marketHours';
 
@@ -25,7 +24,7 @@ export const TransitionBadge: FC<TransitionBadgeProps> = ({ isOpen }) => {
 	const { t } = useTranslation();
 
 	return (
-		<StyledBadge background={isOpen ? theme.colors.gold : theme.colors.common.primaryRed}>
+		<StyledBadge color={isOpen ? 'yellow' : 'red'}>
 			{t(`futures.market.state.${isOpen ? 'closes-soon' : 'opens-soon'}`)}
 		</StyledBadge>
 	);
@@ -51,7 +50,7 @@ export const MarketBadge: FC<MarketBadgeProps> = ({
 
 	if (isFuturesMarketClosed) {
 		const reason = futuresClosureReason || 'unknown';
-		return <Badge>{t(`futures.market.state.${reason}`)}</Badge>;
+		return <Badge color="red">{t(`futures.market.state.${reason}`)}</Badge>;
 	}
 
 	if (isMarketTransitioning && isOpen !== null) {
@@ -63,8 +62,7 @@ export const MarketBadge: FC<MarketBadgeProps> = ({
 
 export default MarketBadge;
 
-const StyledBadge = styled(Badge)<{ background: string }>`
-	background: ${(props) => props.background};
+const StyledBadge = styled(Badge)`
 	padding: 1px 5px;
 	line-height: 9px;
 `;

components/Button/Button.tsx

@@ -35,7 +35,7 @@ export const border = css`
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: 10px;
+		border-radius: 8px;
 		padding: 1px;
 		background: ${(props) => props.theme.colors.selectedTheme.button.border};
 		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

components/Button/TabButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 
 import Button from './Button';
@@ -9,19 +9,21 @@ export type TabButtonProps = {
 	badge?: number;
 	icon?: any;
 	active?: boolean;
-	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+	titleIcon?: ReactNode;
 	disabled?: boolean;
 	noOutline?: boolean;
 	vertical?: boolean;
 	nofill?: boolean;
+	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 };
 
 const TabButton: React.FC<TabButtonProps> = React.memo(
-	({ title, detail, badge, active, icon, vertical, nofill, ...props }) => (
+	({ title, detail, badge, active, icon, vertical, titleIcon, nofill, ...props }) => (
 		<StyledButton {...props} {...{ active, vertical, nofill }} noOutline>
 			{!!icon && <div>{icon}</div>}
 			<div>
 				<div className="title-container">
+					{titleIcon}
 					<p className="title">{title}</p>
 					{!!badge && <div className="badge">{badge}</div>}
 				</div>
@@ -55,6 +57,7 @@ const StyledButton = styled(Button)<{
 	.title-container {
 		display: flex;
 		flex-direction: row;
+		align-items: center;
 	}
 	.title {
 		text-align: center;