Skip to content

Commit d418710

Browse files
juliancwirkojuliancwirko
committed
merge useTransaction and useScTransaction, minor improvements
1 parent 48aa498 commit d418710

21 files changed

+502
-252
lines changed

‎.eslintrc‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55
"plugin:valtio/recommended",
66
"plugin:@typescript-eslint/recommended"
77
],
8-
"rules": {
9-
"valtio/state-snapshot-rule": "off"
10-
},
118
"plugins": ["@typescript-eslint"],
129
"parser": "@typescript-eslint/parser"
1310
}

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
### [5.0.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v5.0.0) (2023-02-04)
2+
- **Breaking:** There is no more `useScTransaction` hook. You can use `useTransaction` for all cases. You would need to prepare a proper data payload for custom smart contracts. Check the example in the Readme and code
3+
- switch to `useProxy` from `valtio`
4+
- enable React strict mode
5+
16
### [4.3.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v4.3.0) (2023-01-28)
27
- `txResults` is now returned in `useTransaction` and `useScTransaction` hooks (it is ITransactionOnNetwork in sdk-core)
38
- dependencies updates

‎README.md‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -109,33 +109,37 @@ The hook provides all that is required for triggering transactions. useTransacti
109109
```jsx
110110
const { pending, triggerTx, transaction, txResult, error } = useTransaction({ cb });
111111

112-
const handleSendTx = useCallback(() => {
112+
const handleSendTx = () => {
113113
const demoMessage = 'Transaction demo!';
114114
triggerTx({
115115
address: process.env.NEXT_PUBLIC_EGLD_TRANSFER_ADDRESS,
116116
gasLimit: 50000 + 1500 * demoMessage.length,
117117
data: new TransactionPayload(demoMessage),
118118
value: process.env.NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT,
119119
});
120-
}, [triggerTx]);
120+
};
121121
```
122122

123-
#### useScTransaction()
124-
125-
The hook provides all that is required for triggering smart contract transactions. useScTransaction can also take a callback function as an argument.
123+
Example with Smart Contract data payload. For example, when you want to call an endpoint on a custom smart contract.
126124

127125
```jsx
128-
const { pending, triggerTx, transaction, txResult, error } = useScTransaction({ cb });
126+
import { U32Value, ContractFunction, ContractCallPayloadBuilder } from '@multiversx/sdk-core';
127+
128+
const { triggerTx } = useTransaction();
129+
130+
const handleSendTx = () => {
131+
const data = new ContractCallPayloadBuilder()
132+
.setFunction(new ContractFunction(mintFunctionName))
133+
.setArgs([new U32Value(1)])
134+
.build();
129135

130-
const handleSendTx = useCallback(() => {
131136
triggerTx({
132-
smartContractAddress: process.env.NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS,
133-
func: process.env.NEXT_PUBLIC_MINT_FUNCTION_NAME,
137+
address: mintSmartContractAddress,
134138
gasLimit: 14000000,
135-
args: [new U32Value(1)],
136-
value: process.env.NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN,
139+
value: Number(mintPaymentPerToken),
140+
data
137141
});
138-
}, [triggerTx]);
142+
};
139143
```
140144

141145
#### useScQuery()

‎components/demo/CardItemWrapper.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { FC, PropsWithChildren } from 'react';
2+
import { Flex, forwardRef, FlexProps } from '@chakra-ui/react';
3+
4+
export const CardItemWrapper: FC<PropsWithChildren> = forwardRef<
5+
FlexProps,
6+
'div'
7+
>(({ children }, ref) => (
8+
<Flex flexWrap="wrap" gap={2} ref={ref}>
9+
{children}
10+
</Flex>
11+
));

‎components/demo/GetLoggingInStateDemo.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Text } from '@chakra-ui/react';
22
import { FlexCardWrapper } from '../ui/CardWrapper';
33
import { useLoggingIn } from '../../hooks/auth/useLoggingIn';
4+
import { CardItemWrapper } from './CardItemWrapper';
45

56
export const GetLoggingInStateDemo = () => {
67
const { isLoggingIn, error, isLoggedIn } = useLoggingIn();
@@ -10,24 +11,24 @@ export const GetLoggingInStateDemo = () => {
1011
<Text fontSize="xl" mb={2} fontWeight="black">
1112
Logging in current state:
1213
</Text>
13-
<Text>
14+
<CardItemWrapper>
1415
<Text as="span" display="inline-block" fontWeight="bold">
1516
isLoggingIn:
1617
</Text>{' '}
1718
{isLoggingIn ? 'true' : 'false'}
18-
</Text>
19-
<Text>
19+
</CardItemWrapper>
20+
<CardItemWrapper>
2021
<Text as="span" display="inline-block" fontWeight="bold">
2122
error:
2223
</Text>{' '}
2324
{error || '-'}
24-
</Text>
25-
<Text>
25+
</CardItemWrapper>
26+
<CardItemWrapper>
2627
<Text as="span" display="inline-block" fontWeight="bold">
2728
isLoggedIn:
2829
</Text>{' '}
2930
{isLoggedIn ? 'true' : 'false'}
30-
</Text>
31+
</CardItemWrapper>
3132
</FlexCardWrapper>
3233
);
3334
};

‎components/demo/GetLoginInfoDemo.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Text, Tooltip } from '@chakra-ui/react';
22
import { FlexCardWrapper } from '../ui/CardWrapper';
33
import { useLoginInfo } from '../../hooks/auth/useLoginInfo';
44
import { shortenHash } from '../../utils/shortenHash';
5+
import { CardItemWrapper } from './CardItemWrapper';
56

