Create Developer Env for SDK (#942)

* ignore nextjs output

* add basic nextjs app for dev purposes

* rename dev to testapp

* update tsconfig

* add sdk to testapp

* add nodemon config

* Set build to generate dist dir at pkg root

* use the SDK

* remove webpack from build

* move release script

* dev script working

* move assets to top level

* clean up watch and npm scripts

* fix dev script

* update release script

* remove unused deps

* update publish script

.gitignore

@@ -38,3 +38,6 @@ examples/**/yarn.lock
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
+
+# next.js
+.next

apps/testapp/README.md

@@ -0,0 +1,5 @@
+# testapp
+
+This is a demo app for development purposes. The `yarn dev` command will start two dev servers in parallel:
+    wallet-sdk-development
+    @coinbase/wallet-sdk

apps/testapp/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/testapp/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@coinbase/wallet-sdk-testapp",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@coinbase/wallet-sdk": "workspace:^",
+    "next": "^13.4.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.15"
+  }
+}

apps/testapp/src/pages/index.tsx

@@ -0,0 +1,33 @@
+import { CoinbaseWalletProvider, CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import React, { useCallback, useEffect } from 'react';
+
+export default function Home() {
+  const [_, setSdk] = React.useState<CoinbaseWalletSDK | null>(null);
+  const [provider, setProvider] = React.useState<CoinbaseWalletProvider | null>(null);
+
+  useEffect(() => {
+    const cbwsdk = new CoinbaseWalletSDK({
+      appName: 'Test App',
+    });
+    setSdk(cbwsdk);
+    const cbwprovider = cbwsdk.makeWeb3Provider('http');
+    console.info('provider', cbwprovider);
+    setProvider(cbwprovider);
+  }, []);
+
+  const connect = useCallback(async () => {
+    if (!provider) return;
+    try {
+      await provider.enable();
+    } catch (error) {
+      console.error(error);
+    }
+  }, [provider]);
+
+  return (
+    <div>
+      <h1>Connect</h1>
+      <button onClick={connect}>Connect</button>
+    </div>
+  );
+}

apps/testapp/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "references": [
+    
+  ]
+}

package.json

