Giter Club home page Giter Club logo

react-demo's Introduction

React Demo

A repository to demonstrate a basic integration of Web3-Onboard official docs for W3O can be found here. This project uses React App Rewired for building, checkout config-overrides.js for details. For detailed documentation, head to docs.blocknative.com

View live demo here!

Getting started

Clone the repo:

git clone https://github.com/blocknative/react-demo.git

Navigate to the project directory:

cd react-demo

Install the dependencies:

yarn

Start the development server:

yarn start

The project will be running on localhost:3000

SSL

Some wallets require that the website within which it runs be using a https connection. If you are testing one of these wallets, Ledger is one, then you have two options:

  1. Setup a valid certificate for localhost using this guide.
  2. Allow invalid certificates for resources loaded from localhost by navigating here within a chrome based browser: chrome://flags/#allow-insecure-localhost

react-demo's People

Contributors

aaronbarnardsound avatar adamj1232 avatar alex-miller-0 avatar chendatony31 avatar cmeisl avatar dependabot[bot] avatar leightkt avatar liamaharon avatar mahmud-bn avatar taylorjdawson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-demo's Issues

Use the "connectUnchecked" method instead of custom `UncheckedJsonRpcSigner` class

Here's what happened:

  1. I started looking at this demo to understand how to use onboard.js in tandem with ethers.js.
  2. I noticed that I need to create a custom UncheckedJsonRpcSigner class.
  3. I started refactoring it for TypeScript
  4. Two hours later, I was done.
  5. Shortly afterwards, I realised that I wasted my time. Now, ethers.js provides a connectUnchecked method in the JsonRpcSigner class.

See how Uniswap uses it: https://github.com/Uniswap/uniswap-interface/blob/4078390a4890445d1ff0ed5196fd4cb56a44de87/src/utils/index.ts#L28-L30

"Send via a internal transaction" not working

Description

Sending 0.001 Rinkeby ETH with:

  • In-flight notifications
  • Pre-flight and in-flight notifications

Works. But sending via a internal transaction doesn't. I'm getting the following error in the console:

index.js:224 Uncaught (in promise) Error: cannot estimate gas; transaction may fail or may require manual gas limit (error={"code":-32000,"message":"execution reverted"}, method="estimateGas", transaction={"from":"0x4bcb303609F19e71Ab82A3A3393c46BfEa1e44Fc","to":"0xb8c12850827dEd46B9dED8c1B6373da0c4d60370","value":{"type":"BigNumber","hex":"0x038d7ea4c68000"},"data":"0x94debf890000000000000000000000000000000000000000000000000000000000000001","accessList":null}, code=UNPREDICTABLE_GAS_LIMIT, version=providers/5.2.0)
    at e.value (index.js:224)
    at e.value (index.js:235)
    at Sv (json-rpc-provider.js:118)
    at n.<anonymous> (json-rpc-provider.js:744)
    at c (runtime.js:64)
    at Generator._invoke (runtime.js:281)
    at Generator.throw (runtime.js:117)
    at u (json-rpc-provider.js:30)

Environment

  • Chrome 91.0.4472.164
  • MetaMask 9.8.0
  • Onboard 1.30.0
  • Notify 1.7.0
  • React Demo 0.10.0

> ded503c9fd4c5d7ed6f53ddbaa0ffaa2e5523db12024-04-04T20:45:06.3615485Z Current runner version: '2.315.0' Operating System Runner Image Runner Image Provisioner GITHUB_TOKEN Permissions Secret source: Actions Prepare workflow directory Prepare all required actions Getting action download info Download action repository 'actions/github-script@e69ef5462fd455e02edcaf4dd7708eda96b9eda0' (SHA:e69ef5462fd455e02edcaf4dd7708eda96b9eda0) Download action repository 'someimportantcompany/github-actions-slack-message@a975b440de2bcef178d451cc70d4c1161b5a30cd' (SHA:a975b440de2bcef178d451cc70d4c1161b5a30cd) Download action repository 'actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11' (SHA:b4ffde65f46336ab88eb53be808477a3936bae11) Complete job name: check-team-membership

ded503c9fd4c5d7ed6f53ddbaa0ffaa2e5523db1

Originally posted by @okorye in https://github.com/okorye/cautious-giggle/pull/4#issuecomment-2041074599

Critical dependency warning when using Magic Wallet Module

Description

The demo compiles with warnings when importing the magic wallet module.
If you remove or comment the import, the app compiles successfully.

Compiled with warnings.

./node_modules/magic-sdk/dist/es/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracte
...

Environment

  • Fedora Linux 35 (Workstation)
  • Npm 8.5.5
  • Node v16.14.0
  • React Demo 0.15.0
  • @web3-onboard/magic 2.0.0

webpack generates 93 files == 50 MB in size !!?!

webpack generates 93 files. Total 50 MB. Is this normal? I have no other modules installed besides what was required to get this to compile. All i want is a bundle that can run within a modern web browser (mobile + desktop). React isn't necessary.

What am i doing wrong with webpack OR is blocknative not browser friendly?

WebSocket not present in global scope and no wsConstructor option was provided.

Hi

I installed bnc-notify 1.5.0 in my NodeJs app,
It took an error that you can see below on initial line
notify = Notify(options);

Error: WebSocket not present in global scope and no wsConstructor option was provided.
    at new SturdyWebSocket (D:\Source\CryptomindWallet\node_modules\bnc-notify\dist\notify.umd.js:534:1363)
    at new Blocknative (D:\Source\CryptomindWallet\node_modules\bnc-notify\dist\notify.umd.js:2305:4758)
    at init$1 (D:\Source\CryptomindWallet\node_modules\bnc-notify\dist\notify.umd.js:3650:2274)

``

Could you please help us to resolve this?

Thanks

ERR_OSSL_EVP_UNSUPPORTED error when running yarn start

This is the full error I'm getting....

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:412:16)
at handleParseError (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:463:10)
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:495:5
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:354:12
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at runSyncOrAsync (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array. (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:412:16)
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:444:10
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/webpack/lib/NormalModule.js:320:13
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/brent/Desktop/IAMSOLIDITYDEV/react-demo/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:55:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v19.0.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.