https://github.com/web3/web3.js
git clone https://github.com/sna9go/web3js-example-react-app.git
cd web3js-example-react-app
npm install
D:\w\web3\web3js-example-react-app>npm install npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0 npm WARN deprecated workbox-google-analytics@6.6.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
core-js@3.37.1 postinstall D:\w\web3\web3js-example-react-app\node_modules\core-js node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting core-js:
https://opencollective.com/core-js https://patreon.com/zloirock https://boosty.to/zloirock bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz
I highly recommend reading this: https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md
core-js-pure@3.37.1 postinstall D:\w\web3\web3js-example-react-app\node_modules\core-js-pure node -e "try{require('./postinstall')}catch(e){}"
npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.3.2 (node_modules\react-scripts\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN notsup Unsupported engine for @noble/hashes@1.4.0: wanted: {"node":">= 16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @noble/hashes@1.4.0
added 1442 packages from 718 contributors and audited 1446 packages in 184.059s
268 packages are looking for funding
run npm fund for details
found 2 vulnerabilities (1 moderate, 1 high)
run npm audit fix to fix them, or npm audit for details
D:\w\web3\web3js-example-react-app>
D:\w\web3\web3js-example-react-app>npm audit fix npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 6.164s
268 packages are looking for funding
run npm fund for details
fixed 0 of 2 vulnerabilities in 1446 scanned packages 2 vulnerabilities required manual review and could not be updated
D:\w\web3\web3js-example-react-app>
D:\w\web3\web3js-example-react-app>npm fund
web3js-example-react-app@0.1.0
+-- https://github.com/chalk/ansi-styles?sponsor=1
| -- ansi-styles@4.3.0, ansi-styles@5.2.0, ansi-styles@6.2.1 +-- https://github.com/chalk/chalk?sponsor=1 | -- chalk@4.1.2
+-- https://github.com/sponsors/ljharb
| -- deep-equal@2.2.3, array-buffer-byte-length@1.0.1, call-bind@1.0.7, es-get-iterator@1.1.3, get-intrinsic@1.2.4, is-arguments@1.1.1, is-array-buffer@3.0.4, is-date-object@1.0.5, is-regex@1.1.4, is-shared-array-buffer@1.0.3, object-is@1.1.6, object.assign@4.1.5, regexp.prototype.flags@1.5.2, side-channel@1.0.6, which-boxed-primitive@1.0.2, which-collection@1.0.2, which-typed-array@1.1.15, function-bind@1.1.2, define-data-property@1.1.4, gopd@1.0.1, has-property-descriptors@1.0.2, has-symbols@1.0.3, is-map@2.0.3, is-set@2.0.3, is-string@1.0.7, has-tostringtag@1.0.2, has-proto@1.0.3, define-properties@1.2.1, functions-have-names@1.2.3, object-inspect@1.13.1, is-bigint@1.0.4, is-boolean-object@1.1.2, is-number-object@1.0.7, is-symbol@1.0.4, has-bigints@1.0.2, is-weakmap@2.0.2, is-weakset@2.0.3, available-typed-arrays@1.0.7, is-callable@1.2.7, resolve@1.22.8, object.values@1.2.0, util.promisify@1.0.1, minimist@1.2.8, es-abstract@1.23.3, object.getownpropertydescriptors@2.1.8, arraybuffer.prototype.slice@1.0.3, data-view-buffer@1.0.1, data-view-byte-length@1.0.1, data-view-byte-offset@1.0.0, es-to-primitive@1.2.1, function.prototype.name@1.1.6, get-symbol-description@1.0.2, globalthis@1.0.4, is-data-view@1.0.1, is-negative-zero@2.0.3, is-typed-array@1.1.13, is-weakref@1.0.2, safe-array-concat@1.1.2, safe-regex-test@1.0.3, string.prototype.trim@1.2.9, string.prototype.trimend@1.0.8, string.prototype.trimstart@1.0.8, typed-array-byte-length@1.0.1, typed-array-byte-offset@1.0.2, typed-array-length@1.0.6, unbox-primitive@1.0.2, array.prototype.reduce@1.0.7, array-includes@3.1.8, array.prototype.findlastindex@1.2.5, array.prototype.flat@1.3.2, array.prototype.flatmap@1.3.2, is-core-module@2.13.1, object.fromentries@2.0.8, reflect.getprototypeof@1.0.6, which-builtin-type@1.1.3, is-async-function@2.0.0, is-finalizationregistry@1.0.2, is-generator-function@1.0.10, array.prototype.findlast@1.2.5, resolve@2.0.0-next.5, object.hasown@1.1.4, string.prototype.matchall@4.0.11, supports-preserve-symlinks-flag@1.0.0, shell-quote@1.8.1, qs@6.11.0 +-- https://opencollective.com/babel | -- @babel/core@7.24.7
+-- https://github.com/sponsors/gregberge
| -- @svgr/webpack@5.5.0, @svgr/core@5.5.0, @svgr/plugin-jsx@5.5.0, @svgr/plugin-svgo@5.5.0, @svgr/babel-preset@5.5.0, @svgr/hast-util-to-babel-ast@5.5.0, @svgr/babel-plugin-add-jsx-attribute@5.4.0, @svgr/babel-plugin-remove-jsx-attribute@5.4.0, @svgr/babel-plugin-remove-jsx-empty-expression@5.0.1, @svgr/babel-plugin-replace-jsx-attribute-value@5.0.1, @svgr/babel-plugin-svg-dynamic-title@5.4.0, @svgr/babel-plugin-svg-em-dimensions@5.4.0, @svgr/babel-plugin-transform-react-native-svg@5.4.0, @svgr/babel-plugin-transform-svg-component@5.5.0 +-- https://opencollective.com/browserslist | -- browserslist@4.23.0, caniuse-lite@1.0.30001629, update-browserslist-db@1.0.16
+-- https://tidelift.com/funding/github/npm/browserslist
| -- browserslist@4.23.0, update-browserslist-db@1.0.16 +-- https://github.com/sponsors/ai | -- browserslist@4.23.0, postcss@8.4.38, caniuse-lite@1.0.30001629, update-browserslist-db@1.0.16, nanoid@3.3.7, autoprefixer@10.4.19, postcss-load-config@4.0.2
+-- https://github.com/sponsors/sindresorhus
| -- camelcase@6.3.0, import-fresh@3.3.0, parse-json@5.2.0, p-limit@2.3.0, make-dir@3.1.0, normalize-url@6.1.0, escape-string-regexp@4.0.0, find-up@5.0.0, globals@13.24.0, strip-json-comments@3.1.1, locate-path@6.0.0, p-locate@5.0.0, p-limit@3.1.0, yocto-queue@0.1.0, type-fest@0.20.2, globby@11.1.0, import-local@3.1.0, ansi-escapes@4.3.2, terminal-link@2.1.1, make-dir@4.0.0, type-fest@0.21.3, get-stream@6.0.1, is-stream@2.0.1, onetime@5.1.2, slash@4.0.0, string-length@5.0.1, gzip-size@6.0.0, open@8.4.2, binary-extensions@2.3.0, is-docker@2.2.1, @alloc/quick-lru@5.2.0, string-width@5.1.2, is-plain-obj@3.0.0, pretty-bytes@5.6.0, tempy@0.6.0, builtin-modules@3.3.0, type-fest@0.16.0 +-- https://opencollective.com/webpack | -- css-loader@6.11.0, css-minimizer-webpack-plugin@3.4.1, eslint-webpack-plugin@3.2.0, file-loader@6.2.0, mini-css-extract-plugin@2.9.0, postcss-loader@6.2.1, sass-loader@12.6.0, source-map-loader@3.0.2, style-loader@3.3.4, terser-webpack-plugin@5.3.10, webpack@5.91.0, webpack-dev-server@4.15.2, schema-utils@4.2.0, schema-utils@2.7.1, schema-utils@3.3.0, schema-utils@2.7.0, webpack-dev-middleware@5.3.4
+-- https://opencollective.com/eslint
| -- eslint@8.57.0, @eslint/eslintrc@2.1.4, eslint-scope@7.2.2, eslint-visitor-keys@3.4.3, espree@9.6.1 +-- https://opencollective.com/html-webpack-plugin | -- html-webpack-plugin@5.6.0
+-- https://opencollective.com/postcss/
| -- postcss@8.4.38, autoprefixer@10.4.19, postcss@7.0.39, postcss-js@4.0.1, postcss-load-config@4.0.2, postcss-nested@6.0.1 +-- https://tidelift.com/funding/github/npm/postcss | -- postcss@8.4.38
+-- https://opencollective.com/csstools
| -- postcss-preset-env@7.8.3, @csstools/postcss-cascade-layers@1.1.1, @csstools/postcss-color-function@1.1.1, @csstools/postcss-font-format-keywords@1.0.1, @csstools/postcss-hwb-function@1.0.2, @csstools/postcss-ic-unit@1.0.1, @csstools/postcss-is-pseudo-class@2.0.7, @csstools/postcss-nested-calc@1.0.0, @csstools/postcss-normalize-display-values@1.0.1, @csstools/postcss-oklab-function@1.1.1, @csstools/postcss-stepped-value-functions@1.0.1, @csstools/postcss-text-decoration-shorthand@1.0.0, @csstools/postcss-trigonometric-functions@1.0.2, @csstools/postcss-unset-value@1.0.2, cssdb@7.11.2, postcss-attribute-case-insensitive@5.0.2, postcss-color-functional-notation@4.2.4, postcss-color-hex-alpha@8.0.4, postcss-color-rebeccapurple@7.1.1, postcss-custom-media@8.0.2, postcss-custom-properties@12.1.11, postcss-custom-selectors@6.0.3, postcss-dir-pseudo-class@6.0.5, postcss-double-position-gradients@3.1.2, postcss-gap-properties@3.0.5, postcss-image-set-function@4.0.7, postcss-lab-function@4.2.1, postcss-nesting@10.2.0, postcss-overflow-shorthand@3.0.4, postcss-place@7.0.5, postcss-pseudo-class-any-link@7.1.6, postcss-selector-not@6.0.1, @csstools/selector-specificity@2.2.0 +-- https://opencollective.com/core-js | -- core-js-pure@3.37.1, core-js-compat@3.37.1, core-js@3.37.1
+-- https://github.com/sponsors/mdevils
| -- html-entities@2.5.2 +-- https://patreon.com/mdevils | -- html-entities@2.5.2
+-- https://github.com/sponsors/epoberezkin
| -- ajv@8.16.0, ajv@6.12.6 +-- https://github.com/sponsors/fb55 | -- css-what@3.4.2, domelementtype@2.3.0, css-select@4.3.0, css-what@6.1.0, htmlparser2@6.1.0
+-- https://github.com/fb55/entities?sponsor=1
| -- entities@2.2.0 +-- https://github.com/sponsors/jonschlinkert | -- picomatch@2.3.1
+-- https://github.com/chalk/supports-color?sponsor=1
| -- supports-color@8.1.1 +-- https://github.com/sponsors/sibiraj-s | -- ci-info@3.9.0
+-- https://github.com/sponsors/isaacs
| -- glob@7.2.3, rimraf@3.0.2, glob@10.4.1, foreground-child@3.1.1, jackspeak@3.4.0, path-scurry@1.11.1, minimatch@9.0.4, signal-exit@4.1.0 +-- https://github.com/avajs/find-cache-dir?sponsor=1 | -- find-cache-dir@3.3.2
+-- https://tidelift.com/funding/github/npm/caniuse-lite
| -- caniuse-lite@1.0.30001629 +-- https://opencollective.com/cssnano | -- cssnano@5.1.15
+-- https://github.com/fb55/domhandler?sponsor=1
| -- domhandler@4.3.1 +-- https://github.com/fb55/domutils?sponsor=1 | -- domutils@2.8.0
+-- https://github.com/fb55/nth-check?sponsor=1
| -- nth-check@2.1.1 +-- https://github.com/cheeriojs/dom-serializer?sponsor=1 | -- dom-serializer@1.4.1
+-- https://github.com/sponsors/feross
| -- safe-buffer@5.2.1, run-parallel@1.2.0, queue-microtask@1.2.3 +-- https://www.patreon.com/feross | -- safe-buffer@5.2.1, run-parallel@1.2.0, queue-microtask@1.2.3
+-- https://feross.org/support
| -- safe-buffer@5.2.1, run-parallel@1.2.0, queue-microtask@1.2.3 +-- https://github.com/sponsors/nzakas | -- @humanwhocodes/module-importer@1.0.1
+-- https://opencollective.com/typescript-eslint
| -- @typescript-eslint/eslint-plugin@5.62.0, @typescript-eslint/parser@5.62.0, @typescript-eslint/scope-manager@5.62.0, @typescript-eslint/type-utils@5.62.0, @typescript-eslint/utils@5.62.0, @typescript-eslint/types@5.62.0, @typescript-eslint/visitor-keys@5.62.0, @typescript-eslint/typescript-estree@5.62.0, @typescript-eslint/experimental-utils@5.62.0 +-- https://github.com/fb55/htmlparser2?sponsor=1 | -- htmlparser2@6.1.0
+-- https://github.com/sindresorhus/emittery?sponsor=1
| -- emittery@0.8.1, emittery@0.10.2 +-- https://github.com/sindresorhus/execa?sponsor=1 | -- execa@5.1.1
+-- https://github.com/chalk/wrap-ansi?sponsor=1
| -- wrap-ansi@7.0.0, wrap-ansi@8.1.0 +-- https://github.com/chalk/strip-ansi?sponsor=1 | -- strip-ansi@7.1.0
+-- https://github.com/chalk/ansi-regex?sponsor=1
| -- ansi-regex@6.0.1 +-- https://tidelift.com/funding/github/npm/autoprefixer | -- autoprefixer@10.4.19
+-- https://github.com/sponsors/csstools
| -- cssdb@7.11.2 +-- https://ko-fi.com/mrcgrtz | -- postcss-opacity-percentage@1.1.3
+-- https://liberapay.com/mrcgrtz
| -- postcss-opacity-percentage@1.1.3 +-- https://github.com/sponsors/rawify | -- fraction.js@4.3.7
+-- https://opencollective.com/immer
| -- immer@9.0.21 +-- https://paulmillr.com/funding/ | -- chokidar@3.6.0, @noble/curves@1.4.0, @noble/hashes@1.4.0, @scure/bip32@1.4.0, @scure/bip39@1.3.0, @scure/base@1.1.6
+-- https://github.com/sponsors/antonk52
| -- lilconfig@3.1.1 +-- https://github.com/sponsors/RubenVerborgh | -- follow-redirects@1.15.6
-- https://github.com/sponsors/colinhacks -- zod@3.23.8
D:\w\web3\web3js-example-react-app>
D:\w\web3\web3js-example-react-app>npm run start
web3js-example-react-app@0.1.0 start D:\w\web3\web3js-example-react-app react-scripts start
(node:28880) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ... to show where the warning was created)
(node:28880) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away. Compiled successfully!
You can now view web3js-example-react-app in the browser.
Local: http://localhost:3000 On Your Network: http://192.168.3.9:3000
Note that the development build is not optimized. To create a production build, use yarn build.
webpack compiled successfully ERROR in src/web3/wallet.ts:5:9 TS2724: '"web3-utils"' has no exported member named 'DataFormat'. Did you mean 'isDataFormat'? 3 | import { Receipt} from 'web3-types'; 4 | import {web3} from './web3';
5 | import {DataFormat} from "web3-utils"; | ^^^^^^^^^^ 6 | import {Web3Account} from "web3-eth-accounts"; 7 | 8 | export class Wallet {
ERROR in src/web3/wallet.ts:28:3 TS2322: Type 'TransactionReceipt' is not assignable to type 'Receipt'. Index signature for type 'string' is missing in type 'TransactionReceiptBase<Numbers, Bytes, Bytes, Log>'. 26 | const signedTx = await web3.eth.accounts.signTransaction(tx, this.account.privateKey); 27 |
28 | return web3.eth.sendSignedTransaction(signedTx.rawTransaction); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 29 | } 30 | 31 | public getAccount(){
Compiled with problems: × ERROR in src/web3/wallet.ts:5:9 TS2724: '"web3-utils"' has no exported member named 'DataFormat'. Did you mean 'isDataFormat'? 3 | import { Receipt} from 'web3-types'; 4 | import {web3} from './web3';
5 | import {DataFormat} from "web3-utils"; | ^^^^^^^^^^ 6 | import {Web3Account} from "web3-eth-accounts"; 7 | 8 | export class Wallet { ERROR in src/web3/wallet.ts:28:3 TS2322: Type 'TransactionReceipt' is not assignable to type 'Receipt'. Index signature for type 'string' is missing in type 'TransactionReceiptBase<Numbers, Bytes, Bytes, Log>'. 26 | const signedTx = await web3.eth.accounts.signTransaction(tx, this.account.privateKey); 27 | 28 | return web3.eth.sendSignedTransaction(signedTx.rawTransaction); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 29 | } 30 | 31 | public getAccount(){
import {Receipt, DataFormat} from 'web3-types'; import {web3} from './web3'; // import {DataFormat} from "web3-utils"; import {Web3Account} from "web3-eth-accounts";
webpack compiled successfully ERROR in src/web3/wallet.ts:28:3 TS2322: Type 'TransactionReceipt' is not assignable to type 'Receipt'. Index signature for type 'string' is missing in type 'TransactionReceiptBase<Numbers, Bytes, Bytes, Log>'. 26 | const signedTx = await web3.eth.accounts.signTransaction(tx, this.account.privateKey); 27 |
28 | return web3.eth.sendSignedTransaction(signedTx.rawTransaction); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 29 | } 30 | 31 | public getAccount(){
Compiled with problems: × ERROR in src/web3/wallet.ts:28:3 TS2322: Type 'TransactionReceipt' is not assignable to type 'Receipt'. Index signature for type 'string' is missing in type 'TransactionReceiptBase<Numbers, Bytes, Bytes, Log>'. 26 | const signedTx = await web3.eth.accounts.signTransaction(tx, this.account.privateKey); 27 |
28 | return web3.eth.sendSignedTransaction(signedTx.rawTransaction); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 29 | } 30 | 31 | public getAccount(){
D:\w\web3\web3js-example-react-app>npm run start
web3js-example-react-app@0.1.0 start D:\w\web3\web3js-example-react-app react-scripts start
(node:40888) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ... to show where the warning was created)
(node:40888) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!
You can now view web3js-example-react-app in the browser.
Local: http://localhost:3000 On Your Network: http://192.168.3.9:3000
Note that the development build is not optimized. To create a production build, use yarn build.
webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.
