Merge pull request #44 from keypom/matt/modal-fixes

Modal Fixes & Insufficient Balance Checks
keypom · Apr 17, 2023 · a17efa6 · a17efa6
2 parents 69a75fd + a6864b4
commit a17efa6
Show file tree

Hide file tree

Showing 19 changed files with 138 additions and 47 deletions.
diff --git a/docs-advanced-tutorials/trial-accounts/create-trial-drop.js b/docs-advanced-tutorials/trial-accounts/create-trial-drop.js
@@ -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/docs-advanced-tutorials/trial-accounts/guest-book/package.json b/docs-advanced-tutorials/trial-accounts/guest-book/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
   "scripts": {
-    "start": "./start.sh"
+    "start": "rm -rf .parcel-cache && ./start.sh"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",

diff --git a/lib/lib/selector/modal/src/lib/components/ClaimTrial.js b/lib/lib/selector/modal/src/lib/components/ClaimTrial.js
@@ -96,27 +96,25 @@ var ClaimTrial = function (_a) {
             }
         });
     }); };
-    return (isClaimingTrial ? (react_1.default.createElement("div", { className: "nws-modal", style: { width: "70%", height: "27%" } },
+    return (isClaimingTrial ? (react_1.default.createElement("div", { className: "nws-modal", style: { width: "100%", height: "auto", maxWidth: '500px' } },
         react_1.default.createElement("div", { className: "modal-right", style: { width: "100%" } },
             react_1.default.createElement(MainBody_1.MainBody, { title: "The Drop Is Being Claimed!!", body: "Please Wait", headerOne: null, headerTwo: null, onCloseModal: function () {
                     return hide();
-                } })))) : ((dropClaimed ? (react_1.default.createElement("div", { className: "nws-modal", style: { width: "70%", height: "27%" } },
+                } })))) : ((dropClaimed ? (react_1.default.createElement("div", { className: "nws-modal", style: { width: "100%", height: "auto", maxWidth: '500px' } },
         react_1.default.createElement("div", { className: "modal-right", style: { width: "100%" } },
             react_1.default.createElement(MainBody_1.MainBody, { title: "The Drop Was Claimed!", body: "Click the button to continue", headerOne: null, headerTwo: null, button: {
                     text: "Click To Start",
                     url: "".concat(redirectUrlBase).concat(accountId).concat(delimiter).concat(secretKey),
                     newTab: false
                 }, onCloseModal: function () {
                     return hide();
-                } })))) : (react_1.default.createElement("div", { className: "nws-modal", style: { width: "70%", height: "27%" } },
+                } })))) : (react_1.default.createElement("div", { className: "nws-modal", style: { width: "100%", height: "auto", maxWidth: '500px' } },
         react_1.default.createElement("div", { className: "modal-right", style: { width: "100%" } },
             react_1.default.createElement(MainBody_1.MainBody, { title: modal_types_1.MODAL_DEFAULTS.claimTrial.mainBody.title, body: modal_types_1.MODAL_DEFAULTS.claimTrial.mainBody.body, headerOne: null, headerTwo: null, onCloseModal: function () {
                     return hide();
                 } }),
-            react_1.default.createElement("form", { onSubmit: handleSubmit },
-                react_1.default.createElement("label", null,
-                    "Enter your name:",
-                    react_1.default.createElement("input", { type: "text", value: accountId, onChange: function (e) { return setAccountId(e.target.value); } })),
-                react_1.default.createElement("input", { type: "submit" }))))))));
+            react_1.default.createElement("input", { type: "text", value: accountId, placeholder: 'Account Name', onChange: function (e) { return setAccountId(e.target.value); }, style: { padding: '8px', marginBottom: '16px', border: '1px solid', borderRadius: '4px' } }),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("button", { onClick: handleSubmit }, "Create Account")))))));
 };
 exports.ClaimTrial = ClaimTrial;
