0

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.

2
  • I'm not quite sure what is happening there but in general when issuing a transaction it typically takes a second or two to get a response (a transaction hash). Due to gas limits I doubt any transaction can truly run for more than 10 seconds or so. Commented Apr 18, 2019 at 6:10
  • Check your Javascript console. Most probably there has been some exception. Commented Apr 18, 2019 at 9:21

1 Answer 1

1

You probably haven't used a high enough gas price. Have a look at https://ethgasstation.info/index.php

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.