67
export const GetLoginInfoDemo = () => {
78
const { loginMethod, expires, loginToken, signature } = useLoginInfo();
@@ -11,31 +12,31 @@ export const GetLoginInfoDemo = () => {
1112
<Text fontSize="xl" mb={2} fontWeight="black">
1213
Login info state:
1314
</Text>
14-
<Text>
15+
<CardItemWrapper>
1516
<Text as="span" display="inline-block" fontWeight="bold">
1617
loginMethod:
1718
</Text>{' '}
1819
{loginMethod}
19-
</Text>
20-
<Text>
20+
</CardItemWrapper>
21+
<CardItemWrapper>
2122
<Text as="span" display="inline-block" fontWeight="bold">
2223
expires:
2324
</Text>{' '}
2425
{expires}
25-
</Text>
26-
<Text>
26+
</CardItemWrapper>
27+
<CardItemWrapper>
2728
<Text as="span" display="inline-block" fontWeight="bold">
2829
loginToken:
2930
</Text>{' '}
3031
{loginToken || '-'}
31-
</Text>
32+
</CardItemWrapper>
3233
<Tooltip label={signature}>
33-
<Text>
34+
<CardItemWrapper>
3435
<Text as="span" display="inline-block" fontWeight="bold">
3536
signature:
3637
</Text>{' '}
3738
{signature ? shortenHash(signature, 8) : '-'}
38-
</Text>
39+
</CardItemWrapper>
3940
</Tooltip>
4041
</FlexCardWrapper>
4142
);

‎components/demo/GetUserDataDemo.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { shortenHash } from '../../utils/shortenHash';
44
import { useAccount } from '../../hooks/auth/useAccount';
55
import { FlexCardWrapper } from '../ui/CardWrapper';
66
import { networkConfig, chainType } from '../../config/network';
7+
import { CardItemWrapper } from './CardItemWrapper';
78

89
export const GetUserDataDemo = () => {
910
const { address, nonce, balance } = useAccount();
@@ -13,7 +14,7 @@ export const GetUserDataDemo = () => {
1314
<Text fontSize="xl" mb={2} fontWeight="black">
1415
User data:
1516
</Text>
16-
<Text>
17+
<CardItemWrapper>
1718
<Text as="span" display="inline-block" fontWeight="bold">
1819
address:
1920
</Text>{' '}
@@ -23,14 +24,14 @@ export const GetUserDataDemo = () => {
2324
>
2425
{shortenHash(address, 8)}
2526
</Link>
26-
</Text>
27-
<Text>
27+
</CardItemWrapper>
28+
<CardItemWrapper>
2829
<Text as="span" display="inline-block" fontWeight="bold">
2930
nonce:
3031
</Text>{' '}
3132
{nonce}
32-
</Text>
33-
<Text>
33+
</CardItemWrapper>
34+
<CardItemWrapper>
3435
<Text as="span" display="inline-block" fontWeight="bold">
3536
balance:
3637
</Text>{' '}
@@ -39,7 +40,7 @@ export const GetUserDataDemo = () => {
3940
TokenPayment.egldFromBigInteger(balance).toRationalNumber()
4041
)
4142
: '-'}
42-
</Text>
43+
</CardItemWrapper>
4344
</FlexCardWrapper>
4445
);
4546
};

‎components/demo/SimpleNftMintDemo.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Link, Text } from '@chakra-ui/react';
2-
import { U32Value, ContractFunction } from '@multiversx/sdk-core';
3-
import { useScTransaction } from '../../hooks/core/useScTransaction';
2+
import { U32Value, ContractFunction, ContractCallPayloadBuilder } from '@multiversx/sdk-core';
3+
import { useTransaction } from '../../hooks/core/useTransaction';
44
import { useCallback } from 'react';
55
import { ActionButton } from '../tools/ActionButton';
66
import { networkConfig, chainType } from '../../config/network';
@@ -19,15 +19,21 @@ export const SimpleNftMintDemo = ({
1919
}: {
2020
cb: (params: TransactionCb) => void;
2121
}) => {
22-
const { pending, triggerTx } = useScTransaction({ cb });
22+
const { pending, triggerTx } = useTransaction({ cb });
2323

2424
const handleSendTx = useCallback(() => {
25+
26+
// Prepare data payload for smart contract using MultiversX JS SDK core tools
27+
const data = new ContractCallPayloadBuilder()
28+
.setFunction(new ContractFunction(mintFunctionName))
29+
.setArgs([new U32Value(1)])
30+
.build();
31+
2532
triggerTx({
26-
smartContractAddress: mintSmartContractAddress,
27-
func: new ContractFunction(mintFunctionName),
33+
address: mintSmartContractAddress,
2834
gasLimit: 14000000,
29-
args: [new U32Value(1)],
3035
value: Number(mintPaymentPerToken),
36+
data
3137
});
3238
}, [triggerTx]);
3339

‎components/tools/LoginModalButton.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import {
24
Modal,
35
ModalOverlay,

‎hooks/auth/useAccount.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useSnapshot } from 'valtio';
1+
import { useProxy } from '../tools/useProxy';
22
import { accountState } from '../../store/auth';
33

44
export const useAccount = () => {
5-
const account = useSnapshot(accountState);
5+
const account = useProxy(accountState);
66

77
return account;
88
};

0 commit comments

Comments
 (0)