"Metamask no longer injects web3" using react box - ethereum

I'm trying to create a project but I get this error "Metamask no longer injects web3". I'm using npm truffle unbox react. It injects web3 using https://github.com/truffle-box/react-box/blob/master/client/src/getWeb3.js
Is there something wrong with that code? I have tried to change it but with no success... What is the proper way to inject web3 for metamask?

From Web3.js documentation:
let web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

Related

invoke web3.eth.get_transaction() but it shows "has no attribute 'get_transaction'"

I'm new on web3. Recently I'm trying to decode some logs on Ethereum according to this article. But when I try to use code like receipt=web3.eth.get_transaction(transaction_hash). It keeps showing me that module 'web3.eth' has no attribute 'get_transaction'.
But apparently, my computer has this file. And, doesn't this kind of statement mean "I'm trying to call a function in web3.eth"? Why is it regarded as "calling an attribute"?
Here are my codes:
import json
import requests
from web3 import Web3
w3=Web3(Web3.HTTPProvider(infura_project))
receipt=web3.eth.get_transcation(transaction Hash) //always show error "web3.eth has no attribute get_transaction"
log=receipt["logs"][2]
smart_contract=log["address"]
mykey="MY API Key of Etherscan"
adi_endpoint=f"https://api.etherscan.io/api?module=contract&action=getabi&address={smart_contract} & apikey={mykey}" //problem (2)
abi=json.load(requests.get(adi_endpoint).text)
//decode info
And if I directly put my API key of Etherscan at the end of line 10, pycharm will mark an error in there. So I enclose the API key in double quotes and assign it to the variable "mykey". Honestly, I don't think this will work. How to solve this problem?
Well, it's working for my code :
from web3 import Web3
web3 = Web3(Web3.HTTPProvider('https://bsc-dataseed.binance.org/'))
result = web3.eth.get_transaction('0x690ffe41506456a3936aa2d4dd05de6601f1fbe7eb3fe23c2bcc4d17714ea617')
print(result)
Make Sure Below Things
1: The web3 library is up to date
2: You don't have any file in your system named web3.py or Web3.py or something like this.

Verify and Publish Contract on Etherscan with Imported OpenZeppelin file

