Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade algosdk to v3 #13

Merged
merged 1 commit into from
Dec 3, 2024
Merged

Upgrade algosdk to v3 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
],
Expand Down
32,407 changes: 19,260 additions & 13,147 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 9 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
Expand Down
61 changes: 33 additions & 28 deletions src/core/home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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"
});
Expand All @@ -45,7 +56,7 @@ function Home() {
peraWallet
.reconnectSession()
.then((accounts) => {
if (accounts) {
if (accounts && accounts[0]) {
setAccountAddress(accounts[0]);

handleSetLog("Connected to Pera Wallet");
Expand All @@ -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 && (
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/core/home/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
.app__header {
position: fixed;
top: 0;
z-index: 3;

display: flex;
justify-content: right;
Expand Down
3 changes: 2 additions & 1 deletion src/core/home/account-balance/AccountBalance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -7,7 +8,7 @@ function AccountBalance({
accountInformation,
chain
}: {
accountInformation: AccountInformationData;
accountInformation: algosdk.modelsv2.Account;
chain: ChainType;
}) {
const walletDetails = getWalletDetailsFromStorage();
Expand Down
74 changes: 41 additions & 33 deletions src/core/home/sign-txn/create/CreateTxn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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"},
Expand All @@ -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"
});
Expand Down Expand Up @@ -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"}>
Expand Down Expand Up @@ -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(),
Expand Down
22 changes: 11 additions & 11 deletions src/core/home/sign-txn/create/button/CreateTxnButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -137,7 +137,7 @@ function CreateTxnButton({
})
} else {
txn = algosdk.makeAssetDestroyTxnWithSuggestedParamsFromObject({
from: address,
sender: address,
suggestedParams,
assetIndex: Number(assetIndex)
})
Expand All @@ -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
});
Expand All @@ -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,
Expand Down Expand Up @@ -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}`)),
Expand Down
Loading
Loading