Add payment transaction with overrided signer example

randlabs · Apr 14, 2022 · 71fcb54 · 71fcb54
1 parent 85ed95d
commit 71fcb54
Show file tree

Hide file tree

Showing 16 changed files with 256 additions and 39 deletions.
diff --git a/docs/interactive-examples/PaymentTransactionOverrideSigner.mdx b/docs/interactive-examples/PaymentTransactionOverrideSigner.mdx
@@ -0,0 +1,18 @@
+---
+sidebar_position: 11
+---
+
+import PaymentTransactionOverrideSignerExample from "../../src/components/PaymentTransactionOverrideSignerExample"
+
+# Payment Transaction with overrided signer
+
+Create and send a payment transaction to be signed by a specific account.
+
+### Preconditions
+
+* User is already engaged and shared some account.
+
+* Signer to override should match with one of address shared by the user, otherwise user will be alert.
+
+### Interactive Example
+<PaymentTransactionOverrideSignerExample />
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "homepage",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -17,7 +17,7 @@
     "@docusaurus/core": "^2.0.0-beta.3",
     "@docusaurus/preset-classic": "^2.0.0-beta.3",
     "@mdx-js/react": "^1.6.21",
-    "@randlabs/myalgo-connect": "^1.1.2",
+    "@randlabs/myalgo-connect": "^1.1.3",
     "@svgr/webpack": "^5.5.0",
     "algosdk": "^1.10.1",
     "bootstrap": "^5.0.2",

diff --git a/sidebars.js b/sidebars.js
@@ -36,7 +36,7 @@ module.exports = {
       'interactive-examples/connect','interactive-examples/PaymentTransaction', 'interactive-examples/GroupedTransaction', 
       'interactive-examples/ASATransacation', 'interactive-examples/ApplOptIn', 'interactive-examples/ApplCloseOut', 
       'interactive-examples/PaymentWithTeal', 'interactive-examples/ApplCreateTransaction', 'interactive-examples/ApplDeleteTransaction', 
-      'interactive-examples/ApplUpdateTransaction'
+      'interactive-examples/ApplUpdateTransaction', 'interactive-examples/PaymentTransactionOverrideSigner'
       ],
     },
   ],

diff --git a/src/components/ASATransactionExample.tsx b/src/components/ASATransactionExample.tsx
@@ -7,7 +7,7 @@ import Address from "./commons/Address";
 import Amount from "./commons/Amount";
 import AssetIndex from "./commons/AssetId";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import Note from "./commons/Note";
 import "./interactive-examples.scss";
 
@@ -129,7 +129,7 @@ function ASATransactionExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitAsaTransferTx}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <Address label="To" onChangeAddress={setReceiver} />
                                 <Amount amount={amount} decimals={8} onChangeAmount={setAmount} />
                                 <AssetIndex assetIndex={assetIndex} disabled={true} onChangeAssetIndex={setAssetIndex} />

diff --git a/src/components/ApplCloseOutExample.tsx b/src/components/ApplCloseOutExample.tsx
@@ -3,7 +3,7 @@ import React, { FormEvent, useContext, useEffect, useState } from "react";
 import { Button, Col, Form, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap";
 import AppIndex from "./commons/AppIndex";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import Note from "./commons/Note";
 import "./interactive-examples.scss";
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
@@ -121,7 +121,7 @@ function ApplCloseOutExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitCloseOutTx}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <AppIndex onChangeAppIndex={setAppIndex} />
                                 <Note onChangeNote={setNote} />
                                 <Button color="primary" block type="submit" className="mt-2" disabled={accounts.length === 0}>

diff --git a/src/components/ApplCreateTransactionExample.tsx b/src/components/ApplCreateTransactionExample.tsx
@@ -4,7 +4,7 @@ import React, { FormEvent, useContext, useEffect, useState } from "react";
 import { Button, Col, Form, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap";
 import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preLoadedData';
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import Integer from "./commons/Integer";
 import "./interactive-examples.scss";
 
@@ -136,7 +136,7 @@ function ApplCreateTransactionExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitCreateAppl}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <Integer label="Local Bytes" onChangeNumber={setLocalBytes} />
                                 <Integer label="Global Bytes" onChangeNumber={setGlobalBytes} />
                                 <Integer label="Local Int" onChangeNumber={setLocalInt} />

