v3.2.2

v3.2.2

.eslintrc

@@ -20,6 +20,15 @@
  "import/no-anonymous-default-export": "off",
  "@next/next/no-img-element": "off",
  "no-console": "error",
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "warn",
+ { 
+ "argsIgnorePattern": "^_",
+ "varsIgnorePattern": "^_",
+ "caughtErrorsIgnorePattern": "^_"
+ }
+ ],
  "import/order": [
  "warn",
  {
@@ -89,7 +98,8 @@
  }
  ],
  "pathGroupsExcludedImportTypes": []
- }
+ },
  ]
- }
+ },
+
 }

.github/workflows/lighthouse.yml

@@ -6,7 +6,7 @@ on:
  url:
  description: Url of website to scan
  required: true
- default: https://kwenta.io
+ default: https://kwenta.eth.limo
 
 jobs:
  lighthouse_scan:

README.md

@@ -1,13 +1,15 @@
-![Kwenta CI](https://github.com/Synthetixio/kwenta/workflows/Kwenta%20CI/badge.svg?branch=master) [![Discord](https://img.shields.io/discord/413890591840272394.svg?color=768AD4&label=discord&logo=https%3A%2F%2Fdiscordapp.com%2Fassets%2F8c9701b98ad4372b58f13fd9f65f966e.svg)](https://discordapp.com/channels/413890591840272394/)
+![Kwenta CI](https://github.com/kwenta/kwenta/workflows/Kwenta%20CI/badge.svg?branch=main) [![Discord](https://img.shields.io/discord/413890591840272394.svg?color=768AD4&label=discord&logo=https%3A%2F%2Fdiscordapp.com%2Fassets%2F8c9701b98ad4372b58f13fd9f65f966e.svg)](https://discordapp.com/channels/413890591840272394/)
 [![Twitter Follow](https://img.shields.io/twitter/follow/kwenta_io.svg?label=kwenta_io&style=social)](https://twitter.com/kwenta_io)
 
 # Kwenta
 
 A dApp enabling derivatives trading with infinite liquidity — powered by the Synthetix protocol.
 
-The trading UI is available on [kwenta.io](https://kwenta.io).<br />
+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).
 
+The latest IPFS hash can be found under [releases](https://github.com/Kwenta/kwenta/releases).
+
 ## Tech stack
 
 - Next.js
@@ -21,7 +23,7 @@ ENS link: [kwenta.eth](https://app.ens.domains/name/kwenta.eth).
 ## Ethereum stack
 
 - ethers.js v5 - Ethereum wallet implementation.
-- Blocknative Onboard - for ethereum wallet connectivity.
+- [Rainbowkit](https://github.com/rainbow-me/rainbowkit) - for ethereum wallet onboarding.
 - [@synthetixio/contracts-interface](https://github.com/Synthetixio/js-monorepo/tree/master/packages/contracts-interface) - for interactions with the Synthetix protocol.
 - [@synthetixio/queries](https://github.com/Synthetixio/js-monorepo/tree/master/packages/queries) - for historical data (powered by [TheGraph](https://thegraph.com/))
 

components/BaseModal/BaseModal.tsx

@@ -75,6 +75,7 @@ const StyledDialogContent = styled(DialogContent)`
  padding: 0;
  border: 0;
  background: none;
+
  ${media.lessThan('sm')`
  &&& {
  width: 100%;
@@ -91,9 +92,7 @@ const StyledCard = styled(Card)`
  background-color: ${(props) => props.theme.colors.selectedTheme.background};
  border-radius: 10px;
  position: relative;
- box-shadow: ${(props) => props.theme.colors.selectedTheme.button.shadow};
  border: ${(props) => props.theme.colors.selectedTheme.border};
-
  ${media.lessThan('sm')`
  &&& {
  margin-top: 30px;
@@ -102,14 +101,16 @@ const StyledCard = styled(Card)`
 `;
 
 const StyledCardHeader = styled(Card.Header)`
- justify-content: center;
  height: 45px;
  font-size: 16px;
- font-family: ${(props) => props.theme.fonts.bold};
+ font-family: ${(props) => props.theme.fonts.regular};
+ padding: 20px;
 `;
 
 const StyledCardBody = styled(Card.Body)`
  overflow-y: scroll;
+ padding: 0 20px;
+ padding-bottom: 20px;
 `;
 
 const DismissButton = styled.button`
@@ -118,7 +119,7 @@ const DismissButton = styled.button`
  right: 20px;
  color: ${(props) => props.theme.colors.selectedTheme.gray};
  &:hover {
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
  }
 `;
 

components/Button/Button.tsx

@@ -1,13 +1,14 @@
 import styled, { css } from 'styled-components';
 
 type ButtonProps = {
- size?: 'sm' | 'md' | 'lg' | 'xl';
- variant?: 'primary' | 'secondary' | 'outline' | 'alt' | 'success' | 'danger' | 'text' | 'select';
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+ variant?: 'primary' | 'secondary' | 'flat' | 'alt' | 'success' | 'danger' | 'text' | 'select';
  isActive?: boolean;
  isRounded?: boolean;
  mono?: boolean;
  fullWidth?: boolean;
  noOutline?: boolean;
+ textColor?: 'yellow';
  textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase';
 };
 
@@ -38,14 +39,16 @@ const Button = styled.button<ButtonProps>`
  height: auto;
  cursor: pointer;
  position: relative;
- border-radius: 10px;
+ border-radius: ${(props) => (props.isRounded ? '50px' : '8px')};
  padding: 0 14px;
  box-sizing: border-box;
  text-transform: ${(props) => props.textTransform || 'capitalize'};
  outline: none;
  white-space: nowrap;
  font-size: 17px;
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) =>
+ (props.textColor && props.theme.colors.selectedTheme.button.text[props.textColor]) ||
+ props.theme.colors.selectedTheme.button.text.primary};
  transition: all 0.1s ease-in-out;
  ${border}
  &:hover {
@@ -63,7 +66,7 @@ const Button = styled.button<ButtonProps>`
  `};
 
  ${(props) =>
- props.noOutline &&
+ (props.noOutline || props.variant === 'flat') &&
  css`
  background: ${(props) => props.theme.colors.selectedTheme.button.fill};
  border: ${(props) => props.theme.colors.selectedTheme.border};
@@ -97,6 +100,14 @@ const Button = styled.button<ButtonProps>`
  color: ${props.theme.colors.selectedTheme.red};
  `};
 
+ ${(props) =>
+ props.size === 'xs' &&
+ css`
+ height: 22px;
+ min-width: 50px;
+ font-size: 11px;
+ `};
+
  ${(props) =>
  props.size === 'sm' &&
  css`

components/Button/NavButton.tsx

@@ -46,7 +46,7 @@ const StyledButton = styled(Button)`
  .title {
  color: ${(props) =>
  props.isActive
- ? props.theme.colors.selectedTheme.button.text
+ ? props.theme.colors.selectedTheme.button.text.primary
  : props.theme.colors.selectedTheme.gray};
  }
 

components/Button/TabButton.tsx

@@ -60,7 +60,7 @@ const StyledButton = styled(Button)<{
  text-align: center;
  color: ${(props) =>
  props.active
- ? props.theme.colors.selectedTheme.button.text
+ ? props.theme.colors.selectedTheme.button.text.primary
  : props.theme.colors.selectedTheme.gray};
  }
 
@@ -91,7 +91,7 @@ const StyledButton = styled(Button)<{
  ${(props) =>
  css`
  ${props.nofill ? 'stroke' : 'fill'}: ${props.active
- ? props.theme.colors.selectedTheme.button.text
+ ? props.theme.colors.selectedTheme.button.text.primary
  : props.theme.colors.selectedTheme.gray};
  `}
  }

components/Card/CardHeader.tsx

@@ -23,7 +23,7 @@ const CardHeader: FC<CardHeaderProps> = ({
 
 const Container = styled(FlexDivCentered)<{ lowercase: boolean; noBorder: boolean }>`
  position: relative;
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
  border-bottom: ${(props) => (props.noBorder ? 'none' : `1px solid ${props.theme.colors.navy}`)};
  height: 32px;
  padding: 0 18px;

components/Currency/CurrencyAmount/CurrencyAmount.tsx

@@ -56,7 +56,7 @@ const Container = styled.span`
 `;
 
 const Amount = styled.span`
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
 `;
 const TotalValue = styled.span`
  color: ${(props) => props.theme.colors.selectedTheme.gray};

components/Currency/CurrencyIcon/CurrencyIcon.tsx

@@ -28,18 +28,16 @@ const CurrencyIconContainer: FC<CurrencyIconProps> = React.memo(({ className, ..
  </Container>
 ));
 
-const CurrencyIcon: FC<CurrencyIconProps> = React.memo(
- ({ currencyKey, isDeprecated, url, ...rest }) => {
- const props = { width: '30px', height: '30px', alt: currencyKey, ...rest };
- const src = SYNTH_ICONS[currencyKey];
-
- if (src) {
- return <Image src={src} {...props} />;
- } else {
- return <TokenIcon currencyKey={currencyKey} {...props} />;
- }
+const CurrencyIcon: FC<CurrencyIconProps> = React.memo(({ currencyKey, ...rest }) => {
+ const props = { width: '30px', height: '30px', alt: currencyKey, ...rest };
+ const src = SYNTH_ICONS[currencyKey];
+
+ if (src) {
+ return <Image src={src} {...props} />;
+ } else {
+ return <TokenIcon currencyKey={currencyKey} {...props} />;
  }
-);
+});
 
 const Container = styled.div`
  position: relative;

components/Currency/CurrencyIcon/TokenIcon.tsx

@@ -39,10 +39,12 @@ const Placeholder = styled(FlexDivCentered)<{
  width?: string;
 }>`
  border-radius: 100%;
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
  border: 2px solid
  ${(props) =>
- props.isDeprecated ? props.theme.colors.red : props.theme.colors.selectedTheme.button.text};
+ props.isDeprecated
+ ? props.theme.colors.red
+ : props.theme.colors.selectedTheme.button.text.primary};
  font-size: 7px;
  font-family: ${(props) => props.theme.fonts.bold};
  justify-content: center;

components/Currency/CurrencyName/CurrencyName.tsx

@@ -74,7 +74,7 @@ const NameAndSymbol = styled.span`
 `;
 
 const Symbol = styled.div`
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
  font-family: ${(props) => props.theme.fonts.bold};
  font-size: 14px;
  display: flex;

components/Currency/CurrencyPrice/CurrencyPrice.tsx

@@ -70,7 +70,7 @@ export const CurrencyPrice: FC<CurrencyPriceProps> = ({
 const Container = styled.span`
  ${ContainerRowMixin};
  font-family: ${(props) => props.theme.fonts.mono};
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
 `;
 
 const Price = styled.span``;

components/Error/Error.tsx

@@ -2,6 +2,7 @@ import React, { FC, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { formatRevert, isUserDeniedError } from 'utils/formatters/error';
+import { truncateString } from 'utils/formatters/string';
 
 type ErrorProps = {
  message: string;
@@ -20,7 +21,7 @@ export const Error: FC<ErrorProps> = ({ message, formatter }) => {
 
  if (isUserDeniedError(message) || !message) return null;
 
- return <ErrorContainer>{formattedMessage}</ErrorContainer>;
+ return <ErrorContainer>{truncateString(formattedMessage)}</ErrorContainer>;
 };
 
 const ErrorContainer = styled.div`

components/FullScreenModal/FullScreenModal.tsx

@@ -41,7 +41,7 @@ const StyledDialogContent = styled(DialogContent)`
 const Title = styled.div`
  text-transform: capitalize;
  font-family: ${(props) => props.theme.fonts.bold};
- color: ${(props) => props.theme.colors.selectedTheme.button.text};
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
  font-size: 24px;
  line-height: 24px;
  padding-bottom: 24px;

components/InfoBox/InfoBox.tsx

@@ -4,15 +4,15 @@ import styled from 'styled-components';
 import { NO_VALUE } from 'constants/placeholder';
 
 export type DetailedInfo = {
- value: string;
+ value: string | React.ReactNode;
  keyNode?: React.ReactNode;
  valueNode?: React.ReactNode;
  color?: 'green' | 'red' | 'gold';
  spaceBeneath?: boolean;
 };
 
 type InfoBoxProps = {
- details: Record<string, DetailedInfo>;
+ details: Record<string, DetailedInfo | null>;
  style?: React.CSSProperties;
  className?: string;
  disabled?: boolean;
@@ -22,25 +22,30 @@ type InfoBoxProps = {
 const InfoBox: React.FC<InfoBoxProps> = ({ details, style, className, disabled, dataTestId }) => {
  return (
  <InfoBoxContainer style={style} className={className}>
- {Object.entries(details).map(([key, value], index) => (
- <React.Fragment key={key}>
- <div>
- <div className="key">
- {key}: {value.keyNode}
- </div>
- <p
- data-testid={`${dataTestId}-${index}`}
- className={`${disabled ? 'value closed' : 'value'}${
- value.color ? ` ${value.color}` : ''
- }`}
- >
- {disabled ? NO_VALUE : value.value}
- {value.valueNode}
- </p>
- </div>
- {value?.spaceBeneath && <br />}
- </React.Fragment>
- ))}
+ {Object.entries(details).map(([key, value], index) => {
+ if (value !== null) {
+ return (
+ <React.Fragment key={key}>
+ <div>
+ <div className="key">
+ {key}: {value.keyNode}
+ </div>
+ <p
+ data-testid={`${dataTestId}-${index}`}
+ className={`${disabled ? 'value closed' : 'value'}${
+ value.color ? ` ${value.color}` : ''
+ }`}
+ >
+ {disabled ? NO_VALUE : value.value}
+ {value.valueNode}
+ </p>
+ </div>
+ {value?.spaceBeneath && <br />}
+ </React.Fragment>
+ );
+ }
+ return null;
+ })}
  </InfoBoxContainer>
  );
 };