@coinbase/create-cdp-app 0.0.14 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/template-nextjs/src/components/Transaction.tsx +49 -44
  3. package/template-react/src/Transaction.tsx +49 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/create-cdp-app",
3
- "version": "0.0.14",
3
+ "version": "0.0.16",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
package/template-nextjs/src/components/Transaction.tsx CHANGED
@@ -1,8 +1,11 @@
1
- "use client";
2
- import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
1
+ import { useEvmAddress } from "@coinbase/cdp-hooks";
3
2
  import { Button } from "@coinbase/cdp-react/components/Button";
4
3
  import { LoadingSkeleton } from "@coinbase/cdp-react/components/LoadingSkeleton";
5
- import { type MouseEvent, useCallback, useMemo, useState } from "react";
4
+ import {
5
+ SendTransactionButton,
6
+ type SendTransactionButtonProps,
7
+ } from "@coinbase/cdp-react/components/SendTransactionButton";
8
+ import { useMemo, useState } from "react";
6
9
 
7
10
  interface Props {
8
11
  balance?: string;
@@ -19,42 +22,39 @@ interface Props {
19
22
  */
20
23
  export default function Transaction(props: Props) {
21
24
  const { balance, onSuccess } = props;
22
- const sendEvmTransaction = useSendEvmTransaction();
23
25
  const evmAddress = useEvmAddress();
26
+ const [transactionHash, setTransactionHash] = useState("");
27
+ const [error, setError] = useState("");
24
28
 
25
- const [isPending, setIsPending] = useState(false);
26
- const [transactionHash, setTransactionHash] = useState<string | null>(null);
27
29
  const hasBalance = useMemo(() => {
28
30
  return balance && balance !== "0";
29
31
  }, [balance]);
30
32
 
31
- const handleSendTransaction = useCallback(
32
- async (e: MouseEvent<HTMLButtonElement>) => {
33
- if (!evmAddress) {
34
- return;
35
- }
33
+ const transaction = useMemo<SendTransactionButtonProps["transaction"]>(() => {
34
+ return {
35
+ to: evmAddress, // Send to yourself for testing
36
+ value: 1000000000000n, // 0.000001 ETH in wei
37
+ gas: 21000n,
38
+ chainId: 84532, // Base Sepolia
39
+ type: "eip1559",
40
+ };
41
+ }, [evmAddress]);
36
42
 
37
- e.preventDefault();
38
- setIsPending(true);
43
+ const handleTransactionError: SendTransactionButtonProps["onError"] = error => {
44
+ setTransactionHash("");
45
+ setError(error.message);
46
+ };
39
47
 
40
- const { transactionHash } = await sendEvmTransaction({
41
- transaction: {
42
- to: evmAddress, // Send to yourself for testing
43
- value: 1000000000000n, // 0.000001 ETH in wei
44
- gas: 21000n,
45
- chainId: 84532, // Base Sepolia
46
- type: "eip1559",
47
- },
48
- evmAccount: evmAddress,
49
- network: "base-sepolia",
50
- });
48
+ const handleTransactionSuccess: SendTransactionButtonProps["onSuccess"] = hash => {
49
+ setTransactionHash(hash);
50
+ setError("");
51
+ onSuccess?.();
52
+ };
51
53
 
52
- setTransactionHash(transactionHash);
53
- setIsPending(false);
54
- onSuccess?.();
55
- },
56
- [evmAddress, sendEvmTransaction, onSuccess],
57
- );
54
+ const handleReset = () => {
55
+ setTransactionHash("");
56
+ setError("");
57
+ };
58
58
 
59
59
  return (
60
60
  <>
@@ -67,19 +67,28 @@ export default function Transaction(props: Props) {
67
67
  )}
68
68
  {balance !== undefined && (
69
69
  <>
70
- {!transactionHash && (
70
+ {!transactionHash && error && (
71
+ <>
72
+ <h2 className="card-title">Oops</h2>
73
+ <p>{error}</p>
74
+ <Button className="tx-button" onClick={handleReset} variant="secondary">
75
+ Reset and try again
76
+ </Button>
77
+ </>
78
+ )}
79
+ {!transactionHash && !error && (
71
80
  <>
72
81
  <h2 className="card-title">Send a transaction</h2>
73
- {hasBalance && (
82
+ {hasBalance && evmAddress && (
74
83
  <>
75
84
  <p>Send 0.000001 ETH to yourself on Base Sepolia</p>
76
- <Button
77
- className="tx-button"
78
- onClick={handleSendTransaction}
79
- isPending={isPending}
80
- >
81
- Send Transaction
82
- </Button>
85
+ <SendTransactionButton
86
+ account={evmAddress}
87
+ network="base-sepolia"
88
+ transaction={transaction}
89
+ onError={handleTransactionError}
90
+ onSuccess={handleTransactionSuccess}
91
+ />
83
92
  </>
84
93
  )}
85
94
  {!hasBalance && (
@@ -112,11 +121,7 @@ export default function Transaction(props: Props) {
112
121
  {transactionHash.slice(0, 6)}...{transactionHash.slice(-4)}
113
122
  </a>
114
123
  </p>
115
- <Button
116
- variant="secondary"
117
- className="tx-button"
118
- onClick={() => setTransactionHash(null)}
119
- >
124
+ <Button variant="secondary" className="tx-button" onClick={handleReset}>
120
125
  Send another transaction
121
126
  </Button>
122
127
  </>
package/template-react/src/Transaction.tsx CHANGED
@@ -1,7 +1,11 @@
1
- import { useSendEvmTransaction, useEvmAddress } from "@coinbase/cdp-hooks";
1
+ import { useEvmAddress } from "@coinbase/cdp-hooks";
2
2
  import { Button } from "@coinbase/cdp-react/components/Button";
3
3
  import { LoadingSkeleton } from "@coinbase/cdp-react/components/LoadingSkeleton";
4
- import { type MouseEvent, useCallback, useMemo, useState } from "react";
4
+ import {
5
+ SendTransactionButton,
6
+ type SendTransactionButtonProps,
7
+ } from "@coinbase/cdp-react/components/SendTransactionButton";
8
+ import { useMemo, useState } from "react";
5
9
 
6
10
  interface Props {
7
11
  balance?: string;
@@ -18,42 +22,39 @@ interface Props {
18
22
  */
19
23
  function Transaction(props: Props) {
20
24
  const { balance, onSuccess } = props;
21
- const sendEvmTransaction = useSendEvmTransaction();
22
25
  const evmAddress = useEvmAddress();
26
+ const [transactionHash, setTransactionHash] = useState("");
27
+ const [error, setError] = useState("");
23
28
 
24
- const [isPending, setIsPending] = useState(false);
25
- const [transactionHash, setTransactionHash] = useState<string | null>(null);
26
29
  const hasBalance = useMemo(() => {
27
30
  return balance && balance !== "0";
28
31
  }, [balance]);
29
32
 
30
- const handleSendTransaction = useCallback(
31
- async (e: MouseEvent<HTMLButtonElement>) => {
32
- if (!evmAddress) {
33
- return;
34
- }
33
+ const transaction = useMemo<SendTransactionButtonProps["transaction"]>(() => {
34
+ return {
35
+ to: evmAddress, // Send to yourself for testing
36
+ value: 1000000000000n, // 0.000001 ETH in wei
37
+ gas: 21000n,
38
+ chainId: 84532, // Base Sepolia
39
+ type: "eip1559",
40
+ };
41
+ }, [evmAddress]);
35
42
 
36
- e.preventDefault();
37
- setIsPending(true);
43
+ const handleTransactionError: SendTransactionButtonProps["onError"] = error => {
44
+ setTransactionHash("");
45
+ setError(error.message);
46
+ };
38
47
 
39
- const { transactionHash } = await sendEvmTransaction({
40
- transaction: {
41
- to: evmAddress, // Send to yourself for testing
42
- value: 1000000000000n, // 0.000001 ETH in wei
43
- gas: 21000n,
44
- chainId: 84532, // Base Sepolia
45
- type: "eip1559",
46
- },
47
- evmAccount: evmAddress,
48
- network: "base-sepolia",
49
- });
48
+ const handleTransactionSuccess: SendTransactionButtonProps["onSuccess"] = hash => {
49
+ setTransactionHash(hash);
50
+ setError("");
51
+ onSuccess?.();
52
+ };
50
53
 
51
- setTransactionHash(transactionHash);
52
- setIsPending(false);
53
- onSuccess?.();
54
- },
55
- [evmAddress, sendEvmTransaction, onSuccess],
56
- );
54
+ const handleReset = () => {
55
+ setTransactionHash("");
56
+ setError("");
57
+ };
57
58
 
58
59
  return (
59
60
  <>
@@ -66,19 +67,28 @@ function Transaction(props: Props) {
66
67
  )}
67
68
  {balance !== undefined && (
68
69
  <>
69
- {!transactionHash && (
70
+ {!transactionHash && error && (
71
+ <>
72
+ <h2 className="card-title">Oops</h2>
73
+ <p>{error}</p>
74
+ <Button className="tx-button" onClick={handleReset} variant="secondary">
75
+ Reset and try again
76
+ </Button>
77
+ </>
78
+ )}
79
+ {!transactionHash && !error && (
70
80
  <>
71
81
  <h2 className="card-title">Send a transaction</h2>
72
- {hasBalance && (
82
+ {hasBalance && evmAddress && (
73
83
  <>
74
84
  <p>Send 0.000001 ETH to yourself on Base Sepolia</p>
75
- <Button
76
- className="tx-button"
77
- onClick={handleSendTransaction}
78
- isPending={isPending}
79
- >
80
- Send Transaction
81
- </Button>
85
+ <SendTransactionButton
86
+ account={evmAddress}
87
+ network="base-sepolia"
88
+ transaction={transaction}
89
+ onError={handleTransactionError}
90
+ onSuccess={handleTransactionSuccess}
91
+ />
82
92
  </>
83
93
  )}
84
94
  {!hasBalance && (
@@ -111,11 +121,7 @@ function Transaction(props: Props) {
111
121
  {transactionHash.slice(0, 6)}...{transactionHash.slice(-4)}
112
122
  </a>
113
123
  </p>
114
- <Button
115
- variant="secondary"
116
- className="tx-button"
117
- onClick={() => setTransactionHash(null)}
118
- >
124
+ <Button variant="secondary" className="tx-button" onClick={handleReset}>
119
125
  Send another transaction
120
126
  </Button>
121
127
  </>