diff --git a/src/components/ApplDeleteTransactionExample.tsx b/src/components/ApplDeleteTransactionExample.tsx
@@ -5,7 +5,7 @@ import { Button, Col, Form, Label, Nav, NavItem, NavLink, Row, TabContent, TabPa
 import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preLoadedData';
 import AppIndex from "./commons/AppIndex";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import "./interactive-examples.scss";
 
 const codeV1 = `
@@ -116,7 +116,7 @@ function ApplCreateTransactionExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitDeleteApplTx}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <AppIndex onChangeAppIndex={setAppIndex} />
                                 <Button color="primary" block type="submit" className="mt-2" disabled={accounts.length === 0}>
                                     Submit

diff --git a/src/components/ApplOptInExample.tsx b/src/components/ApplOptInExample.tsx
@@ -5,7 +5,7 @@ import { Button, Col, Form, Label, Nav, NavItem, NavLink, Row, TabContent, TabPa
 import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preLoadedData';
 import AppIndex from "./commons/AppIndex";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import Note from "./commons/Note";
 import "./interactive-examples.scss";
 
@@ -120,7 +120,7 @@ function ApplOptInExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitOptInTx}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <AppIndex onChangeAppIndex={setAppIndex} />
                                 <Note onChangeNote={setNote} />
                                 <Button color="primary" block type="submit" className="mt-2" disabled={accounts.length === 0}>

diff --git a/src/components/ApplUpdateTransactionExample.tsx b/src/components/ApplUpdateTransactionExample.tsx
@@ -4,7 +4,7 @@ import { Button, Col, Form, Label, Nav, NavItem, NavLink, Row, TabContent, TabPa
 import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preLoadedData';
 import AppIndex from "./commons/AppIndex";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import "./interactive-examples.scss";
 
 const codeV1 = `
@@ -119,7 +119,7 @@ function ApplUpdateTransactionExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitUpdateAppl}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <AppIndex disabled={true} value={appIndex.toString()} onChangeAppIndex={() => { }} />
                                 <Button color="primary" block type="submit" className="mt-2" disabled={accounts.length === 0}>
                                     Submit

diff --git a/src/components/GroupPaymentExample.tsx b/src/components/GroupPaymentExample.tsx
@@ -6,7 +6,7 @@ import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preL
 import Address from "./commons/Address";
 import Amount from "./commons/Amount";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import "./interactive-examples.scss";
 
 const codeV1 = `
@@ -164,7 +164,7 @@ function GroupPaymentExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitGroupTxns}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <Address label="To for Transaction 1" onChangeAddress={setReceiver1} />
                                 <Amount amount={amount1} label="Amount for Transaction 1" onChangeAmount={setAmount1} />
                                 <Address label="To for Transaction 2" onChangeAddress={setReceiver2} />

diff --git a/src/components/GroupedPaymentExample.tsx b/src/components/GroupedPaymentExample.tsx
@@ -5,7 +5,7 @@ import PreLoadDataContextComponent, { PreLoadDataContext } from '../context/preL
 import Address from "./commons/Address";
 import Amount from "./commons/Amount";
 import PrismCode from './commons/Code';
-import SenderDropdown from "./commons/FromDropdown";
+import AccountDropdown from "./commons/FromDropdown";
 import "./interactive-examples.scss";
 
 const codeV1 = `
@@ -164,7 +164,7 @@ function GroupedPaymentExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitGroupTxns}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <AccountDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <Address label="To for Transaction 1" onChangeAddress={setReceiver1} />
                                 <Amount amount={amount1} label="Amount for Transaction 1" onChangeAmount={setAmount1} />
                                 <Address label="To for Transaction 2" onChangeAddress={setReceiver2} />

diff --git a/src/components/PaymentTransactionExample.tsx b/src/components/PaymentTransactionExample.tsx
@@ -120,7 +120,7 @@ function PaymentTransactionExample(): JSX.Element {
                     <Row className="mt-3">
                         <Col xs="12" lg="6" className="mt-2">
                             <Form id="payment-tx" onSubmit={onSubmitPaymentTx}>
-                                <SenderDropdown onSelectSender={selectAccount} accounts={accounts} />
+                                <SenderDropdown onSelectAccount={selectAccount} accounts={accounts} />
                                 <Address label="To" onChangeAddress={setReceiver} />
                                 <Amount amount={amount} onChangeAmount={setAmount} />
                                 <Note onChangeNote={setNote} />