From 85ed95dbfb97e91c45f491c559b93bebcade19f0 Mon Sep 17 00:00:00 2001 From: M-Picco Date: Thu, 14 Apr 2022 10:44:24 -0300 Subject: [PATCH 1/2] Update API docs to 1.1.3 --- docs/getting-started/myalgo-connect-api.md | 48 ++++++++++++++++------ src/css/base.scss | 13 ++++++ 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/docs/getting-started/myalgo-connect-api.md b/docs/getting-started/myalgo-connect-api.md index fd3e7ee..2d6b83e 100644 --- a/docs/getting-started/myalgo-connect-api.md +++ b/docs/getting-started/myalgo-connect-api.md @@ -4,7 +4,29 @@ 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() @@ -12,9 +34,9 @@ Request the user to give access to the dapp and which account(s) to share (only 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; +signTransaction(transaction: AlgorandTxn | EncodedTransaction | AlgorandTxn[] | EncodedTransaction[], signOptions?: SignTransactionOptions ): Promise; ``` #### 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; diff --git a/src/css/base.scss b/src/css/base.scss index d0f86c7..7702f47 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -19,6 +19,19 @@ font-weight: 400; } + h3 { + font-size: 1.250rem; + } + + h4 { + font-size: 1.125rem; + } + + p { + text-align: justify; + line-height: 1.5rem; + } + .button-blue { width: 240px; height: 60px; From 71fcb54099faa03e3da2d30693394f019223c161 Mon Sep 17 00:00:00 2001 From: M-Picco Date: Thu, 14 Apr 2022 16:31:22 -0300 Subject: [PATCH 2/2] Add payment transaction with overrided signer example --- .../PaymentTransactionOverrideSigner.mdx | 18 ++ package-lock.json | 8 +- package.json | 4 +- sidebars.js | 2 +- src/components/ASATransactionExample.tsx | 4 +- src/components/ApplCloseOutExample.tsx | 4 +- .../ApplCreateTransactionExample.tsx | 4 +- .../ApplDeleteTransactionExample.tsx | 4 +- src/components/ApplOptInExample.tsx | 4 +- .../ApplUpdateTransactionExample.tsx | 4 +- src/components/GroupPaymentExample.tsx | 4 +- src/components/GroupedPaymentExample.tsx | 4 +- src/components/PaymentTransactionExample.tsx | 2 +- ...aymentTransactionOverrideSignerExample.tsx | 198 ++++++++++++++++++ src/components/PaymentWithTealExample.tsx | 4 +- src/components/commons/FromDropdown.tsx | 27 +-- 16 files changed, 256 insertions(+), 39 deletions(-) create mode 100644 docs/interactive-examples/PaymentTransactionOverrideSigner.mdx create mode 100644 src/components/PaymentTransactionOverrideSignerExample.tsx diff --git a/docs/interactive-examples/PaymentTransactionOverrideSigner.mdx b/docs/interactive-examples/PaymentTransactionOverrideSigner.mdx new file mode 100644 index 0000000..1ea9c7e --- /dev/null +++ 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 + diff --git a/package-lock.json b/package-lock.json index 7906fd7..ba2ccf1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "homepage", - "version": "1.1.2", + "version": "1.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1899,9 +1899,9 @@ "integrity": "sha512-CuJNwtMTG1LHR1LQNWUPv+8xPUdkRY9p61wGJEp8J/N3q8djmnMySvSQlyVqLBvXsTPKmYc0ZmfXEXCpb5P5Cw==" }, "@randlabs/myalgo-connect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@randlabs/myalgo-connect/-/myalgo-connect-1.1.2.tgz", - "integrity": "sha512-UPsdWfZmnRvEuGL83MNolSzVRDfCo4cURA5Bxi9whRcoglEte3hUgEwbxesaeCnpByvgLNYM9YBbjBb8Bh9PqQ==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@randlabs/myalgo-connect/-/myalgo-connect-1.1.3.tgz", + "integrity": "sha512-iGme4YvAVCtZ6hjaEmltvd/z+Y2aIZ9s0Tw/t2WZRMD8CoWqYiDaj2vjrbtDyOarENQVNlAiY4IMpm0uI9gcUg==", "requires": { "@randlabs/communication-bridge": "^1.0.0" } diff --git a/package.json b/package.json index aa1551f..8f09791 100644 --- 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 index ad39bed..d52747b 100644 --- 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 index d623a60..09074b5 100644 --- 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 {
- +
diff --git a/src/components/ApplCloseOutExample.tsx b/src/components/ApplCloseOutExample.tsx index 70c865d..f068817 100644 --- 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 { - + + + + + +
+ +
+ + + + {accountSelected.length === 0 && +
In order to run this example, you need to execute connect() method.
+ } + + +
The following codes allow you to create and sent to MyAlgo Connect a payment transaction to be sign by the user. There are two alternatives to create it. Pick the one you prefere.
+ + + + + + + + + + + + + + ) +} + +export default () => ; \ No newline at end of file diff --git a/src/components/PaymentWithTealExample.tsx b/src/components/PaymentWithTealExample.tsx index e9fdeb7..72ffba4 100644 --- a/src/components/PaymentWithTealExample.tsx +++ b/src/components/PaymentWithTealExample.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 Note from "./commons/Note"; import "./interactive-examples.scss"; @@ -148,7 +148,7 @@ function PaymentWithTealExample(): JSX.Element { - +
diff --git a/src/components/commons/FromDropdown.tsx b/src/components/commons/FromDropdown.tsx index 9ab82b4..5d47230 100644 --- a/src/components/commons/FromDropdown.tsx +++ b/src/components/commons/FromDropdown.tsx @@ -1,53 +1,54 @@ import React, { Fragment, MouseEvent, ReactElement, useState, useEffect } from "react"; import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, FormGroup, Label } from "reactstrap"; -interface SenderDropdownProps { +interface AccountDropdownProps { disabled?: boolean; - onSelectSender(sender: string): void; + onSelectAccount(account: string): void; accounts: any[] + title?: string } -export default function SenderDropdown(props: SenderDropdownProps): JSX.Element { +export default function AccountDropdown(props: AccountDropdownProps): JSX.Element { const account = props.accounts && props.accounts.length > 0 ? props.accounts[0] : { name: "No wallet loaded" } - const [sender, setSender] = useState(account); + const [selectedAccount, setSelectedAccount] = useState(account); const [isOpen, openDropdown] = useState(false); useEffect(() => { if(props.accounts.length > 0 ){ - props.onSelectSender(props.accounts[0].address); + props.onSelectAccount(props.accounts[0].address); } }, []); - const onToggleSender = (event: MouseEvent) => { + const onToggleAccount = (event: MouseEvent) => { event.preventDefault(); openDropdown(!isOpen); } - const onSelectSender = (account: any) => { - setSender(account); - props.onSelectSender(account.address); + const onSelectAccount = (account: any) => { + setSelectedAccount(account); + props.onSelectAccount(account.address); } return + toggle={onToggleAccount}> - {sender ? sender.name : "No account loaded"} + {selectedAccount ? selectedAccount.name : "No account loaded"} {props.accounts && props.accounts.map((account): ReactElement => { return ( onSelectSender(account)} + onClick={() => onSelectAccount(account)} key={`account-${account.address}`} >