I'm currently building a ERC721 compliant contract and have published the contract here: https://ropsten.etherscan.io/address/0xa513bc0a0d3af384fefcd8bbc1cc0c9763307c39 - I'm now attempting to verify and publish the contract source code
The start of my file looks like so:
// SPDX-License-Identifier: MIT
// We will be using Solidity version 0.8.4
pragma solidity 0.8.4;
import "#openzeppelin/contracts/token/ERC721/ERC721.sol";
contract ViperToken is ERC721 {
However, when attempting to verify and publish with a Solidity single file I have the following error appear:
ParserError: Source "#openzeppelin/contracts/token/ERC721/ERC721.sol" not found: File import callback not supported
--> myc:6:1:
|
6 | import "#openzeppelin/contracts/token/ERC721/ERC721.sol"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Can anyone point me in the direction to either 1. Solve this problem or 2. Documentation on how to appropriately write a contract that has dependencies imported that can be verified with Etherscan. Right now this is just a single file contract.
Simply put I had to go down a rabbit hole to work this out as I'm pretty new to Solidity.
I had to do the following;
Learn and use https://www.trufflesuite.com/ to setup a project and put my contract there (Using Ganache helped a lot with testing for anyone new to Solidity too)
Use HD Wallet provider package and follow tutorial here to get it on ropsten Etherscan https://medium.com/coinmonks/5-minute-guide-to-deploying-smart-contracts-with-truffle-and-ropsten-b3e30d5ee1e
Finally, use truffle-plugin-verify https://github.com/rkalis/truffle-plugin-verify to verify the contract on Etherscan
All in all, I am pretty sure there is no way within the Etherscan web app to verify a contract that contains an imported file.
The final product is here if anyone is interested in seeing how I structured it all https://github.com/lukecurtis93/viper-nft (it's just a CryptoKitties clone I found online as a base and updated it all)
If you are compiling into REMIX IDE
From REMIX IDE
Search for "Flattener" pluging
RIght click the file -> Flatten yourcontract.sol
Copy/Paste on Etherscan
I used npx hardhat flatten to compile all the code into one page, then copy and paste the code into Etherscan's single file verification. I think it is fine if you are just learning to get a feel for verifying your smart contract in Etherscan. But when it comes to production level code, I think OP's solution is better.
npx hardhat flatten gives license identifiers error when trying to verify in etherscan.
Solution is to add the below in hardhat.config.js
task("flat", "Flattens and prints contracts and their dependencies (Resolves licenses)")
.addOptionalVariadicPositionalParam("files", "The files to flatten", undefined, types.inputFile)
.setAction(async ({ files }, hre) => {
let flattened = await hre.run("flatten:get-flattened-sources", { files });
// Remove every line started with "// SPDX-License-Identifier:"
flattened = flattened.replace(/SPDX-License-Identifier:/gm, "License-Identifier:");
flattened = `// SPDX-License-Identifier: MIXED\n\n${flattened}`;
// Remove every line started with "pragma experimental ABIEncoderV2;" except the first one
flattened = flattened.replace(/pragma experimental ABIEncoderV2;\n/gm, ((i) => (m) => (!i++ ? m : ""))(0));
console.log(flattened);
});
An then run npx hardhat flat contracts/ContractToFlatten.sol > Flattened.sol

Vuejs endpoint configuration

I'm really new in VueJS,
I use RxJS, Vue rx and Vue Resource in a mixin so i can make http calls and get observables back anywhere... awesome!
now i tried
subscriptions () {
return {
titles$: this.getHTTPObservable('https://jsonplaceholder.typicode.com/albums').flatMap(arr => Rx.Observable.from(arr).take(10).map(o => o.title).toArray())
}
The only thing i need now is to specify the end point of the server i am requesting in some configuration file like i would do in angular environments file. When launching the build by hand it should look like when i write
ng serve --env=dev
is there something similar?
Actually i found the answer on this page https://vuejs-templates.github.io/webpack/env.html
so, i can add any configuration variable and then call process.env.varname to get it back,
thanks
Vue.js normally works in conjunction with Webpack to achieve this.
https://v2.vuejs.org/v2/guide/deployment.html#With-Build-Tools
The DefinePlugin from Webpack is used for this. Outside of Webpack I think you are still able to use this:
https://www.npmjs.com/package/cross-env

Array.prototype.includes - not transformed with babel

I cannot figure out how to get this code to transform to compatible code in Node.js v4 env: [].includes('anything')
Becuase this throws an error in Node.js v4 Error: includes is not a function...
Can anyone help me understand why babel does not transform .includes()? I have tried using babel-preset-es2015 and babel-preset-es2016 as well as the babel repl: Example babel repl code usage
You need to import babel-polyfill to use static methods like Array.from or Object.assign, instance methods like Array.prototype.includes.
If you don't want to modify globals, checkout the transform-runtime plugin. This means you won't be able to use the instance methods mentioned above like Array.prototype.includes.

will gulp have an issue compiling javascript 1.7 object destructing syntax?

I have seen this "destructing" syntax before but haven't ever used it. until now anyways. I want to pull in a react-router repo on github to handle my applications routing (making a single page app). but I noticed that it has this syntax
var { Route, RouteHandler, Link } = Router;
which is just a fancy way of writing
var Route = Router.Route
var RouteHandler = Router.RouteHandler
var Link = Router.Link
so my question is does anyone know if gulp will have any issues compiling this from jsx to javascript?
Do I need to install any additional dependencies for this syntax?
I have done some research but couldn't find anything conclusive. Thanks
The default gulp, yes. JSX syntax needs to be transpiled down to native js. Take a look at gulp-react to see how you can deal with this. Basically , it works in similar concept to other transpiled code (ie. coffeescript). Convert to native before piping along to the next task.
Edit
after seeing you're edit, it looks like you also need to convert the ES6. Take a look at the react browserify, it should help to get you going. Basically the concept is the same, compile jsx/es6 to native js. There's a section specific to the ES6 react components.
2nd Edit
Looks like gulp-react has an option to set to ES6. I think if you add this line, it will work.
.pipe(react({harmony: true}))
//full example
gulp.task('default', function () {
return gulp.src('template.jsx')
.pipe(react({harmony: true))
.pipe(gulp.dest('dist'));
});