Skip to content

Commit

Permalink
Merge pull request #538 from eco-stake/remove-connect-requirement
Browse files Browse the repository at this point in the history 
Remove wallet requirement
  • Loading branch information
@tombeynon
tombeynon committed Jun 24, 2022
2 parents 58a0a60 + 1601427 commit 1b565f0
Show file tree
Hide file tree
Showing 16 changed files with 326 additions and 267 deletions.
9 changes: 7 additions & 2 deletions src/components/AlertMessage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,21 @@ import {
function AlertMessage(props) {
const [show, setShow] = useState(false);

const dismissible = props.dismissible === false ? false : true

useEffect(() => {
setShow(!!props.message || !!props.children)
}, [props.message, props.children]);

const dismissible = props.dismissible === false ? false : true
function onClose(){
setShow(false)
props.onClose && props.onClose()
}

return (
<>
{show &&
<Alert className={`text-center ${props.className}`} variant={props.variant || 'danger'} onClose={() => setShow(false)} dismissible={dismissible}>
<Alert className={`text-center ${props.className}`} variant={props.variant || 'danger'} onClose={onClose} dismissible={dismissible}>
{props.message || props.children}
</Alert>
}
Expand Down
52 changes: 25 additions & 27 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
Droplet,
DropletFill,
DropletHalf,
CashCoin,
Coin,
Inboxes,
Stars,
Expand Down Expand Up @@ -99,7 +100,6 @@ class App extends React.Component {
this.setState({
address: null,
balance: null,
queryClient: null,
stargateClient: null
})
}
Expand All @@ -111,6 +111,12 @@ class App extends React.Component {
})
}

if(manual && !this.state.keplr){
return this.setState({
keplrError: true
})
}

if(localStorage.getItem('connected') !== '1'){
if(manual){
localStorage.setItem('connected', '1')
Expand Down Expand Up @@ -152,15 +158,13 @@ class App extends React.Component {
address: address,
accountName: key.name,
stargateClient: stargateClient,
queryClient: network.queryClient,
error: false
})
this.getBalance()
} catch (e) {
console.log(e)
return this.setState({
error: 'Failed to connect to signing client: ' + e.message,
loading: false
error: 'Failed to connect to signer: ' + e.message
})
}
}
Expand Down Expand Up @@ -209,7 +213,9 @@ class App extends React.Component {
}

