Merge pull request #10 from randlabs/update-v1.1.3

Update API docs to 1.1.3

docs/getting-started/myalgo-connect-api.md

@@ -4,17 +4,39 @@ sidebar_position: 2
 
 # MyAlgo Connect API
 
-MyAlgo Connect offers 3 methods, summarized here.
+## constructor
+
+Create an instance of `MyAlgoConnect`.
+
+#### Signature and types
+
+```ts
+export interface Options {
+	timeout?: number;
+	bridgeUrl?: string;
+	disableLedgerNano?: boolean;
+}
+
+constructor(options?: Options);
+```
+
+#### Params
+
+Object `options` may have the following fields:
+
+ - `timeout`: Number of msec to wait the popup response, default value: 1600000 msec.
+ - `bridgeUrl`: Override `wallet.myalgo.com` default url
+ - `disableLedgerNano`: Disable ledger nano accounts and return only mnemonic accounts.
 
 ## connect()
 
 Request the user to give access to the dapp and which account(s) to share (only the public data).
 In order to request a signature from the user or have the user approve a transaction, one must be able to access the user's wallet address.
 Connect method allows the dapp to know the list of addresses allowed by the user for future signatures.
 
-The Connect method is agnostic for all networks.
+The Connect method is agnostic to all networks.
 
-#### Fingerprint
+#### Signature and types
 
 ```jsx
 export interface Accounts {
@@ -40,7 +62,7 @@ Object `settings` may have the following fields:
 
 #### Response
 
-Will return an array of an Account object, which contains the public wallet(s) data selected by the user in the “Manage your account” section.
+Returns an array of Account objects, which contains the public wallet(s) data selected by the user in the “Manage your account” section.
 
 ```json
 [
@@ -51,14 +73,14 @@ Will return an array of an Account object, which contains the public wallet(s) d
 ]
 ```
 
-If the user closes the popup, Promise will be rejected with an error message. These cases need to be handled by the application being developed.
+If the user closes the popup, Promise will be rejected with an error message. These cases need to be handled by the application.
 
 ## signTransaction()
 
 Allows you to send Algorand transaction(s) to MyAlgo Connect to be signed by the user.
 Transactions will be validated against our own set of validations and then for the AlgoSDK, just in case some transaction fails, the whole set of transactions will be rejected.
 
-#### Fingerprint
+#### Signature and types
 
 ```jsx
 export type Address = string;
@@ -72,24 +94,24 @@ export interface SignedTx {
    blob: Uint8Array;
 }
 
-export interface SignTxSettings {
-  shouldSelectOneAccount?: boolean; 
+export interface SignTransactionOptions {
+	overrideSigner?: Address;
 }
 
-signTransaction(transaction: AlgorandTxn | EncodedTransaction | AlgorandTxn[] | EncodedTransaction[], settings?: SignTxSettings ): Promise<SignedTx | SignerdTx[]>;
+signTransaction(transaction: AlgorandTxn | EncodedTransaction | AlgorandTxn[] | EncodedTransaction[], signOptions?: SignTransactionOptions ): Promise<SignedTx | SignedTx[]>;
 ```
 
 #### Params
 
 - `transaction`: an array or a single transaction of the following types: **AlgorandTxn**, **EncodedTransaction**.
 
-Object `settings` has the following field:
+Optional object `signOptions` may have the following field:
 
-- `disableLedgerNano`: User will be notified that the current operation is not supported to sign by Hardware Ledger. Default is true.
+- `overrideSigner`: Force transactions to be signed with the specified account instead of the from/auth address.
 
 #### Response
 
-Calling signTransaction with an array of transactions will return an array of a SignedTx object.
+Calling `signTransaction` with an array of transactions will return an array of a SignedTx object.
 
 ```json
 [
@@ -141,7 +163,7 @@ Otherwise, it will return a SignedTx object.
 
 Sends to MyAlgo Connect an Algorand program to be signed by the user.
 
-#### Fingerprint
+#### Signature and types
 
 ```jsx
 export type Address = string;

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 />

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",

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'
       ],
     },
   ],

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} />

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}>

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} />

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

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}>

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

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} />

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} />

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} />