v6.0.7-alpha

v6.0.7-alpha

.eslintrc

@@ -96,6 +96,10 @@
 						"pattern": "styles/**",
 						"group": "internal"
 					},
+					{
+						"pattern": "translations/**",
+						"group": "internal"
+					},
 					{
 						"pattern": "utils/**",
 						"group": "internal"

README.md

@@ -21,6 +21,7 @@ Kwenta welcomes contributors. Regardless of the time you have available, everyon
 - Next.js
 - React
 - Redux
+- Kwenta SDK
 - Styled-Components
 
 ## Ethereum stack

components/BaseModal/BaseModal.tsx

@@ -76,16 +76,22 @@ const StyledDialogContent = styled(DialogContent)`
 	border: 0;
 	background: none;
 
-	${media.lessThan('sm')`
+	${media.lessThan('md')`
 		&&& {
-			width: 100%;
-			margin: 0;
+			width: 80%;
 
 			display: flex;
 			justify-content: center;
 			align-items: center;
 		}
 	`}
+
+	${media.lessThan('sm')`
+		&&& {
+			width: 100%;
+			margin: 0;
+		}
+	`}
 `;
 
 const StyledCard = styled(Card)`

components/ErrorView/ErrorNotifier.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { toast, ToastContainer } from 'react-toastify';
+import styled, { useTheme } from 'styled-components';
+
+import ErrorIcon from 'assets/svg/app/error.svg';
+import { truncateString } from 'utils/formatters/string';
+
+function ToastContent({ message, error }: { message: string; error?: Error }) {
+	const [expanded, setExpanded] = useState(false);
+	if (!error) return <>{message}</>;
+	return (
+		<div>
+			<div>{message}</div>
+			<TextButton onClick={() => setExpanded(!expanded)}>
+				{expanded ? 'Hide' : 'Show'} Details
+			</TextButton>
+			{expanded ? <ErrorDetails>{error.message}</ErrorDetails> : null}
+		</div>
+	);
+}
+
+export const notifyError = (message: string, error?: Error) => {
+	const formatted = formatError(message);
+	const truncated = truncateString(formatted);
+	toast.error(<ToastContent message={truncated} error={error} />, {
+		position: toast.POSITION.TOP_RIGHT,
+		toastId: truncated,
+		containerId: 'errors',
+	});
+};
+
+export default function ErrorNotifier() {
+	const theme = useTheme();
+	return (
+		<StyledToastContainer
+			icon={() => <ErrorIcon fill={theme.colors.selectedTheme.red} />}
+			enableMultiContainer
+			containerId="errors"
+			position="top-right"
+			autoClose={5000}
+			hideProgressBar={false}
+			newestOnTop={false}
+			closeOnClick={false}
+			rtl={false}
+			pauseOnFocusLoss
+			pauseOnHover
+		/>
+	);
+}
+
+const formatError = (message: string) => {
+	if (!message) return '';
+	if (message.includes('insufficient funds for intrinsic transaction cost'))
+		return 'Insufficient ETH balance for gas cost';
+	return message;
+};
+
+const StyledToastContainer = styled(ToastContainer)`
+	.Toastify__toast-container {
+		border-radius: 4px;
+	}
+	.Toastify__toast {
+		border: ${(props) => props.theme.colors.selectedTheme.border};
+		background: ${(props) => props.theme.colors.selectedTheme.button.fill};
+		color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+	}
+	.Toastify__toast-body {
+		font-family: ${(props) => props.theme.fonts.regular};
+		font-size: 13px;
+		line-height: 13px;
+		overflow-wrap: break-word;
+		word-break: break-word;
+	}
+	.Toastify__progress-bar {
+		background: ${(props) => props.theme.colors.selectedTheme.red};
+	}
+	.Toastify__close-button > svg {
+		fill: white;
+	}
+`;
+
+// TODO: Use re-useable component once merged with component refactor
+
+const TextButton = styled.div`
+	text-decoration: underline;
+	font-size: 13px;
+	margin-top: 6px;
+	line-height: 11px;
+	color: ${(props) => props.theme.colors.selectedTheme.gray};
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+`;
+
+const ErrorDetails = styled.div`
+	margin-top: 8px;
+	font-size: 11px;
+	color: ${(props) => props.theme.colors.selectedTheme.gray};
+`;

components/InfoBox/InfoBox.tsx

@@ -84,7 +84,7 @@ const InfoBoxContainer = styled.div`
 `;
 
 const InfoBoxKey = styled(Text.Body)`
-	color: ${(props) => props.theme.colors.selectedTheme.text.title};
+	color: ${(props) => props.theme.colors.selectedTheme.text.label};
 	font-size: 13px;
 	text-transform: capitalize;
 	cursor: default;

components/Input/CustomInput.tsx

@@ -35,7 +35,9 @@ const CustomInput: FC<CustomInputProps> = memo(
 	}) => {
 		const handleChange = useCallback(
 			(e: React.ChangeEvent<HTMLInputElement>) => {
-				onChange(e, e.target.value.replace(/,/g, '.').replace(/[e+-]/gi, ''));
+				const standardizedNum = e.target.value.replace(/,/g, '.').replace(/[e+-]/gi, '');
+				if (isNaN(Number(standardizedNum))) return;
+				onChange(e, standardizedNum);
 			},
 			[onChange]
 		);

components/Input/CustomNumericInput.tsx

@@ -30,16 +30,15 @@ const CustomNumericInput: FC<CustomNumericInputProps> = memo(
 	}) => {
 		const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
 			const { value } = e.target;
+			const standardizedNum = value
+				.replace(/[^0-9.,]/g, '')
+				.replace(/,/g, '.')
+				.substring(0, 4);
+			if (isNaN(Number(standardizedNum))) return;
 			const max = maxValue || 0;
-			const valueIsAboveMax = max !== 0 && Number(value) > max;
+			const valueIsAboveMax = max !== 0 && Number(standardizedNum) > max;
 			if (!valueIsAboveMax) {
-				onChange(
-					e,
-					value
-						.replace(/[^0-9.,]/g, '')
-						.replace(/,/g, '.')
-						.substring(0, 4)
-				);
+				onChange(e, standardizedNum);
 			}
 		};
 

components/Input/InputTitle.tsx

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

components/Input/NumericInput.tsx

@@ -19,7 +19,9 @@ const INVALID_CHARS = ['-', '+', 'e'];
 const NumericInput: FC<NumericInputProps> = memo(({ onChange, bold, ...props }) => {
 	const handleOnChange = useCallback(
 		(e: ChangeEvent<HTMLInputElement>) => {
-			onChange(e, e.target.value.replace(/,/g, '.').replace(/[e+-]/gi, ''));
+			const standardizedNum = e.target.value.replace(/,/g, '.').replace(/[e+-]/gi, '');
+			if (isNaN(Number(standardizedNum))) return;
+			onChange(e, standardizedNum);
 		},
 		[onChange]
 	);

components/Nav/DropDownLabel.tsx

@@ -2,13 +2,17 @@ import styled from 'styled-components';
 
 import { FlexDivRow } from 'components/layout/flex';
 
-export const LabelContainer = styled(FlexDivRow)<{ noPadding?: boolean }>`
+export const LabelContainer = styled(FlexDivRow)<{ noPadding?: boolean; external?: boolean }>`
 	padding: ${(props) => !props.noPadding && '16px'};
 	font-size: 13px;
 	align-items: center;
 	font-family: ${(props) => props.theme.fonts.regular};
 	width: 100%;
-	color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+	color: ${(props) =>
+		props.external
+			? props.theme.colors.selectedTheme.button.yellow.text
+			: props.theme.colors.selectedTheme.button.text.primary};
+
 	:hover {
 		> svg {
 			path {
@@ -18,7 +22,10 @@ export const LabelContainer = styled(FlexDivRow)<{ noPadding?: boolean }>`
 	}
 	> svg {
 		path {
-			fill: ${(props) => props.theme.colors.selectedTheme.icon.fill};
+			fill: ${(props) =>
+				props.external
+					? props.theme.colors.selectedTheme.white
+					: props.theme.colors.selectedTheme.icon.fill};
 		}
 	}
 `;

components/Nav/FuturesIcon.tsx

@@ -1,18 +1,17 @@
-import { useRecoilValue } from 'recoil';
-
 import CrossMarginIconDark from 'assets/svg/futures/cross-margin-icon-dark.svg';
 import CrossMarginIconLight from 'assets/svg/futures/cross-margin-icon-light.svg';
 import IsolatedMarginIconDark from 'assets/svg/futures/isolated-margin-icon-dark.svg';
 import IsolatedMarginIconLight from 'assets/svg/futures/isolated-margin-icon-light.svg';
 import { FuturesAccountType } from 'queries/futures/subgraph';
-import { currentThemeState } from 'store/ui';
+import { useAppSelector } from 'state/hooks';
+import { selectCurrentTheme } from 'state/preferences/selectors';
 
 type IconProps = {
 	type: FuturesAccountType;
 };
 
 export default function FuturesIcon(props: IconProps) {
-	const currentTheme = useRecoilValue(currentThemeState);
+	const currentTheme = useAppSelector(selectCurrentTheme);
 
 	const CrossMarginIcon = currentTheme === 'dark' ? CrossMarginIconDark : CrossMarginIconLight;
 	const IsolatedMarginIcon =
@@ -25,14 +24,14 @@ export default function FuturesIcon(props: IconProps) {
 }
 
 export function CrossMarginIcon() {
-	const currentTheme = useRecoilValue(currentThemeState);
+	const currentTheme = useAppSelector(selectCurrentTheme);
 
 	const Icon = currentTheme === 'dark' ? CrossMarginIconDark : CrossMarginIconLight;
 	return <Icon />;
 }
 
 export function IsolatedMarginIcon() {
-	const currentTheme = useRecoilValue(currentThemeState);
+	const currentTheme = useAppSelector(selectCurrentTheme);
 
 	const Icon = currentTheme === 'dark' ? IsolatedMarginIconDark : IsolatedMarginIconLight;
 	return <Icon />;

components/SegmentedControl/SegmentedControl.tsx

@@ -80,7 +80,7 @@ const SegmentedControlOption = styled.button<{ isSelected: boolean; styleType: S
 			: undefined};
 	color: ${(props) =>
 		props.isSelected && props.styleType === 'button'
-			? props.theme.colors.selectedTheme.yellow
+			? props.theme.colors.common.primaryYellow
 			: props.isSelected
 			? props.theme.colors.selectedTheme.button.text.primary
 			: props.theme.colors.selectedTheme.segmented.button.inactive.color};
@@ -89,9 +89,20 @@ const SegmentedControlOption = styled.button<{ isSelected: boolean; styleType: S
 		props.isSelected && props.styleType === 'tab'
 			? props.theme.colors.selectedTheme.segmented.button.background
 			: 'transparent'};
+
+	background-color: ${(props) =>
+		props.isSelected && props.styleType === 'button' && props.theme.colors.common.darkYellow};
+	transition: all 0.1s ease-in-out;
+	&:hover {
+		color: ${(props) => props.theme.colors.selectedTheme.icon.hover};
+		> div {
+			background-color: ${(props) => !props.isSelected && props.theme.colors.common.darkYellow};
+		}
+	}
 `;
 
 const CheckBox = styled.div<{ selected: boolean }>`
+	transition: all 0.1s ease-in-out;
 	margin-right: 10px;
 	outline: ${(props) => props.theme.colors.selectedTheme.outlineBorder};
 	border-radius: 2px;

components/SocketBridge/SocketBridge.tsx

@@ -1,10 +1,10 @@
 import { Bridge } from '@socket.tech/plugin';
 import { useCallback } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { chain } from 'wagmi';
 
 import ArrowIcon from 'assets/svg/app/arrow-down.svg';
 import Connector from 'containers/Connector';
+import { chain } from 'containers/Connector/config';
 import { fetchBalances } from 'state/balances/actions';
 import { useAppDispatch } from 'state/hooks';
 import {

components/StakeCard/StakeCard.tsx

@@ -7,8 +7,8 @@ import Button from 'components/Button';
 import NumericInput from 'components/Input/NumericInput';
 import { FlexDivRowCentered } from 'components/layout/flex';
 import SegmentedControl from 'components/SegmentedControl';
-import { StakingCard } from 'sections/dashboard/Stake/card';
 import { DEFAULT_CRYPTO_DECIMALS, DEFAULT_TOKEN_DECIMALS } from 'constants/defaults';
+import { StakingCard } from 'sections/dashboard/Stake/card';
 import { numericValueCSS } from 'styles/common';
 import { toWei, truncateNumbers } from 'utils/formatters/number';
 

components/TVChart/DataFeed.ts

@@ -68,7 +68,7 @@ const fetchCombinedCandles = async (
 	const baseCurrencyIsSUSD = base === 'sUSD';
 	const quoteCurrencyIsSUSD = quote === 'sUSD';
 	const baseDataPromise = requestCandlesticks(
-		base,
+		getDisplayAsset(base),
 		from,
 		to,
 		resolutionToSeconds(resolution),
@@ -99,7 +99,7 @@ const fetchLastCandle = async (
 	const from = 0;
 
 	const baseDataPromise = requestCandlesticks(
-		base,
+		getDisplayAsset(base),
 		from,
 		to,
 		resolutionToSeconds(resolution),