v5.3.12

v5.3.12

.env.local.example

@@ -4,4 +4,5 @@ NEXT_PUBLIC_BN_NOTIFY_API_KEY="BLOCKNATIVE_NOTIFY_API_KEY"
 NEXT_PUBLIC_BN_ONBOARD_API_KEY="BLOCKNATIVE_ONBOARD_API_KEY"
 NEXT_PUBLIC_INFURA_PROJECT_ID="INFURA_PROJECT_ID"
 NEXT_PUBLIC_BLASTAPI_PROJECT_ID="BLASTAPI_PROJECT_ID"
-NEXT_PUBLIC_COMPETITION_ACTIVE=false
+NEXT_PUBLIC_COMPETITION_ACTIVE=false
+NEXT_PUBLIC_SATSUMA_API_KEY="API_KEY"

.eslintrc

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

README.md

@@ -16,7 +16,8 @@ The latest IPFS hash can be found under [releases](https://github.com/Kwenta/kwe
 - Next.js
 - React
 - React Query
-- Recoil
+- Kwenta SDK
+- Redux
 - Unstated-next
 - Styled-Components
 
@@ -50,6 +51,7 @@ 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`
+- `NEXT_PUBLIC_SATSUMA_API_KEY` - API key for Satsuma subgraph queries
 
 Optional:
 

components/Error/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/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/TVChart/TVChart.tsx

@@ -1,14 +1,14 @@
 import { NetworkId } from '@synthetixio/contracts-interface';
 import { useRouter } from 'next/router';
 import { useRef, useContext, useEffect, useCallback, useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
 import { ThemeContext } from 'styled-components';
 import { chain } from 'wagmi';
 
 import Connector from 'containers/Connector';
 import { FuturesOrder } from 'sdk/types/futures';
 import { ChartBody } from 'sections/exchange/TradeCard/Charts/common/styles';
-import { currentThemeState } from 'store/ui';
+import { useAppSelector } from 'state/hooks';
+import { selectCurrentTheme } from 'state/preferences/selectors';
 import darkTheme from 'styles/theme/colors/dark';
 import { formatNumber } from 'utils/formatters/number';
 
@@ -56,7 +56,7 @@ export function TVChart({
 		return;
 	},
 }: Props) {
-	const currentTheme = useRecoilValue(currentThemeState);
+	const currentTheme = useAppSelector(selectCurrentTheme);
 	const _widget = useRef<IChartingLibraryWidget | null>(null);
 	const _entryLine = useRef<IPositionLineAdapter | null | undefined>(null);
 	const _liquidationLine = useRef<IPositionLineAdapter | null | undefined>(null);

components/Text/PositionType.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { PositionSide } from 'queries/futures/types';
+import { PositionSide } from 'sdk/types/futures';
 
 type PositionProps = {
 	side: PositionSide;

constants/NotificationContainer.tsx

@@ -14,16 +14,20 @@ const NotificationContainer = memo(() => {
 
 	return mounted
 		? createPortal(
-				<StyledToastContainer autoClose={false} position="bottom-right" closeOnClick={false} />,
+				<StyledToastContainer
+					enableMultiContainer
+					containerId="notifications"
+					autoClose={false}
+					position="bottom-right"
+					closeOnClick={false}
+				/>,
 				document.body
 		  )
 		: null;
 });
 
 const StyledToastContainer = styled(ToastContainer)`
 	.Toastify__toast-container {
-		background-color: ${(props) => props.theme.colors.navy};
-		border: 1px solid ${(props) => props.theme.colors.green};
 		border-radius: 4px;
 	}
 	.Toastify__toast {

constants/announcement.ts

@@ -1,9 +1,8 @@
 // Shows or hides the home page banner entirely when set to true/false
-export const BANNER_ENABLED = false;
+export const BANNER_ENABLED = true;
 // Sets the link destination for the banner component, or renders the banner as
 // plain, un-clickable text if set to a falsey value (`false`, `null`, '', etc...)
-export const BANNER_LINK_URL =
-	'https://snapshot.org/#/kwenta.eth/proposal/0x4a2dbd3839de2b6407ebbdc47e7d51a5d69f3363a803a93ffd8cf4e5d08011ff';
+export const BANNER_LINK_URL = 'https://docs.kwenta.io/overview/kwenta-futures-v1-deprecation';
 // Sets the text displayed on the home page banner
 export const BANNER_TEXT =
-	'Council elections are live on Snapshot until Nov 29th. $KWENTA stakers go cast your vote!';
+	'Attention! Perps (V1) will be phased out in favor of the upgraded version (V2) in the near future. Click for info.';

constants/defaults.ts

@@ -1,18 +1,9 @@
-import { CurrencyCategory, NetworkIdByName, Synth } from '@synthetixio/contracts-interface';
-import { Language } from 'translations/constants';
+import { NetworkIdByName } from '@synthetixio/contracts-interface';
 
-import { languageStateKey, priceCurrencyStateKey } from 'store/app/constants';
-import localStore from 'utils/localStore';
+import { Language } from 'translations/constants';
 
 // app defaults
-export const DEFAULT_LANGUAGE: Language = localStore.get(languageStateKey) ?? Language.EN;
-export const DEFAULT_PRICE_CURRENCY: Synth = localStore.get(priceCurrencyStateKey) ?? {
-	name: 'sUSD',
-	asset: 'USD',
-	sign: '$',
-	category: 'crypto' as CurrencyCategory,
-	description: '',
-};
+export const DEFAULT_LANGUAGE: Language = Language.EN;
 
 // network defaults
 export const DEFAULT_NETWORK_ID = NetworkIdByName['mainnet-ovm'];

constants/futures.ts

@@ -6,5 +6,6 @@ export const ISOLATED_MARGIN_ORDER_TYPES: FuturesOrderType[] = ['market'];
 export const CROSS_MARGIN_ORDER_TYPES: FuturesOrderType[] = ['market', 'limit', 'stop market'];
 export const ORDER_KEEPER_ETH_DEPOSIT = wei(0.01);
 export const DEFAULT_MAX_LEVERAGE = wei(10);
+export const APP_MAX_LEVERAGE = wei(25);
 export const MAX_POSITION_BUFFER = 0.01;
 export const MIN_MARGIN_AMOUNT = wei(50);

contexts/RelayerContext.tsx

@@ -22,6 +22,7 @@ export const monitorTransaction = ({
 
 	const toastProps = {
 		onClick: () => window.open(link, '_blank'),
+		containerId: 'notifications',
 	};
 	const emitter = transactionNotifier.hash(txHash);
 	emitter.on('txSent', () => {