Skip to content

Commit

Permalink
testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikos-koukis
nikos-koukis committed Oct 13, 2023
1 parent 3937858 commit 7db82f3
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 133 deletions.
2 changes: 0 additions & 2 deletions src/views/Home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,6 @@ function FeatureCard({ icon: IconComponent, title, description }: FeatureCardPro
const Home = () => {

const particlesInit = useCallback(async (engine: Engine) => {
console.log(engine);

// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
Expand Down
21 changes: 16 additions & 5 deletions src/views/Home/components/NewUserForm/CreatePin.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import React, { ChangeEvent } from 'react';
import { Input, Text, Box, Flex } from '@chakra-ui/react';
import { useState } from 'react';
import { Input, Text, Box, Flex, Button } from '@chakra-ui/react';
interface CreatePinProps {
setPin: React.Dispatch<React.SetStateAction<string>>;
onPinChange: (pin: string) => void;
onCreatePinClick: () => void;
pin: string;

}
function CreatePin({ setPin, onPinChange, pin }: CreatePinProps) {
function CreatePin({ setPin, pin, onCreatePinClick }: CreatePinProps) {

const handlePinChange = (event: ChangeEvent<HTMLInputElement>) => {
const newPin = event.target.value;
setPin(newPin);
onPinChange(newPin);
}

const handleCreatePin = () => {
onCreatePinClick(); // Trigger the callback from the parent component
}
return (
<Box>
<Flex
Expand All @@ -20,7 +26,7 @@ function CreatePin({ setPin, onPinChange, pin }: CreatePinProps) {
gap={6}
textAlign={'left'}
>
<Text alignSelf={'center'} fontWeight={'bold'}>Create PIN</Text>
<Text alignSelf={'center'} fontWeight={'bold'}>Create a digit PIN</Text>
<Text>
This is the most important part.
</Text>
Expand All @@ -40,6 +46,11 @@ function CreatePin({ setPin, onPinChange, pin }: CreatePinProps) {
placeholder='Type your pin' onChange={handlePinChange}
borderColor={'1px solid #E2E8F0'}
/>
<Button
onClick={() => handleCreatePin()}
>
Create Pin
</Button>
</Flex>
</Box>
);
Expand Down
166 changes: 73 additions & 93 deletions src/views/Home/components/NewUserForm/CreateWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,34 @@ import { createEncryptionKey, encrypt } from "@/utils/functions/cryptography";
import { network } from "@/config.devnet";
import { TransactionActionsEnum } from "@multiversx/sdk-dapp/types";

export default function CreateWallet({pin, email, handleReset, userGid}: {pin: string, email: string, handleReset: any, userGid: string}) {
export default function CreateWallet({ pin, email, handleReset, userGid }: { pin: string, email: string, handleReset: any, userGid: string }) {

const [encryptionKey, setEncryptionKey] = useState(createEncryptionKey(pin, userGid));
const [walletCreationHash, setWalletCreationHash] = useState("");
const [txDetails, setTxDetails] = useState('');

useEffect(() => {
if (walletCreationHash != "") {
const fetchDetails = async () => {
try {
const response = await fetch(`${network.apiAddress}/transactions/${walletCreationHash}`);
const data = await response.json();
return data.status;
} catch (error) {
throw new Error('Unable to fetch token info');
}
};
// Fetch the token information and update tokenDecimals state
fetchDetails()
.then((details) => {
setTxDetails(details);
})
.catch((error) => {
console.error('Error fetching tx details:', error);
});

const fetchDetails = async () => {
try {
const response = await fetch(`${network.apiAddress}/transactions/${walletCreationHash}`);
const data = await response.json();
return data.status;
} catch (error) {
throw new Error('Unable to fetch token info');
}
};
// Fetch the token information and update tokenDecimals state
fetchDetails()
.then((details) => {
setTxDetails(details);
})
.catch((error) => {
console.error('Error fetching tx details:', error);
});
}
}, [walletCreationHash]);
// console.log("⚠️ ~ file: CreateWallet.tsx:1 ~ CreateWallet ~ txDetails", txDetails)
// if !txDetails && txDetails.status == "pending" show Loading in the middle of the screen with blur behind it


const walletInfoTypes = {
mnemonic: "mnemonic",
Expand All @@ -63,25 +60,25 @@ export default function CreateWallet({pin, email, handleReset, userGid}: {pin: s
const downloadJsonFile = () => {
// Create a Blob from the JSON content
const blob = new Blob([jsonFileContent], { type: 'application/json' });

// Create a data URL for the Blob
const url = URL.createObjectURL(blob);

// Create an anchor element for downloading
const a = document.createElement('a');
a.href = url;
a.download = 'mywallet.json';

// Trigger a click event on the anchor element
a.click();

// Clean up by revoking the URL
URL.revokeObjectURL(url);

// Set the state to indicate that the file has been downloaded
setJsonFileDownloaded(true);
};
};


// Create a null wallet info object
const nullWalletInfo = Object.fromEntries(
Expand Down Expand Up @@ -155,16 +152,14 @@ export default function CreateWallet({pin, email, handleReset, userGid}: {pin: s
console.error(error);
}
};

return (
<>
<Flex m={10} gap={5}>
<VStack>
<Text fontWeight={'bold'} fontSize={'3xl'}>
Create Wallet
</Text>
<Flex gap={5} direction={'column'}>

<Text alignSelf={'center'} fontWeight={'bold'}>Create a wallet</Text>
{!clickedForInfo &&
<HStack>
<HStack alignSelf={'center'}>
<Text>
Click to generate the information for a new wallet:
</Text>
Expand All @@ -189,80 +184,65 @@ export default function CreateWallet({pin, email, handleReset, userGid}: {pin: s
<Text>
<b>Address:</b> {walletInfo.address}
</Text>
<Text>
<b>Secret Words:</b>
<Grid templateColumns="repeat(4, 1fr)">
{walletInfo.words.split('.').map((word: string, index: number) => (
<Text key={index} as="span" border="1px solid black" padding="1" m={1}>
{word}
</Text>
))}
</Grid>
</Text>
{jsonFileContent == "" &&
<HStack mt={20}>
<Button colorScheme="red" onClick={handleReset}>
Reset
</Button>
<Button
w={'fit'}
_hover={{
opacity: 1,
boxShadow: 'lg'
}}
onClick={handleGenerateWalletInfo}
>
Re-generate Wallet
</Button>
<Button colorScheme="blue" onClick={handleSubmit}>
Submit
</Button>
</HStack>
<HStack mt={20}>
<Button colorScheme="red" onClick={handleReset}>
Reset
</Button>
<Button
w={'fit'}
_hover={{
opacity: 1,
boxShadow: 'lg'
}}
onClick={handleGenerateWalletInfo}
>
Re-generate Wallet
</Button>
<Button colorScheme="blue" onClick={handleSubmit}>
Submit
</Button>
</HStack>
}
{jsonFileContent != "" && !jsonFileDownloaded && (
<HStack mt={20}>
<Button colorScheme="red" onClick={handleReset}>
Reset
Reset
</Button>
<Button
w={'fit'}
_hover={{
opacity: 1,
boxShadow: 'lg',
}}
onClick={handleGenerateWalletInfo}
w={'fit'}
_hover={{
opacity: 1,
boxShadow: 'lg',
}}
onClick={handleGenerateWalletInfo}
>
Re-generate Wallet
Re-generate Wallet
</Button>
<Button colorScheme="blue" onClick={handleSubmit}>
{clickedSubmit || (!txDetails && txDetails == "pending") ? "Loading..." : "Submit"}
</Button>
</HStack>
)}
{jsonFileContent != "" && jsonFileDownloaded && (
<>
{/*
<Text maxW={'700px'}>
<b>JSON File:</b> {jsonFileContent}
</Text>
*/}
<Button
colorScheme="teal"
onClick={downloadJsonFile}
>
Download JSON
</Button>
<Text fontWeight={'semibold'} maxW={'400px'}>
Congratulations! Now you can save the JSON file in a safe place and connect using it (password is &apos;password&apos; 😎).
</Text>
<Text mt={20} fontWeight={'semibold'} maxW={'400px'}>
Wait a few seconds and refresh the page. You should see your information if everything ran successfully.
</Text>
</>
)}
<>
<Button
colorScheme="teal"
onClick={downloadJsonFile}
>
Download JSON
</Button>
<Text fontWeight={'semibold'} maxW={'400px'}>
Congratulations! Now you can save the JSON file in a safe place and connect using it (password is &apos;password&apos; 😎).
</Text>
<Text mt={20} fontWeight={'semibold'} maxW={'400px'}>
Wait a few seconds and refresh the page. You should see your information if everything ran successfully.
</Text>
</>
)}
</VStack>
}
</VStack>

</Flex>
</>
);
Expand Down
Loading

0 comments on commit 7db82f3

Please sign in to comment.