Skip to content
This repository has been archived by the owner on Jan 2, 2025. It is now read-only.

Add migration helper tool link and adjust UI #101

Merged
merged 1 commit into from
Oct 8, 2024
Merged

Add migration helper tool link and adjust UI #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 26 additions & 89 deletions src/components/migration/migration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
"use client";

import Image from "next/image";
import { PropsWithChildren, useCallback, useRef, useState } from "react";
import { PropsWithChildren, useRef } from "react";
import { createPortal } from "react-dom";
import { CSSTransition } from "react-transition-group";
import { useStaking, useApp } from "@/hooks";
import { formatBalanceParts, getChainConfig, notifyTransaction } from "@/utils";
import { writeContract, waitForTransaction } from "@wagmi/core";
import { notification } from "../notification";
import { useStaking } from "@/hooks";
import { formatBalanceParts } from "@/utils";
import EnsureMatchNetworkButton from "../ensure-match-network-button";
import CountLoading from "../count-loading";
import Link from "next/link";
import CountLoading from "../count-loading";

interface Props {
isOpen: boolean;
Expand All @@ -20,38 +18,13 @@ interface Props {
}

export function MigrationModal({ isOpen, maskClosable = true, onClose = () => undefined }: PropsWithChildren<Props>) {
const [step1Busy, setStep1Busy] = useState(false);
const { activeChain } = useApp();
const { stakedRing, stakedDeposit, stakedDeposits, isLedgersInitialized, isDepositsInitialized } = useStaking();
const { stakedRing, stakedDeposit, isLedgersInitialized, isDepositsInitialized } = useStaking();

const nodeRef = useRef<HTMLDivElement | null>(null);

const total = stakedRing + stakedDeposit;
const { integer, decimal } = formatBalanceParts(total);

const currentStep = total > 0n ? 1 : 2;

const handleUnbond = useCallback(async () => {
const { contract, explorer } = getChainConfig(activeChain);
setStep1Busy(true);

try {
const { hash } = await writeContract({
address: contract.staking.address,
abi: (await import(`@/config/abi/${contract.staking.abiFile}`)).default,
functionName: "unstake",
args: [stakedRing, stakedDeposits],
});

const receipt = await waitForTransaction({ hash });
notifyTransaction(receipt, explorer);
} catch (err) {
console.error(err);
notification.error({ description: (err as Error).message });
} finally {
setStep1Busy(false);
}
}, [activeChain, stakedRing, stakedDeposits]);

const isLoading = !isLedgersInitialized || !isDepositsInitialized;

return (
Expand Down Expand Up @@ -96,66 +69,30 @@ export function MigrationModal({ isOpen, maskClosable = true, onClose = () => un
</div>
</div>

<div
className="mt-5 flex w-full flex-col gap-5"
style={{ pointerEvents: !isLoading ? "auto" : "none" }}
>
<EnsureMatchNetworkButton
className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white"
onClick={handleUnbond}
disabled={currentStep !== 1 || isLoading}
busy={step1Busy}
>
{total === 0n ? (
<span className="flex items-center justify-center gap-1">
<span>No Unstake required</span>
<Image src="/images/status/success-white.svg" alt="success" width={26} height={26} />
</span>
) : (
"Step1: Unstake"
)}
</EnsureMatchNetworkButton>
<div className="mt-5 flex w-full flex-col gap-5">
<Link href="https://migration-helper.darwinia.network" passHref target="_blank" rel="noopener">
<EnsureMatchNetworkButton className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white">
Step 1: Unstake and Migrate
</EnsureMatchNetworkButton>
</Link>

{currentStep === 2 ? (
<Link
href="https://ringdao.notion.site/How-do-you-migrate-your-deposits-fffaad1d671e81ab8caeddf83974b9ad"
passHref
<Link href="https://collator-staking.ringdao.com" passHref target="_blank" rel="noopener">
<EnsureMatchNetworkButton className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white">
Step 2: Stake in New Pool
</EnsureMatchNetworkButton>
</Link>
<p className=" text-center text-sm font-light text-gray-500">
🔔 Need help? Check out{" "}
<a
href="https://ringdao.notion.site/How-to-unstake-and-migrate-your-assets-119aad1d671e80ea990cceea71334b89"
target="_blank"
rel="noopener"
className="text-[#FF0083]"
>
<EnsureMatchNetworkButton
className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white"
disabled={isLoading}
>
Step2: Migrate
</EnsureMatchNetworkButton>
</Link>
) : (
<EnsureMatchNetworkButton
className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white"
disabled
>
Step2: Migrate
</EnsureMatchNetworkButton>
)}

{currentStep === 2 ? (
<Link href="https://collator-staking.ringdao.com" passHref target="_blank" rel="noopener">
<EnsureMatchNetworkButton
className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white"
disabled={isLoading}
>
Step3: Stake in new pool
</EnsureMatchNetworkButton>
</Link>
) : (
<EnsureMatchNetworkButton
className="h-10 w-full border border-primary bg-primary text-sm font-bold text-white"
disabled
>
Step3: Stake in new pool
</EnsureMatchNetworkButton>
)}
the tutorial
</a>{" "}
for detailed instructions.
</p>
</div>
</div>
{isLoading && (
Expand Down
16 changes: 7 additions & 9 deletions src/components/migration/start.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,13 @@ export function MigrationStartModal({
. To migrate, please follow the steps below:
</p>
<div className="flex flex-col gap-2.5">
{[
"to unstake your staked RING and Deposit.",
"to migrate your Deposit.",
"to go to the new staking DApp and create a new stake.",
].map((step, index) => (
<div key={index} className="bg-white/20 px-5 py-2.5 text-sm font-light leading-[22px] text-white">
Step {index + 1}: Click &quot;{["Unstake", "Migrate", "Stake in new pool"][index]}&quot; button {step}
</div>
))}
<div className="bg-white/20 px-5 py-2.5 text-sm font-light leading-[22px] text-white">
Step 1: Click &quot;Unstake and Migrate&quot; button to go to a new page where you can unstake all your assets
and migrate all your deposits.
</div>
<div className="bg-white/20 px-5 py-2.5 text-sm font-light leading-[22px] text-white">
Step 2: Click &quot;Stake in New Pool&quot; button to go to the new staking DApp and create a new stake.
</div>
</div>
</Modal>
);
Expand Down
Loading