v3.2.5

v3.2.5

.github/workflows/audit_build_verify.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # pin@v2
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Audit dependencies
         run: npm audit --audit-level=critical
@@ -35,14 +35,14 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # pin@v2
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Set npm cache directory
         run: npm config set cache .npm-cache --global
         continue-on-error: true
 
       - name: Cache node modules
-        uses: actions/cache@fd5de65bc895cf536527842281bea11763fefd77 # pin@v3
+        uses: actions/cache@56461b9eb0f8438fd15c7a9968e3c9ebb18ceff1 # 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@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/upload-sarif@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
         with:
           sarif_file: lint-results.sarif
         continue-on-error: true
@@ -91,14 +91,14 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # pin@v2
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Set npm cache directory
         run: npm config set cache .npm-cache --global
         continue-on-error: true
 
       - name: Cache node modules
-        uses: actions/cache@fd5de65bc895cf536527842281bea11763fefd77 # pin@v3
+        uses: actions/cache@56461b9eb0f8438fd15c7a9968e3c9ebb18ceff1 # 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@fd5de65bc895cf536527842281bea11763fefd77 # pin@v2
+        uses: actions/cache@56461b9eb0f8438fd15c7a9968e3c9ebb18ceff1 # pin@v2
         with:
           path: .next/cache
           key: ${{ runner.os }}-next-cache-${{ hashFiles('**/package-lock.json') }}

.github/workflows/codeql.yml

@@ -18,16 +18,16 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # pin@v2
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/init@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
         with:
           queries: security-and-quality
           languages: javascript
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/autobuild@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@86f3159a697a097a813ad9bfa0002412d97690a4 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/analyze@e0e5ded33cabb451ae0a9768fc7b0410bad9ad44 # pin@codeql-bundle-20220322

.github/workflows/lighthouse.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # pin@v2
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Run lighthouse
         run: |

.gitsigners

@@ -0,0 +1 @@
+hybrtdx9bqhe14wdkrnxouagdcqep3awpsureoi8tcxphbsz38tbne ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIEkRv+F3ES1QaiCfCeDDY5Dc4o20yIhU8WPbwNr5PEIk

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributors Guide
 