@@ -6,11 +6,14 @@
   "license": "MIT",
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "apps/*"
   ],
   "scripts": {
     "lint": "yarn workspaces foreach -pt run lint",
-    "typecheck": "yarn workspaces foreach -pt run typecheck"
+    "typecheck": "yarn workspaces foreach -pt run typecheck",
+    "dev": "yarn workspaces foreach -ipv run dev",
+    "release": "./scripts/release.sh"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.0.0",

packages/wallet-sdk/.npmignore

@@ -0,0 +1,18 @@
+# Source
+src/**
+./node_modules/
+__tests__/**
+
+# Config
+tsconfig.json
+tsconfig.build.json
+.eslintrc.js
+babel.config.js
+webpack.config.js
+karma.conf.js
+
+# Jest
+jest.setup.ts
+jest.config.ts
+coverage/**
+

packages/wallet-sdk/__tests__/addressStorage.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable jest/no-done-callback */
-const { ensureAddressString } = require('../build/npm/dist/util');
-const { CoinbaseWalletSDK } = require('../build/npm/dist');
+const { ensureAddressString } = require('../dist/util');
+const { CoinbaseWalletSDK } = require('../dist');
 
 describe('address storage tests', () => {
   it('ensureAddressString returns lowercase string', () => {

packages/wallet-sdk/__tests__/encryptDecrypt.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable jest/no-done-callback */
-const { encrypt, decrypt } = require('../build/npm/dist/relay/aes256gcm');
-const { randomBytesHex } = require('../build/npm/dist/util');
+const { encrypt, decrypt } = require('../dist/relay/aes256gcm');
+const { randomBytesHex } = require('../dist/util');
 
 describe('encryption and decryption tests', () => {
   it('decrypted output matches original input', (done) => {

packages/wallet-sdk/karma.conf.js

@@ -1,17 +1,17 @@
 module.exports = function (config) {
   config.set({
-    plugins: ["karma-jasmine", "karma-chrome-launcher", "karma-browserify"],
+    plugins: ['karma-jasmine', 'karma-chrome-launcher', 'karma-browserify'],
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: "",
+    basePath: '',
 
-    frameworks: ["jasmine", "browserify"],
+    frameworks: ['jasmine', 'browserify'],
 
     // list of files / patterns to load in the browser
-    files: ["__tests__/**/*.js"],
+    files: ['__tests__/**/*.js'],
 
     preprocessors: {
-      "__tests__/**/*.js": ["browserify"],
+      '__tests__/**/*.js': ['browserify'],
     },
 
     browserify: {

packages/wallet-sdk/package.json

@@ -26,17 +26,13 @@
     "pretest:unit": "node compile-assets.js",
     "test:unit": "jest",
     "test:unit:coverage": "yarn test:unit && open coverage/lcov-report/index.html",
-    "test:karma": "yarn build:npm && karma start",
+    "test:karma": "yarn build && karma start",
     "prebuild": "rm -rf ./build && node -p \"'export const LIB_VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts",
-    "build": "node compile-assets.js && webpack --config webpack.config.js",
-    "build:npm": "tsc -p ./tsconfig.build.json",
-    "build:prod": "yarn build && yarn build:npm && cp ./package.json ../../README.md ./LICENSE build/npm && cp -a src/vendor-js build/npm/dist",
-    "postbuild:prod": "sed -i.bak 's|  \"private\": true,||g' build/npm/package.json && rm -f build/npm/package.json.bak",
+    "build": "node compile-assets.js && tsc -p ./tsconfig.build.json && cp -a src/vendor-js dist",
+    "dev": "node compile-assets.js && cp -a src/vendor-js dist && tsc --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --ext .ts,.tsx --fix",
-    "release": "./scripts/release.sh"
+    "lint": "eslint . --ext .ts,.tsx --fix"
   },
-  "private": true,
   "dependencies": {
     "@metamask/safe-event-emitter": "2.0.0",
     "@solana/web3.js": "^1.70.1",
@@ -70,7 +66,6 @@
     "@types/sha.js": "^2.4.0",
     "babel-jest": "^27.5.1",
     "browserify": "17.0.0",
-    "copy-webpack-plugin": "^6.4.1",
     "core-js": "^3.8.2",
     "jasmine": "3.8.0",
     "jest": "^27.5.1",
@@ -82,18 +77,13 @@
     "karma-jasmine": "^4.0.1",
     "nodemon": "^2.0.6",
     "prettier": "^2.5.1",
-    "raw-loader": "^4.0.2",
     "regenerator-runtime": "^0.13.7",
     "sass": "^1.50.0",
     "svgo": "^2.8.0",
     "ts-jest": "^27.1.4",
-    "ts-loader": "^8.0.13",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
-    "watchify": "4.0.0",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.2",
     "whatwg-fetch": "^3.5.0"
   },
   "engines": {

packages/wallet-sdk/src/CoinbaseWalletSDK.ts

@@ -70,7 +70,6 @@ export class CoinbaseWalletSDK {
    */
   constructor(options: Readonly<CoinbaseWalletSDKOptions>) {
     const linkAPIUrl = options.linkAPIUrl || LINK_API_URL;
-
     if (typeof options.overrideIsMetaMask === 'undefined') {
       this._overrideIsMetaMask = false;
     } else {

packages/wallet-sdk/tsconfig.build.json

@@ -2,8 +2,11 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "declaration": true,
-    "outDir": "./build/npm/dist",
-    "target": "es2017"
+    "outDir": "./dist",
+    "target": "es2017",
+    // For Preact
+    "jsx": "react",
+    "jsxFactory": "h",
   },
   "include": [
     "src"

packages/wallet-sdk/tsconfig.json

@@ -1,7 +1,29 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "target": "es2017",
+    "jsx": "react",
+    "jsxFactory": "h",
+  },
+  "watchOptions": {
+    // Use native file system events for files and directories
+    "watchFile": "useFsEvents",
+    "watchDirectory": "useFsEvents",
+    "fallbackPolling": "dynamicPriority",
+    "synchronousWatchDirectory": true,
+    "excludeDirectories": [
+      "**/node_modules",
+      "__tests__",
+      "dist",
+      "build",
+      "**/*.test.*",
+    ],
+    "excludeFiles": ["build/fileWhichChangesOften.ts"]
+  },
   "include": [
-    "**/*"
+    "./src"
   ],
   "exclude": [
     "dist",

packages/wallet-sdk/webpack.config.js

@@ -1,64 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const { env } = process;
-
-const tsConfigPath = (exports.tsConfigPath = path.join(
-  __dirname,
-  "tsconfig.json",
-));
-
-module.exports = {
-  target: "web",
-  entry: [
-    "core-js/stable",
-    "regenerator-runtime/runtime",
-    "whatwg-fetch",
-    "./src/index.ts",
-  ],
-  // devtool: 'inline-source-map',
-  mode: "production",
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: {
-          loader: "ts-loader",
-          options: {
-            configFile: tsConfigPath,
-          },
-        },
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  resolve: {
-    fallback: {
-      fs: false,
-      stream: require.resolve("stream-browserify"),
-      buffer: require.resolve("buffer/"),
-      util: require.resolve("util/"),
-    },
-    extensions: [".ts", ".tsx", ".js"],
-    plugins: [],
-    symlinks: false,
-  },
-  output: {
-    filename: "CoinbaseWalletSDK.js",
-    path: path.resolve(__dirname, "build"),
-  },
-  performance: {
-    hints: false,
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: JSON.stringify(env.NODE_ENV) || JSON.stringify("production"),
-        LINK_API_URL: JSON.stringify(env.LINK_API_URL),
-        SDK_VERSION: JSON.stringify(require("./package.json").version),
-      },
-    }),
-    new webpack.ProvidePlugin({
-      Buffer: ["buffer", "Buffer"],
-    }),
-  ],
-};

scripts/release.sh

@@ -12,23 +12,27 @@ mainBranch="master"
 branch=$(git rev-parse --abbrev-ref HEAD)
 
 if [ $branch == $mainBranch ]; then
-  echo -e "${PURPLE}Checking all branches are up-to-date..."
+  echo -e "${PURPLE} Checking all branches are up-to-date..."
   echo -e "================================================="
   echo -e " git fetch --all"
   git fetch --all
   echo -e " git pull"
   git pull
   echo -e "-------------------------------------------------"
-  echo -e "${TEAL}Build production and publish..."
+  echo -e "${TEAL} Build production and publish..."
   echo "================================================="
   echo -e "rm -rf ./node_modules"
   rm -rf ./node_modules
+  echo -e "rm -rf ./dist"
+  rm -rf ./dist
   echo -e "yarn install"
   yarn install
-  echo -e "yarn workspace @coinbase/wallet-sdk build:prod"
-  yarn workspace @coinbase/wallet-sdk build:prod
+  echo -e "yarn workspace @coinbase/wallet-sdk build"
+  yarn workspace @coinbase/wallet-sdk build
+  echo -e "cd ./packages/wallet-sdk"
+  cd ./packages/wallet-sdk
   echo "================================================="
-  echo -e " ${GREEN}cd build/npm and run 'npm publish'"
+  echo -e " ${GREEN} run 'npm publish'"
   echo "================================================="
 else
   echo -e "${RED}⚠️  Need to publish from ${mainBranch} branch"
@@ -36,8 +40,3 @@ else
   git checkout master
   echo -e "${RED}Run again"
 fi
-
-# TODO: Add Slack notification?
-# - Add release notes generation?
-# - Add version tag as argument?
-# - Add prompt for  npm login?

tsconfig.base.json

@@ -27,14 +27,14 @@
     "noUnusedParameters": true,
     "target": "es2016",
     "types": ["node", "jest"],
-    // For Preact
-    "jsx": "react",
-    "jsxFactory": "h",
     // Paths
     "paths": {
       ":wallet-sdk/*": [
         "packages/wallet-sdk/*"
       ],
+      ":wallet-sdk-testapp/*": [
+        "apps/testapp/*"
+      ],
     }
   }
 }