trufflesuite / drizzle-react-components-legacy Goto Github PK
View Code? Open in Web Editor NEWA set of useful components for common dapp UI elements.
A set of useful components for common dapp UI elements.
So when trying to develop with a test repo and npm link drizzle-react-components
it always says
Module not found: Can't resolve 'drizzle-react' in '/Users/hl/development/drizzle-react-components/dist'
If I just use the original nonlinked DRC in node_modules
, modify the src
and rebuild, it works fine.
I have seen here many questions, requests (e.g. #69, #71) and one idea (#70) on how drizzle-react-component could be made more flexible. Here is my suggestion:
<textarea>
vs <input type="text">
) or even <TextField>
from @material-ui
(not even solved in #70)In short terms: drizzle-react-component is nice for some small tutorial examples, but far away from a production ready library. But I like the basic concepts and simplicity of the approach.
In #70, @macsj200 suggests to add a property customComponent
this solves configurability for simple rendering, but not in complex cases, such as for arrays and maps.
I suggest a different approach: Allow nested components inside ContractData
and ContractForm
, these are then used to render the content.
This is just a simple pseudo code to show how I see the solution:
return (
<>
<h1>
<ContractData contract="Mapping" method="something">
<MyRender>{this.props.displayData}</MyRender>
</contractData>
</h1>
<ul>
<ContractData contract=Mapping" method="values" foreach="key => val">
<li>
<h2><ContractData contract="Value" instance="val" method="name" /></h2>
<p><ContractData contract="Value" instance="val" method="text" /></p>
<ul>
<ContractData contract="Value" instance="val" method="data" foreach="dataItem">
<li><ContractData contract="Value" instance="val" method="data" methodArgs="[dataItem]" /></li>
</ContractData>
</ul>
</li>
</ContractData>
</ul>
</>
)
}
I forked the project to https://github.com/mwaeckerlin/drizzle-react-components. I will now try to implement step by step a solution for the principle above.
Please add your comments, what do you think about this approach?
@honestbonsai, would you be willing to accept such a change?
@macsj200, would you accept this more flexible solution in favour of your suggestion in #70?
I'd like for the user to be able to define how much ETH they want to send for the contract, in return for tokens. So they should be able to send ether .001 ETH or 1 ETH depending on how many tokens they want. The component though seems to require me to hardcode the value parameter. Is there a way to make the value parameter end-user defined?
<ContractForm contract="MyCrowdsale"
method="buyTokens"
labels={['To Address']} sendArgs={{
from: '0x....',
value: '20000'
}} />
Part of 1.3 release #68
I had a form input that included a boolean argument (isAdmin
):
<ContractForm
contract="SimpleDemocracy"
method="registerVoter"
labels={['Address', 'isAdmin']}
/>
Contract code:
function registerVoter(address voter, bool _isAdmin) public isAdmin() {
require(getRegistration(voter) == false, "Voter already registered.");
voters[voter] = Voter({ hasRegistered: true, isAdmin: _isAdmin});
}
Regardless of if the isAdmin
checkbox was checked or not, the record would save as false
. Logging this.state
in handleSubmit()
of ContractForm.js revealed that my isAdmin
value was always being set to an empty string.
PR fix coming...
Hiya,
this is not really an issue but I started refactoring the react-components to be used via the context.consumer pattern ( and to work with react-native and web if possible ).
My experience was fun but a bit strange so I wanted to share, cause it does feel a bit weird to me.
I came up with the following to call contract methods for example:
Usage Example:
class Story extends React.Component {
private walletContract = React.createRef()
render(){
return (
<DrizzleContext.Provider drizzle={storeDrizzle()}>
{/* I feel weird using the component as API using a ref */}
<ContractSend contractName={'Wallet'} ref={this.walletContract}/>
<button onClick={ () => this.walletContract.current.send('deposit', {amount: 10}) }>Deposit</button>
<button onClick={ () => this.walletContract.current.send('withdraw', {amount: 10}) }>Withdraw</button>
</DrizzleContext.Provider>
)
}
}
Implementation:
https://gist.github.com/soundyogi/8eac4a67b820e6ea2f9635301fd2fa66
Problems:
I could not get it to work packages as a library, which is proibably due to how ReactContext works (not the same context), or due to the packaging with webpack.
How are you using drizzle via the new consumer pattern?
Cheers.
I'm trying to use a ContractData
to query a method which response is
[ BigNumber { s: 1, e: 0, c: [ 0 ] },
'0x0000000000000000000000000000000000000000',
BigNumber { s: 1, e: 0, c: [ 0 ] } ]
This type of object is not supported to be displayed: objects inside a list.
It should display the structures recursively.
I'm trying to make a secondary hd account call to ContractForm but only ContractData takes methodArgs().
Is there some reason why ContractForm shouldn't have arguments also or is there another way to send the transaction from a secondary account.
See if we can just bundle the Drizzle provider and consumer for users
It's getting really tiring to use external test projects. Should just bundle an example with this repo.
Would also be a nice (manual) test suite to make sure all our features are working.
Implement a method to get the balance of a contract.
I just use this code, but I can't show address type data list...
import React, {Component} from 'react'
import { AccountData, ContractData, ContractForm} from 'drizzle-react-components'
class Home extends Component {
render() {
return (
<main className="container">
...
<h2>VoteFactory</h2>
<strong>현재 생성된 투표 개수</strong>:
<ContractData contract="VoteFactory" method="getDeployedVotesLength"/>
<br/><br/>
<strong>현재 생성된 투표 목록</strong>:
<ContractData contract="VoteFactory" method="getDeployedVotes" />
...
</main>
)
}
}
export default Home
And My contract Code is here:
function getDeployedVotes() external view returns (address[]) {
return deployedVotes;
}
function getDeployedVotesLength() external view returns (uint) {
return deployedVotes.length;
}
Contract codes already success Compile and Migration,
I also used properties of toUtf8
, toAscii
, It is not working.
How can I solve this?
Brought up in #81
Please add a nightly npm-release for the latest drizzle develop branch.
Reasons:
BTW: It would be time for a new release. The current deveopment version runs stable AFAIK. The only reason I see, what would need to be fixed before a release, would be some warnings that need to be eliminated first, see #90.
<ContractData contract="ERC223StandardToken" method="balanceOf" methodArgs={[this.props.accounts[0],{from: this.props.accounts[0]}]} />
<Faucet contract="ERC223StandardToken" method="faucet" />
Faucet function signs transaction, updating user balance with 200 tokens. ContractData component displays out of sync icon but does not update to new balance, refreshing page, ContractData displays correct data
AccountData should have a custom render prop just like the rest of the components now.
After #64 has been merged, should fix lint errors
n/t
Render contracs that are dynamically instanciated using an address and an ABI, i.e. render the target contract in an array of addresses to contracts. Perhaps this will need a new class, sich as DynamicContract.js
.
I am calling vote method in Contract Form
<ContractForm contract="LCSToken" method="vote" labels={['NFT Token ID','Positive?']} />
and the second argument always receive FALSE as a value, so the voting result is negative
There is my contract method :
function vote(uint256 _id, bool _positive) public {
require(_id != uint256(0));
require(_id == voters[msg.sender]);
require(extensions[_id].status == uint8(Status.Claim));
Request storage _request = requests[_id];
uint votingEnd = _request.timeStamp + _request.duration;
require(votingEnd >= now);
if(_positive) {
_request.positive++;
} else {
_request.negative++;
}
delete voters[msg.sender]; // deliting prevent the second time voting
// emit event
Vote(msg.sender, _id, _positive);
}
There are some Warnings in the development branch that should be eliminated:
Warning: Failed prop type: Invalid prop
accounts
of typeobject
supplied toLoadingContainer
, expected an array.
in LoadingContainer
Warning: Failed prop type: Invalid prop
contracts
of typeobject
supplied toContractData
, expectedarray
.
in ContractData
Could you please tell me if the components < AccountData > , < ContractData > , < ContractForm > works using the new drizzle Context API (DrizzleContext.provider) ? I am visualizing the problem in the following avenue:
inside the AccountData.js, there is a drizzleConnect() function being called to mapStateToProps. This is exactly from where the "Accounts" data is being retrieved as props (this.props.Accounts). But if we go further deeper, inside the drizzleConnect.js, we encounter the following line:
<ConnectedWrappedComponent {...props} store={context.drizzleStore} />
This means there is a context call of context.drizzleStore which is non existent (recall in the new DrizzleContext.provider, the context object is {drizzle, drizzleState, initialized}, no drizzleStore). Hence this should technically throw an error of not finding the store variable in either context or props.
One probable way of fixing this would be to get the "store" value in directly from context.drizzle (context.drizzle.store) , instead of context.drizzleStore.
Could you please clarify if this is not the case? much obliged.
Some contracts have boolean types in their method signatures.
For example:
contract MyContract {
function doSomething(string name, bool isGood, bool isBad) public {
// do something here
}
}
When these methods are rendered in a ContractForm, the bool types render as follows:
<ContractForm contract="MyContract" method="doSomething"
labels={['Name', 'Is Good', 'Is Bad']} />
becomes
<input name="name" value="" placeholder="Name" type="text">
<input name="isGood" value="" placeholder="Is Good" type="checkbox">
<input name="isGood" value="" placeholder="Is Bad" type="checkbox">
When this renders in a browser, the checkbox inputs do not have labels, meaning the user does not know the meaning of the check boxes.
When wanting to display a contracts mapping, such as
mapping (uint => bool) public isCoolNumber;
with
ContractData contract="SimpleStorage" method="cool" methodArgs={[8]}
i get
utils.js:240 uncaught at l TypeError: e.slice is not a function
I tried this by adjusting the drizzle-box.
Refer to:
We rely on the versions in the users' app. So I'm pretty sure having https://github.com/trufflesuite/drizzle-react-components/blob/develop/package.json#L25 isn't proper. If anything it should be moved to devDependencies
.
Allow ContractForms to delegate rendering of the form details, similar to #81. A user should have the possibility to render the form according to his needs.
Currently:
<textarea>
vs <input type="text">
) or even <TextField>
from @material-ui
Probably a render prop could solve most if not all of these requirements.
I'm not a huge fan of the translateType interface in ContractForm
's custom render, would be good to just send it down with this.inputs
somehow.
Though I don't want to mutate this.inputs
Hello i'm looking to make a transfert with adress and value setup, in order to just click on a button for the user to buy something with token.
I use a ContractForm, working well if adresse and value set by user, but sendArgs is not working.
Here is my form :
<ContractForm
contract="Influence"
method="transfer"
methodArgs={{to: "0xbd85593F294f953dC67dBDd4C34Ff7cd8681156A", value: 5}}
/>
A common use case to is to send Eth to a contract for example wrapped-eth (https://weth.io/).
Currently this will not work as the deposit
method is a payable with no arguments and the methodArgs does not exist for this component.
<ContractForm contract="WrappedEth" method="deposit" methodArgs={[{value: 1000000}]}/>
The preferred implementation would probably be to display an input field when a payable method is detected.
I am pretty sure that in ContractData.js#L68 the check whether the displayData object is an array or not is incorrect.
The correct would be: if (displayData instanceof Array)
.
I've noticed some PRs include prettification, which makes it tough to see what actually changed. We should use a common set of rules to align this repo around.
Please add an information to the README, how to get contract balance using drizzle components.
Or does it need a new component? If yes, then please consider this as a feature request.
When submitting the form, the ordering of arguments to cacheSend method:
method.cacheSend(...Object.values(this.state))
...are not guaranteed to be in the correct order:
Object.values iterates over the state keys in the same order as for...in which iterates over the properties of an object in an arbitrary order
The only case where this implementation is bug free is in the case that less than two arguments are expected by the contract method.
We need a custom method to generate the arguments in correct order.
All the react components force a render/repaint even if state or props haven't changed.
Gyazo Link showing the issue
The components could each implement shouldComponentUpdate() to opt-out of the update. However, is this the best way forward though? Could this be done further up the drizzle stream? Please comment.
Repo to reproduce: drizzle-react-starter branch: render-slam
I would expect ContractData component to update it's content when one of it's props value is changed. Instead it remains fixed with data it received on application load.
I submitted a pull request that solved the issue for me.
This is a bit annoying, especially because it clears out the form.
This will require a 2.0 release.
Solves most of the problems of drizzle-react-components.
Mainly:
More information here: https://github.com/ProphetDaniel/drizzle-react-components-plus
I would be happy to see these improvements here.
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Could we add a prop to specify a custom formatter function for <ContractData />
? For example, it could be useful for Ether amounts.
I'm quite impressed with how easy it is to use this package to read and write values from a smart contract. That being said, the default view that the component provides isn't what I'm looking for.
Is there any way to customize the output of <ContractData>
?
AccountData is missing from README
Basically, this line
// Get the contract ABI const abi = this.contracts[this.props.contract].abi;
fails because this.contracts
is empty at refreshing the page, the info comes later.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.