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

Increase line length to 100 and set traling comma

Browse Source
This commit is contained in:
Simon Warta
2022-01-12 23:22:40 +01:00
parent c8c4eed282
commit 1b8b0740ac
15 changed files with 66 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+1 -4
View File
@@ -27,10 +27,7 @@ module.exports = {
"no-console": "off",
"no-param-reassign": "warn",
"no-shadow": "warn",
"no-unused-vars": [
"warn",
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
],
"no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
"prefer-const": "warn",
radix: ["warn", "always"],
"spaced-comment": ["warn", "always"],
.prettierrc.json
+4
View File
@@ -0,0 +1,4 @@
{
"printWidth": 100,
"trailingComma": "all"
}
components/DevHelper.js
+2 -6
View File
@@ -12,9 +12,7 @@ const DevHelper = (_props) => (
<a href="/create">Create Multisig</a>
</li>
<li>
<a href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22">
View Multisig
</a>
<a href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22">View Multisig</a>
</li>
<li>
<a href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22/transaction/295630000375202310">
@@ -22,9 +20,7 @@ const DevHelper = (_props) => (
</a>
</li>
</ul>
<a href="https://github.com/samepant/cosmoshub-legacy-multisig">
View on Github
</a>
<a href="https://github.com/samepant/cosmoshub-legacy-multisig">View on Github</a>
<style jsx>{`
.dev-helper {
components/dataViews/ThresholdInfo.js
+2 -2
View File
@@ -7,8 +7,8 @@ const ThresholdInfo = ({ signatures, account }) => (
<h2>Signatures</h2>
<StackableContainer lessPadding lessMargin lessRadius>
<p>
Once the number of required signatures have been created, this
transaction will be ready to broadcast.
Once the number of required signatures have been created, this transaction will be ready to
broadcast.
</p>
</StackableContainer>
<StackableContainer lessPadding lessMargin lessRadius>
components/forms/FindMultisigForm.js
+4 -12
View File
@@ -34,9 +34,8 @@ class FindMultisigForm extends React.Component {
<StackableContainer>
<StackableContainer lessPadding>
<p>
Already have a multisig address? Enter it below. If it’s a valid
address, you will be able to view its transactions and create new
ones.
Already have a multisig address? Enter it below. If it’s a valid address, you will be
able to view its transactions and create new ones.
</p>
</StackableContainer>
<StackableContainer lessPadding lessMargin>
@@ -47,18 +46,11 @@ class FindMultisigForm extends React.Component {
name="address"
placeholder={exampleAddress()}
/>
<Button
label="Use this Multisig"
onClick={this.handleSearch}
primary
/>
<Button label="Use this Multisig" onClick={this.handleSearch} primary />
</StackableContainer>
<StackableContainer lessPadding>
<p className="create-help">Don't have a multisig?</p>
<Button
label="Create New Multisig"
onClick={() => this.props.router.push("create")}
/>
<Button label="Create New Multisig" onClick={() => this.props.router.push("create")} />
</StackableContainer>
<style jsx>{`
.multisig-form {
components/forms/MultisigForm.js
+11 -29
View File
@@ -26,9 +26,7 @@ class MultiSigForm extends React.Component {
handleChangeThreshold(e) {
const threshold =
e.target.value <= this.state.pubkeys.length
? e.target.value
: this.state.pubkeys.length;
e.target.value <= this.state.pubkeys.length ? e.target.value : this.state.pubkeys.length;
this.setState({ threshold });
}
@@ -47,10 +45,7 @@ class MultiSigForm extends React.Component {
const pubkeys = Array.from(prevState.pubkeys);
pubkeys.splice(index, 1);
const threshold =
prevState.threshold > pubkeys.length
? pubkeys.length
: prevState.threshold;
const threshold = prevState.threshold > pubkeys.length ? pubkeys.length : prevState.threshold;
return { pubkeys, threshold };
});
@@ -63,7 +58,7 @@ class MultiSigForm extends React.Component {
console.log(accountOnChain);
if (!accountOnChain || !accountOnChain.pubkey) {
throw new Error(
"Account has no pubkey on chain, this address will need to send a transaction to appear on chain."
"Account has no pubkey on chain, this address will need to send a transaction to appear on chain.",
);
}
return accountOnChain.pubkey.value;
@@ -101,14 +96,12 @@ class MultiSigForm extends React.Component {
async handleCreate() {
this.setState({ processing: true });
const compressedPubkeys = this.state.pubkeys.map(
(item) => item.compressedPubkey
);
const compressedPubkeys = this.state.pubkeys.map((item) => item.compressedPubkey);
let multisigAddress;
try {
multisigAddress = await createMultisigFromCompressedSecp256k1Pubkeys(
compressedPubkeys,
parseInt(this.state.threshold, 10)
parseInt(this.state.threshold, 10),
);
this.props.router.push(`/multi/${multisigAddress}`);
} catch (error) {
@@ -148,31 +141,20 @@ class MultiSigForm extends React.Component {
this.handleKeyGroupChange(index, e);
}}
value={
pubkeyGroup.isPubkey
? pubkeyGroup.compressedPubkey
: pubkeyGroup.address
}
label={
pubkeyGroup.isPubkey
? "Public Key (Secp256k1)"
: "Address"
pubkeyGroup.isPubkey ? pubkeyGroup.compressedPubkey : pubkeyGroup.address
}
label={pubkeyGroup.isPubkey ? "Public Key (Secp256k1)" : "Address"}
name={pubkeyGroup.isPubkey ? "compressedPubkey" : "address"}
width="100%"
placeholder={
pubkeyGroup.isPubkey
? examplePubkey(index)
: exampleAddress(index)
pubkeyGroup.isPubkey ? examplePubkey(index) : exampleAddress(index)
}
error={pubkeyGroup.keyError}
onBlur={(e) => {
this.handleKeyBlur(index, e);
}}
/>
<button
className="toggle-type"
onClick={() => this.togglePubkey(index)}
>
<button className="toggle-type" onClick={() => this.togglePubkey(index)}>
Use {pubkeyGroup.isPubkey ? "Address" : "Public Key"}
</button>
</div>
@@ -194,8 +176,8 @@ class MultiSigForm extends React.Component {
<StackableContainer lessPadding lessMargin>
<p>
This means that each transaction this multisig makes will require{" "}
{this.state.threshold} of the members to sign it for it to be
accepted by the validators.
{this.state.threshold} of the members to sign it for it to be accepted by the
validators.
</p>
</StackableContainer>
</StackableContainer>
components/forms/TransactionForm.js
+3 -9
View File
@@ -33,7 +33,7 @@ class TransactionForm extends React.Component {
createTransaction(toAddress, amount, gas) {
const amountInAtomics = Decimal.fromUserInput(
amount,
Number(process.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT)
Number(process.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT),
).atomics;
const msgSend = {
fromAddress: this.props.address,
@@ -70,18 +70,12 @@ class TransactionForm extends React.Component {
}
this.setState({ processing: true });
const tx = this.createTransaction(
this.state.toAddress,
this.state.amount,
this.state.gas
);
const tx = this.createTransaction(this.state.toAddress, this.state.amount, this.state.gas);
console.log(tx);
const dataJSON = JSON.stringify(tx);
const res = await axios.post("/api/transaction", { dataJSON });
const { transactionID } = res.data;
this.props.router.push(
`${this.props.address}/transaction/${transactionID}`
);
this.props.router.push(`${this.props.address}/transaction/${transactionID}`);
}
render() {
components/forms/TransactionSigning.js
+9 -24
View File
@@ -33,9 +33,7 @@ export default class TransactionSigning extends React.Component {
async handleBroadcast() {
this.setState({ processing: true });
const res = await axios.get(
`/api/transaction/${this.state.transaction.uuid}/broadcast`
);
const res = await axios.get(`/api/transaction/${this.state.transaction.uuid}/broadcast`);
this.setState({
transaction: res.data,
@@ -50,11 +48,9 @@ export default class TransactionSigning extends React.Component {
async connectWallet() {
try {
await window.keplr.enable(process.env.NEXT_PUBLIC_CHAIN_ID);
const walletAccount = await window.keplr.getKey(
process.env.NEXT_PUBLIC_CHAIN_ID
);
const walletAccount = await window.keplr.getKey(process.env.NEXT_PUBLIC_CHAIN_ID);
const hasSigned = this.props.signatures.some(
(sig) => sig.address === walletAccount.bech32Address
(sig) => sig.address === walletAccount.bech32Address,
);
this.setState({ walletAccount, hasSigned });
} catch (e) {
@@ -71,9 +67,7 @@ export default class TransactionSigning extends React.Component {
disableBalanceCheck: true,
},
};
const offlineSigner = window.getOfflineSignerOnlyAmino(
process.env.NEXT_PUBLIC_CHAIN_ID
);
const offlineSigner = window.getOfflineSignerOnlyAmino(process.env.NEXT_PUBLIC_CHAIN_ID);
const signingClient = await SigningStargateClient.offline(offlineSigner);
const signerData = {
accountNumber: this.props.tx.accountNumber,
@@ -85,13 +79,13 @@ export default class TransactionSigning extends React.Component {
this.props.tx.msgs,
this.props.tx.fee,
this.props.tx.memo,
signerData
signerData,
);
// check existing signatures
const bases64EncodedSignature = toBase64(signatures[0]);
const bases64EncodedBodyBytes = toBase64(bodyBytes);
const prevSigMatch = this.props.signatures.findIndex(
(signature) => signature.signature === bases64EncodedSignature
(signature) => signature.signature === bases64EncodedSignature,
);
if (prevSigMatch > -1) {
@@ -104,7 +98,7 @@ export default class TransactionSigning extends React.Component {
};
const _res = await axios.post(
`/api/transaction/${this.props.transactionID}/signature`,
signature
signature,
);
this.props.addSignature(signature);
this.setState({ hasSigned: true });
@@ -120,11 +114,7 @@ export default class TransactionSigning extends React.Component {
{this.state.hasSigned ? (
<StackableContainer lessPadding lessMargin lessRadius>
<div className="confirmation">
<svg
viewBox="0 0 77 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 77 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 30L26 51L72 5" stroke="white" strokeWidth="12" />
</svg>
<p>You've signed this transaction.</p>
@@ -150,12 +140,7 @@ export default class TransactionSigning extends React.Component {
<h2>Current Signers</h2>
<StackableContainer lessPadding lessMargin lessRadius>
{this.props.signatures.map((signature, i) => (
<StackableContainer
lessPadding
lessRadius
lessMargin
key={`${signature.address}_${i}`}
>
<StackableContainer lessPadding lessRadius lessMargin key={`${signature.address}_${i}`}>
<HashView hash={signature.address} />
</StackableContainer>
))}
components/head.js
+3 -10
View File
@@ -2,25 +2,18 @@ import React from "react";
import NextHead from "next/head";
import { string } from "prop-types";
const defaultDescription =
"*:;;;:*:;;;:**:;;;:*:;;;:*COSMOS MULTISIGN*:;;;:*:;;;:**:;;;:*:;;;:*";
const defaultDescription = "*:;;;:*:;;;:**:;;;:*:;;;:*COSMOS MULTISIGN*:;;;:*:;;;:**:;;;:*:;;;:*";
const defaultOGURL = "";
const Head = (props) => (
<NextHead>
<meta charSet="UTF-8" />
<title>{props.title || ""}</title>
<meta
name="description"
content={props.description || defaultDescription}
/>
<meta name="description" content={props.description || defaultDescription} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:url" content={props.url || defaultOGURL} />
<meta property="og:title" content={props.title || ""} />
<meta
property="og:description"
content={props.description || defaultDescription}
/>
<meta property="og:description" content={props.description || defaultDescription} />
</NextHead>
);
components/layout/Page.js
+5 -15
View File
@@ -12,9 +12,7 @@ const Page = (props) => {
<div className="nav">
<StackableContainer base lessPadding lessMargin>
<p>
<a href={`/multi/${props.rootMultisig}`}>
← Back to multisig account
</a>
<a href={`/multi/${props.rootMultisig}`}>← Back to multisig account</a>
</p>
</StackableContainer>
</div>
@@ -24,9 +22,7 @@ const Page = (props) => {
<div className="footer-links">
<StackableContainer base lessPadding lessMargin>
<p>
<a href="https://github.com/samepant/cosmoshub-legacy-multisig">
View on github
</a>
<a href="https://github.com/samepant/cosmoshub-legacy-multisig">View on github</a>
</p>
</StackableContainer>
</div>
@@ -57,17 +53,11 @@ const Page = (props) => {
`}</style>
<style global jsx>{`
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: white;
min-height: 100vh;
background: linear-gradient(
240.16deg,
#3f023c 10.46%,
#561253 54.88%,
#580a55 94.89%
);
background: linear-gradient(240.16deg, #3f023c 10.46%, #561253 54.88%, #580a55 94.89%);
font-size: 16px;
margin: 0;
}
lib/displayHelpers.js
+1 -3
View File
@@ -66,9 +66,7 @@ const printableCoins = (coins) => {
*/
const exampleAddress = (index) => {
const usedIndex = index || 0;
let data = Bech32.decode(
"cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq"
).data;
let data = Bech32.decode("cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq").data;
for (let i = 0; i < usedIndex; ++i) {
data = sha512(data).slice(0, data.length); // hash one time and trim to original length
}
lib/multisigHelpers.js
+3 -11
View File
@@ -11,10 +11,7 @@ import { getMultisig } from "./graphqlHelpers";
* @param {number} threshold the number of signers required to sign messages from this multisig
* @return {string} The multisig address.
*/
const createMultisigFromCompressedSecp256k1Pubkeys = async (
compressedPubkeys,
threshold
) => {
const createMultisigFromCompressedSecp256k1Pubkeys = async (compressedPubkeys, threshold) => {
const pubkeys = compressedPubkeys.map((compressedPubkey) => {
return {
type: "tendermint/PubKeySecp256k1",
@@ -22,10 +19,7 @@ const createMultisigFromCompressedSecp256k1Pubkeys = async (
};
});
const multisigPubkey = createMultisigThresholdPubkey(pubkeys, threshold);
const multisigAddress = pubkeyToAddress(
multisigPubkey,
process.env.NEXT_PUBLIC_ADDRESS_PREFIX
);
const multisigAddress = pubkeyToAddress(multisigPubkey, process.env.NEXT_PUBLIC_ADDRESS_PREFIX);
// save multisig to fauna
const multisig = {
@@ -57,9 +51,7 @@ const getMultisigAccount = async (address, client) => {
const res = await getMultisig(address);
if (!res.data.data.getMultisig) {
throw new Error(
"Multisig has no pubkey on node, and was not created using this tool."
);
throw new Error("Multisig has no pubkey on node, and was not created using this tool.");
}
const pubkey = JSON.parse(res.data.data.getMultisig.pubkeyJSON);
pages/api/transaction/index.js
+1 -3
View File
@@ -8,9 +8,7 @@ export default async function (req, res) {
console.log("Function `createTransaction` invoked", data);
const saveRes = await createTransaction(data.dataJSON);
console.log("success", saveRes.data);
res
.status(200)
.send({ transactionID: saveRes.data.data.createTransaction._id });
res.status(200).send({ transactionID: saveRes.data.data.createTransaction._id });
return;
} catch (err) {
console.log(err);
pages/multi/[address]/index.js
+9 -15
View File
@@ -12,14 +12,9 @@ import TransactionForm from "../../../components/forms/TransactionForm";
export async function getServerSideProps(context) {
try {
const client = await StargateClient.connect(
process.env.NEXT_PUBLIC_NODE_ADDRESS
);
const client = await StargateClient.connect(process.env.NEXT_PUBLIC_NODE_ADDRESS);
const multisigAddress = context.params.address;
const holdings = await client.getBalance(
multisigAddress,
process.env.NEXT_PUBLIC_DENOM
);
const holdings = await client.getBalance(multisigAddress, process.env.NEXT_PUBLIC_DENOM);
const accountOnChain = await getMultisigAccount(multisigAddress, client);
return {
props: { accountOnChain, holdings },
@@ -49,14 +44,13 @@ const multipage = (props) => {
<StackableContainer>
<div className="multisig-error">
<p>
This multisig address's pubkeys are not available, and so it
cannot be used with this tool.
This multisig address's pubkeys are not available, and so it cannot be used with
this tool.
</p>
<p>
You can recreate it with this tool here, or sign and broadcast a
transaction with the tool you used to create it. Either option
will make the pubkeys accessible and will allow this tool to use
this multisig fully.
You can recreate it with this tool here, or sign and broadcast a transaction with
the tool you used to create it. Either option will make the pubkeys accessible and
will allow this tool to use this multisig fully.
</p>
</div>
</StackableContainer>
@@ -78,8 +72,8 @@ const multipage = (props) => {
<StackableContainer lessPadding>
<h2>New transaction</h2>
<p>
Once a transaction is created, it can be signed by the
multisig members, and then broadcast.
Once a transaction is created, it can be signed by the multisig members, and then
broadcast.
</p>
<Button
label="Create Transaction"
pages/multi/[address]/transaction/[transactionID].js
+8 -24
View File
@@ -79,13 +79,11 @@ const transactionPage = ({
txInfo.sequence,
txInfo.fee,
bodyBytes,
new Map(
currentSignatures.map((s) => [s.address, fromBase64(s.signature)])
)
new Map(currentSignatures.map((s) => [s.address, fromBase64(s.signature)])),
);
const broadcaster = await StargateClient.connect(nodeAddress);
const result = await broadcaster.broadcastTx(
Uint8Array.from(TxRaw.encode(signedTx).finish())
Uint8Array.from(TxRaw.encode(signedTx).finish()),
);
console.log(result);
const _res = await axios.post(`/api/transaction/${transactionID}`, {
@@ -102,38 +100,24 @@ const transactionPage = ({
<Page rootMultisig={multisigAddress}>
<StackableContainer base>
<StackableContainer>
<h1>
{transactionHash
? "Completed Transaction"
: "In Progress Transaction"}
</h1>
<h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>
</StackableContainer>
{transactionHash && (
<CompletedTransaction transactionHash={transactionHash} />
)}
{transactionHash && <CompletedTransaction transactionHash={transactionHash} />}
<TransactionInfo tx={txInfo} />
{!transactionHash && (
<ThresholdInfo
signatures={currentSignatures}
account={accountOnChain}
/>
<ThresholdInfo signatures={currentSignatures} account={accountOnChain} />
)}
{currentSignatures.length >=
parseInt(accountOnChain.pubkey.value.threshold, 10) &&
{currentSignatures.length >= parseInt(accountOnChain.pubkey.value.threshold, 10) &&
!transactionHash && (
<>
<Button
label={
isBroadcasting ? "Broadcasting..." : "Broadcast Transaction"
}
label={isBroadcasting ? "Broadcasting..." : "Broadcast Transaction"}
onClick={broadcastTx}
primary
disabled={isBroadcasting}
/>
{broadcastError && (
<div className="broadcast-error">{broadcastError}</div>
)}
{broadcastError && <div className="broadcast-error">{broadcastError}</div>}
</>
)}
{!transactionHash && (