Skip to content

Commit

Permalink
feat - add reclaim
Browse files Browse the repository at this point in the history
  • Loading branch information
@setbern @hozzjss
setbern authored and hozzjss committed Dec 16, 2024
1 parent 7f7d45b commit 5483f75
Show file tree
Hide file tree
Showing 8 changed files with 423 additions and 59 deletions.
2 changes: 2 additions & 0 deletions src/comps/HomeApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export enum SECTION {
STATUS = "STATUS",
TRANSFER = "TRANSFER",
SETTINGS = "SETTINGS",
RECLAIM = "RECLAIM",
}

type SECTION_DATA = {
Expand Down Expand Up @@ -65,6 +66,7 @@ const HomeApp = () => {
{selectedSection === SECTION.HISTORY && <HistoryView />}
{selectedSection === SECTION.TRANSFER && <TransferAction />}
</LandingAnimation>
<div className="m-8" />
<Faqs />
</>
);
Expand Down
146 changes: 103 additions & 43 deletions src/comps/ReclaimManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,16 @@ import {
signPSBTLeather,
signPSBTXverse,
} from "@/util/wallet-utils/src/sign-psbt";
import ReclaimDeposit from "./reclaim/reclaim-deposit";
import ReclaimTimeline from "./reclaim/reclaim-timeline";
import { NavTile } from "./core/app-nav";
import { SECTION } from "./HomeApp";

/*
Goal : User server side rendering as much as possible
- Break down the components into either their own file or smaller components
*/
enum RECLAIM_STEP {
export enum RECLAIM_STEP {
LOADING = "LOADING",
NOT_FOUND = "NOT_FOUND",
RECLAIM = "RECLAIM",
Expand Down Expand Up @@ -158,6 +162,8 @@ const ReclaimManager = () => {

const reclaimTransaction = await getRawTransaction(reclaimTxId);

console.log("reclaimTransaction", reclaimTransaction);

if (reclaimTransaction) {
setStep(RECLAIM_STEP.CURRENT_STATUS);

Expand Down Expand Up @@ -192,6 +198,8 @@ const ReclaimManager = () => {
}
const responseData = await getRawTransaction(depositTxId);

console.log("responseData", responseData);

// get the amount from vout array
const vout = responseData.vout;

Expand Down Expand Up @@ -251,76 +259,127 @@ const ReclaimManager = () => {
setStep(RECLAIM_STEP.NOT_FOUND);
}
};

const handleClickSection = (section: SECTION) => {};

return (
<div className="flex flex-1 flex-col w-full px-5 gap-6 items-center py-5">
{renderStep()}
</div>
<>
<div
style={{
borderTop: "1px solid rgba(255, 255, 255, 0.2)",
borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
}}
className="w-full bg-[#272628] h-20 flex items-center justify-center
"
>
<NavTile
section={SECTION.DEPOSIT}
activeSection={SECTION.DEPOSIT}
text="DEPOSIT"
onClickSection={handleClickSection}
/>
</div>
<div className="flex flex-1 mb-10 flex-col w-full px-5 gap-6 items-center py-5">
<div
style={{
maxWidth: "1152px",
}}
className="w-full flex flex-row gap-4 mt-16"
>
{renderStep()}
<ReclaimTimeline
activeStep={step}
txId={searchParams.get("depositTxId") || ""}
/>
</div>
</div>
</>
);
};

export default ReclaimManager;

const LoadingInfo = () => {
return (
<FlowContainer>
<div className="flex h-full flex-col gap-2 items-center justify-center">
<div className="w-full flex flex-col gap-4 ">
<div className="flex flex-row w-full gap-4 h-40">
<div className="w-1/6 relative flex flex-col items-center justify-center h-full"></div>
<div
className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-orange"
role="status"
></div>
<SubText>Loading Info</SubText>
style={{
border: "2px solid rgba(255, 255, 255, 0.2)",
}}
className="w-full h-min p-5 px-10 items-center justify-center pb-10 flex flex-col gap-6 rounded-2xl"
>
<div
className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-white"
role="status"
></div>
<h3 className="font-Matter text-white text-lg font-thin tracking-wide">
LOADING
</h3>
</div>
</div>
</FlowContainer>
</div>
);
};

const NotFound = () => {
return (
<FlowContainer>
<>
<div className="w-full flex flex-row items-center justify-between">
<Heading>Transaction could not be found</Heading>
</div>
<div className="flex flex-1 ">
<div className="w-full p-4 bg-lightOrange h-24 rounded-lg flex flex-row items-center justify-center gap-2">
<InformationCircleIcon className="h-10 w-10 text-orange" />
<p className="text-orange font-Matter font-semibold text-sm break-keep">
The transaction you are looking for could not be found. Please
check the transaction details and try again. If you believe this
is an error please contact a team member.
</p>
</div>
<div className="w-full flex flex-col gap-4 ">
<div className="flex flex-row w-full gap-4 h-40">
<div className="w-1/6 relative flex flex-col items-center justify-center h-full"></div>
<div
style={{
border: "2px solid rgba(255, 255, 255, 0.2)",
}}
className="w-full h-min p-5 px-10 items-center justify-center pb-10 flex flex-col gap-6 rounded-2xl"
>
<h3 className="font-Matter text-white text-lg font-thin tracking-wide">
Transaction could not be found
</h3>
<p className="text-orange text-center font-Matter font-semibold text-sm break-keep">
The transaction you are looking for could not be found. Please check
the transaction details and try again. If you believe this is an
error please contact a team member.
</p>
</div>
</>
</FlowContainer>
</div>
</div>
);
};

const CantReclaim = () => {
return (
<FlowContainer>
<>
<div className="w-full flex flex-row items-center justify-between">
<Heading>Cannot Reclaim Deposit</Heading>
</div>
<div className="flex flex-1 ">
<div className="w-full p-4 bg-lightOrange h-24 rounded-lg flex flex-row items-center justify-center gap-2">
<InformationCircleIcon className="h-10 w-10 text-orange" />
<p className="text-orange font-Matter font-semibold text-sm break-keep">
This deposit cannot be reclaimed since it has been minted for sBTC
and deposited into the Stacks chain.
</p>
</div>
<div className="w-full flex flex-col gap-4 ">
<div className="flex flex-row w-full gap-4 h-40">
<div className="w-1/6 relative flex flex-col items-center justify-center h-full"></div>
<div
style={{
border: "2px solid rgba(255, 255, 255, 0.2)",
}}
className="w-full h-min p-5 px-10 items-center justify-center pb-10 flex flex-col gap-6 rounded-2xl"
>
<InformationCircleIcon className="h-10 w-10 text-orange" />

<h3 className="font-Matter text-white text-lg font-thin tracking-wide">
Cannot Reclaim Deposit
</h3>

<p className="text-orange text-center font-Matter font-semibold text-sm break-keep">
This deposit cannot be reclaimed since it has been minted for sBTC
and deposited into the Stacks chain.
</p>
</div>
</>
</FlowContainer>
</div>
</div>
);
};
type ReclaimDepositProps = {
export type ReclaimDepositProps = {
amount: number;
depositTransaction: EmilyDepositTransactionType;
};

/*
const ReclaimDeposit = ({
amount,
depositTransaction,
Expand Down Expand Up @@ -472,3 +531,4 @@ const ReclaimDeposit = ({
</FlowContainer>
);
};
*/
2 changes: 1 addition & 1 deletion src/comps/core/app-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { classNames } from "@/util";
import { SECTION } from "../HomeApp";
import { SectionActionProps, SectionSelection } from "../HomeSelectedHeader";

const NavTile = ({
export const NavTile = ({
section,
activeSection,
text,
Expand Down
4 changes: 2 additions & 2 deletions src/comps/core/header-v2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,12 @@ const Header = ({ config }: { config: BridgeConfig }) => {
<h4 className="font-Matter text-xs text-black tracking-wide ">
HISTORY
</h4> */}
<h3 className="font-Matter cursor-pointer text-white text-sm font-thin tracking-wide">
{/* <h3 className="font-Matter cursor-pointer text-white text-sm font-thin tracking-wide">
LEARN MORE
</h3>
<h3 className="font-Matter cursor-pointer text-white text-sm font-thin tracking-wide">
HISTORY
</h3>
</h3> */}
{isConnected ? (
renderUserWalletInfo()
) : (
Expand Down
25 changes: 13 additions & 12 deletions src/comps/deposit/deposit-timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@ import { CheckIcon } from "@heroicons/react/20/solid";
import { useAtomValue } from "jotai";
import { bridgeConfigAtom } from "@/util/atoms";

type TimelineStepProps = {
type TimelineStepProps<T extends string | number> = {
stepNumber: number;
title: string;
description: string;
step: DEPOSIT_STEP;
activeStep: DEPOSIT_STEP;
step: T;
activeStep: T;
activeStepNumber: number;
};
const TimelineStep = ({

export const TimelineStep = <T extends string | number>({
stepNumber,
title,
description,
step,
activeStep,
}: TimelineStepProps) => {
}: TimelineStepProps<T>) => {
const isActive = step === activeStep;

return (
Expand Down Expand Up @@ -55,14 +56,14 @@ const TimelineStep = ({
};

// this is cop out for the loader component to be able to get active state of the txId of the loader
const CurrentDepositTimelineStep = ({
export const CurrentDepositTimelineStep = <T extends string | number>({
stepNumber,
title,
description,
step,
activeStep,
txId,
}: TimelineStepProps & { txId: string }) => {
}: TimelineStepProps<T> & { txId: string }) => {
const isActive = step === activeStep;

const status = useDepositStatus(txId);
Expand Down Expand Up @@ -165,19 +166,19 @@ const DepositTimeline = ({ activeStep, txId }: DepositTimelineProps) => {
}}
className="w-2/5 h-min p-5 px-10 pb-10 flex flex-col gap-6 rounded-2xl"
>
<h3 className="font-Matter text-white text-lg font-thin tracking-wide">
<h3 className="font-Matter text-wthite text-lg font-thin tracking-wide">
TIMELINE
</h3>
<div className="flex flex-col gap-3">
<TimelineStep
<TimelineStep<DEPOSIT_STEP>
activeStep={activeStep}
stepNumber={1}
step={DEPOSIT_STEP.AMOUNT}
activeStepNumber={activeStepNumber}
title="Select Deposit Amount"
description="How much BTC are you transferring over to sBTC? Enter an amount that’s above the dust requirement (546 sats)"
/>
<TimelineStep
<TimelineStep<DEPOSIT_STEP>
activeStep={activeStep}
stepNumber={2}
step={DEPOSIT_STEP.ADDRESS}
Expand All @@ -186,7 +187,7 @@ const DepositTimeline = ({ activeStep, txId }: DepositTimelineProps) => {
description="sBTC will be sent to a STX address. Connecting a wallet will auto-fill this in, but feel free to submit another address."
/>
{activeStep === DEPOSIT_STEP.REVIEW ? (
<CurrentDepositTimelineStep
<CurrentDepositTimelineStep<DEPOSIT_STEP>
txId={txId}
activeStep={activeStep}
stepNumber={3}
Expand All @@ -196,7 +197,7 @@ const DepositTimeline = ({ activeStep, txId }: DepositTimelineProps) => {
description="We will confirm the transaction status once the transaction is confirmed."
/>
) : (
<TimelineStep
<TimelineStep<DEPOSIT_STEP>
activeStep={activeStep}
stepNumber={3}
step={DEPOSIT_STEP.CONFIRM}
Expand Down
2 changes: 1 addition & 1 deletion src/comps/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default function Footer() {
return (
<footer className="w-full flex flex-col items-center justify-center py-10 px-4 bg-white font-Matter">
<footer className="w-full flex flex-col items-center justify-center py-10 px-4 bg-[#272628] font-Matter">
<div className="w-full flex flex-row items-center justify-between">
<div className="flex flex-col gap-2">
<p className="text-black font-semibold text-sm">sBTC Bridge</p>
Expand Down
Loading

0 comments on commit 5483f75

Please sign in to comment.