-Kwenta is a dApp enabling derivates trading with infinite liquidity - powered by the Synthetix protocol. We're community driven and welcome all contribution. We aim to provide a constructive, respectful and fun environment for collaboration.
+Kwenta is a dApp enabling derivates trading with infinite liquidity - powered by the Synthetix protocol. We're community driven and welcome all contributions. We aim to provide a constructive, respectful and fun environment for collaboration.
 
 If you wish to help out, please first join the **Kwenta devDAO** on our [Discord](https://discord.gg/kwenta) `#community-dev` channel. For more information, see [devDAO](#devdao) below.
 
@@ -31,15 +31,15 @@ Be welcome to join the Kwenta devDAO on our [Discord](https://discord.gg/kwenta)
 
 This is where discussions take place, new tickets will be announced by the community PM and assigned to the respective community members and roles on a first come, first served base.
 
-There are different roles depending on the severety of a ticket. As a new community member, you should watch out for *bounty hunter* tickets are work your way up from there.
+There are different roles depending on the severity of a ticket. As a new community member, you should watch out for *bounty hunter* tickets are work your way up from there.
 
 ### General Work-Flow
 
 We recommend the following work-flow for contributors:
 
-1. **Find an open ticket** to work on in our Discord, either because it's interesting or suitable to your skill-set. Use the `#community-dev channel` to communicate your intentions and ask questions.
+1. **Find an open ticket** to work on in our Discord, either because it's interesting or suitable to your skill set. Use the `#community-dev channel` to communicate your intentions and ask questions.
 2. **Work in a feature branch** of your personal fork (github.com/YOUR_NAME/kwenta) of the main repository (github.com/kwenta/kwenta).
-3. Once you feel you have addressed the issue, **create a pull-request** to merge your changes in to the main repository. In case of any doubts, don't hesitate to contact the community PM or ask away in the channel.
+3. Once you feel you have addressed the issue, **create a pull-request** to merge your changes into the main repository. In case of any doubts, don't hesitate to contact the community PM or ask away in the channel.
 4. Wait for a CC or auditor to **review your changes** to ensure the issue is addressed satisfactorily. Optionally, mention your PR on [Discord](https://discord.gg/kwenta).
 5. If the issue is addressed the repository maintainers will **merge your pull-request** and you'll be an official contributor!
 
@@ -66,7 +66,7 @@ There's a great [guide](https://akrabat.com/the-beginners-guide-to-contributing-
 
 ### I don't think I have anything to add
 
-There's lots to be done and there's all sorts of tasks. You can do anything from correcting typos through to writing core dApp code. If you reach out, we'll include you.
+There's lots to be done and there's all sorts of tasks. You can do anything from correcting typos to writing core dApp code. If you reach out, we'll include you.
 
 ### I'm not sure my programming level is good enough
 

components/Button/Button.tsx

@@ -1,8 +1,19 @@
 import styled, { css } from 'styled-components';
 
+// TODO: Clean up these styles
+export type ButtonVariant =
+	| 'primary'
+	| 'secondary'
+	| 'flat'
+	| 'alt'
+	| 'success'
+	| 'danger'
+	| 'text'
+	| 'select';
+
 type ButtonProps = {
 	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	variant?: 'primary' | 'secondary' | 'flat' | 'alt' | 'success' | 'danger' | 'text' | 'select';
+	variant?: ButtonVariant;
 	isActive?: boolean;
 	isRounded?: boolean;
 	mono?: boolean;

components/Error/Error.tsx

@@ -1,15 +1,21 @@
 import React, { FC, useMemo } from 'react';
 import styled from 'styled-components';
 
+import Button from 'components/Button';
+import Spacer from 'components/Spacer';
 import { formatRevert, isUserDeniedError } from 'utils/formatters/error';
 import { truncateString } from 'utils/formatters/string';
 
 type ErrorProps = {
 	message: string;
 	formatter?: 'revert' | undefined;
+	retryButton?: {
+		onClick: () => void;
+		label: string;
+	};
 };
 
-export const Error: FC<ErrorProps> = ({ message, formatter }) => {
+export const Error: FC<ErrorProps> = ({ message, formatter, retryButton }) => {
 	const formattedMessage = useMemo(() => {
 		switch (formatter) {
 			case 'revert':
@@ -21,7 +27,19 @@ export const Error: FC<ErrorProps> = ({ message, formatter }) => {
 
 	if (isUserDeniedError(message) || !message) return null;
 
-	return <ErrorContainer>{truncateString(formattedMessage)}</ErrorContainer>;
+	return (
+		<ErrorContainer>
+			<div>{truncateString(formattedMessage)}</div>
+			{retryButton && (
+				<>
+					<Spacer height={10} />
+					<Button variant="danger" size="xs" onClick={retryButton.onClick}>
+						{retryButton.label}
+					</Button>
+				</>
+			)}
+		</ErrorContainer>
+	);
 };
 
 const ErrorContainer = styled.div`

components/InfoBox/InfoBox.tsx

@@ -7,12 +7,12 @@ export type DetailedInfo = {
 	value: string | React.ReactNode;
 	keyNode?: React.ReactNode;
 	valueNode?: React.ReactNode;
-	color?: 'green' | 'red' | 'gold';
+	color?: 'green' | 'red' | 'gold' | undefined;
 	spaceBeneath?: boolean;
 };
 
 type InfoBoxProps = {
-	details: Record<string, DetailedInfo | null>;
+	details: Record<string, DetailedInfo | null | undefined>;
 	style?: React.CSSProperties;
 	className?: string;
 	disabled?: boolean;
@@ -23,7 +23,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({ details, style, className, disabled,
 	return (
 		<InfoBoxContainer style={style} className={className}>
 			{Object.entries(details).map(([key, value], index) => {
-				if (value !== null) {
+				if (value) {
 					return (
 						<React.Fragment key={key}>
 							<div>

components/Input/CustomInput.tsx

@@ -14,6 +14,7 @@ type CustomInputProps = {
 	defaultValue?: any;
 	dataTestId?: string;
 	textAlign?: string;
+	invalid?: boolean;
 };
 
 const INVALID_CHARS = ['-', '+', 'e'];
@@ -30,14 +31,20 @@ const CustomInput: React.FC<CustomInputProps> = ({
 	id,
 	defaultValue,
 	dataTestId,
+	invalid,
 	textAlign = 'left',
 }) => {
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		onChange(e, e.target.value.replace(/,/g, '.').replace(/[e+-]/gi, ''));
 	};
 
 	return (
-		<CustomInputContainer style={style} className={className} textAlign={textAlign}>
+		<CustomInputContainer
+			style={style}
+			className={className}
+			textAlign={textAlign}
+			invalid={invalid}
+		>
 			{typeof left === 'string' ? <span>{left}</span> : left}
 
 			<input
@@ -60,7 +67,7 @@ const CustomInput: React.FC<CustomInputProps> = ({
 	);
 };
 
-const CustomInputContainer = styled.div<{ textAlign: string }>`
+const CustomInputContainer = styled.div<{ textAlign: string; invalid?: boolean }>`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -69,6 +76,9 @@ const CustomInputContainer = styled.div<{ textAlign: string }>`
 	background: ${(props) => props.theme.colors.selectedTheme.input.secondary.background};
 	box-shadow: ${(props) => props.theme.colors.selectedTheme.input.shadow};
 	border: ${(props) => props.theme.colors.selectedTheme.border};
+	border-color: ${(props) =>
+		props.invalid ? props.theme.colors.selectedTheme.red : props.theme.colors.selectedTheme.border};
+
 	border-radius: 10px;
 	padding: 0 10px;
 
@@ -82,7 +92,10 @@ const CustomInputContainer = styled.div<{ textAlign: string }>`
 		background-color: transparent;
 		border: none;
 		text-align: ${(props) => props.textAlign || 'left'};
-		color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+		color: ${(props) =>
+			props.invalid
+				? props.theme.colors.selectedTheme.red
+				: props.theme.colors.selectedTheme.button.text.primary};
 		width: 100%;
 
 		&:focus {

components/Input/InputTitle.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const InputTitle = styled.div<{ margin?: string }>`
+	color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+	font-size: 13px;
+	margin: ${(props) => props.margin || '0'};
+	span {
+		color: ${(props) => props.theme.colors.selectedTheme.gray};
+	}
+`;
+
+export default InputTitle;

components/ProgressSteps/ProgressSteps.tsx

@@ -16,6 +16,7 @@ const ProgressSteps: FC<Props> = ({ step, totalSteps, complete }) => {
 					const relStep = step - 1;
 					return (
 						<Circle
+							key={i}
 							status={complete || i < relStep ? 'complete' : relStep === i ? 'current' : 'pending'}
 						/>
 					);