Refactor types, typo

packages/adena-extension/src/common/provider/wallet/wallet-provider.tsx

@@ -1,16 +1,16 @@
 import React, { createContext, useEffect, useState } from 'react';
-import { NetworkState, TokenState, WalletState } from '@states/index';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { Wallet } from 'adena-module';
-import { NetworkMetainfo } from '@states/network';
+
+import { NetworkState, TokenState, WalletState } from '@states';
 import { useAdenaContext } from '@hooks/use-context';
-import { TokenModel } from '@models/token-model';
 import { GnoProvider } from '../gno/gno-provider';
+import { TokenModel, NetworkMetainfo, StateType } from '@types';
 
 export interface WalletContextProps {
   wallet: Wallet | null;
   gnoProvider: GnoProvider | undefined;
-  walletStatus: 'CREATE' | 'LOGIN' | 'LOADING' | 'FINISH' | 'FAIL' | 'NONE';
+  walletStatus: StateType;
   tokenMetainfos: TokenModel[];
   networkMetainfos: NetworkMetainfo[];
   updateWallet: (wallet: Wallet) => Promise<boolean>;
@@ -136,9 +136,7 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
     balanceService.setTokenMetainfos(tokenMetainfos);
   }
 
-  async function changeNetwork(
-    networkMetainfo: NetworkMetainfo,
-  ): Promise<NetworkState.NetworkMetainfo> {
+  async function changeNetwork(networkMetainfo: NetworkMetainfo): Promise<NetworkMetainfo> {
     const rpcUrl = networkMetainfo.rpcUrl;
     const gnoProvider = new GnoProvider(rpcUrl, networkMetainfo.networkId);
     setCurrentNetwork(networkMetainfo);

packages/adena-extension/src/common/utils/crypto-utils.ts

@@ -1,6 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import CryptoJS from 'crypto-js';
-import { ConstantValue } from '@common/values';
+
+const ENCRYPT_CIPHER_KEY = 'r3v4';
 
 export const encryptSha256Password = (password: string): string => {
   return CryptoJS.SHA256(password).toString();
@@ -10,7 +11,7 @@ export const encryptPassword = (
   password: string,
 ): { encryptedKey: string; encryptedPassword: string } => {
   const cryptKey = uuidv4();
-  const adenaKey = ConstantValue.ENCRYPT_CIPHER_KEY;
+  const adenaKey = ENCRYPT_CIPHER_KEY;
   const encryptedKey = CryptoJS.AES.encrypt(cryptKey, adenaKey).toString();
   const encryptedPassword = CryptoJS.AES.encrypt(password, cryptKey).toString();
   return {
@@ -20,7 +21,7 @@ export const encryptPassword = (
 };
 
 export const decryptPassword = (encryptedKey: string, encryptedPassword: string): string => {
-  const adenaKey = ConstantValue.ENCRYPT_CIPHER_KEY;
+  const adenaKey = ENCRYPT_CIPHER_KEY;
   const key = CryptoJS.AES.decrypt(encryptedKey, adenaKey).toString(CryptoJS.enc.Utf8);
   if (key === '') {
     throw new Error('CipherKey Decryption Failed');

packages/adena-extension/src/common/validation/index.ts

@@ -1,3 +1,4 @@
 export * from './validation-password';
 export * from './validation-address-book';
 export * from './validation-message';
+export * from './validation-token';

packages/adena-extension/src/common/validation/validation-token.ts

@@ -0,0 +1,23 @@
+import {
+  GRC20TokenModel,
+  IBCNativeTokenModel,
+  IBCTokenModel,
+  NativeTokenModel,
+  TokenModel,
+} from '@types';
+
+export function isNativeTokenModel(model: TokenModel): model is NativeTokenModel {
+  return model.type === 'gno-native';
+}
+
+export function isGRC20TokenModel(model: TokenModel): model is GRC20TokenModel {
+  return model.type === 'grc20';
+}
+
+export function isIBCNativeTokenModel(model: TokenModel): model is IBCNativeTokenModel {
+  return model.type === 'ibc-native';
+}
+
+export function isIBCTokenModel(model: TokenModel): model is IBCTokenModel {
+  return model.type === 'ibc-tokens';
+}

packages/adena-extension/src/components/background/background.tsx

@@ -1,17 +1,19 @@
 import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
+
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useNetwork } from '@hooks/use-network';
 import { useTokenMetainfo } from '@hooks/use-token-metainfo';
 import { useTokenBalance } from '@hooks/use-token-balance';
 import { useWalletContext } from '@hooks/use-context';
 import { useAccountName } from '@hooks/use-account-name';
-import { CommonState } from '@states/index';
 import useScrollHistory from '@hooks/use-scroll-history';
-import { NetworkMetainfo } from '@states/network';
 import { fetchHealth } from '@common/utils/client-utils';
 
+import { CommonState } from '@states';
+import { NetworkMetainfo } from '@types';
+
 type BackgroundProps = React.PropsWithChildren<unknown>;
 
 export const Background: React.FC<BackgroundProps> = ({ children }) => {

packages/adena-extension/src/components/change-network/change-network/change-network.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
+
 import { ChangeNetworkWrapper } from './change-network.styles';
-import { NetworkMetainfo } from '@states/network';
 import BottomFixedButton from '@components/buttons/bottom-fixed-button';
 import NetworkList from '../network-list/network-list';
 import AddCustomNetworkButton from '../add-custom-network-button/add-custom-network-button';
 import LoadingChangeNetwork from '@components/loading-screen/loading-change-network';
 
+import { NetworkMetainfo } from '@types';
+
 export interface ChangeNetworkProps {
   loading: boolean;
   currentNetworkId: string;
@@ -25,30 +27,27 @@ const ChangeNetwork: React.FC<ChangeNetworkProps> = ({
   moveEditPage,
   moveBack,
 }) => {
-
   return (
     <ChangeNetworkWrapper>
       <div className='content-wrapper'>
         <h4 className='title'>Change Network</h4>
-        {
-          loading ? (
-            <LoadingChangeNetwork />
-          ) : (
-            <>
-              <NetworkList
-                currentNetworkId={currentNetworkId}
-                networkMetainfos={networkMetainfos}
-                changeNetwork={changeNetwork}
-                moveEditPage={moveEditPage}
-              />
-              <AddCustomNetworkButton onClick={moveAddPage} />
-            </>
-          )
-        }
+        {loading ? (
+          <LoadingChangeNetwork />
+        ) : (
+          <>
+            <NetworkList
+              currentNetworkId={currentNetworkId}
+              networkMetainfos={networkMetainfos}
+              changeNetwork={changeNetwork}
+              moveEditPage={moveEditPage}
+            />
+            <AddCustomNetworkButton onClick={moveAddPage} />
+          </>
+        )}
       </div>
       <BottomFixedButton onClick={moveBack} />
     </ChangeNetworkWrapper>
   );
 };
 
-export default ChangeNetwork;
+export default ChangeNetwork;

packages/adena-extension/src/components/change-network/network-list-item/network-list-item.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback } from 'react';
+
 import { NetworkListItemWrapper } from './network-list-item.styles';
-import { NetworkMetainfo } from '@states/network';
 import IconCheck from '@assets/check-circle.svg';
 import IconLock from '@assets/icon-lock-small';
 import IconEdit from '@assets/icon-edit-small';
 
+import { NetworkMetainfo } from '@types';
+
 export interface NetworkListItemProps {
   selected: boolean;
   locked: boolean;

packages/adena-extension/src/components/change-network/network-list/network-list.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { NetworkListWrapper } from './network-list.styles';
-import { NetworkMetainfo } from '@states/network';
 import NetworkListItem from '../network-list-item/network-list-item';
+import { NetworkMetainfo } from '@types';
 
 export interface NetworkListProps {
   currentNetworkId: string;
@@ -16,7 +17,6 @@ const NetworkList: React.FC<NetworkListProps> = ({
   changeNetwork,
   moveEditPage,
 }) => {
-
   return (
     <NetworkListWrapper>
       {networkMetainfos.map((networkMetainfo, index) => (
@@ -33,4 +33,4 @@ const NetworkList: React.FC<NetworkListProps> = ({
   );
 };
 
-export default NetworkList;
+export default NetworkList;

packages/adena-extension/src/components/loading-screen/loading-main.tsx

@@ -1,12 +1,13 @@
 import React, { ReactElement, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
 import styled, { CSSProp } from 'styled-components';
+import { useMatch } from 'react-router-dom';
+
 import { Circle, GhostButtons, Round } from '@components/loadings';
 import { SkeletonBoxStyle } from '@components/loadings';
-import { useMatch } from 'react-router-dom';
 import { RoutePath } from '@router/path';
 import { useTokenBalance } from '@hooks/use-token-balance';
-import { useRecoilState } from 'recoil';
-import { CommonState, WalletState } from '@states/index';
+import { CommonState, WalletState } from '@states';
 import { useNetwork } from '@hooks/use-network';
 
 const Wrapper = styled.main`

packages/adena-extension/src/components/transfer/transfer-input/transfer-input.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
+
 import { TransferInputWrapper } from './transfer-input.styles';
 import SubHeader from '@components/common/sub-header/sub-header';
 import UnknownTokenIcon from '@assets/common-unknown-token.svg';
 import AddressInput from '../address-input/address-input';
 import BalanceInput from '../balance-input/balance-input';
 import ArrowLeftIcon from '@assets/arrowL-left.svg';
-import { TokenModel } from '@models/token-model';
+
+import { TokenModel } from '@types';
 
 export interface TransferInputProps {
   tokenMetainfo: TokenModel;
@@ -53,21 +55,17 @@ const TransferInput: React.FC<TransferInputProps> = ({
 }) => {
   return (
     <TransferInputWrapper>
-      {
-        hasBackButton ? (
-          <SubHeader
-            title={`Send ${tokenMetainfo.symbol}`}
-            leftElement={{
-              element: <img src={`${ArrowLeftIcon}`} alt={'back image'} />,
-              onClick: onClickBack,
-            }}
-          />
-        ) : (
-          <SubHeader
-            title={`Send ${tokenMetainfo.symbol}`}
-          />
-        )
-      }
+      {hasBackButton ? (
+        <SubHeader
+          title={`Send ${tokenMetainfo.symbol}`}
+          leftElement={{
+            element: <img src={`${ArrowLeftIcon}`} alt={'back image'} />,
+            onClick: onClickBack,
+          }}
+        />
+      ) : (
+        <SubHeader title={`Send ${tokenMetainfo.symbol}`} />
+      )}
       <div className='logo-wrapper'>
         <img className='logo' src={tokenMetainfo.image || UnknownTokenIcon} alt='token image' />
       </div>
@@ -79,10 +77,12 @@ const TransferInput: React.FC<TransferInputProps> = ({
       </div>
       <div className='button-group'>
         <button onClick={onClickCancel}>Cancel</button>
-        <button className={isNext ? 'next' : 'next disabled'} onClick={onClickNext}>Next</button>
+        <button className={isNext ? 'next' : 'next disabled'} onClick={onClickNext}>
+          Next
+        </button>
       </div>
     </TransferInputWrapper>
   );
 };
 
-export default TransferInput;
+export default TransferInput;

packages/adena-extension/src/components/transfer/transfer-summary/transfer-summary.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import { TransferSummaryWrapper } from './transfer-summary.styles';
 import TransferSummaryBalance from '../transfer-summary-balance/transfer-summary-balance';
 import TransferSummaryAddress from '../transfer-summary-address/transfer-summary-address';
 import TransferSummaryNetworkFee from '../transfer-summary-network-fee/transfer-summary-network-fee';
 import ArrowDownIcon from '@assets/transfer-arrow-down.svg';
 import SubHeader from '@components/common/sub-header/sub-header';
 import ArrowLeftIcon from '@assets/arrowL-left.svg';
-import { Amount } from '@states/balance';
-import { TokenModel } from '@models/token-model';
+
+import { TokenModel, Amount } from '@types';
 
 export interface TransferSummaryProps {
   tokenMetainfo: TokenModel;
@@ -66,19 +67,19 @@ const TransferSummary: React.FC<TransferSummaryProps> = ({
           value={networkFee.value}
           denom={networkFee.denom}
         />
-        {
-          isErrorNetworkFee && (
-            <span className='error-message'>Insufficient network fee</span>
-          )
-        }
+        {isErrorNetworkFee && <span className='error-message'>Insufficient network fee</span>}
       </div>
 
       <div className='button-group'>
-        <button className='cancel' onClick={onClickCancel}>Cancel</button>
-        <button className='send' onClick={onClickSend}>Send</button>
+        <button className='cancel' onClick={onClickCancel}>
+          Cancel
+        </button>
+        <button className='send' onClick={onClickSend}>
+          Send
+        </button>
       </div>
     </TransferSummaryWrapper>
   );
 };
 
-export default TransferSummary;
+export default TransferSummary;

packages/adena-extension/src/containers/add-custom-network-conatiner/add-custom-network-conatiner.tsx

@@ -1,9 +1,11 @@
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
 import AddCustomNetwork from '@components/add-custom-network/add-custom-network/add-custom-network';
 import { useCustomNetworkInput } from '@hooks/use-custom-network-input';
 import { useNetwork } from '@hooks/use-network';
-import { NetworkMetainfo } from '@states/network';
-import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+
+import { NetworkMetainfo } from '@types';
 
 function isValidURL(rpcUrl: string): boolean {
   const regExp = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/;

packages/adena-extension/src/containers/edit-custom-network-container/edit-custom-network-container.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
 import EditNetwork from '@components/edint-network/edit-network/edit-network';
 import { useCustomNetworkInput } from '@hooks/use-custom-network-input';
 import { useNetwork } from '@hooks/use-network';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { parseParameters } from '@common/utils/client-utils';
-import { NetworkMetainfo } from '@states/network';
+
+import { NetworkMetainfo } from '@types';
 
 function isValidURL(rpcURL: string): boolean {
   const regExp = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/;

packages/adena-extension/src/containers/manage-token-added-container/manage-token-added-container.tsx

@@ -4,7 +4,7 @@ import AdditionalToken, {
 import { useAdenaContext } from '@hooks/use-context';
 import { useTokenBalance } from '@hooks/use-token-balance';
 import { useTokenMetainfo } from '@hooks/use-token-metainfo';
-import { isGRC20TokenModel } from '@models/token-model';
+import { isGRC20TokenModel } from '@common/validation/validation-token';
 import { RoutePath } from '@router/path';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useState } from 'react';