cerc-io/cosmos-multisig-ui
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Add loading state to form buttons

Browse Source
This commit is contained in:
abefernan 2023-04-17 16:50:14 +02:00
parent a6082905c7
commit f0ff98cd7e
6 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/forms/DelegationForm.tsx
View File

@ -3,7 +3,7 @@ import { Account, calculateFee } from "@cosmjs/stargate";
import { assert } from "@cosmjs/utils";
import axios from "axios";
import { NextRouter, withRouter } from "next/router";
import React, { useState } from "react";
import { useState } from "react";
import { useAppContext } from "../../context/AppContext";
import { checkAddress, exampleValidatorAddress } from "../../lib/displayHelpers";
import Button from "../inputs/Button";
@ -24,7 +24,7 @@ const DelegationForm = (props: Props) => {
const [memo, setMemo] = useState("");
const [gas, setGas] = useState(200000);
const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
const [_processing, setProcessing] = useState(false);
const [processing, setProcessing] = useState(false);
const [addressError, setAddressError] = useState("");
const createTransaction = (txValidatorAddress: string, txAmount: string, gasLimit: number) => {
@ -130,7 +130,7 @@ const DelegationForm = (props: Props) => {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
/>
</div>
<Button label="Delegate" onClick={handleCreate} />
<Button label="Delegate" onClick={handleCreate} loading={processing} />
<style jsx>{`
p {
margin-top: 15px;

19
components/forms/MultisigForm.tsx
View File

@ -1,15 +1,14 @@
import React, { useState } from "react";
import { withRouter, NextRouter } from "next/router";
import { StargateClient } from "@cosmjs/stargate";
import { assert } from "@cosmjs/utils";
import { NextRouter, withRouter } from "next/router";
import { useState } from "react";
import { useAppContext } from "../../context/AppContext";
import Button from "../inputs/Button";
import { createMultisigFromCompressedSecp256k1Pubkeys } from "../../lib/multisigHelpers";
import Input from "../inputs/Input";
import StackableContainer from "../layout/StackableContainer";
import ThresholdInput from "../inputs/ThresholdInput";
import { exampleAddress, examplePubkey } from "../../lib/displayHelpers";
import { createMultisigFromCompressedSecp256k1Pubkeys } from "../../lib/multisigHelpers";
import Button from "../inputs/Button";
import Input from "../inputs/Input";
import ThresholdInput from "../inputs/ThresholdInput";
import StackableContainer from "../layout/StackableContainer";
const emptyPubKeyGroup = () => {
return { address: "", compressedPubkey: "", keyError: "", isPubkey: false };
@ -23,7 +22,7 @@ const MultiSigForm = (props: Props) => {
const { state } = useAppContext();
const [pubkeys, setPubkeys] = useState([emptyPubKeyGroup(), emptyPubKeyGroup()]);
const [threshold, setThreshold] = useState(2);
const [_processing, setProcessing] = useState(false);
const [processing, setProcessing] = useState(false);
const handleChangeThreshold = (e: React.ChangeEvent<HTMLInputElement>) => {
let newThreshold = parseInt(e.target.value, 10);
@ -195,7 +194,7 @@ const MultiSigForm = (props: Props) => {
</p>
</StackableContainer>
</StackableContainer>
<Button primary onClick={handleCreate} label="Create Multisig" />
<Button primary onClick={handleCreate} label="Create Multisig" loading={processing} />
<style jsx>{`
.key-inputs {
display: flex;

4
components/forms/ReDelegationForm.tsx
View File

@ -25,7 +25,7 @@ const ReDelegationForm = (props: Props) => {
const [memo, setMemo] = useState("");
const [gas, setGas] = useState(300000);
const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
const [_processing, setProcessing] = useState(false);
const [processing, setProcessing] = useState(false);
const [addressErrors, setAddressErrors] = useState({ src: "", dst: "" });
const createTransaction = (
@ -158,7 +158,7 @@ const ReDelegationForm = (props: Props) => {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
/>
</div>
<Button label="ReDelegate" onClick={handleCreate} />
<Button label="ReDelegate" onClick={handleCreate} loading={processing} />
<style jsx>{`
p {
margin-top: 15px;

4
components/forms/RewardsForm.tsx
View File

@ -22,7 +22,7 @@ const RewardsForm = (props: Props) => {
const [memo, setMemo] = useState("");
const [gas, setGas] = useState(200000);
const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
const [_processing, setProcessing] = useState(false);
const [processing, setProcessing] = useState(false);
const [addressError, setAddressError] = useState("");
const createTransaction = (txValidatorAddress: string, gasLimit: number) => {
@ -111,7 +111,7 @@ const RewardsForm = (props: Props) => {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
/>
</div>
<Button label="Claim Rewards" onClick={handleCreate} />
<Button label="Claim Rewards" onClick={handleCreate} loading={processing} />
<style jsx>{`
p {
margin-top: 15px;

15
components/forms/TransactionForm.tsx
View File

@ -1,15 +1,14 @@
import axios from "axios";
import { Account, calculateFee } from "@cosmjs/stargate";
import { Decimal } from "@cosmjs/math";
import { Account, calculateFee } from "@cosmjs/stargate";
import { assert } from "@cosmjs/utils";
import React, { useState } from "react";
import { withRouter, NextRouter } from "next/router";
import axios from "axios";
import { NextRouter, withRouter } from "next/router";
import { useState } from "react";
import { useAppContext } from "../../context/AppContext";
import { checkAddress, exampleAddress } from "../../lib/displayHelpers";
import Button from "../inputs/Button";
import Input from "../inputs/Input";
import StackableContainer from "../layout/StackableContainer";
import { checkAddress, exampleAddress } from "../../lib/displayHelpers";
interface Props {
address: string | null;
@ -25,7 +24,7 @@ const TransactionForm = (props: Props) => {
const [memo, setMemo] = useState("");
const [gas, setGas] = useState(200000);
const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
const [_processing, setProcessing] = useState(false);
const [processing, setProcessing] = useState(false);
const [addressError, setAddressError] = useState("");
const createTransaction = (txToAddress: string, txAmount: string, gasLimit: number) => {
@ -130,7 +129,7 @@ const TransactionForm = (props: Props) => {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
/>
</div>
<Button label="Create Transaction" onClick={handleCreate} />
<Button label="Create Transaction" onClick={handleCreate} loading={processing} />
<style jsx>{`
p {
margin-top: 15px;

4
components/forms/UnDelegationForm.tsx
View File

@ -24,7 +24,7 @@ const UnDelegationForm = (props: Props) => {
const [memo, setMemo] = useState("");
const [gas, setGas] = useState(300000);
const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
const [_processing, setProcessing] = useState(false);
const [processing, setProcessing] = useState(false);
const [addressError, setAddressError] = useState("");
const createTransaction = (txValidatorAddress: string, txAmount: string, gasLimit: number) => {
@ -130,7 +130,7 @@ const UnDelegationForm = (props: Props) => {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
/>
</div>
<Button label="UnDelegate" onClick={handleCreate} />
<Button label="UnDelegate" onClick={handleCreate} loading={processing} />
<style jsx>{`
p {
margin-top: 15px;