big update

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
 /build
+

.eslintrc.cjs

@@ -17,6 +17,9 @@ module.exports = {
       // Tells eslint-plugin-react to automatically detect the version of React to use.
       version: 'detect',
     },
+    linterOptions: {
+      exclude: ['src/interfaces/*'],
+    },
     // Tells eslint how to resolve imports
     'import/resolver': {
       node: {

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "dev": "vite --host",
     "lint": "eslint src --ext .ts,.tsx",
+    "lint:pretty": "tsc --noEmit --pretty",
     "build": "vite build",
     "preview": "vite preview --host",
     "typegen": "yarn get:testnet:metadata && yarn generate:defs && yarn generate:meta",
@@ -20,53 +21,36 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.4.5",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@ethersproject/bignumber": "^5.6.0",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@fontsource-variable/lexend": "^5.0.3",
-    "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/typescript": "^2.4.11",
-    "@graphql-codegen/typescript-operations": "^2.4.0",
-    "@graphql-codegen/typescript-react-query": "^4.0.6",
-    "@polkadot/api": "^10.6.1",
-    "@polkadot/extension-dapp": "^0.46.2",
-    "@polkadot/keyring": "^12.1.2",
-    "@polkadot/networks": "^12.1.2",
-    "@polkadot/typegen": "^10.9.1",
-    "@polkadot/types": "^10.6.1",
-    "@polkadot/ui-keyring": "^3.3.1",
-    "@polkadot/ui-settings": "^3.3.1",
-    "@polkadot/util": "^12.1.2",
-    "@polkadot/util-crypto": "^12.1.2",
+    "@polkadot/react-identicon": "^3.6.3",
+    "@polkadot/api": "^9.4.2",
+    "@polkadot/typegen": "^9.4.2",
+    "@polkadot/types": "^9.4.2",
     "@reduxjs/toolkit": "^1.9.5",
-    "@rehooks/local-storage": "^2.4.4",
     "@tanstack/react-query": "^4.29.14",
     "@tanstack/react-query-devtools": "^4.29.15",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
     "axios": "^1.1.2",
     "date-fns": "^2.30.0",
     "framer-motion": "^6.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "react": "^18.2.0",
-    "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
-    "react-i18next": "^12.3.1",
-    "react-jazzicon": "^1.0.4",
     "react-json-view": "^1.21.3",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0",
-    "swiper": "^9.4.1",
     "ts-jest": "^29.1.0",
-    "vite-tsconfig-paths": "^4.2.0",
-    "web3": "^4.0.1"
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.2",
     "@types/node": "^20.2.6",
     "@types/react": "^18.2.11",
@@ -84,7 +68,7 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "prettier": "^2.8.8",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.3.9",
     "vite-plugin-svgr": "^3.2.0"
   },

src/App.tsx

@@ -1,30 +1,6 @@
-import { Center, Heading, Spinner } from '@chakra-ui/react';
-import { connectAPI } from 'components/ConnectSubstrate/ConnectSubstrateUtils';
-
-import { useAppDispatch, useAppSelector } from 'hooks/useRedux';
-
 import { RouterProvider } from 'react-router-dom';
 import router from 'routes/routes';
 
 export default function App() {
-  const dispatch = useAppDispatch();
-
-  const { apiState, socket, jsonrpc } = useAppSelector(
-    state => state.substrate
-  );
-
-  connectAPI({ socket, jsonrpc, apiState, dispatch });
-
-  if (apiState !== 'READY') {
-    return (
-      <Center height="100vh" gap={4}>
-        <Spinner color="primary.a.500" size="md" />
-        <Heading fontSize="lg" color="shader.a.600" fontWeight="medium">
-          Connecting to Substrate
-        </Heading>
-      </Center>
-    );
-  }
-
   return <RouterProvider router={router} />;
 }

src/components/Avatar/AvatarCollaborators.tsx

@@ -1,11 +1,11 @@
 import { Box, Center, Flex, FlexProps, Text } from '@chakra-ui/react';
 import AvatarJazzicon from './AvatarJazzicon';
-import ButtonCopy from 'components/ButtonCopy';
 
-import { ColorOfCollaborator, convertHex, shorten } from 'utils/utils';
+import { ColorOfCollaborator, convertHex, shorten } from 'utils';
 
 import { TypeCollaboratorsRole } from 'layouts/Collaborators/CollaboratorsUtils';
 import React from 'react';
+import Clipboard from 'components/Clipboard';
 
 interface AvatarProfileProps {
   role: TypeCollaboratorsRole;
@@ -17,10 +17,7 @@ interface AvatarProfileProps {
 export default ({ role, account, changeRole, sx }: AvatarProfileProps) => {
   return (
     <Flex gap={4} {...sx}>
-      <AvatarJazzicon
-        address={account.address}
-        sx={{ width: '2.25rem', height: '2.25rem' }}
-      />
+      <AvatarJazzicon value={account.address} size={36} />
 
       <Box fontWeight="bold">
         <Flex gap={2}>
@@ -41,7 +38,7 @@ export default ({ role, account, changeRole, sx }: AvatarProfileProps) => {
 
         <Flex gap={2} mt={2} color="shader.a.400" fontSize="sm">
           {shorten(account.address, 12)}
-          <ButtonCopy value={account.address} />
+          <Clipboard value={account.address} />
         </Flex>
       </Box>
     </Flex>

src/components/Avatar/AvatarJazzicon.tsx

@@ -1,32 +1,20 @@
-import { Box, BoxProps } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+import Identicon from '@polkadot/react-identicon';
+import { IdentityProps } from '@polkadot/react-identicon/types';
 
-import { jsNumberForAddress } from 'react-jazzicon';
-import Jazzicon from 'react-jazzicon/dist/Jazzicon';
-
-interface AvatarJazziconProps {
-  address: string;
-  sx?: BoxProps;
-}
-
-export default function AvatarJazzicon({ address, sx }: AvatarJazziconProps) {
+export default (props: IdentityProps) => {
+  /* 
+    but you cannot using variable as chakra 
+    Ex: borderRadius: "full" // cannot so should '100%'
+  */
   return (
-    <Box title={address} display="inline-flex" as="figure">
-      <Jazzicon
-        paperStyles={{
-          border: '0.09375rem solid',
-          borderColor: 'currentColor',
-          color: 'transparent',
-          borderRadius: '100%',
-          width: '2.5rem',
-          height: '2.5rem',
-          ...sx,
-        }}
-        svgStyles={{
-          width: '100%',
-          height: '100%',
-        }}
-        seed={jsNumberForAddress(address)}
-      />
-    </Box>
+    <Box
+      as={Identicon}
+      size={40}
+      theme="substrate"
+      overflow="hidden"
+      pointerEvents="none" // this prevent onCopy
+      {...props}
+    />
   );
-}
+};

src/components/Avatar/AvatarPopover.tsx

@@ -9,9 +9,10 @@ import {
   PopoverTrigger,
   Text,
 } from '@chakra-ui/react';
-import ButtonCopy from 'components/ButtonCopy';
-import { shorten } from 'utils/utils';
+
+import { shorten } from 'utils';
 import AvatarJazzicon from './AvatarJazzicon';
+import Clipboard from 'components/Clipboard';
 
 interface AvatarPopoverProps extends React.PropsWithChildren {
   type: 'Owner' | 'Admin';
@@ -47,20 +48,18 @@ export default function AvatarPopover({
           <Text>{type}</Text>
 
           <HStack spacing={3} mt={3}>
-            <AvatarJazzicon address={address} />
+            <AvatarJazzicon value={address} />
 
             <Box>
               <Text>{name}</Text>
 
               <Text display="flex" alignItems="center" gap={1}>
                 {shorten(address, 12)}
-                <ButtonCopy
+                <Clipboard
                   value={address}
                   sx={{
-                    'aria-label': 'copy-icon',
-                    sx: {
-                      svg: { width: 4, height: 4 },
-                    },
+                    width: 4,
+                    height: 4,
                   }}
                 />
               </Text>

src/components/BackgroundUpload/index.tsx

@@ -1,6 +1,6 @@
 import { Box, BoxProps, Center, Icon, Input, Text } from '@chakra-ui/react';
 import RatioPicture from 'components/RatioPicture';
-import { convertHex } from 'utils/utils';
+import { convertHex } from 'utils';
 
 import CloseIcon from 'public/assets/fill/close.svg';
 import CameraIcon from 'public/assets/fill/camera.svg';

src/components/Clipboard/index.tsx

@@ -0,0 +1,24 @@
+import { Icon, IconProps, useClipboard } from '@chakra-ui/react';
+import CopyIcon from 'public/assets/line/copy.svg';
+import DoneIcon from 'public/assets/fill/done.svg';
+
+interface ClipBoardProps {
+  value: string;
+  sx?: IconProps;
+}
+
+export default ({ value, sx }: ClipBoardProps) => {
+  const { hasCopied, onCopy } = useClipboard(value);
+
+  return (
+    <Icon
+      onClick={onCopy}
+      width={5}
+      height={5}
+      color="primary.a.300"
+      cursor="pointer"
+      as={hasCopied ? DoneIcon : CopyIcon}
+      {...sx}
+    />
+  );
+};