latest beta packages; new library api; tooling upgrades (airswap#754)

* latest beta packages; new library api; tooling upgrades

* removing storybook for another day

* remove unused deps

* prettier pass

.gitignore

@@ -10,7 +10,6 @@
 
 # production
 /build
-/storybook-static
 
 # misc
 .DS_Store

craco.config.js

@@ -6,7 +6,7 @@ const cracoEnvPlugin = require('craco-plugin-env')
 
 module.exports = {
   style: {
-    postcss: {
+    postcssOptions: {
       plugins: [require("autoprefixer")],
     },
   },
@@ -25,4 +25,27 @@ module.exports = {
       }
     }
   ],
+  webpack: {
+    configure: {
+      externals: ['express'],
+      ignoreWarnings: [/Failed to parse source map/],
+      resolve: {
+        fallback: {
+          url: require.resolve("browserify-url"),
+          https: require.resolve("https-browserify"),
+          http: require.resolve("http-browserify"),
+          tls: require.resolve("tls-browserify"),
+          net: require.resolve("net-browserify"),
+          stream: require.resolve("stream-browserify"),
+          crypto: require.resolve("crypto-browserify"),
+          zlib: require.resolve("zlib-browserify"),
+          path: false,
+          fs: false,
+          util: false,
+          async_hooks: false,
+          assert: false
+        },
+      },
+    },
+  },
 };

package.json

@@ -10,17 +10,18 @@
     "prettier": "prettier --write \"./src/**/*.{ts,tsx}\"  --plugin @trivago/prettier-plugin-sort-imports",
     "test": "craco test",
     "eject": "react-scripts eject",
-    "prepare": "husky install",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@airswap/balances": "2.0.2",
-    "@airswap/constants": "^4.0.0",
-    "@airswap/libraries": "^4.0.0",
-    "@airswap/metadata": "^4.0.0",
-    "@airswap/types": "^4.0.0",
-    "@airswap/utils": "^4.0.0",
+    "@airswap/balances": "^2.0.2",
+    "@airswap/constants": "4.0.2-beta.0",
+    "@airswap/libraries": "4.0.5-beta.5",
+    "@airswap/metadata": "4.0.4-beta.1",
+    "@airswap/registry": "4.0.2-beta.1",
+    "@airswap/swap-erc20": "^4.0.2",
+    "@airswap/types": "4.0.3-beta.0",
+    "@airswap/utils": "4.0.5-beta.1",
+    "@airswap/wrapper": "4.0.3-beta.1",
     "@craco/craco": "^6.2.0",
     "@fontsource/dm-mono": "^4.5.0",
     "@react-hookz/web": "^14.2.2",
@@ -38,18 +39,22 @@
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/walletconnect-connector": "^7.0.2-alpha.0",
     "bignumber.js": "^9.0.1",
+    "browserify-url": "^0.0.1",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.1",
+    "crypto-browserify": "^3.12.0",
     "date-fns": "^2.28.0",
     "erc-20-abi": "^1.0.0",
     "eth-rpc-errors": "^4.0.3",
     "ethers": "^5.7.2",
-    "express": "^4.18.2",
     "framer-motion": "^4.1.17",
+    "http-browserify": "^1.7.0",
+    "https-browserify": "^1.0.0",
     "i18next": "^20.4.0",
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-http-backend": "^1.3.0",
-    "jayson": "^3.6.4",
     "lodash.uniqby": "^4.7.0",
+    "net-browserify": "^0.2.4",
     "react": "^17.0.2",
     "react-beforeunload": "^2.5.2",
     "react-blockies": "^1.4.1",
@@ -60,20 +65,15 @@
     "react-icons": "^4.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "string_decoder": "^1.3.0",
+    "react-scripts": "^5.0.1",
+    "stream-browserify": "^3.0.0",
     "styled-components": "^5.3.1",
+    "tls-browserify": "^0.2.2",
     "truncate-eth-address": "^1.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "zlib-browserify": "^0.0.3"
   },
   "devDependencies": {
-    "@react-theming/storybook-addon": "^1.1.1",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-links": "^6.3.7",
-    "@storybook/node-logger": "^6.3.7",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.7",
     "@trivago/prettier-plugin-sort-imports": "^2.0.2",
     "@types/lodash.uniqby": "^4.7.6",
     "@types/react-beforeunload": "^2.1.1",
@@ -82,23 +82,14 @@
     "@types/react-router-dom": "^5.1.8",
     "autoprefixer": "^9",
     "craco-plugin-env": "^1.0.4",
+    "express": "^4.18.2",
     "husky": "^7.0.1",
     "jest-canvas-mock": "^2.3.1",
     "postcss": "^7",
     "prettier": "2.6.2"
   },
   "eslintConfig": {
-    "extends": "react-app",
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "extends": "react-app"
   },
   "browserslist": {
     "production": [
@@ -113,7 +104,6 @@
     ]
   },
   "resolutions": {
-    "babel-loader": "8.1.0",
     "styled-components": "^5"
   },
   "engines": {

src/components/MakeWidget/MakeWidget.tsx

@@ -2,7 +2,7 @@ import { FC, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
-import { wrappedTokenAddresses } from "@airswap/constants";
+import { WETH } from "@airswap/libraries";
 import { compressFullOrderERC20 } from "@airswap/utils";
 import { Web3Provider } from "@ethersproject/providers";
 import { useToggle } from "@react-hookz/web";
@@ -225,11 +225,11 @@ const MakeWidget: FC = () => {
 
     const signerToken =
       makerTokenAddress === nativeCurrencyAddress
-        ? wrappedTokenAddresses[chainId!]
+        ? WETH.getAddress(chainId!)
         : makerTokenAddress;
     const senderToken =
       takerTokenAddress === nativeCurrencyAddress
-        ? wrappedTokenAddresses[chainId!]
+        ? WETH.getAddress(chainId!)
         : takerTokenAddress;
 
     setMakerAmount(formattedMakerAmount);
@@ -266,7 +266,7 @@ const MakeWidget: FC = () => {
       approve({
         token:
           tokenAddress === nativeCurrencyAddress
-            ? wrappedTokenAddresses[chainId!]
+            ? WETH.getAddress(chainId!)
             : tokenAddress,
         library,
         contractType: "Swap",

src/components/MakeWidget/subcomponents/InfoSection/InfoSection.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useMemo, useState } from "react";
 
-import { wrappedTokenAddresses } from "@airswap/constants";
+import { WETH } from "@airswap/libraries";
 import { Web3Provider } from "@ethersproject/providers";
 import { useWeb3React } from "@web3-react/core";
 
@@ -44,7 +44,7 @@ const InfoSection: FC<ActionButtonsProps> = ({
       return;
     }
 
-    const wrappedTokenAddress = wrappedTokenAddresses[chainId];
+    const wrappedTokenAddress = WETH.getAddress(chainId);
 
     if (!wrappedTokenAddress) {
       return;

src/components/OrderDetailWidget/OrderDetailWidget.tsx

@@ -134,13 +134,13 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   };
 
   const takeOrder = async () => {
+    if (!library) return;
     const errors = await check(
       order,
       order.senderWallet,
       order.chainId,
-      library!.getSigner()
+      library
     );
-
     if (errors.length) {
       dispatch(setErrors(errors));
       return;