async getBalance() {
this.state.queryClient.getBalance(this.state.address, this.props.network.denom)
if(!this.state.address) return

this.props.queryClient.getBalance(this.state.address, this.props.network.denom)
.then(
(balance) => {
this.setState({
Expand Down Expand Up @@ -254,16 +260,16 @@ class App extends React.Component {
let icon, mode
let iconProps = {
size: '1.4em',
className: 'me-3',
className: 'mx-2 mx-md-3',
role: 'button',
onClick: () => this.props.changeNetworkMode(mode)
}
if (this.props.directory.testnet) {
iconProps.className = 'me-3 text-warning'
iconProps.className = iconProps.className + ' text-warning'
icon = <WrenchAdjustableCircleFill {...iconProps} />
mode = 'mainnet'
} else {
iconProps.className = 'me-3 text-muted'
iconProps.className = iconProps.className + ' text-muted'
icon = <WrenchAdjustableCircle {...iconProps} />
mode = 'testnet'
}
Expand All @@ -279,7 +285,7 @@ class App extends React.Component {
return (
<Container>
<header className="">
<div className="d-flex justify-content-between py-3 border-bottom">
<div className="d-flex justify-content-between align-items-center py-3 border-bottom">
<div className="logo d-flex align-items-end text-reset text-decoration-none">
<span onClick={() => this.props.setActive('networks')} role="button" className="text-reset text-decoration-none">
{this.props.theme === 'light'
Expand Down Expand Up @@ -350,8 +356,9 @@ class App extends React.Component {
<Coins
coins={this.state.balance}
decimals={this.props.network.decimals}
className="me-1"
className="me-1 d-none d-sm-inline"
/>
<CashCoin className="d-inline d-sm-none" />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>{this.state.accountName || 'Wallet'}</Dropdown.Header>
Expand Down Expand Up @@ -386,19 +393,10 @@ class App extends React.Component {
</AlertMessage>
)}
<AlertMessage message={this.state.error} variant="danger" dismissible={false} />
{!this.state.address && this.props.network && (
!this.state.keplr
? (
<AlertMessage variant="warning" dismissible={false}>
Please install the <a href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap?hl=en" target="_blank" rel="noreferrer">Keplr browser extension</a> using desktop Google Chrome.<br />WalletConnect and mobile support is coming soon.
</AlertMessage>
) : this.props.active !== 'networks' && (
<div className="mb-5 text-center">
<Button onClick={() => this.connect(true)}>
Connect Keplr
</Button>
</div>
)
{!this.state.keplr && this.state.keplrError && (
<AlertMessage variant="warning" dismissible={true} onClose={() => this.setState({keplrError: false})}>
Please install the <a href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap?hl=en" target="_blank" rel="noreferrer">Keplr browser extension</a> using desktop Google Chrome.<br />WalletConnect and mobile support is coming soon.
</AlertMessage>
)}
{this.props.active === 'networks' && (
<Networks
Expand All @@ -407,14 +405,14 @@ class App extends React.Component {
favourites={this.state.favourites}
toggleFavourite={this.toggleFavourite} />
)}
{this.props.active === 'governance' && this.state.address && (
{this.props.active === 'governance' && (
<Governance
network={this.props.network}
address={this.state.address}
queryClient={this.state.queryClient}
queryClient={this.props.queryClient}
stargateClient={this.state.stargateClient} />
)}
{this.props.active === 'delegations' && this.state.address &&
{this.props.active === 'delegations' &&
<>
<Delegations
network={this.props.network}
Expand All @@ -424,7 +422,7 @@ class App extends React.Component {
validators={this.props.validators}
validator={this.props.validator}
getBalance={this.getBalance}
queryClient={this.state.queryClient}
queryClient={this.props.queryClient}
stargateClient={this.state.stargateClient} />
</>
}
Expand Down
58 changes: 28 additions & 30 deletions src/components/DelegateForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class DelegateForm extends React.Component {
let messages = this.buildMessages(denomAmount)
let gas
try {
gas = await client.simulate(this.props.address, messages, undefined, this.modifier())
gas = await client.simulate(this.props.address, messages)
} catch (error) {
this.setState({ loading: false, error: error.message })
return
Expand Down Expand Up @@ -89,14 +89,10 @@ class DelegateForm extends React.Component {
return messages
}

modifier(){
if(this.props.undelegate) return 1.5
}

async setAvailableAmount(){
this.setState({error: undefined})
const messages = this.buildMessages(multiply(this.props.availableBalance.amount, 0.95))
this.props.stargateClient.simulate(this.props.address, messages, undefined, this.modifier()).then(gas => {
this.props.stargateClient.simulate(this.props.address, messages).then(gas => {
const saveTxFeeNum = (this.props.redelegate || this.props.undelegate) ? 0 : 10
const gasPrice = this.props.stargateClient.getFee(gas).amount[0].amount
const decimals = pow(10, this.props.network.decimals || 6)
Expand Down Expand Up @@ -131,32 +127,34 @@ class DelegateForm extends React.Component {
</Alert>
}
<Form onSubmit={this.handleSubmit}>
<Form.Group className="mb-3">
<Form.Label>Amount</Form.Label>
<div className="mb-3">
<div className="input-group">
<Form.Control name="amount" type="number" min={0} step={this.step()} placeholder="10" required={true} value={this.state.amount} onChange={this.handleInputChange} />
<span className="input-group-text">{this.denom()}</span>
<fieldset disabled={!this.props.address}>
<Form.Group className="mb-3">
<Form.Label>Amount</Form.Label>
<div className="mb-3">
<div className="input-group">
<Form.Control name="amount" type="number" min={0} step={this.step()} placeholder="10" required={true} value={this.state.amount} onChange={this.handleInputChange} />
<span className="input-group-text">{this.denom()}</span>
</div>
{this.props.availableBalance &&
<div className="form-text text-end"><span role="button" onClick={() => this.setAvailableAmount()}>
Available: <Coins coins={this.props.availableBalance} decimals={this.props.network.decimals} />
</span></div>
}
</div>
{this.props.availableBalance &&
<div className="form-text text-end"><span role="button" onClick={() => this.setAvailableAmount()}>
Available: <Coins coins={this.props.availableBalance} decimals={this.props.network.decimals} />
</span></div>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Memo</Form.Label>
<Form.Control name="memo" as="textarea" rows={3} value={this.state.memo} onChange={this.handleInputChange} />
</Form.Group>
<p className="text-end">
{!this.state.loading
? <Button type="submit" className="btn btn-primary">{this.actionText()}</Button>
: <Button className="btn btn-primary" type="button" disabled>
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;
</Button>
}
</div>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Memo</Form.Label>
<Form.Control name="memo" as="textarea" rows={3} value={this.state.memo} onChange={this.handleInputChange} />
</Form.Group>
<p className="text-end">
{!this.state.loading
? <Button type="submit" className="btn btn-primary">{this.actionText()}</Button>
: <Button className="btn btn-primary" type="button" disabled>
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;
</Button>
}
</p>
</p>
</fieldset>
</Form>
</>
)
Expand Down
Loading

0 comments on commit 1b565f0

Please sign in to comment.