add chakra steps

Eldar-Finance · Oct 13, 2023 · 82dea53 · 82dea53
1 parent fe94f28
commit 82dea53
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@multiversx/sdk-dapp": "^2.14.4",
     "@multiversx/sdk-wallet": "^4.2.0",
     "@reduxjs/toolkit": "^1.9.7",
+    "chakra-ui-steps": "^2.1.0",
     "crypto-js": "^4.1.1",
     "framer-motion": "^6.5.1",
     "fs": "^0.0.1-security",

diff --git a/src/config/chakraTheme.ts b/src/config/chakraTheme.ts
@@ -1,7 +1,10 @@
 import { extendTheme, ThemeConfig  } from '@chakra-ui/react';
+import { StepsTheme as Steps } from "chakra-ui-steps";
 
 export const theme = extendTheme({
-
+  components: {
+    Steps,
+  },
   config: {
     initialColorMode: 'light', // or 'light'
     useSystemColorMode: false,

diff --git a/src/views/Home/components/NewUserForm/NewUserForm.tsx b/src/views/Home/components/NewUserForm/NewUserForm.tsx
@@ -13,60 +13,10 @@ import {
     CSSReset,
     Box,
     Flex,
-  } from '@chakra-ui/react';
+} from '@chakra-ui/react';
 import { createUser } from "../../services/calls";
 import CreateWallet from "./CreateWallet";
 import { createEncryptionKey } from "@/utils/functions/cryptography";
-
-// Define custom Chakra UI theme to control transitions
-const theme = extendTheme({
-    initialColorMode: 'light',
-});
-
-// interface Step1Props {
-//     usernameData: {
-//         username?: string;
-//     };
-//     onNext: (data: { username: string }) => void;
-// }
-
-// function Step1({ usernameData, onNext }: Step1Props) {
-//     const [username, setUsername] = useState(usernameData.username || '');
-
-//     const handleNext = () => {
-//         onNext({ username });
-//     };
-
-//     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//         const value = e.target.value;
-//         if (/^[a-z0-9._]{0,20}$/.test(value)) {
-//             setUsername(value);
-//         }
-//     };
-
-//     return (
-//         <VStack spacing={4}>
-//             <Text fontSize="xl">Step 1: Enter Username</Text>
-//             <Text>
-//                 For now, usernames will be used only as a method of identification. In the future, you will be able to send or receive funds using your username.
-//             </Text>
-//             <FormControl maxW={'250px'}>
-//                 <Input
-//                     type="text"
-//                     placeholder="Username"
-//                     value={username}
-//                     onChange={handleUsernameChange}
-//                 />
-//             </FormControl>
-//             <Text>
-//                 *only (max 20) alphanumeric lowercase characters, dot &#39;.&#39;, or underscore &#39;_&#39;
-//             </Text>
-//             <Button colorScheme="blue" onClick={handleNext}>
-//                 Next
-//             </Button>
-//         </VStack>
-//     );
-// }
 
 interface Step1Props {
     pinData: {
@@ -137,7 +87,7 @@ interface FormData {
     pin?: string;
 }
 
-function NewUserForm({ email, userGid }: { email: string; userGid: string;}) {
+function NewUserForm({ email, userGid }: { email: string; userGid: string; }) {
     const [step, setStep] = useState(1);
     const [formData, setFormData] = useState<FormData>({});
 
@@ -156,8 +106,6 @@ function NewUserForm({ email, userGid }: { email: string; userGid: string;}) {
     }
 
     return (
-        <ChakraProvider theme={theme}>
-        <CSSReset />
         <Container
             minW="800px"
             minH="800px"
@@ -168,13 +116,12 @@ function NewUserForm({ email, userGid }: { email: string; userGid: string;}) {
             {step === 1 && (
                 <Step1 pinData={formData} onPrevious={handlePrevious} onNext={handleNext} />
             )}
-            {step == 2 && 
-            <VStack>
-                <CreateWallet formData={formData} email={email} handleReset={handleReset} userGid={userGid}/>
-            </VStack>
+            {step == 2 &&
+                <VStack>
+                    <CreateWallet formData={formData} email={email} handleReset={handleReset} userGid={userGid} />
+                </VStack>
             }
         </Container>
-        </ChakraProvider>
     );
 }