modal UI overhaul and added insufficient balance checks for trial acc…

…ounts
keypom · Apr 17, 2023 · a6864b4 · a6864b4
1 parent d8478ee
commit a6864b4
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 19 deletions.
diff --git a/docs-advanced-tutorials/trial-accounts/create-trial-drop.js b/docs-advanced-tutorials/trial-accounts/create-trial-drop.js
@@ -10,7 +10,7 @@ const {
 	createTrialAccountDrop
 } = keypom
 
-const funderAccountId = 'md1.testnet';
+const funderAccountId = 'benjiman.testnet';
 const NETWORK_ID = 'testnet';
 async function createTrialAccount() {
 	// Initiate connection to the NEAR blockchain.
@@ -56,12 +56,12 @@ async function createTrialAccount() {
         numKeys: 1,
         contractBytes: [...readFileSync(wasmDirectory)],
 		// How much $NEAR should be made available to the trial account when it's created?
-        startingBalanceNEAR: 2.5,
+        startingBalanceNEAR: 0.05,
         callableContracts,
         callableMethods,
         maxAttachableNEARPerContract,
 		// Once the trial account has spent this much $NEAR, the trial will be over.
-        trialEndFloorNEAR: 1.25
+        trialEndFloorNEAR: .01
     })
 
     const guestBookInstance = "http://localhost:1234"

diff --git a/docs-advanced-tutorials/trial-accounts/ext-wasm/trial-accounts.wasm b/docs-advanced-tutorials/trial-accounts/ext-wasm/trial-accounts.wasm
diff --git a/docs-advanced-tutorials/trial-accounts/guest-book/keypom-data.js b/docs-advanced-tutorials/trial-accounts/guest-book/keypom-data.js
diff --git a/src/index.ts b/src/index.ts
@@ -43,6 +43,9 @@ export {
 	trialCallMethod,
 	canExitTrial
 } from "./lib/trial-accounts/trial-active";
