Skip to content

Commit

Permalink
tx status update
Browse files Browse the repository at this point in the history
  • Loading branch information
Arunpandiaraja committed Oct 21, 2023
1 parent 7a9dce2 commit 4e5d23a
Showing 8 changed files with 186 additions and 120 deletions.
3 changes: 2 additions & 1 deletion pages/index.tsx
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@ import { useWagmi } from "../utils/wagmi/WagmiContext";
import Login from "../ui_components/login/Login";
import { usePathname } from "next/navigation";
import { SendTx } from "../ui_components/home/Send";
import { TxStatus } from "../ui_components/home";

export type THandleStep = {
handleSteps: (step: number) => void;
@@ -231,7 +232,7 @@ export default function Home() {
const handleSteps = (step: number) => {
setStep(step);
};
console.log(step, "step");

const getUIComponent = (step: number) => {
switch (step) {
case ESTEPS.ONE:
7 changes: 5 additions & 2 deletions pages/typography.css
Original file line number Diff line number Diff line change
@@ -7,8 +7,8 @@
.heading3_bold {
@apply font-inter font-bold text-lg text-text-900;
}
.subtitle {
@apply font-inter font-medium text-medium leading-2 md:text-medium md:leading-2 text-black;
.subtitle_bold {
@apply font-inter font-bold text-medium text-black;
}

.support_text_bold {
@@ -24,6 +24,9 @@
.paragraph_medium {
@apply font-inter font-medium text-base leading-[20px] text-black;
}
.paragraph {
@apply font-inter font-normal text-base text-black;
}

.supportText_regular {
@apply font-inter font-normal text-sm text-black;
3 changes: 3 additions & 0 deletions public/assets/images/tx_success.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
243 changes: 126 additions & 117 deletions ui_components/home/Send.tsx
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ import {
getTokenFormattedNumber,
getTokenValueFormatted,
hexToNumber,
isValidEOAAddress,
} from "../../utils";
import { BaseGoerli } from "../../utils/chain/baseGoerli";
import { icons } from "../../utils/images";
@@ -35,7 +36,7 @@ import ReactTyped from "react-typed";
import { createSafe } from "@instadapp/avocado";
import { Button } from "../shared";
import BottomSheet from "../bottom-sheet";
import { TaxAlertBottomSheet } from ".";
import { TaxAlertBottomSheet, TxStatus } from ".";

export interface ILoadChestComponent {
provider?: any;
@@ -126,6 +127,8 @@ export const SendTx: FC<ILoadChestComponent> = (props) => {
setValue(`${appendDollar}${valueWithoutDollarSign}`);
const tokenIputValue = Number(valueWithoutDollarSign) / Number(tokenPrice);
setInputValue(getTokenValueFormatted(Number(tokenIputValue)));
const isValidAddress = isValidEOAAddress(toAddress);
console.log(isValidAddress, "isValidAddress");
if (Number(valueWithoutDollarSign) < Number(balanceInUsd)) {
setBtnDisable(false);
} else {
@@ -157,131 +160,137 @@ export const SendTx: FC<ILoadChestComponent> = (props) => {
};

return (
<div className="pt-[120px] bg-white h-[100dvh] relative">
<div className="container mx-auto relative h-full">
{!transactionLoading ? (
<div>
{!showActivity ? (
<>
<div className="w-full">
<div className="relative mb-4">
<label htmlFor="usdValue" className="label mb-3 block">
Amount
</label>
<div className="relative">
<input
id="usdValue"
name="usdValue"
inputMode="decimal"
type="text"
className={`p-3 heading3_bold border border-secondary-700 bg-transparent placeholder-grey rounded-xl block w-full focus:outline-none focus:ring-transparent`}
placeholder="$0"
value={value}
onChange={(e) => {
handleInputChange(e.target.value);
}}
disabled={loading}
onWheel={() =>
(document.activeElement as HTMLElement).blur()
}
/>
<div className="absolute top-1/2 -translate-y-1/2 right-3">
{Number(inputValue) > 0 && (
<p className="text-text-500 paragraph_semibold">
~ {inputValue} ETH{" "}
</p>
)}
<>
{" "}
<div className="pt-[120px] bg-white h-[100dvh] relative">
<div className="container mx-auto relative h-full">
{!transactionLoading ? (
<div>
{!showActivity ? (
<>
<div className="w-full">
<div className="relative mb-4">
<label htmlFor="usdValue" className="label mb-3 block">
Amount
</label>
<div className="relative">
<input
id="usdValue"
name="usdValue"
inputMode="decimal"
type="text"
className={`p-3 heading3_bold border border-secondary-700 bg-transparent placeholder-grey rounded-xl block w-full focus:outline-none focus:ring-transparent`}
placeholder="$0"
value={value}
onChange={(e) => {
handleInputChange(e.target.value);
}}
disabled={loading}
onWheel={() =>
(document.activeElement as HTMLElement).blur()
}
/>
<div className="absolute top-1/2 -translate-y-1/2 right-3">
{Number(inputValue) > 0 && (
<p className="text-text-500 paragraph_semibold">
~ {inputValue} ETH{" "}
</p>
)}
</div>
</div>
</div>
</div>
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-3">
<div
className="border border-secondary-700 px-2 py-[4.5px] rounded-3xl cursor-pointer"
role="presentation"
onClick={() => {
handleValueClick("10");
}}
>
<p className="meta">$10</p>
</div>
<div
className="border border-secondary-700 px-2 py-[4.5px] rounded-3xl cursor-pointer"
role="presentation"
onClick={() => {
handleValueClick("20");
}}
>
<p className="meta">$20</p>
</div>
<div
className="border border-secondary-700 px-2 py-[4.5px] rounded-3xl cursor-pointer"
role="presentation"
onClick={() => {
handleValueClick("50");
}}
>
<p className="meta">$50</p>
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-3">
<div
className="border border-secondary-700 px-2 py-[4.5px] rounded-3xl cursor-pointer"
role="presentation"
onClick={() => {
handleValueClick("10");
}}
>
<p className="meta">$10</p>
</div>
<div
className="border border-secondary-700 px-2 py-[4.5px] rounded-3xl cursor-pointer"
role="presentation"
onClick={() => {
handleValueClick("20");
}}
>
<p className="meta">$20</p>
</div>
<div
className="border border-secondary-700 px-2 py-[4.5px] rounded-3xl cursor-pointer"
role="presentation"
onClick={() => {
handleValueClick("50");
}}
>
<p className="meta">$50</p>
</div>
</div>
<p className="meta">
{" "}
Bal: {tokenValue} ETH |
<span className="meta pl-2">{price}</span>
</p>
</div>
<p className="meta">
{" "}
Bal: {tokenValue} ETH |
<span className="meta pl-2">{price}</span>
</p>
</div>
</div>

<div className="">
<label htmlFor="usdValue" className="label mb-3 block">
Address
</label>
<input
type="text"
id="first_name"
className=" border border-secondary-700 text-gray-900 text-sm rounded-xl placeholder-grey block w-full p-3 focus:outline-none focus:ring-transparent"
placeholder="Enter recipient address"
value={toAddress}
onChange={(e) => {
setToAddress(e.target.value);
}}
// onClick={handleOpenBottomSheet}
/>
</div>
</>
) : null}
</div>
) : (
<div className="w-[full] max-w-[600px] h-full relative flex flex-col text-center items-center gap-5 mx-auto mt-20">
<ReactTyped
className="text-secondary-100 text-[24px]"
strings={[chestLoadingText]}
typeSpeed={40}
loop={true}
<div className="">
<label htmlFor="usdValue" className="label mb-3 block">
Address
</label>
<input
type="text"
id="first_name"
className=" border border-secondary-700 text-gray-900 text-sm rounded-xl placeholder-grey block w-full p-3 focus:outline-none focus:ring-transparent"
placeholder="Enter recipient address"
value={toAddress}
onChange={(e) => {
setToAddress(e.target.value);
}}
// onClick={handleOpenBottomSheet}
/>
</div>
</>
) : null}
</div>
) : (
<div className="w-[full] max-w-[600px] h-full relative flex flex-col text-center items-center gap-5 mx-auto mt-20">
<ReactTyped
className="text-secondary-100 text-[24px]"
strings={[chestLoadingText]}
typeSpeed={40}
loop={true}
/>
<Lottie animationData={loaderAnimation} />
</div>
)}

<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full py-4">
<Button
className={`!bg-purple !rounded-3xl !text-base !w-[388px] mx-auto ${
btnDisable || !value ? "cursor-not-allowed" : ""
} ${!btnDisable && value ? "opacity-100" : "opacity-50"}`}
variant={"primary"}
label="Continue"
onClick={createWallet}
/>
<Lottie animationData={loaderAnimation} />
</div>
)}

<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full py-4">
<Button
className={`!bg-purple !rounded-3xl !text-base !w-[388px] mx-auto ${
btnDisable || !value ? "cursor-not-allowed" : ""
} ${!btnDisable && value ? "opacity-100" : "opacity-50"}`}
variant={"primary"}
label="Continue"
onClick={createWallet}
/>
</div>
<BottomSheet
isOpen={openBottomSheet}
onClose={() => {
setOpenBottomSheet(false);
}}
>
<TaxAlertBottomSheet
handleCloseBottomSheet={handleCloseBottomSheet}
/>
</BottomSheet>
</div>
<BottomSheet
isOpen={openBottomSheet}
onClose={() => {
setOpenBottomSheet(false);
}}
>
<TaxAlertBottomSheet handleCloseBottomSheet={handleCloseBottomSheet} />
</BottomSheet>
</div>
{/* <TxStatus /> */}
</>
);
};
31 changes: 31 additions & 0 deletions ui_components/home/TxStatus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Image from "next/image";
import { icons } from "../../utils/images";
import { Button } from "../shared";

export default function TxStatus(props: any) {
return (
<>
<div className="pt-[15%] bg-white h-[100dvh] relative">
<div className="container mx-auto text-center relative">
<Image className="mx-auto mb-2" src={icons.txSuccess} alt="success" />
<p className="subtitle_bold mb-4">Success!</p>
<p className="text-text-600 paragraph">
Your Matic tokens are successfully sent
</p>
</div>
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full py-4">
<Button
className={`!bg-purple !rounded-full !text-base !w-[388px] mx-auto mb-4`}
variant={"primary"}
label="View deposit"
/>
<Button
className={`!rounded-full !text-base !w-[388px] mx-auto`}
variant={"ghost"}
label="Back to wallet"
/>
</div>
</div>
</>
);
}
2 changes: 2 additions & 0 deletions ui_components/home/index.ts
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import ActivitiesListItem from "./ActivitiesListItem";
import KYCStatus from "./KYCStatus";
import ReceiveQR from "./ReceiveQR";
import TaxAlertBottomSheet from "./TaxAlertBottomSheet";
import TxStatus from "./TxStatus";

export {
WalletActionCard,
@@ -16,4 +17,5 @@ export {
KYCStatus,
ReceiveQR,
TaxAlertBottomSheet,
TxStatus,
};
3 changes: 3 additions & 0 deletions utils/images/index.ts
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ import buyIcon from "../../public/assets/images/buy_icon.svg";
import logOut from "../../public/assets/images/log_out.svg";
import notVerified from "../../public/assets/images/not_verified.svg";
import close from "../../public/assets/images/close.svg";
import txSuccess from "../../public/assets/images/tx_success.svg";

export type TImages =
| "logo"
@@ -51,6 +52,7 @@ export type TImages =
| "logOut"
| "notVerified"
| "close"
| "txSuccess"
| "arrowDownCircle";

export type TNextImage = {
@@ -87,4 +89,5 @@ export const icons: Record<TImages, TNextImage> = {
logOut,
notVerified,
close,
txSuccess,
};
Loading

0 comments on commit 4e5d23a

Please sign in to comment.