Skip to content

Commit

Permalink
Merge pull request #3 from infinex-io/staging
Browse files Browse the repository at this point in the history 
Staging
  • Loading branch information
@jamest0
jamest0 committed Oct 16, 2023
2 parents 3acfab3 + 0640634 commit d954e06
Show file tree
Hide file tree
Showing 20 changed files with 314 additions and 348 deletions.
160 changes: 91 additions & 69 deletions components/FTXFileUpload/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,66 +2,64 @@ import BackIcon from 'components/Icons/BackIcon';
import LinkIcon from 'components/Icons/LinkIcon';
import { useEffect, useRef, useState } from 'react';
import { supabase } from 'utils/supabaseClient';
import HCaptcha from "@hcaptcha/react-hcaptcha";
import HCaptcha from '@hcaptcha/react-hcaptcha';
import classNames from 'classnames';
import styles from "styles/yams.module.css"
import styles from 'styles/yams.module.css';

const FTXFileUpload = () => {
const [email, setEmail] = useState<string>('');
const [isValidEmail, setIsValidEmail] = useState<boolean>(false);
const [isFileUploaded, setIsFileUploaded] = useState<boolean>(false);
const [captchaToken, setCaptchaToken] = useState<string>();
const [captchaToken, setCaptchaToken] = useState<string>();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
const [confirmationCode, setConfirmationCode] = useState<string>('');
const [isSuccess, setIsSuccess] = useState<boolean>(false);
const [file, setFile] = useState<any>();
const captchaRef = useRef<HCaptcha>(null);
const [file, setFile] = useState<any>();
const captchaRef = useRef<HCaptcha>(null);

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
captchaRef.current?.execute();
};

const handleFileUpload = (e: any) => {
setFile(e.target.files[0])
setIsFileUploaded(true)
}
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
captchaRef.current?.execute();
};

// handling email + file submit
useEffect(() => {
const onVerified = async () => {
setIsLoading(true);
if (!isValidEmail || !isFileUploaded) {
setIsLoading(false);
return;
}
const { data, error } = await supabase.auth.signInWithOtp({
email: email,
options: {
captchaToken
}
});
if (error) console.log(error);
else {
const ftxFile = file
const { data, error } = await supabase
.storage
.from('FTX Files')
.upload(`${email}.pdf`, ftxFile)
if (error) {
console.log(error)
}
}
setIsLoading(false);
setIsSubmitted(true);
};
captchaRef.current?.resetCaptcha();
onVerified()
}, [captchaToken])
const handleFileUpload = (e: any) => {
setFile(e.target.files[0]);
setIsFileUploaded(true);
};

// handling email + file submit
useEffect(() => {
const onVerified = async () => {
setIsLoading(true);
if (!isValidEmail || !isFileUploaded) {
setIsLoading(false);
return;
}
const { data, error } = await supabase.auth.signInWithOtp({
email: email,
options: {
captchaToken,
},
});
if (error) console.log(error);
else {
const ftxFile = file;
const { data, error } = await supabase.storage
.from('FTX Files')
.upload(`${email}.pdf`, ftxFile);
if (error) {
console.log(error);
}
}
setIsLoading(false);
setIsSubmitted(true);
};
captchaRef.current?.resetCaptcha();
onVerified();
}, [captchaToken]);