diff --git a/lib/lib/selector/modal/src/lib/components/MainBody.js b/lib/lib/selector/modal/src/lib/components/MainBody.js
@@ -16,7 +16,7 @@ var MainBody = function (_a) {
                 react_1.default.createElement(CloseModalButton_1.CloseModalButton, { onClick: onCloseModal }))),
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("h4", null, body),
-            react_1.default.createElement("div", { className: "wallet-info-wrapper what-wallet-hide" },
+            react_1.default.createElement("div", null,
                 headerOne && (react_1.default.createElement("div", { className: "wallet-what" },
                     react_1.default.createElement("div", { className: "icon-side" },
                         react_1.default.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -33,7 +33,6 @@ var MainBody = function (_a) {
                     react_1.default.createElement("div", { className: "content-side" },
                         react_1.default.createElement("h3", null, headerTwo.title || modal_types_1.MODAL_DEFAULTS.trialOver.mainBody.headerTwo.title),
                         react_1.default.createElement("p", null, headerTwo.description || modal_types_1.MODAL_DEFAULTS.trialOver.mainBody.headerTwo.description)))),
-                react_1.default.createElement("div", { className: "button-spacing" }),
                 button && (react_1.default.createElement("button", { className: "middleButton", onClick: function () {
                         if (button.newTab) {
                             window.open(button.url, '_blank');

diff --git a/lib/lib/selector/modal/src/lib/modal.types.js b/lib/lib/selector/modal/src/lib/modal.types.js
@@ -10,7 +10,7 @@ exports.MODAL_DEFAULTS = {
     claimTrial: {
         mainBody: {
             title: "Create An Account",
-            body: "Enter a username to start using the app.",
+            body: "Choose a new Account name to start using the app:",
         }
     },
     trialOver: {

diff --git a/lib/tsconfig.tsbuildinfo b/lib/tsconfig.tsbuildinfo
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/ClaimTrial.tsx b/src/lib/selector/modal/src/lib/components/ClaimTrial.tsx
@@ -41,7 +41,7 @@ export const ClaimTrial: React.FC<ClaimTrialProps> = ({
     }
 
     return (isClaimingTrial ? (
-            <div className="nws-modal" style={{ width: "70%", height: "27%" }} >
+            <div className="nws-modal" style={{ width: "100%", height: "auto", maxWidth: '500px' }} >
                 <div className="modal-right" style={{ width: "100%" }}>
                     <MainBody
                         title={"The Drop Is Being Claimed!!"}
@@ -56,7 +56,7 @@ export const ClaimTrial: React.FC<ClaimTrialProps> = ({
             </div >
         ) : (
             (dropClaimed ? (
-                <div className="nws-modal" style={{ width: "70%", height: "27%" }}>
+                <div className="nws-modal" style={{ width: "100%", height: "auto", maxWidth: '500px' }}>
                     <div className="modal-right" style={{ width: "100%" }}>
                         <MainBody
                             title={"The Drop Was Claimed!"}
@@ -75,7 +75,7 @@ export const ClaimTrial: React.FC<ClaimTrialProps> = ({
                     </div>
                 </div>
                 ) : (
-                <div className="nws-modal" style={{ width: "70%", height: "27%" }}>
+                <div className="nws-modal" style={{ width: "100%", height: "auto", maxWidth: '500px' }}>
                     <div className="modal-right" style={{ width: "100%" }}>
                         <MainBody
                             title={MODAL_DEFAULTS.claimTrial.mainBody.title}
@@ -86,16 +86,15 @@ export const ClaimTrial: React.FC<ClaimTrialProps> = ({
                                 hide()
                             }
                         />
-                        <form onSubmit={handleSubmit}>
-                            <label>Enter your name:
-                                <input
-                                    type="text"
-                                    value={accountId}
-                                    onChange={(e) => setAccountId(e.target.value) }
-                                />
-                            </label>
-                            <input type="submit" />
-                        </form>
+                        <input
+                            type="text"
+                            value={accountId}
+                            placeholder={'Account Name'}
+                            onChange={(e) => setAccountId(e.target.value) }
+                            style={{ padding: '8px', marginBottom: '16px', border: '1px solid', borderRadius: '4px'}}
+                        />
+                        <br/>
+                        <button onClick={handleSubmit}>Create Account</button>
                     </div>
                 </div>
                 )

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/components/MainBody.tsx b/src/lib/selector/modal/src/lib/components/MainBody.tsx
@@ -29,7 +29,7 @@ export const MainBody: React.FC<WalletHomeProps> = ({
       </div>
       <>
         <h4>{body}</h4>
-        <div className="wallet-info-wrapper what-wallet-hide">
+        <div>
           {headerOne && (
             <div className="wallet-what">
               <div className={"icon-side"}>
@@ -94,7 +94,6 @@ export const MainBody: React.FC<WalletHomeProps> = ({
             </div>
           )}
 
-          <div className="button-spacing" />
           {button && (
             <button
               className="middleButton"

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,13 +48,14 @@ 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: {
     mainBody: {
       title: "Create An Account",
-      body: "Enter a username to start using the app.",
+      body: "Choose a new Account name to start using the app:",
     }
   },
   trialOver: {
@@ -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)