+export {
+	wrapTxnParamsForTrial
+} from "./lib/trial-accounts/utils";
 export {
 	addKeys,
 	deleteKeys

diff --git a/src/lib/selector/core/wallet.ts b/src/lib/selector/core/wallet.ts
@@ -187,11 +187,21 @@ export class KeypomWallet implements InstantLinkWalletBehaviour {
             console.log(`e: ${JSON.stringify(e)}`)
             switch (e) {
                 case TRIAL_ERRORS.EXIT_EXPECTED: {
-                    this.modal.show({id: MODAL_TYPE_IDS.TRIAL_OVER});
+                    this.modal.show({
+                        id: MODAL_TYPE_IDS.TRIAL_OVER, 
+                        meta: {
+                            accountId: this.trialAccountId!,
+                            secretKey: this.trialSecretKey!
+                        }
+                    });
                     break;
                 }
                 case TRIAL_ERRORS.INVALID_ACTION: {
-                    this.modal.show({id: MODAL_TYPE_IDS.ERROR});
+                    this.modal.show({id: MODAL_TYPE_IDS.ACTION_ERROR});
+                    break;
+                }
+                case TRIAL_ERRORS.INSUFFICIENT_BALANCE: {
+                    this.modal.show({id: MODAL_TYPE_IDS.INSUFFICIENT_BALANCE});
                     break;
                 }
                 default: {

diff --git a/src/lib/selector/modal/src/lib/components/InsufficientBalance.tsx b/src/lib/selector/modal/src/lib/components/InsufficientBalance.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { MODAL_DEFAULTS } from "../modal.types";
+import { MainBody } from "./MainBody";
+
+interface InsufficientBalanceProps {
+    hide: () => void;
+}
+
+export const InsufficientBalance: React.FC<InsufficientBalanceProps> = ({
+    hide
+}) => {
+    return (
+        <div className="nws-modal" style={{ width: "70%", height: "27%" }}>
+            <div className="modal-right" style={{ width: "100%" }}>
+                <MainBody
+                    title={MODAL_DEFAULTS.insufficientBalance.title}
+                    body={MODAL_DEFAULTS.insufficientBalance.body}
+                    headerOne={null}
+                    headerTwo={null}
+                    onCloseModal={() =>
+                        hide()
+                    }
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/src/lib/selector/modal/src/lib/components/InvalidActions.tsx b/src/lib/selector/modal/src/lib/components/InvalidActions.tsx
@@ -13,8 +13,8 @@ export const InvalidActions: React.FC<InvalidActionsProps> = ({
         <div className="nws-modal" style={{ width: "70%", height: "27%" }}>
             <div className="modal-right" style={{ width: "100%" }}>
                 <MainBody
-                    title={MODAL_DEFAULTS.error.title}
-                    body={MODAL_DEFAULTS.error.body}
+                    title={MODAL_DEFAULTS.invalidAction.title}
+                    body={MODAL_DEFAULTS.invalidAction.body}
                     headerOne={null}
                     headerTwo={null}
                     onCloseModal={() =>

diff --git a/src/lib/selector/modal/src/lib/handleModalType.tsx b/src/lib/selector/modal/src/lib/handleModalType.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { ClaimTrial } from "./components/ClaimTrial";
+import { InsufficientBalance } from "./components/InsufficientBalance";
 import { InvalidActions } from "./components/InvalidActions";
 import { TrialOver } from "./components/TrialOver";
 import { ModalOptions, ModalType, MODAL_TYPE_IDS } from "./modal.types";
@@ -11,8 +12,8 @@ export const renderModalType = (modalType: ModalType, options: ModalOptions, hid
         <TrialOver
           modulesTitle={options.modulesTitle}
           modules={options.modules}
-          accountId={options.accountId}
-          secretKey={options.secretKey}
+          accountId={modalType.meta.accountId}
+          secretKey={modalType.meta.secretKey}
           mainTitle={options.mainTitle}
           mainBody={options.mainBody}
           headerOne={options.headerOne}
@@ -21,8 +22,10 @@ export const renderModalType = (modalType: ModalType, options: ModalOptions, hid
           hide={hide}
         />
       )
-    case MODAL_TYPE_IDS.ERROR:
+    case MODAL_TYPE_IDS.ACTION_ERROR:
       return <InvalidActions hide={hide} />
+    case MODAL_TYPE_IDS.INSUFFICIENT_BALANCE:
+      return <InsufficientBalance hide={hide} />
     case MODAL_TYPE_IDS.CLAIM_TRIAL:
       return <ClaimTrial hide={hide} secretKey={modalType.meta.secretKey} redirectUrlBase={modalType.meta.redirectUrlBase} delimiter={modalType.meta.delimiter}/>
     default: return null;

diff --git a/src/lib/selector/modal/src/lib/modal.types.ts b/src/lib/selector/modal/src/lib/modal.types.ts
@@ -48,7 +48,8 @@ export interface ModalType {
 export const MODAL_TYPE_IDS = {
   CLAIM_TRIAL: "claim-trial",
   TRIAL_OVER: "trial-over",
-  ERROR: "action-error"
+  ACTION_ERROR: "action-error",
+  INSUFFICIENT_BALANCE: "insufficient-balance"
 }
 export const MODAL_DEFAULTS = {
   claimTrial: {
@@ -74,8 +75,12 @@ export const MODAL_DEFAULTS = {
       modulesTitle: "Choose a Wallet",
     }
   },
-  error: {
+  invalidAction: {
     title: "Invalid Action",
     body: "Your trial does not allow you to perform this action. For more information, please contact the site administrator."
+  },
+  insufficientBalance: {
+    title: "Insufficient Balance",
+    body: "Your account does not have enough balance for the action you are trying to perform. Please try again with a different action. For more information, please contact the site administrator."
   }
 }
diff --git a/src/lib/trial-accounts/trial-active.ts b/src/lib/trial-accounts/trial-active.ts
@@ -2,7 +2,7 @@ import { FinalExecutionOutcome } from "@near-wallet-selector/core";
 import { KeyPair } from "near-api-js";
 import { getEnv } from "../keypom";
 import { createTransactions } from "../keypom-utils";
-import { estimateTrialGas, generateExecuteArgs, TRIAL_ERRORS, validateDesiredMethods } from "./utils";
+import { estimateTrialGas, generateExecuteArgs, hasEnoughBalance, TRIAL_ERRORS, validateDesiredMethods } from "./utils";
 
 
 /**
@@ -133,7 +133,7 @@ export const trialSignAndSendTxns = async ({
 		throw TRIAL_ERRORS.EXIT_EXPECTED;
 	}
 
-	const {methodDataToValidate, executeArgs} = await generateExecuteArgs({desiredTxns: txns});
+	const {methodDataToValidate, executeArgs, totalAttachedYocto, totalGasForTxns} = await generateExecuteArgs({desiredTxns: txns});
 
 	const isValidTxn = await validateDesiredMethods({methodData: methodDataToValidate, trialAccountId});
 	console.log('isValidTxn: ', isValidTxn)
@@ -142,6 +142,11 @@ export const trialSignAndSendTxns = async ({
 		throw TRIAL_ERRORS.INVALID_ACTION;
 	}
 
+	const hasBal = await hasEnoughBalance({trialAccountId, totalAttachedYocto, totalGasForTxns});
+	if (hasBal == false) {
+		throw TRIAL_ERRORS.INSUFFICIENT_BALANCE;
+	}
+
 	const trialKeyPair = KeyPair.fromString(trialAccountSecretKey);
 	const pubKey = trialKeyPair.getPublicKey();
 	await keyStore!.setKey(networkId!, trialAccountId, trialKeyPair)
@@ -278,7 +283,7 @@ export const trialCallMethod = async ({
 	}];
 	console.log(`txns: ${JSON.stringify(txns)}`)
 
-	const {methodDataToValidate, executeArgs} = await generateExecuteArgs({desiredTxns: txns});
+	const {methodDataToValidate, executeArgs, totalAttachedYocto, totalGasForTxns} = await generateExecuteArgs({desiredTxns: txns});
 
 	const isValidTxn = await validateDesiredMethods({methodData: methodDataToValidate, trialAccountId});
 	console.log('isValidTxn: ', isValidTxn)
@@ -287,6 +292,11 @@ export const trialCallMethod = async ({
 		throw TRIAL_ERRORS.INVALID_ACTION;
 	}
 
+	const hasBal = await hasEnoughBalance({trialAccountId, totalAttachedYocto, totalGasForTxns});
+	if (hasBal == false) {
+		throw TRIAL_ERRORS.INSUFFICIENT_BALANCE;
+	}
+
 	const trialKeyPair = KeyPair.fromString(trialAccountSecretKey);
 	const pubKey = trialKeyPair.getPublicKey();
 	await keyStore!.setKey(networkId!, trialAccountId, trialKeyPair)

diff --git a/src/lib/trial-accounts/utils.ts b/src/lib/trial-accounts/utils.ts
@@ -13,7 +13,8 @@ const PARAM_STOP = '|kS|'
 
 export const TRIAL_ERRORS = {
     EXIT_EXPECTED: 'exit',
-    INVALID_ACTION: 'invalid_action'
+    INVALID_ACTION: 'invalid_action',
+	INSUFFICIENT_BALANCE: 'insufficient_balance'
 }
 
 export const validateDesiredMethods = async ({
@@ -116,6 +117,8 @@ export const generateExecuteArgs = ({ desiredTxns }: {
 	}[];
 }) => {
 	const methodDataToValidate: any = [];
+	let totalGasBN = new BN(0);
+	let totalDepositsBN = new BN(0);
 	const executeArgs: any = {
 		transactions: []
 	}
@@ -133,6 +136,8 @@ export const generateExecuteArgs = ({ desiredTxns }: {
                 methodName: action.params.methodName,
                 deposit: action.params.deposit
             })
+			totalGasBN = totalGasBN.add(new BN(action.params.gas))
+			totalDepositsBN = totalDepositsBN.add(new BN(action.params.deposit))
 
             const newAction: any = {}
             console.log('newAction 1: ', newAction)
@@ -145,6 +150,8 @@ export const generateExecuteArgs = ({ desiredTxns }: {
         executeArgs.transactions.push(newTx)
     })
     return {
+		totalAttachedYocto: totalDepositsBN.toString(), 
+		totalGasForTxns: totalGasBN.toString(),
         executeArgs,
         methodDataToValidate
     }
@@ -224,4 +231,29 @@ export const isUnclaimedTrialDrop = async ({keypomContractId, secretKey}) => {
 	}
 
 	return false;
-}
+}
+
+export const hasEnoughBalance = async ({
+	trialAccountId, 
+	totalGasForTxns, 
+	totalAttachedYocto
+}: {
+	trialAccountId: string;
+	totalGasForTxns: string;
+	totalAttachedYocto: string;
+}) => {
+	const {near} = getEnv();
+
+	const trialAccountObj = new Account(near!.connection, trialAccountId);
+    const accountState = await trialAccountObj.state();
+
+    const storageCostPerByte = new BN('10000000000000000000');
+    const totalStorage = new BN(accountState.storage_usage).mul(storageCostPerByte);
+    let availAmount = new BN(accountState.amount).sub(totalStorage);
+
+	const yoctoPerGas = 100000000;
+	let gasCost = new BN(totalGasForTxns).mul(new BN(yoctoPerGas));
+	let totalCost = gasCost.add(new BN(totalAttachedYocto));
+
+	return availAmount.gte(totalCost);
+}