Merge pull request #587 from Concordium/ui-update/earn-various

UI update/earn various

examples/add-example-Web3Id/package.json

@@ -8,6 +8,6 @@
         "start": "live-server ./index.html --mount=/sdk.js:../../node_modules/@concordium/web-sdk/lib/concordium.min.js --mount=/helpers.js:../../packages/browser-wallet-api-helpers/lib/concordiumHelpers.min.js"
     },
     "dependencies": {
-        "@concordium/web-sdk": "^8.1.0"
+        "@concordium/web-sdk": "^8.1.1"
     }
 }

examples/eSealing/package.json

@@ -5,7 +5,7 @@
     "license": "Apache-2.0",
     "dependencies": {
         "@concordium/react-components": "^0.4.0",
-        "@concordium/web-sdk": "^8.1.0",
+        "@concordium/web-sdk": "^8.1.1",
         "@thi.ng/leb128": "^2.1.18",
         "@types/sha256": "^0.2.0",
         "@walletconnect/types": "^2.1.4",

examples/nft-minting/package.json

@@ -3,7 +3,7 @@
     "packageManager": "[email protected]",
     "dependencies": {
         "@concordium/browser-wallet-api-helpers": "workspace:^",
-        "@concordium/web-sdk": "^8.1.0",
+        "@concordium/web-sdk": "^8.1.1",
         "cors": "^2.8.5",
         "express": "^4.18.1",
         "express-fileupload": "^1.4.0",

examples/piggybank/package.json

@@ -3,7 +3,7 @@
     "packageManager": "[email protected]",
     "dependencies": {
         "@concordium/browser-wallet-api-helpers": "workspace:^",
-        "@concordium/web-sdk": "^8.1.0",
+        "@concordium/web-sdk": "^8.1.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },

examples/two-step-transfer/package.json

@@ -8,6 +8,6 @@
         "start": "live-server ../two-step-transfer/index.html --mount=/sdk.js:../../node_modules/@concordium/web-sdk/lib/min/concordium.web.min.js --mount=/helpers.js:../../packages/browser-wallet-api-helpers/lib/concordiumHelpers.min.js"
     },
     "dependencies": {
-        "@concordium/web-sdk": "^8.1.0"
+        "@concordium/web-sdk": "^8.1.1"
     }
 }

examples/voting/package.json

@@ -5,7 +5,7 @@
     "packageManager": "[email protected]",
     "dependencies": {
         "@concordium/browser-wallet-api-helpers": "^3.0.0",
-        "@concordium/web-sdk": "^8.1.0",
+        "@concordium/web-sdk": "^8.1.1",
         "bootstrap": "^5.2.1",
         "moment": "^2.29.4",
         "react": "^18.2.0",

examples/wCCD/package.json

@@ -5,7 +5,7 @@
     "license": "Apache-2.0",
     "dependencies": {
         "@concordium/react-components": "^0.4.0",
-        "@concordium/web-sdk": "^8.1.0",
+        "@concordium/web-sdk": "^8.1.1",
         "@thi.ng/leb128": "^2.1.18",
         "@walletconnect/types": "^2.1.4",
         "mathjs": "^11.4.0",

package.json

@@ -65,6 +65,6 @@
         "typescript": "^5.2.2"
     },
     "resolutions": {
-        "@concordium/web-sdk@^8.1.0": "patch:@concordium/web-sdk@npm:^8.1.0#.yarn/patches/@concordium-web-sdk-npm-8.1.0-468ad0a8b1.patch"
+        "@concordium/web-sdk@^8.1.1": "patch:@concordium/web-sdk@npm:^8.1.1#.yarn/patches/@concordium-web-sdk-npm-8.1.0-468ad0a8b1.patch"
     }
 }

packages/browser-wallet/package.json

@@ -22,7 +22,7 @@
     "dependencies": {
         "@concordium/browser-wallet-api-helpers": "workspace:^",
         "@concordium/common-sdk": "^9.5.3",
-        "@concordium/web-sdk": "^8.1.0",
+        "@concordium/web-sdk": "^8.1.1",
         "@floating-ui/react": "^0.27.2",
         "@noble/ed25519": "^1.7.0",
         "@protobuf-ts/grpcweb-transport": "^2.9.1",

packages/browser-wallet/src/popup/pages/Account/ConfirmGenericTransfer.tsx

@@ -1,8 +1,12 @@
 import React, { useContext, useMemo } from 'react';
-import { AccountTransactionPayload, AccountTransactionType } from '@concordium/web-sdk';
+import {
+    AccountTransactionPayload,
+    AccountTransactionType,
+    convertEnergyToMicroCcd,
+    getEnergyCost,
+} from '@concordium/web-sdk';
 import { useLocation } from 'react-router-dom';
 
-import { convertEnergyToMicroCcd, getEnergyCost } from '@shared/utils/energy-helpers';
 import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
 import ConfirmTransfer from './ConfirmTransfer';
 import { accountPageContext } from './utils';
@@ -25,6 +29,11 @@ export default function ConfirmGenericTransfer() {
     );
 
     return (
-        <ConfirmTransfer setDetailsExpanded={setDetailsExpanded} cost={cost} payload={payload} transactionType={type} />
+        <ConfirmTransfer
+            setDetailsExpanded={setDetailsExpanded}
+            cost={cost?.microCcdAmount}
+            payload={payload}
+            transactionType={type}
+        />
     );
 }

packages/browser-wallet/src/popup/pages/Account/Earn/Baking/FlowPages/Amount.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { isBakerAccount } from '@concordium/web-sdk';
+import { isBakerAccount, convertEnergyToMicroCcd } from '@concordium/web-sdk';
 import { useTranslation } from 'react-i18next';
 import { getCcdSymbol, ccdToMicroCcd, displayAsCcd } from 'wallet-common-helpers';
 import { Validate } from 'react-hook-form';
@@ -12,11 +12,7 @@ import { validateBakerStake } from '@popup/shared/utils/transaction-helpers';
 import { WithAccountInfo } from '@popup/shared/utils/account-helpers';
 import { accountPageContext } from '@popup/pages/Account/utils';
 import DisabledAmountInput from '@popup/shared/DisabledAmountInput';
-import {
-    convertEnergyToMicroCcd,
-    getConfigureBakerMaxEnergyCost,
-    getFullConfigureBakerMinEnergyCost,
-} from '@shared/utils/energy-helpers';
+import { getConfigureBakerMaxEnergyCost, getFullConfigureBakerMinEnergyCost } from '@shared/utils/energy-helpers';
 import { earnPageContext, isAboveStakeWarningThreshold, STAKE_WARNING_THRESHOLD } from '../../utils';
 import { ConfigureBakerFlowState, getCost } from '../utils';
 import { AmountWarning, WarningModal } from '../../Warning';
@@ -43,15 +39,17 @@ export default function AmountPage({ initial, onNext, formValues, accountInfo }:
 
     const cost = useMemo(() => {
         const energyCost = isBaker ? getCost(accountInfo, formValues, amount) : getConfigureBakerMaxEnergyCost();
-        return chainParameters ? convertEnergyToMicroCcd(energyCost, chainParameters) : 0n;
+        return chainParameters ? convertEnergyToMicroCcd(energyCost, chainParameters).microCcdAmount : 0n;
     }, [chainParameters, amount]);
 
     const minCost = useMemo(() => {
         if (isBaker) {
             // min Cost only needed when we are registering a baker
             return 0n;
         }
-        return chainParameters ? convertEnergyToMicroCcd(getFullConfigureBakerMinEnergyCost(), chainParameters) : 0n;
+        return chainParameters
+            ? convertEnergyToMicroCcd(getFullConfigureBakerMinEnergyCost(), chainParameters).microCcdAmount
+            : 0n;
     }, [chainParameters, isBaker]);
 
     const validateAmount: Validate<string> = (amountToValidate) =>

packages/browser-wallet/src/popup/pages/Account/Earn/Delegate/ConfigureDelegationFlow.tsx

@@ -5,6 +5,7 @@ import {
     AccountTransactionType,
     BakerPoolStatus,
     OpenStatusText,
+    convertEnergyToMicroCcd,
 } from '@concordium/web-sdk';
 import { Trans, useTranslation } from 'react-i18next';
 import { ccdToMicroCcd, displayAsCcd, getCcdSymbol, useAsyncMemo, useUpdateEffect } from 'wallet-common-helpers';
@@ -21,7 +22,6 @@ import FormInput from '@popup/shared/Form/Input';
 import ExternalLink from '@popup/shared/ExternalLink';
 import FormAmountInput from '@popup/shared/Form/AmountInput';
 import { validateDelegationAmount } from '@popup/shared/utils/transaction-helpers';
-import { convertEnergyToMicroCcd } from '@shared/utils/energy-helpers';
 import { useAtomValue } from 'jotai';
 import { grpcClientAtom } from '@popup/store/settings';
 import DisabledAmountInput from '@popup/shared/DisabledAmountInput/DisabledAmountInput';
@@ -208,7 +208,7 @@ function AmountPage({ initial, onNext, formValues, accountInfo }: AmountPageProp
 
     const cost = useMemo(() => {
         const energyCost = getCost(accountInfo, formValues, formAmount);
-        return chainParameters ? convertEnergyToMicroCcd(energyCost, chainParameters) : 0n;
+        return chainParameters ? convertEnergyToMicroCcd(energyCost, chainParameters).microCcdAmount : 0n;
     }, [chainParameters, formAmount]);
 
     const poolStatus = useAsyncMemo(

packages/browser-wallet/src/popup/pages/Account/SendCcd/CreateTransfer.tsx

@@ -14,7 +14,7 @@ import {
     max,
     displayAsCcd,
 } from 'wallet-common-helpers';
-import { AccountAddress } from '@concordium/web-sdk';
+import { convertEnergyToMicroCcd, AccountAddress, Energy } from '@concordium/web-sdk';
 import { SubmitHandler, useForm, Validate } from 'react-hook-form';
 import clsx from 'clsx';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -36,7 +36,7 @@ import { addToastAtom } from '@popup/state';
 import TokenBalance from '@popup/shared/TokenBalance';
 import Button from '@popup/shared/Button';
 import SearchIcon from '@assets/svg/search.svg';
-import { convertEnergyToMicroCcd, SIMPLE_TRANSFER_ENERGY_TOTAL_COST } from '@shared/utils/energy-helpers';
+import { SIMPLE_TRANSFER_ENERGY_TOTAL_COST } from '@shared/utils/energy-helpers';
 import Img from '@popup/shared/Img';
 import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
 import { routes } from './routes';
@@ -59,7 +59,7 @@ const getNextRoute = (token?: TokenIdentifier) => {
 /**
  * undefined is used to denote "not resolved yet", to align with useAsyncMemo return type
  */
-type FeeResult = { success: true; value: bigint } | { success: false } | undefined;
+type FeeResult = { success: true; value: Energy.Type } | { success: false } | undefined;
 
 type State = undefined | ConfirmTransferState;
 
@@ -147,20 +147,22 @@ function CreateTransaction({ tokens, setCost, setDetailsExpanded, cost }: Props
                         BigInt(chosenToken.contractIndex)
                     );
                     form.setValue('executionEnergy', energy.execution.toString());
-                    return { success: true, value: energy.total.value };
+                    return { success: true, value: energy.total };
                 } catch (e) {
                     addToast(t('sendCcd.transferInvokeFailed', { message: (e as Error).message }));
                     return { success: false };
                 }
             }
-            return { success: true, value: SIMPLE_TRANSFER_ENERGY_TOTAL_COST };
+            return { success: true, value: Energy.create(SIMPLE_TRANSFER_ENERGY_TOTAL_COST) };
         },
         undefined,
         [chosenToken?.contractIndex, chosenToken?.tokenId, recipient, currentAmount]
     );
 
     useEffect(() => {
-        setCost(chainParameters && fee?.success ? convertEnergyToMicroCcd(fee.value, chainParameters) : 0n);
+        setCost(
+            chainParameters && fee?.success ? convertEnergyToMicroCcd(fee.value, chainParameters).microCcdAmount : 0n
+        );
     }, [fee, chainParameters]);
 
     useEffect(() => {

packages/browser-wallet/src/popup/pages/SendTransaction/SendTransaction.tsx

@@ -3,7 +3,7 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { fullscreenPromptContext } from '@popup/page-layouts/FullscreenPromptLayout';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { AccountAddress } from '@concordium/web-sdk';
+import { AccountAddress, convertEnergyToMicroCcd, getEnergyCost } from '@concordium/web-sdk';
 import { usePrivateKey } from '@popup/shared/utils/account-helpers';
 import {
     sendTransaction,
@@ -22,7 +22,6 @@ import { useUpdateAtom } from 'jotai/utils';
 import { addPendingTransactionAtom } from '@popup/store/transactions';
 import { parsePayload } from '@shared/utils/payload-helpers';
 import { BackgroundSendTransactionPayload } from '@shared/utils/types';
-import { convertEnergyToMicroCcd, getEnergyCost } from '@shared/utils/energy-helpers';
 import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
 import { getPublicAccountAmounts } from 'wallet-common-helpers';
 import * as JSONBig from 'json-bigint';
@@ -92,7 +91,7 @@ export default function SendTransaction({ onSubmit, onReject }: Props) {
         const accountInfo = await client.getAccountInfo(sender);
         if (
             getPublicAccountAmounts(accountInfo).atDisposal <
-            getTransactionAmount(transactionType, payload) + (cost || 0n)
+            getTransactionAmount(transactionType, payload) + (cost?.microCcdAmount || 0n)
         ) {
             throw new Error(t('errors.insufficientFunds'));
         }
@@ -111,7 +110,7 @@ export default function SendTransaction({ onSubmit, onReject }: Props) {
         const transaction = { payload, header, type: transactionType };
 
         const hash = await sendTransaction(client, transaction, key);
-        const pending = createPendingTransactionFromAccountTransaction(transaction, hash, cost);
+        const pending = createPendingTransactionFromAccountTransaction(transaction, hash, cost?.microCcdAmount);
         await addPendingTransaction(pending);
 
         return hash;
@@ -127,7 +126,7 @@ export default function SendTransaction({ onSubmit, onReject }: Props) {
                     payload={payload}
                     parameters={parameters}
                     sender={accountAddress}
-                    cost={cost}
+                    cost={cost?.microCcdAmount}
                     className="m-10"
                 />
                 <br />

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Commissions/Commissions.tsx

@@ -22,9 +22,9 @@ export default function Commissions({ initial, onSubmit, chainParams }: Props) {
     const { bakingCommissionRange, finalizationCommissionRange, transactionCommissionRange } = chainParams;
     const defaultValues: CommissionRates = useMemo(
         () => ({
-            bakingCommission: (initial?.bakingCommission ?? bakingCommissionRange.min) * 100,
-            transactionCommission: (initial?.transactionCommission ?? transactionCommissionRange.min) * 100,
-            finalizationCommission: (initial?.finalizationCommission ?? finalizationCommissionRange.min) * 100,
+            bakingCommission: (initial?.bakingCommission ?? bakingCommissionRange.max) * 100,
+            transactionCommission: (initial?.transactionCommission ?? transactionCommissionRange.max) * 100,
+            finalizationCommission: (initial?.finalizationCommission ?? finalizationCommissionRange.max) * 100,
         }),
         [initial, chainParams]
     );

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts

@@ -97,7 +97,7 @@ const t = {
             validatorDelegationDescription:
                 'If you don’t already know which validator pool you want to delegate an amount to, you can look for one <1>here.</1>',
             passiveDelegationDescription:
-                'Passive delegation is an alternative to delegation to a specific validator pool that has lower rewards. With passive delegation, you do not have to worry about the uptime or quality of a baker node.\nFor more info, you can visit <1>developer.concordium.software</1>',
+                'Passive delegation is an alternative to delegation to a specific validator pool that has lower rewards. With passive delegation, you do not have to worry about the uptime or quality of a validator node.\nFor more info, you can visit <1>developer.concordium.software</1>',
             buttonContinue: 'Continue',
         },
         stake: {
@@ -163,7 +163,7 @@ const t = {
             signatureKey: { label: 'Signature verify key' },
             aggregationKey: { label: 'Aggregation verify key' },
             transactionFeeCommission: { label: 'Transaction fee commission' },
-            bakingRewardCommission: { label: 'Baking reward commission' },
+            bakingRewardCommission: { label: 'Validation reward commission' },
             finalizationRewardCommission: { label: 'Finalization reward commission' },
         },
         status: {
@@ -183,7 +183,7 @@ const t = {
             },
             '3': {
                 title: 'Opening a pool',
-                body: 'You have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to earn rewards to do so without the need to run a node or become a validator themselves.\n\nTo do this they delegate an amount to your staking pool which then increases your total stake and your chances of winning the lottery to bake a block. At each pay day the rewards will be distributed to you and your delegators.\n\nYou can also choose not to open a pool, in which case only your own stake applies toward the lottery. You can always open or close a pool later.',
+                body: 'You have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to earn rewards to do so without the need to run a node or become a validator themselves.\n\nTo do this they delegate an amount to your staking pool which then increases your total stake and your chances of winning the lottery to produce a block. At each pay day the rewards will be distributed to you and your delegators.\n\nYou can also choose not to open a pool, in which case only your own stake applies toward the lottery. You can always open or close a pool later.',
             },
         },
         register: {
@@ -266,7 +266,7 @@ const t = {
                 label: 'Open for delegation',
             },
             description:
-                'Opening a pool\nYou have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to earn rewards to do so without the need to run a node or become a validator themselves.\n\nTo do this they delegate an amount to your staking pool which then increases your total stake and your chances of winning the lottery to bake a block. At each pay day the rewards will be distributed to you and your delegators.\n\nYou can also choose not to open a pool, in which case only your own stake applies toward the lottery. You can always open or close a pool later.',
+                'Opening a pool\nYou have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to earn rewards to do so without the need to run a node or become a validator themselves.\n\nTo do this they delegate an amount to your staking pool which then increases your total stake and your chances of winning the lottery to produce a block. At each pay day the rewards will be distributed to you and your delegators.\n\nYou can also choose not to open a pool, in which case only your own stake applies toward the lottery. You can always open or close a pool later.',
             buttonContinue: 'Continue',
         },
         metadata: {

packages/browser-wallet/src/popup/popupX/pages/prompts/SendTransaction/SendTransaction.tsx

@@ -13,8 +13,7 @@ import { usePrivateKey } from '@popup/shared/utils/account-helpers';
 import { parsePayload } from '@shared/utils/payload-helpers';
 import * as JSONBig from 'json-bigint';
 import { SmartContractParameters } from '@concordium/browser-wallet-api-helpers';
-import { convertEnergyToMicroCcd, getEnergyCost } from '@shared/utils/energy-helpers';
-import { AccountAddress } from '@concordium/web-sdk';
+import { AccountAddress, convertEnergyToMicroCcd, getEnergyCost } from '@concordium/web-sdk';
 import { displayAsCcd, getPublicAccountAmounts } from 'wallet-common-helpers';
 import {
     createPendingTransactionFromAccountTransaction,
@@ -96,7 +95,7 @@ export default function SendTransaction({ onSubmit, onReject }: Props) {
         const accountInfo = await client.getAccountInfo(sender);
         if (
             getPublicAccountAmounts(accountInfo).atDisposal <
-            getTransactionAmount(transactionType, payload) + (cost || 0n)
+            getTransactionAmount(transactionType, payload) + (cost?.microCcdAmount || 0n)
         ) {
             throw new Error(t('errors.insufficientFunds'));
         }
@@ -115,7 +114,7 @@ export default function SendTransaction({ onSubmit, onReject }: Props) {
         const transaction = { payload, header, type: transactionType };
 
         const hash = await sendTransaction(client, transaction, key);
-        const pending = createPendingTransactionFromAccountTransaction(transaction, hash, cost);
+        const pending = createPendingTransactionFromAccountTransaction(transaction, hash, cost?.microCcdAmount);
         await addPendingTransaction(pending);
 
         return hash;