Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); GitHub - Mhmonicox/web3.js: Ethereum JavaScript API · GitHub
Skip to content

Repository files navigation

web3.js

web3.js - Ethereum JavaScript API

NPM Package DownloadscdnhitsDiscordStackExchangeNPM Package VersionBuild StatusCoverage StatusLernaNetlify StatusGitPOAP BadgeTwitter

Web3.js 4.x has been released. Checkout 4.x API documentation and migration guide for testing, early feedback and contributions.

This is the Ethereum JavaScript API which connects to the Generic JSON-RPC spec.

You need to run a local or remote Ethereum node to use this library.

Please read the documentation for more.

Installation

You can install the package either using NPM or using Yarn

Using NPM

npm install web3

Yarn

yarn add web3

In the Browser

Use the prebuilt dist/web3.min.js, or build using the web3.js repository:

npm run build

Then include dist/web3.min.js in your html file. This will expose Web3 on the window object.

Or via jsDelivr CDN:

<scriptsrc="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

UNPKG:

<scriptsrc="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

Usage

// In Node.jsconstWeb3=require('web3');constweb3=newWeb3('ws://localhost:8546');console.log(web3);// Output{eth: ...,shh: ...,utils: ...,
...
}

Additionally you can set a provider using web3.setProvider() (e.g. WebsocketProvider):

web3.setProvider('ws://localhost:8546');// orweb3.setProvider(newWeb3.providers.WebsocketProvider('ws://localhost:8546'));

There you go, now you can use it:

web3.eth.getAccounts().then(console.log);

Usage with TypeScript

We support types within the repo itself. Please open an issue here if you find any wrong types.

You can use web3.js as follows:

importWeb3from'web3';import{BlockHeader,Block}from'web3-eth'// ex. package typesconstweb3=newWeb3('ws://localhost:8546');

If you are using the types in a commonjs module, like in a Node app, you just have to enable esModuleInterop and allowSyntheticDefaultImports in your tsconfig for typesystem compatibility:

"compilerOptions": {"allowSyntheticDefaultImports": true,"esModuleInterop": true,
....

Troubleshooting and known issues.

Web3 and Create-react-app

1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with the content:
constwebpack=require('webpack');module.exports=functionoverride(config){constfallback=config.resolve.fallback||{};Object.assign(fallback,{"crypto": require.resolve("crypto-browserify"),"stream": require.resolve("stream-browserify"),"assert": require.resolve("assert"),"http": require.resolve("stream-http"),"https": require.resolve("https-browserify"),"os": require.resolve("os-browserify"),"url": require.resolve("url")})config.resolve.fallback=fallback;config.plugins=(config.plugins||[]).concat([newwebpack.ProvidePlugin({process: 'process/browser',Buffer: ['buffer','Buffer']})])returnconfig;}
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

after:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

  • If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings=[/Failedtoparsesourcemap/];

Web3 and Angular

New solution

If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular.

  • Install the required dependencies within your angular project:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
  • Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies
{"compilerOptions": {"paths" : {"crypto": ["./node_modules/crypto-browserify"],"stream": ["./node_modules/stream-browserify"],"assert": ["./node_modules/assert"],"http": ["./node_modules/stream-http"],"https": ["./node_modules/https-browserify"],"os": ["./node_modules/os-browserify"],}}
  • Add the following lines to polyfills.ts file:
import{Buffer}from'buffer';(windowasany).global=window;global.Buffer=Buffer;global.process={env: {DEBUG: undefined},version: '',nextTick: require('next-tick')}asany;

Old solution

If you are using Ionic/Angular at a version >5 you may run into a build error in which modules crypto and stream are undefined

a workaround for this is to go into your node-modules and at /angular-cli-files/models/webpack-configs/browser.js change the node: false to node: {crypto: true, stream: true} as mentioned here

Another variation of this problem was an issue opned on angular-cli

Documentation

Documentation can be found at ReadTheDocs.

Building

Requirements

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Building (webpack)

Build the web3.js package:

npm run build

Testing (mocha)

npm test

Contributing

Please follow the Contribution Guidelines and Review Guidelines.

This project adheres to the Release Guidelines.

Community

Similar libraries in other languages

Semantic versioning

This project follows semver as closely as possible from version 1.3.0 onwards. Earlier minor version bumps might have included breaking behavior changes.

About

Ethereum JavaScript API

Resources

Code of conduct

Contributing

Security policy

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages