From 6d98350192e21257bb422676843a66fab82fae91 Mon Sep 17 00:00:00 2001 From: inukares Date: Thu, 5 Sep 2024 11:53:52 +0200 Subject: [PATCH 1/6] fix(deps): update deps for hooks --- src/state/connectedWalletStarknetkitNext.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/state/connectedWalletStarknetkitNext.ts b/src/state/connectedWalletStarknetkitNext.ts index 5daa657..6161101 100644 --- a/src/state/connectedWalletStarknetkitNext.ts +++ b/src/state/connectedWalletStarknetkitNext.ts @@ -3,7 +3,7 @@ import { ChainId, NetworkChangeEventHandler, } from "@starknet-io/types-js" -import { useAtom, useAtomValue, useSetAtom } from "jotai" +import { useAtomValue, useSetAtom } from "jotai" import { atomWithReset } from "jotai/utils" import { useEffect } from "react" import { ConnectorData, StarknetWindowObject } from "starknetkit-next" @@ -53,5 +53,5 @@ export const useWalletAccountChange = () => { wallet?.off("accountsChanged", accountChangeHandler) wallet?.off("networkChanged", networkChangeHandler) return - }, []) + }, [accountChangeHandler, networkChangeHandler]) } From ae5fd0e998b7a8844026a19664018779b9e94278 Mon Sep 17 00:00:00 2001 From: inukares Date: Thu, 5 Sep 2024 11:54:10 +0200 Subject: [PATCH 2/6] fix(deps): update deps for hooks v2 --- src/state/connectedWalletStarknetkitNext.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/state/connectedWalletStarknetkitNext.ts b/src/state/connectedWalletStarknetkitNext.ts index 6161101..7486140 100644 --- a/src/state/connectedWalletStarknetkitNext.ts +++ b/src/state/connectedWalletStarknetkitNext.ts @@ -53,5 +53,5 @@ export const useWalletAccountChange = () => { wallet?.off("accountsChanged", accountChangeHandler) wallet?.off("networkChanged", networkChangeHandler) return - }, [accountChangeHandler, networkChangeHandler]) + }, [wallet, accountChangeHandler, networkChangeHandler]) } From b026169894346ac2be2491644f5bb4ab6ec88a66 Mon Sep 17 00:00:00 2001 From: inukares Date: Thu, 5 Sep 2024 13:27:02 +0200 Subject: [PATCH 3/6] fix(deps): use new hooks. Decouple components using different lib versions. --- package.json | 9 +- pnpm-lock.yaml | 125 ++++++++-------- .../_components}/MintWithStarknetReact.tsx | 0 .../TransferWithStarknetReact.tsx | 0 src/app/withStarknetReactLatest/page.tsx | 6 +- .../_components/MintWithStarknetReact.tsx | 84 +++++++++++ .../_components/TransferWithStarknetReact.tsx | 134 ++++++++++++++++++ src/app/withStarknetReactNext/page.tsx | 7 +- 8 files changed, 298 insertions(+), 67 deletions(-) rename src/{components/Actions => app/withStarknetReactLatest/_components}/MintWithStarknetReact.tsx (100%) rename src/{components/Actions => app/withStarknetReactLatest/_components}/TransferWithStarknetReact.tsx (100%) create mode 100644 src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx create mode 100644 src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx diff --git a/package.json b/package.json index cb96657..6219001 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "prepare": "husky" + "prepare": "husky", + "format": "prettier --write ." }, "dependencies": { "@argent/x-sessions": "^6.7.4", @@ -20,7 +21,7 @@ "@starknet-react/core": "^2.8.2", "colord": "^2.9.3", "framer-motion": "^11.2.10", - "get-starknet-core": "^3.2.0", + "get-starknet-core": "^4.0.0", "jotai": "^2.8.2", "lodash-es": "^4.17.21", "next": "14.2.4", @@ -28,8 +29,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "starknet": "^6.11.0", - "starknet-react-chains-next": "npm:@starknet-react/chains@3.0.0-beta.2", - "starknet-react-core-next": "npm:@starknet-react/core@3.0.0-beta.2", + "starknet-react-chains-next": "npm:@starknet-react/chains@3.0.0-beta.3", + "starknet-react-core-next": "npm:@starknet-react/core@3.0.0-beta.3", "starknetkit-latest": "npm:starknetkit@^1.1.9", "starknetkit-next": "npm:starknetkit@^2.2.25" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3005acc..fdd42ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 6.7.5 '@argent/x-shared': specifier: ^1.32.1 - version: 1.34.2(@scure/base@1.1.7)(@scure/bip39@1.3.0)(lodash-es@4.17.21)(object-hash@3.0.0)(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(swr@1.3.0(react@18.3.1))(typescript@5.5.4)(ua-parser-js@1.0.38)(zod@3.23.8) + version: 1.34.2(@scure/base@1.1.8)(@scure/bip39@1.4.0)(lodash-es@4.17.21)(object-hash@3.0.0)(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(swr@1.3.0(react@18.3.1))(typescript@5.5.4)(ua-parser-js@1.0.38)(zod@3.23.8) '@chakra-ui/react': specifier: ^2.8.2 version: 2.8.2(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(framer-motion@11.3.28(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -31,7 +31,7 @@ importers: version: 0.1.7 '@starknet-react/core': specifier: ^2.8.2 - version: 2.9.0(get-starknet-core@3.3.3(starknet@6.11.0))(react@18.3.1)(starknet@6.11.0) + version: 2.9.0(get-starknet-core@4.0.0)(react@18.3.1)(starknet@6.11.0) colord: specifier: ^2.9.3 version: 2.9.3 @@ -39,8 +39,8 @@ importers: specifier: ^11.2.10 version: 11.3.28(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) get-starknet-core: - specifier: ^3.2.0 - version: 3.3.3(starknet@6.11.0) + specifier: ^4.0.0 + version: 4.0.0 jotai: specifier: ^2.8.2 version: 2.9.3(@types/react@18.3.3)(react@18.3.1) @@ -63,11 +63,11 @@ importers: specifier: ^6.11.0 version: 6.11.0 starknet-react-chains-next: - specifier: npm:@starknet-react/chains@3.0.0-beta.2 - version: '@starknet-react/chains@3.0.0-beta.2' + specifier: npm:@starknet-react/chains@3.0.0-beta.3 + version: '@starknet-react/chains@3.0.0-beta.3' starknet-react-core-next: - specifier: npm:@starknet-react/core@3.0.0-beta.2 - version: '@starknet-react/core@3.0.0-beta.2(get-starknet-core@3.3.3(starknet@6.11.0))(react@18.3.1)(starknet@6.11.0)(typescript@5.5.4)' + specifier: npm:@starknet-react/core@3.0.0-beta.3 + version: '@starknet-react/core@3.0.0-beta.3(get-starknet-core@4.0.0)(react@18.3.1)(starknet@6.11.0)(typescript@5.5.4)' starknetkit-latest: specifier: npm:starknetkit@^1.1.9 version: starknetkit@1.1.9(starknet@6.11.0) @@ -101,7 +101,7 @@ importers: version: 9.1.0(eslint@8.57.0) eslint-plugin-import: specifier: ^2.29.1 - version: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + version: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-react: specifier: ^7.34.2 version: 7.35.0(eslint@8.57.0) @@ -874,6 +874,10 @@ packages: resolution: {integrity: sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==} engines: {node: '>= 16'} + '@noble/hashes@1.5.0': + resolution: {integrity: sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==} + engines: {node: ^14.21.3 || >=16} + '@noble/secp256k1@1.7.1': resolution: {integrity: sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==} @@ -988,6 +992,9 @@ packages: '@scure/base@1.1.7': resolution: {integrity: sha512-PPNYBslrLNNUQ/Yad37MHYsNQtK67EhWb6WtSvNLLPo7SdVZgkUjD6Dg+5On7zNwmskf8OX7I7Nx5oN+MIWE0g==} + '@scure/base@1.1.8': + resolution: {integrity: sha512-6CyAclxj3Nb0XT7GHK6K4zK6k2xJm6E4Ft0Ohjt4WgegiFUHEtFb2CGzmPmGBwoIhrLsqNLYfLr04Y1GePrzZg==} + '@scure/bip32@1.1.5': resolution: {integrity: sha512-XyNh1rB0SkEqd3tXcXMi+Xe1fvg+kUIcoRIEujP1Jgv7DqW2r9lg3Ah0NkFaCs9sTkQAQA8kw7xiRXzENi9Rtw==} @@ -997,8 +1004,8 @@ packages: '@scure/bip39@1.1.1': resolution: {integrity: sha512-t+wDck2rVkh65Hmv280fYdVdY25J9YeEUIgn2LG1WM6gxFkGzcksoDiUkWVpVp3Oex9xGC68JU2dSbUfwZ2jPg==} - '@scure/bip39@1.3.0': - resolution: {integrity: sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==} + '@scure/bip39@1.4.0': + resolution: {integrity: sha512-BEEm6p8IueV/ZTfQLp/0vhw4NPnT9oWf5+28nvmeUICjP99f4vr2d+qc7AVGDDtwRep6ifR43Yed9ERVmiITzw==} '@scure/starknet@1.0.0': resolution: {integrity: sha512-o5J57zY0f+2IL/mq8+AYJJ4Xpc1fOtDhr+mFQKbHnYFmm3WQrC+8zj2HEgxak1a+x86mhmBC1Kq305KUpVf0wg==} @@ -1069,8 +1076,8 @@ packages: '@starknet-react/chains@0.1.7': resolution: {integrity: sha512-UNh97I1SvuJKaAhKOmpEk8JcWuZWMlPG/ba2HcvFYL9x/47BKndJ+Da9V+iJFtkHUjreVnajT1snsaz1XMG+UQ==} - '@starknet-react/chains@3.0.0-beta.2': - resolution: {integrity: sha512-ig/IxmNPfaBWOGSBcMKqzElXt6ksNt4VjEgHrFO4oaRw0xl9YVQuw32GbN9ju37CxTyNC32eFX+DGOyOCGaBcg==} + '@starknet-react/chains@3.0.0-beta.3': + resolution: {integrity: sha512-Xq59vvSctzQmYLATRBdqouiW3bdI+dyYUviBIF0G2k70niPatJsSNa8N8NsJCk5yHo1xLnfoYvo9ufVp+BQrUQ==} '@starknet-react/core@2.9.0': resolution: {integrity: sha512-UdRo454/g2lb0YsNAUJohJ2w21LlahcEXQlkWrddoKFubRY6Q0b39hec0eZOCqfU0Z1Sh7kF1XYvI5t9xL4yTQ==} @@ -1079,12 +1086,12 @@ packages: react: ^18.0 starknet: ^5.25.0 - '@starknet-react/core@3.0.0-beta.2': - resolution: {integrity: sha512-6ETF7TjQFaFs3EMLhrACu9jd0ZJ0lvUeg6PmQ+W4KIHM2VjpvdmTqu8uwmxWDJmVCF4u7+Biy6DrQTAbPQAbJQ==} + '@starknet-react/core@3.0.0-beta.3': + resolution: {integrity: sha512-J8VS4Ou4VRATDTpWwFjp2P7WzSkpSFc3qa7TA6mcHMaD50T/53VegoqnNO5EfhB0OSUIgEKaN7JnRyg26UGybg==} peerDependencies: - get-starknet-core: ^4.0.0-next.5 + get-starknet-core: ^4.0.0 react: ^18.0 - starknet: ^6.12.1 + starknet: ^6.11.0 '@swc/counter@0.1.3': resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} @@ -1092,13 +1099,13 @@ packages: '@swc/helpers@0.5.5': resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} - '@tanstack/query-core@5.51.24': - resolution: {integrity: sha512-qtIR0FMHUDIWyIQw87q4C+so7XaN59MsGfWrc6rgi2VTHrVZF3Hd0St2dbpqRetHf6XW5yY5lzTrXpTilPlxUg==} + '@tanstack/query-core@5.54.1': + resolution: {integrity: sha512-hKS+WRpT5zBFip21pB6Jx1C0hranWQrbv5EJ7qPoiV5MYI3C8rTCqWC9DdBseiPT1JgQWh8Y55YthuYZNiw3Xw==} - '@tanstack/react-query@5.51.24': - resolution: {integrity: sha512-sW1qRwoCDqOFku67xng4Y5z6NPK1DS347jR4RiX9wFHrmyqpbXgUjPIjT3fodezdJAaSJD/6CvWb0cl05J8zNQ==} + '@tanstack/react-query@5.54.1': + resolution: {integrity: sha512-SuMi4JBYv49UtmiRyqjxY7XAnE1qwLht9nlkC8sioxFXz5Uzj30lepiKf2mYXuXfC7fHYjTrAPkNx+427pRHXA==} peerDependencies: - react: ^18.0.0 + react: ^18 || ^19 '@trpc/client@10.45.2': resolution: {integrity: sha512-ykALM5kYWTLn1zYuUOZ2cPWlVfrXhc18HzBDyRhoPYN0jey4iQHEFSEowfnhg1RvYnrAVjNBgHNeSAXjrDbGwg==} @@ -3317,8 +3324,8 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} - viem@2.19.7: - resolution: {integrity: sha512-zoaBWnI6vf7MVRn4lAbuKd25hR31088yrMqONMHU8RjHTY4nqf+O589BPODwJak1LkfpbawyGyCY2tRFwZCWgw==} + viem@2.21.2: + resolution: {integrity: sha512-gTzwKbmyepEDUBKXs3GslTcg5KXfDIgQfHKNxIV9cs7Xout55F8NvHhNeBGBfuw1Ix4Vz8aCMFGYwX5a64CGFg==} peerDependencies: typescript: '>=5.0.4' peerDependenciesMeta: @@ -3446,12 +3453,12 @@ snapshots: transitivePeerDependencies: - encoding - '@argent/x-shared@1.34.2(@scure/base@1.1.7)(@scure/bip39@1.3.0)(lodash-es@4.17.21)(object-hash@3.0.0)(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(swr@1.3.0(react@18.3.1))(typescript@5.5.4)(ua-parser-js@1.0.38)(zod@3.23.8)': + '@argent/x-shared@1.34.2(@scure/base@1.1.8)(@scure/bip39@1.4.0)(lodash-es@4.17.21)(object-hash@3.0.0)(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(swr@1.3.0(react@18.3.1))(typescript@5.5.4)(ua-parser-js@1.0.38)(zod@3.23.8)': dependencies: '@argent/x-multicall': 7.1.0(typescript@5.5.4) '@noble/hashes': 1.4.0 - '@scure/base': 1.1.7 - '@scure/bip39': 1.3.0 + '@scure/base': 1.1.8 + '@scure/bip39': 1.4.0 '@starknet-io/types-js': 0.7.7 async-retry: 1.3.3 big-decimal-number: bignumber.js@9.1.2 @@ -4449,6 +4456,8 @@ snapshots: '@noble/hashes@1.4.0': {} + '@noble/hashes@1.5.0': {} + '@noble/secp256k1@1.7.1': {} '@nodelib/fs.scandir@2.1.5': @@ -4535,27 +4544,29 @@ snapshots: '@scure/base@1.1.7': {} + '@scure/base@1.1.8': {} + '@scure/bip32@1.1.5': dependencies: '@noble/hashes': 1.2.0 '@noble/secp256k1': 1.7.1 - '@scure/base': 1.1.7 + '@scure/base': 1.1.8 '@scure/bip32@1.4.0': dependencies: '@noble/curves': 1.4.0 '@noble/hashes': 1.4.0 - '@scure/base': 1.1.7 + '@scure/base': 1.1.8 '@scure/bip39@1.1.1': dependencies: '@noble/hashes': 1.2.0 - '@scure/base': 1.1.7 + '@scure/base': 1.1.8 - '@scure/bip39@1.3.0': + '@scure/bip39@1.4.0': dependencies: - '@noble/hashes': 1.4.0 - '@scure/base': 1.1.7 + '@noble/hashes': 1.5.0 + '@scure/base': 1.1.8 '@scure/starknet@1.0.0': dependencies: @@ -4656,29 +4667,29 @@ snapshots: '@starknet-react/chains@0.1.7': {} - '@starknet-react/chains@3.0.0-beta.2': {} + '@starknet-react/chains@3.0.0-beta.3': {} - '@starknet-react/core@2.9.0(get-starknet-core@3.3.3(starknet@6.11.0))(react@18.3.1)(starknet@6.11.0)': + '@starknet-react/core@2.9.0(get-starknet-core@4.0.0)(react@18.3.1)(starknet@6.11.0)': dependencies: '@starknet-react/chains': 0.1.7 - '@tanstack/react-query': 5.51.24(react@18.3.1) + '@tanstack/react-query': 5.54.1(react@18.3.1) eventemitter3: 5.0.1 - get-starknet-core: 3.3.3(starknet@6.11.0) + get-starknet-core: 4.0.0 immutable: 4.3.7 react: 18.3.1 starknet: 6.11.0 zod: 3.23.8 - '@starknet-react/core@3.0.0-beta.2(get-starknet-core@3.3.3(starknet@6.11.0))(react@18.3.1)(starknet@6.11.0)(typescript@5.5.4)': + '@starknet-react/core@3.0.0-beta.3(get-starknet-core@4.0.0)(react@18.3.1)(starknet@6.11.0)(typescript@5.5.4)': dependencies: '@starknet-io/types-js': 0.7.7 - '@starknet-react/chains': 3.0.0-beta.2 - '@tanstack/react-query': 5.51.24(react@18.3.1) + '@starknet-react/chains': 3.0.0-beta.3 + '@tanstack/react-query': 5.54.1(react@18.3.1) eventemitter3: 5.0.1 - get-starknet-core: 3.3.3(starknet@6.11.0) + get-starknet-core: 4.0.0 react: 18.3.1 starknet: 6.11.0 - viem: 2.19.7(typescript@5.5.4)(zod@3.23.8) + viem: 2.21.2(typescript@5.5.4)(zod@3.23.8) zod: 3.23.8 transitivePeerDependencies: - bufferutil @@ -4692,11 +4703,11 @@ snapshots: '@swc/counter': 0.1.3 tslib: 2.6.3 - '@tanstack/query-core@5.51.24': {} + '@tanstack/query-core@5.54.1': {} - '@tanstack/react-query@5.51.24(react@18.3.1)': + '@tanstack/react-query@5.54.1(react@18.3.1)': dependencies: - '@tanstack/query-core': 5.51.24 + '@tanstack/query-core': 5.54.1 react: 18.3.1 '@trpc/client@10.45.2(@trpc/server@10.45.2)': @@ -5579,8 +5590,8 @@ snapshots: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -5602,13 +5613,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.6 enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -5619,18 +5630,18 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -5640,7 +5651,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.0 is-glob: 4.0.3 @@ -6948,7 +6959,7 @@ snapshots: starknet@5.25.0: dependencies: '@noble/curves': 1.3.0 - '@scure/base': 1.1.7 + '@scure/base': 1.1.8 '@scure/starknet': 1.0.0 isomorphic-fetch: 3.0.0 lossless-json: 2.0.11 @@ -7370,13 +7381,13 @@ snapshots: util-deprecate@1.0.2: {} - viem@2.19.7(typescript@5.5.4)(zod@3.23.8): + viem@2.21.2(typescript@5.5.4)(zod@3.23.8): dependencies: '@adraffy/ens-normalize': 1.10.0 '@noble/curves': 1.4.0 '@noble/hashes': 1.4.0 '@scure/bip32': 1.4.0 - '@scure/bip39': 1.3.0 + '@scure/bip39': 1.4.0 abitype: 1.0.5(typescript@5.5.4)(zod@3.23.8) isows: 1.0.4(ws@8.17.1) webauthn-p256: 0.0.5 diff --git a/src/components/Actions/MintWithStarknetReact.tsx b/src/app/withStarknetReactLatest/_components/MintWithStarknetReact.tsx similarity index 100% rename from src/components/Actions/MintWithStarknetReact.tsx rename to src/app/withStarknetReactLatest/_components/MintWithStarknetReact.tsx diff --git a/src/components/Actions/TransferWithStarknetReact.tsx b/src/app/withStarknetReactLatest/_components/TransferWithStarknetReact.tsx similarity index 100% rename from src/components/Actions/TransferWithStarknetReact.tsx rename to src/app/withStarknetReactLatest/_components/TransferWithStarknetReact.tsx diff --git a/src/app/withStarknetReactLatest/page.tsx b/src/app/withStarknetReactLatest/page.tsx index 2bccc37..67966de 100644 --- a/src/app/withStarknetReactLatest/page.tsx +++ b/src/app/withStarknetReactLatest/page.tsx @@ -1,9 +1,8 @@ "use client" import { AccountSection } from "@/components/AccountSection" -import { MintWithStarknetReact } from "@/components/Actions/MintWithStarknetReact" import { SignMessageWithStarknetReact } from "@/components/Actions/SignMessageWithStarknetReact" -import { TransferWithStarknetReact } from "@/components/Actions/TransferWithStarknetReact" +import { TransferWithStarknetReact } from "@/app/withStarknetReactLatest/_components/TransferWithStarknetReact" import { DisconnectButton } from "@/components/DisconnectButton" import { Section } from "@/components/Section" import { ConnectStarknetReact } from "@/components/connect/ConnectStarknetReact" @@ -20,6 +19,7 @@ import { import { useEffect, useState } from "react" import { constants } from "starknet" import { disconnect } from "starknetkit-next" +import { MintWithStarknetReact } from "@/app/withStarknetReactLatest/_components/MintWithStarknetReact" const StarknetReactDappContent = () => { const { account, isConnected } = useAccount() @@ -63,7 +63,7 @@ const StarknetReactDappContent = () => {
- {/* + {/* TODO: wait for the next version of starknetkit and starknet-react with rpc methods
diff --git a/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx b/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx new file mode 100644 index 0000000..c604680 --- /dev/null +++ b/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx @@ -0,0 +1,84 @@ +import { ETHTokenAddress } from "@/constants" +import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" +import { bigDecimal } from "@argent/x-shared" +import { Flex, Heading, Input } from "@chakra-ui/react" +import { useAccount, useContractWrite } from "@starknet-react/core" +import { useAtom, useSetAtom } from "jotai" +import { useMemo, useState } from "react" + +const MintWithStarknetReact = () => { + const { account } = useAccount() + const [mintAmount, setMintAmount] = useState("10") + + const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom) + const setLastTransactionHash = useSetAtom(lastTxHashAtom) + + const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) + + const mintCalls = useMemo(() => { + if (!account) { + return [] + } + return [ + { + contractAddress: ETHTokenAddress, + entrypoint: "transfer", + calldata: [ + account?.address, + Number(bigDecimal.parseEther(mintAmount).value), + 0, + ], + }, + ] + }, [account, mintAmount]) + + const { writeAsync: mintWithStarknetReact } = useContractWrite({ + calls: mintCalls, + }) + + const handleMintSubmit = async (e: React.FormEvent) => { + e.preventDefault() + try { + setTransactionStatus("approve") + const { transaction_hash } = await mintWithStarknetReact() + setLastTransactionHash(transaction_hash) + setTransactionStatus("pending") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + + + Mint token + setMintAmount(e.target.value)} + /> + + + + + ) +} + +export { MintWithStarknetReact } diff --git a/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx b/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx new file mode 100644 index 0000000..7742c46 --- /dev/null +++ b/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx @@ -0,0 +1,134 @@ +import { ETHTokenAddress } from "@/constants" +import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" +import { bigDecimal } from "@argent/x-shared" +import { Button, Flex, Heading, Input } from "@chakra-ui/react" +import { + Abi, + useAccount, + useContract, + useSendTransaction, +} from "starknet-react-core-next" +import { useAtom, useSetAtom } from "jotai" +import { useMemo, useState } from "react" + +const TransferWithStarknetReact = () => { + const { account } = useAccount() + const [transferTo, setTransferTo] = useState("") + const [transferAmount, setTransferAmount] = useState("1") + + const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom) + const setLastTransactionHash = useSetAtom(lastTxHashAtom) + + const transferCalls = useMemo(() => { + return !account + ? [] + : [ + { + contractAddress: ETHTokenAddress, + entrypoint: "transfer", + calldata: [ + account.address, + Number(bigDecimal.parseEther(transferAmount).value), + 0, + ], + }, + ] + }, [account, transferAmount]) + + const abi = [ + { + type: "function", + name: "transfer", + state_mutability: "external", + inputs: [ + { + name: "recipient", + type: "core::starknet::contract_address::ContractAddress", + }, + { + name: "amount", + type: "core::integer::u256", + }, + ], + outputs: [], + }, + ] as const satisfies Abi + + const { contract } = useContract({ + abi: abi as Abi, + address: ETHTokenAddress, + }) + + const { error, sendAsync: transferWithStarknetReact } = useSendTransaction({ + calls: + contract && account?.address + ? [ + contract.populate("transfer", [ + account.address, + Number(bigDecimal.parseEther(transferAmount).value), + ]), + ] + : undefined, + }) + + const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) + + const handleTransferSubmit = async (e: React.FormEvent) => { + try { + e.preventDefault() + setTransactionStatus("approve") + const { transaction_hash } = await transferWithStarknetReact() + setLastTransactionHash(transaction_hash) + setTransactionStatus("pending") + } catch (e) { + console.error(e) + console.error(error) + setTransactionStatus("idle") + } + } + + return ( + + + Transfer token + + setTransferTo(e.target.value)} + /> + + setTransferAmount(e.target.value)} + /> +
+ + + + ) +} + +export { TransferWithStarknetReact } diff --git a/src/app/withStarknetReactNext/page.tsx b/src/app/withStarknetReactNext/page.tsx index 1580b04..d2c348b 100644 --- a/src/app/withStarknetReactNext/page.tsx +++ b/src/app/withStarknetReactNext/page.tsx @@ -20,6 +20,7 @@ import { useAccount, } from "starknet-react-core-next" import { disconnect } from "starknetkit-next" +import { MintWithStarknetReact } from "./_components/MintWithStarknetReact" const StarknetReactDappContent = () => { const { account, isConnected } = useAccount() @@ -54,16 +55,16 @@ const StarknetReactDappContent = () => { <> - {/*
+
-
*/} +
- {/* + {/* TODO: wait for the next version of starknetkit and starknet-react with rpc methods
From 27dc8ba3f57d4ae941596419182e5f80ec4ea93d Mon Sep 17 00:00:00 2001 From: inukares Date: Thu, 5 Sep 2024 14:33:01 +0200 Subject: [PATCH 4/6] fix(deps): use only newest starknet react Decouple components using different lib versions. --- src/abi/ERC20TransferAbi.json | 18 +++++++ .../_components/MintWithStarknetReact.tsx | 48 ++++++++++--------- .../_components/TransferWithStarknetReact.tsx | 44 ++--------------- 3 files changed, 47 insertions(+), 63 deletions(-) create mode 100644 src/abi/ERC20TransferAbi.json diff --git a/src/abi/ERC20TransferAbi.json b/src/abi/ERC20TransferAbi.json new file mode 100644 index 0000000..c6ca556 --- /dev/null +++ b/src/abi/ERC20TransferAbi.json @@ -0,0 +1,18 @@ +[ + { + "type": "function", + "name": "transfer", + "state_mutability": "external", + "inputs": [ + { + "name": "recipient", + "type": "core::starknet::contract_address::ContractAddress" + }, + { + "name": "amount", + "type": "core::integer::u256" + } + ], + "outputs": [] + } +] diff --git a/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx b/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx index c604680..e1e3614 100644 --- a/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx +++ b/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx @@ -2,11 +2,17 @@ import { ETHTokenAddress } from "@/constants" import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" import { bigDecimal } from "@argent/x-shared" import { Flex, Heading, Input } from "@chakra-ui/react" -import { useAccount, useContractWrite } from "@starknet-react/core" +import { + useAccount, + useContract, + Abi, + useSendTransaction, +} from "starknet-react-core-next" import { useAtom, useSetAtom } from "jotai" -import { useMemo, useState } from "react" +import { useState } from "react" +import Erc20Abi from "@/abi/ERC20TransferAbi.json" -const MintWithStarknetReact = () => { +export const MintWithStarknetReact = () => { const { account } = useAccount() const [mintAmount, setMintAmount] = useState("10") @@ -15,25 +21,21 @@ const MintWithStarknetReact = () => { const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) - const mintCalls = useMemo(() => { - if (!account) { - return [] - } - return [ - { - contractAddress: ETHTokenAddress, - entrypoint: "transfer", - calldata: [ - account?.address, - Number(bigDecimal.parseEther(mintAmount).value), - 0, - ], - }, - ] - }, [account, mintAmount]) + const { contract } = useContract({ + abi: Erc20Abi as Abi, + address: ETHTokenAddress, + }) - const { writeAsync: mintWithStarknetReact } = useContractWrite({ - calls: mintCalls, + const { error, sendAsync: mintWithStarknetReact } = useSendTransaction({ + calls: + contract && account?.address + ? [ + contract.populate("transfer", [ + account.address, + Number(bigDecimal.parseEther(mintAmount).value), + ]), + ] + : undefined, }) const handleMintSubmit = async (e: React.FormEvent) => { @@ -45,6 +47,7 @@ const MintWithStarknetReact = () => { setTransactionStatus("pending") } catch (e) { console.error(e) + console.error(error) setTransactionStatus("idle") } } @@ -70,6 +73,7 @@ const MintWithStarknetReact = () => { value={mintAmount} onChange={(e) => setMintAmount(e.target.value)} /> + {/* TODO: When will we allow below? Need to ask Ale */} { ) } - -export { MintWithStarknetReact } diff --git a/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx b/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx index 7742c46..089a9bc 100644 --- a/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx +++ b/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx @@ -9,9 +9,10 @@ import { useSendTransaction, } from "starknet-react-core-next" import { useAtom, useSetAtom } from "jotai" -import { useMemo, useState } from "react" +import { useState } from "react" +import Erc20Abi from "@/abi/ERC20TransferAbi.json" -const TransferWithStarknetReact = () => { +export const TransferWithStarknetReact = () => { const { account } = useAccount() const [transferTo, setTransferTo] = useState("") const [transferAmount, setTransferAmount] = useState("1") @@ -19,43 +20,8 @@ const TransferWithStarknetReact = () => { const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom) const setLastTransactionHash = useSetAtom(lastTxHashAtom) - const transferCalls = useMemo(() => { - return !account - ? [] - : [ - { - contractAddress: ETHTokenAddress, - entrypoint: "transfer", - calldata: [ - account.address, - Number(bigDecimal.parseEther(transferAmount).value), - 0, - ], - }, - ] - }, [account, transferAmount]) - - const abi = [ - { - type: "function", - name: "transfer", - state_mutability: "external", - inputs: [ - { - name: "recipient", - type: "core::starknet::contract_address::ContractAddress", - }, - { - name: "amount", - type: "core::integer::u256", - }, - ], - outputs: [], - }, - ] as const satisfies Abi - const { contract } = useContract({ - abi: abi as Abi, + abi: Erc20Abi as Abi, address: ETHTokenAddress, }) @@ -130,5 +96,3 @@ const TransferWithStarknetReact = () => { ) } - -export { TransferWithStarknetReact } From 495433074d8b49c4372a44ea432f08d551376daa Mon Sep 17 00:00:00 2001 From: inukares Date: Wed, 11 Sep 2024 08:24:44 +0200 Subject: [PATCH 5/6] fix(deps): delete unused code --- .../Actions/MintWithStarknetReactNext.tsx | 86 ------------------- 1 file changed, 86 deletions(-) delete mode 100644 src/components/Actions/MintWithStarknetReactNext.tsx diff --git a/src/components/Actions/MintWithStarknetReactNext.tsx b/src/components/Actions/MintWithStarknetReactNext.tsx deleted file mode 100644 index c178b89..0000000 --- a/src/components/Actions/MintWithStarknetReactNext.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { ETHTokenAddress, provider } from "@/constants" -import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" -import { Flex, Heading, Input } from "@chakra-ui/react" -import { useAtom, useSetAtom } from "jotai" -import { useState } from "react" -import { Abi, useContract } from "starknet-react-core-next" - -const abi = [ - { - type: "function", - name: "permissionedMint", - state_mutability: "external", - inputs: [ - { - name: "recipient", - type: "core::starknet::contract_address::ContractAddress", - }, - { - name: "amount", - type: "core::integer::u256", - }, - ], - outputs: [], - }, -] as const satisfies Abi - -const MintWithStarknetReact = () => { - const [mintAmount, setMintAmount] = useState("10") - - const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom) - const setLastTransactionHash = useSetAtom(lastTxHashAtom) - - const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) - - const { contract } = useContract({ - abi, - address: ETHTokenAddress, - provider, - }) - - const handleMintSubmit = async (e: React.FormEvent) => { - e.preventDefault() - try { - setTransactionStatus("approve") - const { transaction_hash } = await contract - setLastTransactionHash(transaction_hash) - setTransactionStatus("pending") - } catch (e) { - console.error(e) - setTransactionStatus("idle") - } - } - - return ( - - - Mint token - setMintAmount(e.target.value)} - /> - - - - - ) -} - -export { MintWithStarknetReact } From c271e9b69f100941f9a5fcf9b4454e141349a053 Mon Sep 17 00:00:00 2001 From: inukares Date: Wed, 11 Sep 2024 08:25:01 +0200 Subject: [PATCH 6/6] Allow the submit --- .../_components/MintWithStarknetReact.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx b/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx index e1e3614..122eb0c 100644 --- a/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx +++ b/src/app/withStarknetReactNext/_components/MintWithStarknetReact.tsx @@ -73,13 +73,9 @@ export const MintWithStarknetReact = () => { value={mintAmount} onChange={(e) => setMintAmount(e.target.value)} /> - {/* TODO: When will we allow below? Need to ask Ale */} + {/* TODO: Verify it's ok that the submit has been enabled */} - + )