Merge pull request #13 from perawallet/algosdk-v3

Upgrade `algosdk` to v3
perawallet · Dec 3, 2024 · fdb4e5e · fdb4e5e
2 parents 2c1fe35 + 00f7693
commit fdb4e5e
Show file tree

Hide file tree

Showing 13 changed files with 19,658 additions and 13,537 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,16 +3,13 @@ const path = require("path");
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
-  plugins: ["react", "react-hooks", "@typescript-eslint", "jsx-a11y"],
+  plugins: ["react", "react-hooks", "jsx-a11y"],
   env: {
     browser: true,
     jest: true,
     es6: true
   },
   extends: [
-    "@hipo/eslint-config-base",
-    "@hipo/eslint-config-react",
-    "@hipo/eslint-config-typescript",
     "plugin:jsx-a11y/recommended",
     "prettier"
   ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,30 +4,24 @@
   "homepage": "https://perawallet.github.io/pera-demo-dapp/",
   "private": true,
   "dependencies": {
-    "@hipo/react-ui-toolkit": "1.0.0-beta",
-    "@perawallet/connect": "^1.3.3",
+    "@hipo/react-ui-toolkit": "1.1.2",
+    "@perawallet/connect": "npm:@perawallet/[email protected]",
     "@perawallet/onramp": "^1.1.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
     "@types/react-modal": "^3.13.1",
-    "algosdk": "2.7.0",
+    "algosdk": "3.0.0",
     "notiboy-js-sdk": "^1.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "^3.16.1",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.5.4",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@hipo/eslint-config-base": "^4.2.1",
-    "@hipo/eslint-config-react": "^2.1.0",
-    "@hipo/eslint-config-typescript": "^1.1.0",
-    "@hipo/stylelint-config-base": "^2.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
-    "eslint": "^7.32.0",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "prettier": "^2.5.1",
@@ -39,7 +33,7 @@
     "stylelint-scss": "^3.19.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

diff --git a/src/core/home/Home.tsx b/src/core/home/Home.tsx
@@ -1,6 +1,6 @@
 import "./_home.scss";
 
-import {Button, Dropdown, DropdownOption, Switch, useToaster} from "@hipo/react-ui-toolkit";
+import {Button, Select, Switch, useToaster} from "@hipo/react-ui-toolkit";
 import {useEffect, useState} from "react";
 import {PeraWalletConnect} from "@perawallet/connect";
 import {PeraOnramp} from "@perawallet/onramp";
@@ -12,19 +12,30 @@ import PeraToast from "../component/toast/PeraToast";
 import {ChainType, clientForChain} from "../utils/algod/algod";
 import useGetAccountDetailRequest from "../hooks/useGetAccountDetailRequest/useGetAccountDetailRequest";
 import {createAssetOptInTxn} from "./sign-txn/util/signTxnUtils";
-import peraApiManager from "../utils/pera/api/peraApiManager";
 import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "../utils/storage/pera-wallet/peraWalletTypes";
+import peraApiManager from "../utils/pera/api/peraApiManager";
 
 const isCompactMode = localStorage.getItem(PERA_WALLET_LOCAL_STORAGE_KEYS.COMPACT_MODE);
 let peraWallet = new PeraWalletConnect({compactMode: isCompactMode === "true"});
 const peraOnRamp = new PeraOnramp({
   optInEnabled: true
 });
 
+const chainOptions = [
+  {
+    id: "testnet",
+    title: "TestNet"
+  },
+  {
+    id: "mainnet",
+    title: "MainNet"
+  }
+];
+
 function Home() {
   const [chainType, setChainType] = useState<ChainType>(ChainType.TestNet);
   const [chainDropdownSelectedOption, setChainDropdownSelectedOption] =
-    useState<DropdownOption<"mainnet" | "testnet", any> | null>({
+    useState<{id: "testnet" | "mainnet", title: string}>({
       id: "testnet",
       title: "TestNet"
     });
@@ -45,7 +56,7 @@ function Home() {
     peraWallet
       .reconnectSession()
       .then((accounts) => {
-        if (accounts) {
+        if (accounts && accounts[0]) {
           setAccountAddress(accounts[0]);
 
           handleSetLog("Connected to Pera Wallet");
@@ -56,32 +67,26 @@ function Home() {
         });
       })
       .catch((e) => console.log(e));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div className={`app ${isConnectedToPeraWallet ? "app--connected" : ""}`}>
       <div className={"app__header"}>
-        <Dropdown
-          customClassName={"app__header__chain-select-dropdown"}
-          role={"menu"}
-          options={[
-            {
-              id: "testnet",
-              title: "TestNet"
-            },
-            {
-              id: "mainnet",
-              title: "MainNet"
-            }
-          ]}
-          selectedOption={chainDropdownSelectedOption}
-          onSelect={(option) => {
-            handleSelectChainType(option);
-          }}
-          hasDeselectOption={false}
-        />
+        <Select role={"menu"} options={chainOptions} value={chainDropdownSelectedOption} onSelect={handleSelectChainType}>
+          <Select.Trigger customClassName={"button app__button--connect"}>
+            {chainDropdownSelectedOption?.title}
+          </Select.Trigger>
+
+          <Select.Content>
+            <ul>
+              {chainOptions.map((option) => (
+                <Select.Item option={option} as={"li"}>
+                  {option.title}
+                </Select.Item>
+              ))}
+            </ul>
+          </Select.Content>
+        </Select>
       </div>
 
       {chainType === ChainType.MainNet && (
@@ -200,9 +205,9 @@ function Home() {
   async function handleConnectWalletClick() {
     try {
       const newAccounts = await peraWallet.connect();
-  
+
       handleSetLog("Connected to Pera Wallet");
-  
+
       setAccountAddress(newAccounts[0]);
     } catch (e) {
       console.log(e);
@@ -226,7 +231,7 @@ function Home() {
   }
 
   function handleSelectChainType(
-    option: DropdownOption<"mainnet" | "testnet", any> | null
+    option: {id: "mainnet" | "testnet"; title: string} | null
   ) {
     if (option?.id === "testnet") {
       setChainType(ChainType.TestNet);

diff --git a/src/core/home/_home.scss b/src/core/home/_home.scss
@@ -20,6 +20,7 @@
 .app__header {
   position: fixed;
   top: 0;
+  z-index: 3;
 
   display: flex;
   justify-content: right;

diff --git a/src/core/home/account-balance/AccountBalance.tsx b/src/core/home/account-balance/AccountBalance.tsx
@@ -1,3 +1,4 @@
+import algosdk from "algosdk";
 import {getAccountBalanceText} from "../../utils/account/accountUtils";
 import {ChainType} from "../../utils/algod/algod";
 import {getWalletDetailsFromStorage} from "../../utils/storage/storageUtils";
@@ -7,7 +8,7 @@ function AccountBalance({
   accountInformation,
   chain
 }: {
-  accountInformation: AccountInformationData;
+  accountInformation: algosdk.modelsv2.Account;
   chain: ChainType;
 }) {
   const walletDetails = getWalletDetailsFromStorage();

diff --git a/src/core/home/sign-txn/create/CreateTxn.tsx b/src/core/home/sign-txn/create/CreateTxn.tsx
@@ -7,16 +7,15 @@ import {SignerTransaction} from "@perawallet/connect/dist/util/model/peraWalletM
 import algosdk from "algosdk";
 import {
   Button,
-  Dropdown,
-  DropdownOption,
   FormField,
   Input,
   List,
   ListItem,
+  Select,
   Switch,
   Tab,
   TabItem,
-  Textarea
+  Textarea,
 } from "@hipo/react-ui-toolkit";
 import {useState} from "react";
 import {PeraWalletConnect} from "@perawallet/connect";
@@ -69,24 +68,27 @@ export interface TxnForm {
   decimals?: number;
 }
 
-const TXN_DROPDOWN_OPTIONS: DropdownOption<PeraTransactionType, any>[] = [
-  {
-    id: "pay",
-    title: "pay"
-  },
-  {
-    id: "axfer",
-    title: "axfer"
-  },
-  {
-    id: "keyreg",
-    title: "keyreg"
-  },
-  {
-    id: "acfg",
-    title: "acfg"
-  }
-];
+const TXN_DROPDOWN_OPTIONS: {
+  id: PeraTransactionType;
+  title: string
+}[] = [
+    {
+      id: "pay",
+      title: "pay"
+    },
+    {
+      id: "axfer",
+      title: "axfer"
+    },
+    {
+      id: "keyreg",
+      title: "keyreg"
+    },
+    {
+      id: "acfg",
+      title: "acfg"
+    }
+  ];
 
 const ASSET_TXN_TABS: TabItem[] = [
   {id: "create", content: "Create"},
@@ -97,7 +99,7 @@ const ASSET_TXN_TABS: TabItem[] = [
 function CreateTxn({chain, address, isOpen, onClose, peraWallet}: CreateTxnModalProps) {
   const [transactions, setTransactions] = useState<SignerTransaction[]>([]);
   const [transactionDropdownOption, setTransactionDropdownOption] =
-    useState<DropdownOption<PeraTransactionType> | null>({
+    useState<typeof TXN_DROPDOWN_OPTIONS[number] | null>({
       id: "pay",
       title: "pay"
     });
@@ -125,16 +127,23 @@ function CreateTxn({chain, address, isOpen, onClose, peraWallet}: CreateTxnModal
       <h3 style={{marginBottom: "10px"}}>{"Create Transaction"}</h3>
 
       <FormField label={"Transaction Type"}>
-        <Dropdown
-          customClassName={"app__header__chain-select-dropdown"}
-          role={"menu"}
-          options={TXN_DROPDOWN_OPTIONS}
-          selectedOption={transactionDropdownOption}
-          onSelect={(option) => {
-            setTransactionDropdownOption(option);
-          }}
-          hasDeselectOption={false}
-        />
+        <Select options={TXN_DROPDOWN_OPTIONS}
+          value={transactionDropdownOption}
+          onSelect={(option) => setTransactionDropdownOption(option)}>
+          <Select.Trigger customClassName={"button app__button--connect"}>
+            {transactionDropdownOption?.title}
+          </Select.Trigger>
+
+          <Select.Content>
+            <ul>
+              {TXN_DROPDOWN_OPTIONS.map((option) => (
+                <Select.Item option={option} as={"li"}>
+                  {option.title}
+                </Select.Item>
+              ))}
+            </ul>
+          </Select.Content>
+        </Select>
       </FormField>
 
       <FormField label={"From Address"}>
@@ -637,7 +646,6 @@ function CreateTxn({chain, address, isOpen, onClose, peraWallet}: CreateTxnModal
       if (sendBlockchain) {
         for (const signedTransaction of signedTransactions) {
           await clientForChain(chain).sendRawTransaction(signedTransaction).do();
-
           await algosdk.waitForConfirmation(
             clientForChain(chain),
             transactions[0].txn.txID(),

diff --git a/src/core/home/sign-txn/create/button/CreateTxnButton.tsx b/src/core/home/sign-txn/create/button/CreateTxnButton.tsx
@@ -121,12 +121,12 @@ function CreateTxnButton({
           assetURL,
           total: total || 1,
           decimals: decimals || 0,
-          from: address,
+          sender: address,
           suggestedParams
         });
       } else if (assetTxnType === "modify") {
         txn = algosdk.makeAssetConfigTxnWithSuggestedParamsFromObject({
-          from: address,
+          sender: address,
           manager,
           freeze,
           clawback,
@@ -137,7 +137,7 @@ function CreateTxnButton({
         })
       } else {
         txn = algosdk.makeAssetDestroyTxnWithSuggestedParamsFromObject({
-          from: address,
+          sender: address,
           suggestedParams,
           assetIndex: Number(assetIndex)
         })
@@ -157,19 +157,19 @@ function CreateTxnButton({
 
       if (isOnlineKeyregTxn) {
         txn = algosdk.makeKeyRegistrationTxnWithSuggestedParamsFromObject({
-          from: address,
+          sender: address,
           voteKey: voteKey!,
           selectionKey: selectionKey!,
           stateProofKey: stateProofKey!,
-          voteFirst: suggestedParams.firstRound,
-          voteLast: suggestedParams.lastRound,
+          voteFirst: suggestedParams.firstValid,
+          voteLast: suggestedParams.lastValid,
           voteKeyDilution: voteKeyDilution!,
           rekeyTo: isValidAddress(rekeyTo) ? rekeyTo : undefined,
           suggestedParams
         });
       } else {
         txn = algosdk.makeKeyRegistrationTxnWithSuggestedParamsFromObject({
-          from: address,
+          sender: address,
           rekeyTo: isValidAddress(rekeyTo) ? rekeyTo : undefined,
           suggestedParams
         });
@@ -187,8 +187,8 @@ function CreateTxnButton({
       const suggestedParams = await apiGetTxnParams(chain);
 
       const txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
-        from: address,
-        to: toAddress,
+        sender: address,
+        receiver: toAddress,
         amount: Number(amount),
         note: new Uint8Array(Buffer.from(note)),
         rekeyTo: isValidAddress(rekeyTo) ? rekeyTo : undefined,
@@ -216,8 +216,8 @@ function CreateTxnButton({
         const assetId = assetsRef.current!.results[i].asset_id;
 
         const txn = algosdk.makeAssetTransferTxnWithSuggestedParamsFromObject({
-          from: address,
-          to: toAddress,
+          sender: address,
+          receiver: toAddress,
           amount: 0,
           assetIndex: transactionAmount === 1 ? Number(assetIndex) : assetId,
           note: new Uint8Array(Buffer.from(`Transaction no: ${i + 1}`)),