I have been developing an application using a smart contract, the application is similar to this one: https://www.ethereum.org/crowdsale
I went ahead and initiated a request, below is the codebase for it:
import React, { Component } from "react";
import { Form, Button, Message, Input } from "semantic-ui-react";
import Campaign from "../../../ethereum/campaign";
import web3 from "../../../ethereum/web3";
import { Link, Router } from "../../../routes";
import Layout from "../../../components/Layout";
class RequestNew extends Component {
state = {
value: "",
description: "",
recipient: "",
loading: false,
errorMessage: ""
};
static async getInitialProps(props) {
const { address } = props.query;
return { address };
}
onSubmit = async event => {
event.preventDefault();
const campaign = Campaign(this.props.address);
const { description, value, recipient } = this.state;
this.setState({ loading: true, errorMessage: "" });
try {
const accounts = await web3.eth.getAccounts();
await campaign.methods
.createRequest(description, web3.utils.toWei(value, "ether"), recipient)
.send({ from: accounts[0] });
Router.pushRoute(`/campaigns/${this.props.address}/requests`);
} catch (err) {
this.setState({ errorMessage: err.message });
}
this.setState({ loading: false });
};
render() {
return (
<Layout>
<Link route={`/campaigns/${this.props.address}/requests`}>
<a>Back</a>
</Link>
<h3>Create a Request</h3>
<Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
<Form.Field>
<label>Description</label>
<Input
value={this.state.description}
onChange={event =>
this.setState({ description: event.target.value })
}
/>
</Form.Field>
<Form.Field>
<label>Value in Ether</label>
<Input
value={this.state.value}
onChange={event => this.setState({ value: event.target.value })}
/>
</Form.Field>
<Form.Field>
<label>Recipient</label>
<Input
value={this.state.recipient}
onChange={event =>
this.setState({ recipient: event.target.value })
}
/>
</Form.Field>
<Message error header="Oops!" content={this.state.errorMessage} />
<Button primary loading={this.state.loading}>
Create!
</Button>
</Form>
</Layout>
);
}
}
export default RequestNew;
The button has a spinner that has been spinning now for over 20 minutes since the request was initiated.
I go over to Metamask and I am still seeing Contract Interaction in Pending status with a time of 21:51.
The last transaction I initiated the last time I was developing this application only took 14:47.
How long should it take? Is this the norm? How much longer should I wait? What are my options?
This is just testing on the Rinkeby Test Network by the way, so I am not so much concerned about loss as I am about time spent in pending status.