Merge branch 'dev' into perps-v3

.github/workflows/publish-sdk.yml

@@ -0,0 +1,42 @@
+name: "Publish SDK"
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    name: Publish SDK
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./packages/sdk
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          always-auth: true
+          node-version: 16.x
+          registry-url: https://registry.npmjs.org
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: true
+
+      - name: Build code
+        run: pnpm build
+
+      - name: Publish
+        run: |
+            diff <(npx npm info . --json | jq '."dist-tags".latest') <(cat package.json | jq '.version') || (pnpm publish --no-git-checks --access public)
+        env:
+          NPM_TOKEN: ${{ secrets.NODE_TOKEN }}

README.md

@@ -82,51 +82,12 @@ pnpm start
 
 ```bash
 cd packages/app
-pnpm test:unit
+pnpm test:jest
 ```
 
 For unit tests we use a combination of Jest and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 
-Page tests should be added to the \_\_tests\_\_ folder at the root as it is not possible to co-locate tests and pages in nextjs. Other tests should be co-located in a \_\_tests\_\_ folder next to their related file.
-
-### End-2-End testing
-
-In order to run fully automated end-2-end (e2e) tests Kwenta uses [Synpress](https://github.com/Synthetixio/synpress) (a wrapper around [Cypress](https://www.cypress.io/)).
-
-#### Constraints
-
-The current e2e tests are written to be run on Optimistic Kovan using Chrome as the browser.
-
-#### Setup
-
-- Download and install Google Chrome
-- Setup a test wallet on Optimistic Kovan and fund it with plenty of ETH (to pay for gas) and sUSD
-- Prior to running the tests you must set the environment variables below in the shell from which npm is started. Unfortunately, at this time other methods to set said environment variables (eg. through `.env.local`) don't work in conjunction with Synpress.
-
-```bash
-PRIVATE_KEY=<INSERTPRIVATEKEY>
-NETWORK_NAME=OptimisticKovan
-RPC_URL=https://kovan.optimism.io
-CHAIN_ID=69
-BLOCK_EXPLORER=https://kovan-optimistic.etherscan.io
-IS_TESTNET=true
-```
-
-##### Bash convenience script for setting up the environment
-
-A Bash convenience script [has been made available here](https://gist.github.com/raffiegang/b24a6b97bcd054645abf59be852bc88d).
-
-- Open bash
-- Copy the private key of the test wallet into the file `SYNPRESS_PRIVATEKEY` into the same folder location as the script. While using this method, please don't forget to update your .gitignore file to prevent your private key to be leaked.
-- Run the following command `source ./synpress-envsetter.sh`
-
-#### Run the tests
-
-```bash
-npm run build
-npm start
-npm run test:e2e:only:tests
-```
+Page tests should be added to the `testing` folder at the root as it is not possible to co-locate tests and pages in nextjs. Other tests should be co-located in a \_\_tests\_\_ folder next to their related file.
 
 ## Contact
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.3.3",
+	"version": "7.3.5",
 	"description": "Kwenta",
 	"main": "index.js",
 	"scripts": {

packages/app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.3.3",
+	"version": "7.3.5",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",
@@ -9,10 +9,6 @@
 		"check-types": "tsc --noEmit",
 		"jest-preview": "jest-preview",
 		"test:jest": "jest --coverage --detectOpenHandles",
-		"test:e2e": "start-server-and-test 'pnpm build && pnpm start' http-get://localhost:3000 'synpress run'",
-		"test:e2e:only:tests": "synpress run",
-		"test:e2e:open:testrunner": "synpress open",
-		"test:e2e:ci": "synpress run --group smoke-tests --record --parallel",
 		"prepublishOnly": "pinst --disable",
 		"postpublish": "pinst --enable",
 		"storybook": "storybook dev -p 6006",
@@ -33,7 +29,7 @@
 		"@reduxjs/toolkit": "^1.9.5",
 		"@sentry/browser": "7.57.0",
 		"@sentry/tracing": "7.57.0",
-		"@socket.tech/plugin": "1.0.14",
+		"@socket.tech/plugin": "1.0.15",
 		"@synthetixio/optimism-networks": "2.74.6",
 		"@synthetixio/wei": "2.74.4",
 		"@tanstack/react-table": "8.9.3",
@@ -82,17 +78,14 @@
 		"zrender": "^5.4.3"
 	},
 	"devDependencies": {
-		"@microsoft/eslint-formatter-sarif": "2.1.7",
 		"@next/eslint-plugin-next": "13.4.7",
 		"@storybook/addon-actions": "7.0.24",
-		"@storybook/addon-essentials": "7.0.24",
+		"@storybook/addon-essentials": "7.0.25",
 		"@storybook/addon-links": "7.0.24",
 		"@storybook/nextjs": "7.0.24",
 		"@storybook/react": "7.0.24",
 		"@svgr/core": "5.5.0",
 		"@svgr/webpack": "6.3.1",
-		"@synthetixio/synpress": "3.7.1",
-		"@testing-library/cypress": "^9.0.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "14.0.0",
 		"@testing-library/react-hooks": "8.0.1",

packages/app/src/components/README.md

@@ -6,7 +6,7 @@ Most of the components in this folder are viewable in our [Storybook]().
 
 ## Folder Structure
 
-We try to ensure that folders are as flat as (reasonbly) possible. For this, reason, most individual components can be found under `{component-name}.tsx`. However in the future, some domain specific components may be found in subfolders like `mobile`, `futures` or `exchange`. The components are only expected to be used in the context of the folders in which they are contained.
+We try to ensure that folders are as flat as (reasonably) possible. For this, reason, most individual components can be found under `{component-name}.tsx`. However in the future, some domain specific components may be found in subfolders like `mobile`, `futures` or `exchange`. The components are only expected to be used in the context of the folders in which they are contained.
 
 ## Checklist
 

packages/app/src/components/TextToggle.tsx

@@ -35,7 +35,7 @@ const TextToggle: React.FC<TextToggleProps<any>> = ({
 	)
 }
 
-const ToggleButton = styled(Body)<{ $active: boolean }>`
+export const ToggleButton = styled(Body)<{ $active: boolean }>`
 	cursor: pointer;
 	text-transform: capitalize;
 	color: ${(props) => props.theme.colors.selectedTheme.newTheme.text.disabled};

packages/app/src/containers/Connector/config.ts

@@ -3,7 +3,6 @@ import {
 	braveWallet,
 	coinbaseWallet,
 	injectedWallet,
-	ledgerWallet,
 	metaMaskWallet,
 	rainbowWallet,
 	walletConnectWallet,
@@ -82,7 +81,6 @@ const connectors = connectorsForWallets([
 	{
 		groupName: 'More',
 		wallets: [
-			ledgerWallet({ projectId, chains }),
 			braveWallet({ chains, shimDisconnect: true }),
 			Tally({ chains, shimDisconnect: true }),
 			Frame({ chains, shimDisconnect: true }),

packages/app/src/contexts/RelayerContext.tsx

@@ -27,12 +27,12 @@ export const monitorTransaction = ({
 	}
 	const emitter = sdk.transactions.hash(txHash)
 	emitter.on('txSent', () => {
-		toast(NotificationPending, { ...toastProps, toastId: txHash })
+		toast(<NotificationPending />, { ...toastProps, toastId: txHash })
 	})
 	emitter.on('txConfirmed', ({ transactionHash }) => {
 		toast.update(transactionHash, {
 			...toastProps,
-			render: NotificationSuccess,
+			render: <NotificationSuccess />,
 			autoClose: 10000,
 		})
 		if (onTxConfirmed != null) {

packages/app/src/sections/futures/EditPositionModal/EditStopLossAndTakeProfitModal.tsx

@@ -12,6 +12,7 @@ import { InfoBoxRow } from 'components/InfoBox'
 import { FlexDivRowCentered } from 'components/layout/flex'
 import SelectorButtons from 'components/SelectorButtons'
 import Spacer from 'components/Spacer'
+import { Body } from 'components/Text'
 import { NO_VALUE } from 'constants/placeholder'
 import { setShowPositionModal } from 'state/app/reducer'
 import { selectAckedOrdersWarning, selectTransaction } from 'state/app/selectors'
@@ -215,7 +216,7 @@ export default function EditStopLossAndTakeProfitModal() {
 				title={'Market'}
 				nodeValue={
 					<FlexDivRowCentered>
-						{market?.marketName}
+						<Body>{market?.marketName}</Body>
 						<Spacer width={8} />{' '}
 						<PositionType side={position?.position?.side || PositionSide.LONG} />
 					</FlexDivRowCentered>

packages/app/src/sections/futures/FundingChart.tsx

@@ -1,4 +1,4 @@
-import { formatChartTime } from '@kwenta/sdk/utils'
+import format from 'date-fns/format'
 import { FC } from 'react'
 import {
 	LineChart,
@@ -13,74 +13,89 @@ import styled, { css } from 'styled-components'
 import { useTheme } from 'styled-components'
 
 import { fetchFundingRatesHistory } from 'state/futures/actions'
-import { selectMarketAsset } from 'state/futures/selectors'
+import { selectHistoricalFundingRatePeriod, selectMarketAsset } from 'state/futures/selectors'
 import { useAppSelector, usePollAction } from 'state/hooks'
 
 import FundingChartTooltip, { formatFundingRate } from './FundingChartTooltip'
+import FundingPeriodToggle from './FundingPeriodToggle'
 
 type FundingChartProps = {
 	display?: boolean
 }
 
-const FundingChart: FC<FundingChartProps> = ({ display = true }) => {
+const formatFundingDate = (date: Date | number) => format(date, 'MMM d')
+
+const FundingChart: FC<FundingChartProps> = ({ display }) => {
 	const theme = useTheme()
 	const marketAsset = useAppSelector(selectMarketAsset)
+	const period = useAppSelector(selectHistoricalFundingRatePeriod)
 	const historicalFundingRates = useAppSelector(
 		({ smartMargin }) => smartMargin.historicalFundingRates
 	)
 
-	usePollAction('fetchFundingRatesHistory', () => fetchFundingRatesHistory(marketAsset), {
-		dependencies: [marketAsset],
-		intervalTime: 60 * 60 * 1000,
-	})
+	usePollAction(
+		'fetchFundingRatesHistory',
+		() => fetchFundingRatesHistory({ marketAsset, period }),
+		{ dependencies: [marketAsset, period], intervalTime: 60 * 60 * 1000 }
+	)
 
 	return (
-		<FundingChartContainer $display={display} minWidth={1} minHeight={1}>
-			<LineChart
-				data={historicalFundingRates[marketAsset]}
-				margin={{
-					top: 30,
-					right: 50,
-					left: 30,
-					bottom: 15,
-				}}
-			>
-				<YAxis dataKey="fundingRate" domain={['auto', 0]} tickFormatter={formatFundingRate} />
-				<XAxis
-					dataKey="timestamp"
-					type="number"
-					scale="time"
-					tickFormatter={formatChartTime}
-					minTickGap={75}
-					domain={['dataMin', 'dataMax']}
-				/>
-				<Tooltip
-					content={<FundingChartTooltip />}
-					formatter={(x) => formatFundingRate(x as any)}
-					isAnimationActive={false}
-				/>
-				<ReferenceLine y={0} stroke={theme.colors.selectedTheme.text.body} />
-				<Line
-					type="monotone"
-					dataKey="fundingRate"
-					stroke={theme.colors.selectedTheme.text.value}
-					strokeWidth={1}
-					strokeLinecap="square"
-					dot={false}
-					isAnimationActive={false}
-				/>
-			</LineChart>
-		</FundingChartContainer>
+		<FundingChartWrapper $display={display}>
+			<FundingPeriodToggle />
+			<FundingChartContainer>
+				<LineChart
+					data={historicalFundingRates[marketAsset]}
+					margin={{ top: 30, right: 50, left: 30, bottom: 15 }}
+				>
+					<YAxis
+						dataKey="fundingRate"
+						domain={['auto', 'auto']}
+						tickFormatter={formatFundingRate}
+						allowDataOverflow
+						tickCount={10}
+					/>
+					<XAxis
+						dataKey="timestamp"
+						type="number"
+						scale="time"
+						tickFormatter={formatFundingDate}
+						minTickGap={75}
+						domain={['dataMin', 'dataMax']}
+					/>
+					<Tooltip
+						content={<FundingChartTooltip />}
+						formatter={(x) => formatFundingRate(x as any)}
+						isAnimationActive={false}
+					/>
+					<ReferenceLine y={0} stroke={theme.colors.selectedTheme.text.body} />
+					<Line
+						type="monotone"
+						dataKey="fundingRate"
+						stroke={theme.colors.selectedTheme.text.value}
+						strokeWidth={1}
+						strokeLinecap="square"
+						dot={false}
+						isAnimationActive={false}
+					/>
+				</LineChart>
+			</FundingChartContainer>
+		</FundingChartWrapper>
 	)
 }
 
-const FundingChartContainer = styled(ResponsiveContainer)<{ $display: boolean }>`
-	flex: 1;
+const FundingChartWrapper = styled.div<{ $display?: boolean }>`
+	width: 100%;
+	height: calc(100% - 45px);
+
 	${(props) =>
 		!props.$display &&
 		css`
 			display: none;
 		`}
 `
 
+const FundingChartContainer = styled(ResponsiveContainer)`
+	flex: 1;
+`
+
 export default FundingChart