feat: detach SDK and reorganize code (#2495)

* Import moving

* Revert ethers version

* Make SDK build

* NX init

* How we want it

* Move more things

* Remove build folder from Git

* Something seems off

* First go through

* Fix TS issues

* Start fixing CI

* More fixes

* Fix axios dep issue

* Remove build file from git

* Sentry CI?

* Fix ethers issue

* Fix lockfile

* zrender

* Should build correctly

* Fix wagmi issue

* React-dom

* Timeout and number

* Bignumber frontend

* This might make it fine

* Fix things

* Fix conflicts with dev

.github/workflows/sentry.yml

@@ -20,8 +20,15 @@ jobs:
       with:
         node-version: 16.x
 
+    - uses: pnpm/action-setup@v2
+      name: Install pnpm
+      id: pnpm-install
+      with:
+        version: 8
+        run_install: false
+
     - name: Build code
-      run: npm i --legacy-peer-deps && npm run build && ls 
+      run: pnpm i && cd packages/app && pnpm build
 
     - name: Create Sentry release
       uses: getsentry/action-release@v1
@@ -31,5 +38,5 @@ jobs:
         SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
       with:
         environment: production
-        sourcemaps: '.next'
+        sourcemaps: 'packages/app/.next'
         ignore_missing: true

.gitignore

@@ -1,51 +1 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-.env
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-lint-results.sarif
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-notes.md
-.idea/
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-.vercel
-
-#lighthouse reports
-.lighthouseci
-lighthouse-desktop-report
-lighthouse-mobile-report
-
-#e2e-tests
-tests/e2e/videos
-tests/e2e/screenshots
-
-# Vscode
-.vscode
-
-# typescript
-tsconfig.tsbuildinfo
+node_modules/

.husky/pre-commit

@@ -1,4 +1,4 @@
 # #!/bin/sh
 # . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged && npm run tsc
+pnpm lint-staged && pnpm run check-types

package.json

@@ -1,158 +1,24 @@
 {
 	"name": "kwenta",
-	"version": "7.2.5",
+	"version": "1.0.0",
+	"description": "Kwenta",
+	"main": "index.js",
 	"scripts": {
-		"dev": "next",
-		"build": "next build",
-		"start": "next start",
-		"export": "next export",
-		"tsc": "tsc --noEmit",
-		"format": "prettier --write \"**/*.{ts,tsx}\"",
-		"jest-preview": "jest-preview",
-		"lint": "eslint . --ext ts,.tsx && tsc",
-		"lint:sarif": "node testing/lint.js . --ext ts,.tsx && tsc",
-		"lint:fix": "eslint . --ext ts,.tsx --fix",
-		"test:unit": "jest --coverage --detectOpenHandles",
-		"test:e2e": "start-server-and-test 'npm run build && npm run 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",
-		"postinstall": "husky install",
-		"prepublishOnly": "pinst --disable",
-		"postpublish": "pinst --enable",
-		"storybook": "start-storybook -p 6006",
-		"build-storybook": "build-storybook",
-		"generate-contract-types": "typechain --target ethers-v5 --out-dir ./sdk/contracts/types './sdk/contracts/abis/*.json' --show-stack-traces"
+		"pre-commit": "pnpm run --filter \"@kwenta/*\" pre-commit",
+		"check-types": "pnpm run --filter \"@kwenta/*\" check-types",
+		"prepare": "husky install"
 	},
-	"dependencies": {
-		"@eth-optimism/contracts": "0.5.37",
-		"@gnosis.pm/safe-apps-provider": "^0.14.0",
-		"@gnosis.pm/safe-apps-sdk": "^7.7.0",
-		"@kwenta/synthswap": "^1.0.3",
-		"@material-ui/core": "^4.12.3",
-		"@metamask/detect-provider": "2.0.0",
-		"@pythnetwork/pyth-evm-js": "1.10.0",
-		"@rainbow-me/rainbowkit": "0.8.1",
-		"@reach/dialog": "0.15.0",
-		"@reduxjs/toolkit": "^1.8.5",
-		"@sentry/browser": "7.43.0",
-		"@sentry/tracing": "7.43.0",
-		"@socket.tech/plugin": "1.0.3",
-		"@synthetixio/optimism-networks": "2.74.6",
-		"@synthetixio/wei": "2.74.4",
-		"@widgetbot/react-embed": "^1.7.0",
-		"axios": "0.27.2",
-		"bignumber.js": "9.0.0",
-		"codegen-graph-ts": "^0.1.4",
-		"cors": "^2.8.5",
-		"crypto-browserify": "^3.12.0",
-		"css-mediaquery": "^0.1.2",
-		"date-fns": "2.21.3",
-		"date-fns-tz": "1.3.7",
-		"echarts": "5.4.2",
-		"eslint-config-next": "^13.3.4",
-		"ethcall": "4.7.2",
-		"ethereum-block-by-date": "^1.4.5",
-		"ethers": "5.7.2",
-		"graphql-request": "3.4.0",
-		"i18next": "19.7.0",
-		"imagemin-mozjpeg": "^10.0.0",
-		"intercept-stdout": "^0.1.2",
-		"isomorphic-dompurify": "^0.26.0",
-		"lightweight-charts": "4.0.1",
-		"lodash": "4.17.21",
-		"moment-business-time": "2.0.0",
-		"next": "^13.3.4",
-		"next-compose-plugins": "2.2.1",
-		"next-connect": "^0.13.0",
-		"next-transpile-modules": "10.0.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-i18next": "12.1.1",
-		"react-infinite-scroll-component": "^6.1.0",
-		"react-is": "^18.0.0",
-		"react-query": "3.39.3",
-		"react-redux": "8.0.5",
-		"react-responsive": "^9.0.2",
-		"react-rnd": "^10.3.7",
-		"react-select": "4.3.1",
-		"react-slick": "0.29.0",
-		"react-table": "7.7.0",
-		"react-toastify": "^9.0.4",
-		"recharts": "^2.5.0",
-		"redux-logger": "^3.0.6",
-		"redux-persist": "^6.0.0",
-		"slick-carousel": "1.8.1",
-		"styled-components": "5.3.11",
-		"styled-media-query": "2.1.2",
-		"unstated-next": "1.1.0",
-		"wagmi": "0.9.6"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Kwenta/kwenta.git"
 	},
-	"devDependencies": {
-		"@microsoft/eslint-formatter-sarif": "2.1.7",
-		"@next/eslint-plugin-next": "13.4.4",
-		"@storybook/addon-actions": "^6.4.13",
-		"@storybook/addon-essentials": "6.5.13",
-		"@storybook/addon-links": "^6.4.13",
-		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/builder-webpack5": "^6.5.14",
-		"@storybook/manager-webpack5": "^6.5.14",
-		"@storybook/react": "^6.5.9",
-		"@svgr/core": "5.5.0",
-		"@svgr/webpack": "6.3.1",
-		"@synthetixio/synpress": "avclarke/synpress#mm-timeout",
-		"@testing-library/jest-dom": "5.16.5",
-		"@testing-library/react": "12.1.5",
-		"@testing-library/react-hooks": "7.0.2",
-		"@testing-library/user-event": "13.5.0",
-		"@typechain/ethers-v5": "^10.1.0",
-		"@types/cors": "^2.8.12",
-		"@types/date-fns": "2.6.0",
-		"@types/ethereum-block-by-date": "^1.4.1",
-		"@types/jest": "27.0.2",
-		"@types/lodash": "4.14.159",
-		"@types/node": "14.0.13",
-		"@types/react": "16.9.46",
-		"@types/react-responsive": "8.0.5",
-		"@types/react-rnd": "^8.0.0",
-		"@types/react-select": "3.0.19",
-		"@types/react-slick": "0.23.10",
-		"@types/react-table": "7.0.22",
-		"@types/redux-logger": "^3.0.9",
-		"@types/styled-components": "5.1.2",
-		"@typescript-eslint/eslint-plugin": "5.48.2",
-		"@typescript-eslint/parser": "5.40.1",
-		"babel-eslint": "10.1.0",
-		"eslint": "7.32.0",
-		"eslint-config-prettier": "8.5.0",
-		"eslint-config-react-app": "6.0.0",
-		"eslint-plugin-chai-friendly": "^0.7.2",
-		"eslint-plugin-cypress": "^2.12.1",
-		"eslint-plugin-flowtype": "5.2.0",
-		"eslint-plugin-import": "2.27.5",
-		"eslint-plugin-jsx-a11y": "6.6.1",
-		"eslint-plugin-prettier": "4.2.1",
-		"eslint-plugin-react": "7.21.5",
-		"eslint-plugin-react-hooks": "4.6.0",
-		"eslint-plugin-testing-library": "^5.1.0",
-		"eslint-plugin-ui-testing": "^2.0.0",
-		"html-to-image": "1.11.4",
-		"husky": "8.0.1",
-		"jest": "28.1.0",
-		"jest-environment-jsdom": "28.1.0",
-		"jest-preview": "^0.3.1",
-		"jest-transformer-svg": "^2.0.0",
-		"lint-staged": "^13.0.3",
-		"next-router-mock": "0.9.3",
-		"pinst": "3.0.0",
-		"postcss": "^8.4.24",
-		"prettier": "2.0.5",
-		"react-test-renderer": "17.0.1",
-		"typechain": "8.1.1",
-		"typescript": "4.7.4",
-		"url-loader": "4.1.0",
-		"webp-loader": "0.6.0"
+	"keywords": [],
+	"author": "",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/Kwenta/kwenta/issues"
 	},
+	"homepage": "https://github.com/Kwenta/kwenta#readme",
 	"husky": {
 		"hooks": {
 			"pre-commit": "npm run lint"
@@ -163,8 +29,8 @@
 			"eslint"
 		]
 	},
-	"engines": {
-		"node": ">=16",
-		"npm": ">=8"
+	"devDependencies": {
+		"husky": "8.0.1",
+		"lint-staged": "^13.0.3"
 	}
 }

packages/app/.env.local.example

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_PROVIDER_ID=INFURA
+NEXT_PUBLIC_INFURA_PROJECT_ID="INFURA_PROJECT_ID"
+NEXT_PUBLIC_BLASTAPI_PROJECT_ID="BLASTAPI_PROJECT_ID"
+NEXT_PUBLIC_COMPETITION_ACTIVE=false
+NEXT_PUBLIC_SOCKET_API_KEY="SOCKET_API_KEY"
+NEXT_PUBLIC_SATSUMA_API_KEY="API_KEY"
+NEXT_PUBLIC_THEGRAPH_API_KEY="API_KEY"
+NEXT_PUBLIC_DEFAULT_PRICE_SERVICE="KWENTA"

packages/app/.gitignore

@@ -0,0 +1,51 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.env
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+lint-results.sarif
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+notes.md
+.idea/
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+.vercel
+
+#lighthouse reports
+.lighthouseci
+lighthouse-desktop-report
+lighthouse-mobile-report
+
+#e2e-tests
+tests/e2e/videos
+tests/e2e/screenshots
+
+# Vscode
+.vscode
+
+# typescript
+tsconfig.tsbuildinfo

components/Badge/Badge.tsx → packages/app/components/Badge/Badge.tsx

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 
 type BadgeProps = {
 	color?: 'yellow' | 'red' | 'gray';
 	size?: 'small' | 'regular';
 	dark?: boolean;
+	children?: ReactNode;
 };
 
 const Badge: FC<BadgeProps> = ({ color = 'yellow', size = 'regular', dark, ...props }) => {

components/Badge/MarketBadge.tsx → packages/app/components/Badge/MarketBadge.tsx

@@ -1,9 +1,9 @@
+import { SynthSuspensionReason } from '@kwenta/sdk/types';
 import React, { FC, memo, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import useIsMarketTransitioning from 'hooks/useIsMarketTransitioning';
-import { SynthSuspensionReason } from 'sdk/types/futures';
 import { marketIsOpen, marketNextOpen, marketNextTransition } from 'utils/marketHours';
 
 import Badge from './Badge';

components/BaseModal/BaseModal.tsx → packages/app/components/BaseModal/BaseModal.tsx

@@ -20,6 +20,7 @@ type BaseModalProps = {
 };
 
 type ModalContentWrapperProps = {
+	children: ReactNode;
 	rndProps?: Props;
 };
 

components/Button/Button.tsx → packages/app/components/Button/Button.tsx

@@ -221,6 +221,7 @@ const BaseButton = styled.button<BaseButtonProps>`
 `;
 
 type ButtonProps = {
+	children?: ReactNode;
 	loading?: boolean;
 	active?: boolean;
 	mono?: boolean;

components/ChangePercent/ChangePercent.tsx → packages/app/components/ChangePercent/ChangePercent.tsx

@@ -1,11 +1,11 @@
+import { formatPercent } from '@kwenta/sdk/utils';
 import { wei, WeiSource } from '@synthetixio/wei';
 import { FC, memo } from 'react';
 import styled from 'styled-components';
 
 import ChangeNegativeIcon from 'assets/svg/app/change-negative.svg';
 import ChangePositiveIcon from 'assets/svg/app/change-positive.svg';
 import { NO_VALUE } from 'constants/placeholder';
-import { formatPercent } from 'sdk/utils/number';
 
 type ChangePercentProps = {
 	value: WeiSource;

components/Currency/CurrencyAmount/CurrencyAmount.tsx → packages/app/components/Currency/CurrencyAmount/CurrencyAmount.tsx

@@ -1,10 +1,10 @@
+import { formatCurrency, FormatCurrencyOptions } from '@kwenta/sdk/utils';
 import Wei, { wei } from '@synthetixio/wei';
 import { ethers } from 'ethers';
 import { FC, memo } from 'react';
 import styled from 'styled-components';
 
 import { ContainerRowMixin } from 'components/layout/grid';
-import { formatCurrency, FormatCurrencyOptions } from 'sdk/utils/number';
 
 type WeiSource = Wei | number | string | ethers.BigNumber;