create wallet using keystore

env/.dev

@@ -0,0 +1 @@
+VITE_SERVER_URL=http://localhost:3000

package.json

@@ -34,6 +34,7 @@
     "@mui/material": "^5.15.0",
     "@mui/system": "^5.15.0",
     "@mui/utils": "^5.15.0",
+    "axios": "^1.6.8",
     "is-mobile": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

src/api/client/index.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+import { setupInterceptors } from './interceptors';
+
+const AxiosClient = axios.create({
+  baseURL:
+    !import.meta.env.VITE_USE_MOCK && import.meta.env.VITE_SERVER_URL
+      ? import.meta.env.VITE_SERVER_URL
+      : 'http://localhost:3000',
+  headers: {
+    Accept: 'application/json',
+  },
+});
+
+setupInterceptors(AxiosClient);
+
+export default AxiosClient;

src/api/client/interceptors.ts

@@ -0,0 +1,60 @@
+import { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+interface IRequestAxios extends InternalAxiosRequestConfig {
+  skipLoading?: boolean;
+}
+
+const onRequestConfig = (config: IRequestAxios) => {
+  // if (!config.headers['Authorization']) {
+  //   const token = localStorage.getItem('accessToken');
+  //   if (token) {
+  //     config.headers['Authorization'] = `Bearer ${token}`;
+  //   }
+  // }
+  if (!config.headers['Content-Type']) {
+    config.headers['Content-Type'] = 'application/json';
+  }
+  config.timeout = 30000;
+  return config;
+};
+
+const onRequestError = (error: AxiosError): Promise<AxiosError> => {
+  return Promise.reject(error);
+};
+
+const onResponse = (res: AxiosResponse): AxiosResponse => {
+  return res;
+};
+
+const onResponseError = async (
+  err: AxiosError,
+  // axiosInstance: AxiosInstance,
+): Promise<AxiosError | undefined> => {
+  // const originalConfig = err.config as InternalAxiosRequestConfig;
+
+  console.log(err);
+  // if (err.response?.status === 401) {
+  //   const currentRefreshToken = localStorage.getItem('refreshToken');
+  //   removeAllToken();
+  //   if (!currentRefreshToken) {
+  //     if (window.location.pathname == '/login') {
+  //       return Promise.reject(err?.response?.data);
+  //     }
+  //     return;
+  //   }
+  //   const token = await userApi.refreshToken(currentRefreshToken!);
+  //   localStorage.setItem('accessToken', token.accessToken);
+  //   localStorage.setItem('refreshToken', token.refreshToken);
+  //   originalConfig.headers.Authorization = `Bearer ${token.accessToken}`;
+
+  //   return axiosInstance(originalConfig);
+  // }
+  return Promise.reject(err?.response?.data);
+};
+
+export const setupInterceptors = (axiosInstance: AxiosInstance) => {
+  axiosInstance.interceptors.request.use(onRequestConfig, onRequestError);
+  axiosInstance.interceptors.response.use(onResponse, (err: AxiosError) =>
+    onResponseError(err /*axiosInstance*/),
+  );
+};

src/api/wallet/apiWallet.ts

@@ -0,0 +1,10 @@
+import { Keystore } from '@/store/keystore/type';
+import AxiosClient from '../client';
+import { CreateWalletKeystoreRequest } from './type';
+
+export const createWalletKeystore = async (
+  data: CreateWalletKeystoreRequest,
+) /*: Promise<CreateWalletKeystoreResponse>*/ => {
+  const response = await AxiosClient.post('/wallet/create/keystore', data);
+  return response.data as Keystore;
+};

src/api/wallet/type.ts

@@ -0,0 +1,5 @@
+interface CreateWalletKeystoreRequest {
+  password: string;
+}
+
+export type { CreateWalletKeystoreRequest };

src/pages/CreateWallet/CreatePasswordForm.tsx

@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextField, IconButton, InputAdornment, Button } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { createWalletKeystore } from '@/api/wallet/apiWallet';
+import { useRecoilState } from 'recoil';
+import KeystoreState from '@/store/keystore';
 
 type FormValues = {
   password: string;
@@ -15,6 +18,7 @@ interface CreatePasswordFormProps {
 function CreatePasswordForm({ onSuccessfulSubmit }: CreatePasswordFormProps) {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [, setKeystore] = useRecoilState(KeystoreState);
   const {
     register,
     handleSubmit,
@@ -25,8 +29,15 @@ function CreatePasswordForm({ onSuccessfulSubmit }: CreatePasswordFormProps) {
   });
   const password = watch('password');
 
-  const onSubmit: SubmitHandler<FormValues> = (data) => {
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
     console.log(data);
+    createWalletKeystore({ password: 'password' }).then((response) => {
+      console.log(response);
+      setKeystore({
+        iv: response.iv,
+        encryptedData: response.encryptedData,
+      });
+    });
     onSuccessfulSubmit();
   };