// regex email verification
// regex email verification
useEffect(() => {
const res = email.match(
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
Expand All @@ -70,14 +68,14 @@ const FTXFileUpload = () => {
else setIsValidEmail(false);
}, [email]);

// cap verification code length at 6
// cap verification code length at 6
const maxLengthCheck = (object: any) => {
if (object.target.value.length > object.target.maxLength) {
object.target.value = object.target.value.slice(0, object.target.maxLength);
}
};

// handling verification code submit
// handling verification code submit
const verificationSubmit = async (e: React.MouseEvent<HTMLElement>) => {
setIsLoading(true);
e.preventDefault();
Expand All @@ -94,23 +92,30 @@ const FTXFileUpload = () => {
};

return (
<div className={classNames("animation-appear animation-delay-1 px-8 sm:px-0 flex flex-col justify-center items-center gap-10 rounded-3xl text-black h-full"
, styles.boxIndent)}
style={{height: 'calc(100vh - 200px)', borderRadius: '20px', margin:"0 20px 20px 20px"}}>
<div
className={classNames(
'animation-appear animation-delay-1 px-8 sm:px-0 flex flex-col justify-center items-center gap-10 rounded-3xl text-black h-full',
styles.boxIndent
)}
style={{ height: 'calc(100vh - 200px)', borderRadius: '20px', margin: '0 20px 20px 20px' }}
>
<LinkIcon />
<h1 className="text-5xl font-black">Proof of Rug</h1>

{!isSubmitted ? (
<div>
<p className="text-sm font-medium text-center max-w-sm">
<p className="text-sm font-medium text-center max-w-xs">
Attach your FTX Customer Claim Form to prove you lost funds.
</p>
<form className="cursor-pointer" onSubmit={handleSubmit}>
<input
type="file"
className={classNames(`block w-full text-sm text-[#0000003b] rounded-3xl file:mr-4 file:py-1 file:px-3
className={classNames(
`block w-full text-sm text-[#0000003b] rounded-3xl file:mr-4 file:py-1 file:px-3
file:bg-transparent file:text-black file:py-2 file:rounded-3xl file:border-0 file:text-sm
file:font-semibold cursor-pointer my-5`, styles.inputIndent)}
file:font-semibold cursor-pointer my-5`,
styles.inputIndent
)}
onChange={handleFileUpload}
accept="application/pdf"
/>
Expand All @@ -121,20 +126,30 @@ const FTXFileUpload = () => {
type="email"
onChange={(event) => setEmail(event.target.value)}
value={email}
className={classNames(`w-full py-2 px-4 bg-transparent rounded-3xl mt-1
focus:outline-0 focus:border-primary transition placeholder:text-[#0000003b]`, styles.inputIndent)}
className={classNames(
`w-full py-2 px-4 bg-transparent rounded-3xl mt-1
focus:outline-0 focus:border-primary transition placeholder:text-[#0000003b]`,
styles.inputIndent
)}
placeholder="Email"
/>
<div className="flex flex-row gap-4 mt-5">
<div className="flex flex-row gap-4 mt-5">
<button
className={classNames(`text-black bg-primary rounded-3xl py-2 px-5 ${isLoading ? "animate-pulse" : ""}`
, styles.transparentButtonShadow)}
className={classNames(
`text-black bg-primary rounded-3xl py-2 px-5 ${isLoading ? 'animate-pulse' : ''}`,
styles.transparentButtonShadow
)}
type="submit"
value="submit"
disabled={isLoading}
disabled={isLoading}
>
Submit
<HCaptcha ref={captchaRef} sitekey="421a6c31-136b-46c5-bda4-be46be2939d8" onVerify={(token) => setCaptchaToken(token)} size="invisible" />
<HCaptcha
ref={captchaRef}
sitekey="421a6c31-136b-46c5-bda4-be46be2939d8"
onVerify={(token) => setCaptchaToken(token)}
size="invisible"
/>
</button>
</div>
</form>
Expand All @@ -143,14 +158,17 @@ const FTXFileUpload = () => {
<div>
{!isSuccess ? (
<div className="flex flex-col justify-center items-center">
<h1 className="max-w-sm text-center text-sm">
<h1 className="max-w-xs text-center text-sm">
In order to verify your email, enter the verification code sent to your email.
</h1>
<input
type="number"
className={classNames(`bg-transparent text-center py-2 w-36 mt-3 focus:outline-0
className={classNames(
`bg-transparent text-center py-2 w-36 mt-3 focus:outline-0
focus:border-primary transition rounded-3xl
placeholder:text-[#0000003b]`, styles.inputIndent)}
placeholder:text-[#0000003b]`,
styles.inputIndent
)}
maxLength={6}
onChange={(event) => setConfirmationCode(event.target.value)}
value={confirmationCode}
Expand All @@ -159,11 +177,15 @@ const FTXFileUpload = () => {
/>
<div className="flex flex-row gap-4 mt-5">
<button
className={classNames(`text-black bg-primary rounded-3xl py-2 px-4 ${isLoading ? "animate-pulse" : ""}`
, styles.transparentButtonShadow)}
className={classNames(
`text-black bg-primary rounded-3xl py-2 px-4 ${
isLoading ? 'animate-pulse' : ''
}`,
styles.transparentButtonShadow
)}
type="submit"
value="submit"
disabled={isLoading}
disabled={isLoading}
onClick={verificationSubmit}
>
Confirm
Expand All @@ -172,8 +194,8 @@ const FTXFileUpload = () => {
</div>
) : (
<div className="flex flex-col justify-center items-center">
Email verified successfully!
</div>
Email verified successfully!
</div>
)}
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default function Header() {
className={classNames(
`${
isYams ? 'bg-slate-1000 rounded-3xl' : '!bg-slate-900 !border-slate-300 !text-white'
} whitespace-nowrap text-[0.8rem]`,
} whitespace-nowrap text-[0.8rem] hidden sm:block`,
styles.blackButtonShadow
)}
variant="outline"
Expand Down
Loading

0 comments on commit d954e06

Please sign in to comment.