From 49f19c23aa449c4aea1ce2ed567c1f842f7b5d59 Mon Sep 17 00:00:00 2001 From: hariria Date: Fri, 10 Jun 2022 16:01:13 -0700 Subject: [PATCH] Refactoring to use useMutation and useQuery hooks, new token is drawer --- .eslintrc.js | 43 ++++++ .github/PULL_REQUEST_TEMPLATE.md | 21 +++ package.json | 1 + src/core/components/CreateNFTModal.tsx | 138 ++++--------------- src/core/components/NetworkBody.tsx | 9 +- src/core/components/TransferDrawer.tsx | 39 ++---- src/core/components/WalletAccountBalance.tsx | 14 +- src/core/mutations/collectibles.ts | 96 +++++++++++++ src/core/mutations/network.tsx | 3 +- src/core/mutations/transaction.ts | 32 +++++ src/core/queries/account.ts | 41 ++++++ src/core/queries/collectibles.ts | 125 +++++++++++++++++ src/core/queries/network.ts | 11 ++ src/core/queries/queryKeys.ts | 11 ++ src/core/types/TokenMetadata.ts | 9 ++ src/pages/Gallery.tsx | 108 +-------------- 16 files changed, 435 insertions(+), 266 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 src/core/mutations/collectibles.ts create mode 100644 src/core/queries/collectibles.ts create mode 100644 src/core/queries/queryKeys.ts diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000000000..57749fea8d5e9 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,43 @@ +module.exports = { + env: { + browser: true, + es2021: true, + jest: true, + webextensions: true + }, + extends: [ + 'airbnb', + 'airbnb-typescript', + 'plugin:typescript-sort-keys/recommended' + ], + ignorePatterns: [ + '*.css', + '*.js', + '*.jsx' + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { + jsx: true + }, + tsconfigRootDir: __dirname, + project: ["tsconfig.json"], + ecmaVersion: 'latest', + sourceType: 'module' + }, + plugins: [ + 'sort-class-members', + 'typescript-sort-keys', + 'sort-keys-fix', + 'sort-destructure-keys', + 'react', + '@typescript-eslint' + ], + rules: { + "react/require-default-props": 0, + "react/jsx-props-no-spreading": "off", + "sort-destructure-keys/sort-destructure-keys": 2, + "sort-keys-fix/sort-keys-fix": "warn", + "sort-keys": ["error", "asc", { caseSensitive: true, minKeys: 2, natural: false }] + } +} diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000000000..ba6b22ef36c63 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,21 @@ + + +## Motivation + +(Write your motivation for proposed changes here.) + +### Have you read the [Contributing Guidelines on pull requests](https://github.com/aptos-labs/aptos-core/blob/main/CONTRIBUTING.md#pull-requests)? + +(You must have submitted a [signed CLA](https://github.com/aptos-labs/aptos-core/blob/main/CONTRIBUTING.md#contributor-license-agreement) that includes your GitHub handle prior to us accepting and landing your work. Write your answer here.) + +## Test Plan + +(Share your test plan here. If you changed code, please provide us with clear instructions for verifying that your changes work.) + +## Related PRs + +(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/aptos-labs/aptos-core/tree/main/developer-docs-site, and link to your PR here.) diff --git a/package.json b/package.json index 227446f5c1555..b4111d6c8cc16 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "buffer": "^6.0.3", "constate": "^3.3.2", "framer-motion": "^6", + "lodash": "^4.17.21", "numeral": "^2.0.6", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/core/components/CreateNFTModal.tsx b/src/core/components/CreateNFTModal.tsx index f73572b21d3bd..a8f38e8cf8e36 100644 --- a/src/core/components/CreateNFTModal.tsx +++ b/src/core/components/CreateNFTModal.tsx @@ -4,114 +4,34 @@ import { AddIcon } from '@chakra-ui/icons'; import { Button, + Drawer, + DrawerBody, + DrawerContent, + DrawerFooter, + DrawerHeader, + DrawerOverlay, FormControl, FormLabel, Input, - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, Text, useColorMode, useDisclosure, VStack, } from '@chakra-ui/react'; -import { AptosClient, RequestError, TokenClient } from 'aptos'; -import { useMutation, useQueryClient } from 'react-query'; import React from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import useWalletState from 'core/hooks/useWalletState'; import { secondaryTextColor } from 'pages/Login'; -import { NODE_URL } from 'core/constants'; -import { AptosAccountState } from 'core/types'; -import { AptosNetwork } from 'core/utils/network'; +import { useCreateTokenAndCollection } from 'core/mutations/collectibles'; // eslint-disable-next-line global-require window.Buffer = window.Buffer || require('buffer').Buffer; -export const defaultRequestErrorAttributes = { - config: {}, - headers: {}, - status: 400, - statusText: 'Move abort', -}; - -export interface RaiseForErrorProps { - vmStatus: string -} - -const raiseForError = ({ - vmStatus, -}: RaiseForErrorProps) => { - if (vmStatus.includes('Move abort')) { - throw new RequestError(vmStatus, { - data: { - message: vmStatus, - }, - ...defaultRequestErrorAttributes, - }); - } -}; - -interface CreateTokenAndCollectionProps { - account: AptosAccountState; - collectionName?: string; - description?: string; - name?: string; - nodeUrl?: AptosNetwork; - supply: number; - uri?: string; -} - -const createTokenAndCollection = async ({ - account, - collectionName, - description, - name, - nodeUrl = NODE_URL, - supply, - uri, -}: CreateTokenAndCollectionProps): Promise => { - if (!account || !(collectionName && description && uri && name)) { - return; - } - const aptosClient = new AptosClient(nodeUrl); - const tokenClient = new TokenClient(aptosClient); - - const collectionTxnHash = await tokenClient.createCollection( - account, - collectionName, - description, - uri, - ); - - // Move abort errors do not throw so we need to check them manually - const collectionTxn: any = await aptosClient.getTransaction(collectionTxnHash); - let vmStatus: string = collectionTxn.vm_status; - raiseForError({ vmStatus }); - - const tokenTxnHash = await tokenClient.createToken( - account, - collectionName, - name, - description, - supply, - uri, - ); - const tokenTxn: any = await aptosClient.getTransaction(tokenTxnHash); - vmStatus = tokenTxn.vm_status; - raiseForError({ vmStatus }); -}; - export default function CreateNFTModal() { const { colorMode } = useColorMode(); const { isOpen, onClose, onOpen } = useDisclosure(); const { handleSubmit, register, watch } = useForm(); const { aptosAccount, aptosNetwork } = useWalletState(); - const queryClient = useQueryClient(); const collectionName: string | undefined = watch('collectionName'); const tokenName: string | undefined = watch('tokenName'); @@ -124,8 +44,13 @@ export default function CreateNFTModal() { isError, isLoading, mutateAsync: createTokenAndCollectionOnClick, - } = useMutation(() => ( - createTokenAndCollection({ + } = useCreateTokenAndCollection(); + + const errorMessage = error?.response?.data?.message; + + const onSubmit: SubmitHandler> = async (_data, event) => { + event?.preventDefault(); + await createTokenAndCollectionOnClick({ account: aptosAccount, collectionName, description, @@ -133,15 +58,7 @@ export default function CreateNFTModal() { nodeUrl: aptosNetwork, supply, uri, - }) - )); - - const errorMessage = error?.response?.data?.message; - - const onSubmit: SubmitHandler> = async (_data, event) => { - event?.preventDefault(); - await createTokenAndCollectionOnClick(); - await queryClient.refetchQueries(['gallery-items']); + }); onClose(); }; @@ -150,13 +67,16 @@ export default function CreateNFTModal() { - - - + + +
- Create an NFT - - + Create an NFT + @@ -228,16 +148,16 @@ export default function CreateNFTModal() { : undefined } - - + + - + -
- + + ); } diff --git a/src/core/components/NetworkBody.tsx b/src/core/components/NetworkBody.tsx index eb7fbafddcc1f..9a83999e40255 100644 --- a/src/core/components/NetworkBody.tsx +++ b/src/core/components/NetworkBody.tsx @@ -7,14 +7,12 @@ import { SimpleGrid, Heading, useRadioGroup, - useToast, } from '@chakra-ui/react'; import React, { useEffect, useState } from 'react'; import { AptosNetwork } from 'core/utils/network'; import { DEVNET_NODE_URL, LOCAL_NODE_URL } from 'core/constants'; import useWalletState from 'core/hooks/useWalletState'; -import { useQuery } from 'react-query'; -import { getLocalhostIsLive } from 'core/queries/network'; +import { useTestnetStatus } from 'core/queries/network'; import useSwitchNetwork from 'core/mutations/network'; import NetworkListItem from './NetworkListItem'; @@ -39,11 +37,9 @@ export default function NetworkBody() { const { aptosNetwork, } = useWalletState(); - const { data: localTestnetIsLive } = useQuery('getTestnetStatus', getLocalhostIsLive, { refetchInterval: 1000 }); + const { data: localTestnetIsLive } = useTestnetStatus(); const { isLoading, mutateAsync } = useSwitchNetwork(); const [error, setError] = useState(false); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const toast = useToast(); const onClick = async (event: AptosNetwork) => { try { @@ -53,7 +49,6 @@ export default function NetworkBody() { } }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars const { getRadioProps, getRootProps, setValue: radioSetValue } = useRadioGroup({ defaultValue: aptosNetwork, name: 'aptosNetwork', diff --git a/src/core/components/TransferDrawer.tsx b/src/core/components/TransferDrawer.tsx index 722f15c061c34..8ca1b6cce474e 100644 --- a/src/core/components/TransferDrawer.tsx +++ b/src/core/components/TransferDrawer.tsx @@ -20,7 +20,6 @@ import { Text, useColorMode, useDisclosure, - useToast, VStack, } from '@chakra-ui/react'; import { SubmitHandler, useForm } from 'react-hook-form'; @@ -31,11 +30,9 @@ import { getAccountExists, getAccountResources, getTestCoinTokenBalanceFromAccountResources, - getToAddressAccountExists, + useAccountExists, } from 'core/queries/account'; -import { submitTestCoinTransferTransaction } from 'core/mutations/transaction'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; -import { getUserTransaction } from 'core/queries/transaction'; +import { useSubmitTestCoinTransfer } from 'core/mutations/transaction'; import { ExternalLinkIcon } from '@chakra-ui/icons'; import { secondaryErrorMessageColor, STATIC_GAS_AMOUNT, @@ -52,8 +49,6 @@ export const secondaryDividerColor = { function TransferDrawer() { const { colorMode } = useColorMode(); const { aptosAccount, aptosNetwork } = useWalletState(); - const toast = useToast(); - const queryClient = useQueryClient(); const { formState: { errors }, handleSubmit, register, setError, watch, } = useForm(); @@ -62,26 +57,7 @@ function TransferDrawer() { const { isLoading: isTransferLoading, mutateAsync: submitSendTransaction, - } = useMutation(submitTestCoinTransferTransaction, { - onSettled: async (txnHash) => { - if (!txnHash) { - return; - } - queryClient.invalidateQueries('getAccountResources'); - const txn = await getUserTransaction({ nodeUrl: aptosNetwork, txnHashOrVersion: txnHash }); - const amount = (txn?.payload) - ? (txn.payload as { arguments: string[] }).arguments[1] - : undefined; - toast({ - description: (txn?.success) ? `Amount transferred: ${amount}, gas consumed: ${txn?.gas_used}` : `Transfer failed, gas consumed: ${txn?.gas_used}`, - duration: 5000, - isClosable: true, - status: (txn?.success) ? 'success' : 'error', - title: `Transaction ${txn?.success ? 'success' : 'error'}`, - variant: 'solid', - }); - }, - }); + } = useSubmitTestCoinTransfer(); const transferAmount: string | undefined | null = watch('transferAmount'); const transferAmountNumeral = numeral(transferAmount).format('0,0'); @@ -93,10 +69,10 @@ function TransferDrawer() { } = { ...register('toAddress') }; const toAddress: string | undefined | null = watch('toAddress'); const explorerAddress = `https://explorer.devnet.aptos.dev/account/${toAddress}`; - const { data: toAddressAccountExists } = useQuery( - ['getToAddressAccountExists', { aptosAccount, nodeUrl: aptosNetwork, toAddress }], - getToAddressAccountExists, - ); + const { data: toAddressAccountExists } = useAccountExists({ + address: toAddress || '', + debounceTimeout: 5000, + }); const onSubmit: SubmitHandler> = async (data, event) => { event?.preventDefault(); @@ -135,6 +111,7 @@ function TransferDrawer() { } return 'Invalid address'; }, [toAddressAccountExists, toAddress]); + return ( <>