Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add Near.signAndSendTransactions #159

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: add Near.signAndSendTransactions #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/index.js
View file
Open in desktop

Large diffs are not rendered by default.

193 changes: 165 additions & 28 deletions src/lib/components/ConfirmTransactions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, { useState } from "react";
import Modal from "react-bootstrap/Modal";
import { Markdown } from "./Markdown";
import { displayGas, displayNear, Loading } from "../data/utils";
import { useNear } from "../data/near";
import { formatNearAmount } from "near-api-js/lib/utils/format";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like the implementation of the formatNearAmount. It doesn't understand yoctoNear. Let's stick with displayNear for consistency. We can fix it later

import uuid from "react-uuid";

import { displayGas, displayNear, Loading, OneNear, TGas } from "../data/utils";
import { useNear } from "../data/near";
import { Markdown } from "./Markdown";

const jsonMarkdown = (data) => {
const json = JSON.stringify(data, null, 2);
return `\`\`\`json
Expand Down Expand Up @@ -33,31 +35,166 @@ export default function ConfirmTransactions(props) {
<div>
<h4>Transaction #{i + 1}</h4>
</div>
<div>
<span className="text-secondary">Contract ID: </span>
<span className="font-monospace">
{transaction.contractName}
</span>
</div>
<div>
<span className="text-secondary">Method name: </span>
<span className="font-monospace">{transaction.methodName}</span>
</div>
{transaction.deposit && transaction.deposit.gt(0) && (
<div>
<span className="text-secondary">Deposit: </span>
<span className="font-monospace">
{displayNear(transaction.deposit)}
</span>
</div>
)}
<div>
<span className="text-secondary">Gas: </span>
<span className="font-monospace">
{displayGas(transaction.gas)}
</span>
</div>
<Markdown text={jsonMarkdown(transaction.args)} />

{transaction.actions.map((action) => (
<>
<div>
<span className="text-secondary">Action type: </span>
<span className="font-monospace">{action.type}</span>
</div>

{action.type === "FunctionCall" && (
<>
<div>
<span className="text-secondary">Contract ID: </span>
<span className="font-monospace">
{transaction.receiverId}
</span>
</div>
<div>
<span className="text-secondary">Method name: </span>
<span className="font-monospace">
{action.params.methodName}
</span>
</div>
{action.params.deposit &&
action.params.deposit !== "0" && (
<div>
<span className="text-secondary">Deposit: </span>
<span className="font-monospace">
{displayNear(action.params.deposit)}
</span>
</div>
)}
<div>
<span className="text-secondary">Gas: </span>
<span className="font-monospace">
{displayGas(action.params.gas || TGas.mul(30))}
</span>
</div>
<Markdown text={jsonMarkdown(action.params.args)} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Someone asked me to include binary data here. Not sure how we want to handle it. We can always add this later.

</>
)}

{action.type === "DeleteKey" && (
<>
<div>
<span className="text-secondary">Public key: </span>
<span className="font-monospace">
{action.params.publicKey}
</span>
</div>
</>
)}

{action.type === "Stake" && (
<>
<div>
<span className="text-secondary">Public key: </span>
<span className="font-monospace">
{action.params.publicKey}
</span>
</div>
<div>
<span className="text-secondary">Amount: </span>
<span className="font-monospace">
{formatNearAmount(action.params.stake)} NEAR
</span>
</div>
</>
)}

{action.type === "DeployContract" && (
<>
<div>
<span className="text-secondary">Code:</span>
<span className="font-monospace">
{action.params.code}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the format of the code? Should we display just the base58 hash?

</span>
</div>
</>
)}

{action.type === "DeleteAccount" && (
<>
<div>
<span className="text-secondary">Beneficiary id:</span>
<span className="font-monospace">
{action.params.beneficiaryId}
</span>
</div>
</>
)}

{action.type === "Transfer" && (
<>
<div>
<span className="text-secondary">Receiver: </span>
<span className="font-monospace">
{transaction.receiverId}
</span>
</div>
<div>
<span className="text-secondary">Amount: </span>
<span className="font-monospace">
{formatNearAmount(action.params.deposit)} NEAR
</span>
</div>
</>
)}

{action.type === "AddKey" && (
<>
<div>
<span className="text-secondary">Public key: </span>
<span className="font-monospace">
{action.params.publicKey}
</span>
</div>

{action.params.accessKey.permission === "FullAccess" ? (
<div>
<span className="font-weight-bold">
Carefully! You add a full access key; with this key
you can sign any transaction on behalf of your
account. The key has full access to your tokens.
Comment on lines +158 to +160
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should display the warning message at the top of the confirmation window.

Also display a warning message for all non default actions. E.g. contract deploy on your account, all key actions, account deletion.

</span>
</div>
) : (
<>
<div>
<span className="text-secondary">Receiver: </span>
<span className="font-monospace">
{action.params.accessKey.permission.receiverId}
</span>
</div>

<div>
<span className="text-secondary">Methods: </span>
<span className="font-monospace">
{action.params.accessKey.permission.methodNames?.join(
", "
) || "All non-payable methods"}
</span>
</div>

<div>
<span className="text-secondary">Allowance: </span>
<span className="font-monospace">
{action.params.accessKey.permission.allowance
? formatNearAmount(
action.params.accessKey.permission.allowance
)
: "0.25"}
{" NEAR"}
</span>
</div>
</>
)}
</>
)}
</>
))}
</div>
))}
</Modal.Body>
Expand Down
12 changes: 2 additions & 10 deletions src/lib/components/Widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
if (!near || !transactions || transactions.length === 0) {
return null;
}
transactions = transactions.map((t) => ({
contractName: t.contractName,
methodName: t.methodName,
args: t.args || {},
deposit: t.deposit ? Big(t.deposit) : Big(0),
gas: t.gas ? Big(t.gas) : TGas.mul(30),
}));

console.log("confirm txs", transactions);
setTransactions(transactions);
},
Expand Down Expand Up @@ -242,9 +236,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
return element !== null && element !== undefined ? (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => {
setElement(null);
}}
onReset={() => setElement(null)}
resetKeys={[element]}
>
<>
Expand Down
40 changes: 14 additions & 26 deletions src/lib/data/near.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,36 +110,24 @@ async function accountState(near, accountId) {
return await account.state();
}

async function sendTransactions(near, functionCalls) {
async function sendTransactions(near, transactions) {
try {
const wallet = await (await near.selector).wallet();
const transactions = [];
let currentTotalGas = Big(0);
functionCalls.forEach(
({ contractName, methodName, args, gas, deposit }) => {
const newTotalGas = currentTotalGas.add(gas);

const action = functionCallCreator(
methodName,
args,
gas.toFixed(0),
deposit.toFixed(0)
);
if (
transactions[transactions.length - 1]?.receiverId !== contractName ||
newTotalGas.gt(MaxGasPerTransaction)
) {
transactions.push({
receiverId: contractName,
actions: [],
});
currentTotalGas = gas;
} else {
currentTotalGas = newTotalGas;
transactions.forEach((trx) => {
trx.actions.forEach((action) => {
if (action.type === "FunctionCall") {
action.params.deposit = action.params.deposit
? new Big(action.params.deposit)
: new Big(0);

action.params.gas = action.params.gas
? new Big(action.params.gas)
: TGas.mul(30);
}
transactions[transactions.length - 1].actions.push(action);
}
);
});
});

return await wallet.signAndSendTransactions({ transactions });
} catch (e) {
// const msg = e.toString();
Expand Down
7 changes: 4 additions & 3 deletions src/lib/data/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,21 +119,22 @@ export const bigToString = (b, p, len) => {
export const displayNear = (balance) =>
!balance ? (
"???"
) : balance.eq(1) ? (
) : new Big(balance).eq(1) ? (
<>
1 <span className="text-secondary">yoctoNEAR</span>
</>
) : (
<>
{bigToString(balance.div(OneNear))}{" "}
{bigToString(new Big(balance).div(OneNear))}{" "}
<span className="text-secondary">NEAR</span>
</>
);

export const displayGas = (gas) =>
gas ? (
<>
{bigToString(gas.div(TGas))} <span className="text-secondary">TGas</span>
{bigToString(new Big(gas).div(TGas))}{" "}
<span className="text-secondary">TGas</span>
</>
) : (
"???"
Expand Down
46 changes: 39 additions & 7 deletions src/lib/vm/vm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1581,12 +1581,37 @@ export default class VM {
cacheOptions
);
},
signAndSendTransactions: (args) => {
return this.confirmTransactions(args);
},
call: (...args) => {
if (args.length === 1) {
if (isObject(args[0])) {
return this.confirmTransactions([args[0]]);
return this.confirmTransactions([
{
receiverId: args[0].contractName,
actions: [{ type: "FunctionCall", params: args[0] }],
},
]);
} else if (isArray(args[0])) {
return this.confirmTransactions(args[0]);
let transactions = [];
args[0].forEach((action) => {
const lastReceiverId =
transactions[transactions.length - 1]?.receiverId;
if (lastReceiverId !== action.contractName) {
transactions.push({
receiverId: action.contractName,
actions: [{ type: "FunctionCall", params: action }],
});
} else {
transactions[transactions.length - 1].actions.push({
type: "FunctionCall",
params: action,
});
}
Comment on lines +1601 to +1611
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You still need to limit the max gas amount per transaction. As 2FA contracts are not the issue, the max gas should be 300Tgas

});

return this.confirmTransactions(transactions);
} else {
throw new Error(
"Method: Near.call. Required argument: 'tx/txs'. A single argument call requires an TX object or an array of TX objects."
Expand All @@ -1601,11 +1626,18 @@ export default class VM {

return this.confirmTransactions([
{
contractName: args[0],
methodName: args[1],
args: args[2] ?? {},
gas: args[3],
deposit: args[4],
receiverId: args[0],
actions: [
{
type: "FunctionCall",
params: {
methodName: args[1],
args: args[2] ?? {},
gas: args[3],
deposit: args[4],
},
},
],
},
]);
}
Expand Down