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'}
  />
  );