Fix: Migrate UI

src/api.graphql

@@ -56,6 +56,7 @@ query TransactionResult($txId: TxId!) {
       blockHash
       blockIndex
       txStatus
+      outputState
     }
   }
 }

src/renderer/components/core/Layout/UserInfo/MigrateButton.tsx

@@ -0,0 +1,42 @@
+import { motion } from "framer-motion";
+import React, { MouseEvent, useCallback } from "react";
+import { T } from "src/renderer/i18n";
+import { styled } from "src/renderer/stitches.config";
+
+export const Button = styled(motion.button, {
+  appearance: "none",
+  backgroundColor: "#dc9c2d",
+  border: "none",
+  padding: "5px 1rem",
+  "&:disabled": {
+    backgroundColor: "$gray",
+    color: "white",
+  },
+});
+
+const transifexTags = "v2/MigrateButton";
+
+interface MigrateButtonProps {
+  onClick: () => void;
+  loading: boolean;
+}
+
+export function MigrateButton({ loading, onClick }: MigrateButtonProps) {
+  const eventListener = useCallback<(e: MouseEvent) => void>(
+    (e) => {
+      e.stopPropagation();
+      onClick();
+    },
+    [onClick],
+  );
+
+  return (
+    <Button disabled={loading} onClick={eventListener}>
+      {loading ? (
+        <T _str="Loading" _tags={transifexTags} />
+      ) : (
+        <T _str="Migrate Stake" _tags={transifexTags} />
+      )}
+    </Button>
+  );
+}

src/renderer/components/core/Layout/UserInfo/index.tsx

@@ -13,16 +13,17 @@ import {
   useClaimStakeRewardLazyQuery,
   useTransactionResultLazyQuery,
   useCheckPatchTableSubscription,
+  useStakeLazyQuery,
 } from "src/generated/graphql";
 
 import AccountBoxIcon from "@material-ui/icons/AccountBox";
-import LaunchIcon from "@material-ui/icons/Launch";
 import FileCopyIcon from "@material-ui/icons/FileCopy";
 
 import goldIconUrl from "src/renderer/resources/ui-main-icon-gold.png";
 import monsterIconUrl from "src/renderer/resources/monster.png";
 import { getRemain } from "src/utils/monsterCollection/utils";
 import ClaimCollectionRewardsOverlay from "src/renderer/views/ClaimCollectionRewardsOverlay";
+import MigrateCollectionRewardsOverlay from "src/renderer/views/MigrateCollectionRewardsOverlay";
 import { Button, ClaimButton } from "./ClaimButton";
 import { clipboard } from "electron";
 import { toast } from "react-hot-toast";
@@ -37,6 +38,7 @@ import deepEqual from "deep-equal";
 import { StakeStatusButton } from "./StakeStatus";
 import { useStore } from "src/utils/useStore";
 import Decimal from "decimal.js";
+import { MigrateButton } from "./MigrateButton";
 
 const UserInfoStyled = styled(motion.ul, {
   position: "fixed",
@@ -93,29 +95,47 @@ export default function UserInfo() {
   const isCollecting = !!startedBlockIndex && startedBlockIndex > 0;
   const [claimLoading, setClaimLoading] = useState<boolean>(false);
   const [isMigratable, setIsMigratable] = useState<boolean>(
-    isCollecting &&
+    !!deposit &&
+      new Decimal(deposit).gt(0) &&
+      tip !== 0 &&
+      isCollecting &&
       !deepEqual(stakeRewards, latestSheet?.stateQuery.latestStakeRewards, {
         strict: true,
       }),
   );
+
   useEffect(() => {
     const txStatus = result?.transaction.transactionResult.txStatus;
     if (!txStatus || txStatus === TxStatus.Staging) return;
     stopPolling?.();
     setClaimLoading(false);
 
-    if (txStatus === TxStatus.Success) {
-      toast.success(
-        t("Successfully sent rewards to {name} #{address}", {
-          _tags: "v2/monster-collection",
-          name: claimedAvatar.current!.name,
-          address: claimedAvatar.current!.address.slice(2),
-        }),
-      );
-      refetch();
+    if (canClaim) {
+      if (txStatus === TxStatus.Success) {
+        toast.success(
+          t("Successfully sent rewards to {name} #{address}", {
+            _tags: "v2/monster-collection",
+            name: claimedAvatar.current!.name,
+            address: claimedAvatar.current!.address.slice(2),
+          }),
+        );
+        refetch();
+      } else {
+        toast.error(t("Failed to claim your reward."));
+        console.error("Claim transaction failed: ", result);
+      }
     } else {
-      toast.error(t("Failed to claim your reward."));
-      console.error("Claim transaction failed: ", result);
+      if (txStatus === TxStatus.Success) {
+        toast.success(
+          t("Successfully migrated your staking.", {
+            _tags: "v2/monster-collection",
+          }),
+        );
+        refetch();
+      } else {
+        toast.error(t("Failed to migrate your staking."));
+        console.error("Migration transaction failed: ", result);
+      }
     }
   }, [result]);
 
@@ -148,9 +168,22 @@ export default function UserInfo() {
       });
     },
   });
+
+  const [requestMigrationTx] = useStakeLazyQuery({
+    fetchPolicy: "network-only",
+    onCompleted: ({ actionTxQuery: { stake } }) => {
+      tx(stake).then((txId) => {
+        if (txId!.data)
+          fetchResult({
+            variables: { txId: txId!.data.stageTransaction },
+          });
+      });
+    },
+  });
   const tx = useTx();
 
   const [openDialog, setOpenDialog] = useState<boolean>(false);
+  const [openMigration, setOpenMigration] = useState<boolean>(false);
 
   const gold = useBalance();
 
@@ -199,7 +232,6 @@ export default function UserInfo() {
 
   const t = useT();
 
-  const [isCollectionOpen, setCollectionOpen] = useState<boolean>(false);
   const [isExportKeyOpen, setExportKeyOpen] = useState<boolean>(false);
 
   if (!loginSession) return null;
@@ -220,13 +252,12 @@ export default function UserInfo() {
         <img src={goldIconUrl} alt="gold" />
         <strong>{Number(gold)}</strong>
       </UserInfoItem>
-      <UserInfoItem onClick={() => setCollectionOpen(true)}>
+      <UserInfoItem>
         <img src={monsterIconUrl} width={28} alt="monster collection icon" />
         <strong>{deposit?.replace(/\.0+$/, "") || "0"}</strong>
         {isCollecting && !canClaim && tip !== 0
           ? ` - Remaining: ${remainingText}`
           : " (-)"}
-        <LaunchIcon />
         {canClaim && (
           <ClaimButton
             loading={claimLoading}
@@ -236,7 +267,12 @@ export default function UserInfo() {
           />
         )}
         {isCollecting && !canClaim && tip !== 0 && isMigratable && (
-          <Button>Migrate Stake</Button>
+          <MigrateButton
+            loading={claimLoading}
+            onClick={() => {
+              setOpenMigration(true);
+            }}
+          />
         )}
         {isCollecting && (
           <StakeStatusButton onClick={() => stakingStastics()} />
@@ -260,6 +296,24 @@ export default function UserInfo() {
             setOpenDialog(false);
           }}
         />
+        <MigrateCollectionRewardsOverlay
+          isOpen={openMigration}
+          onClose={() => setOpenMigration(false)}
+          tip={tip}
+          onConfirm={() => {
+            setClaimLoading(true);
+            if (loginSession.publicKey) {
+              requestMigrationTx({
+                variables: {
+                  publicKey: loginSession.publicKey.toHex("uncompressed"),
+                  amount: new Decimal(deposit!).toNumber(),
+                },
+              });
+            }
+
+            setOpenMigration(false);
+          }}
+        />
       </UserInfoItem>
       <ExportOverlay
         isOpen={isExportKeyOpen}

src/renderer/views/MigrateCollectionRewardsOverlay/MigrateContent.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { GetAvatarAddressQuery } from "src/generated/graphql";
+
+import Button, { ButtonBar } from "src/renderer/components/ui/Button";
+import { styled, Box } from "@material-ui/core";
+import { T } from "src/renderer/i18n";
+import OverlayBase, {
+  CloseButton,
+} from "src/renderer/components/core/OverlayBase";
+import { OverlayProps } from "src/utils/types";
+import H1 from "src/renderer/components/ui/H1";
+import { MigrateCollectionRewardsOverlayProps } from ".";
+
+const transifexTags = "v2/views/MigrateCollectionRewardsOverlay";
+
+const Description = {
+  textShadow: "0px 2px 2px rgba(0, 0, 0, 0.5)",
+  textAlign: "center" as const,
+  fontSize: "20px",
+  paddingBottom: "2.5rem",
+};
+
+const MigrateCollectionRewardsOverlayBase = styled(OverlayBase)({
+  "&&": {
+    width: "500px",
+    height: "auto",
+    backgroundColor: "#1d1e1f",
+    margin: "20vh auto",
+    padding: "2rem",
+    display: "flex",
+    gap: "0.5rem",
+    flexDirection: "column",
+    alignItems: "center",
+    color: "white",
+  },
+});
+
+function ClaimContent({
+  onConfirm,
+  onClose,
+  isOpen,
+}: MigrateCollectionRewardsOverlayProps) {
+  return (
+    <MigrateCollectionRewardsOverlayBase isOpen={isOpen} onDismiss={onClose}>
+      <CloseButton
+        onClick={() => {
+          onClose();
+        }}
+      />
+      <H1>
+        <T _str="Warning" _tags={transifexTags} />
+      </H1>
+      <Box style={Description}>
+        <b>If you migrate,</b>
+        <br />
+        <b>
+          the reward claim cycle gets{" "}
+          <span style={{ color: "#ff4343" }}>reset</span>
+          <br />
+          and you need to wait 7 days to claim.
+        </b>
+        <br />
+        <br />
+        Also, deposits cannot be withdrawn within 28 days.
+      </Box>
+      <Box>
+        <ButtonBar placement="bottom">
+          <Button onClick={() => onClose()}>
+            <T _str="Cancel" _tags={transifexTags} />
+          </Button>
+          <Button variant="primary" onClick={() => onConfirm()}>
+            <T _str="Confirm" _tags={transifexTags} />
+          </Button>
+        </ButtonBar>
+      </Box>
+    </MigrateCollectionRewardsOverlayBase>
+  );
+}
+
+export default observer(ClaimContent);

src/renderer/views/MigrateCollectionRewardsOverlay/index.tsx

@@ -0,0 +1,23 @@
+import { observer } from "mobx-react";
+import React from "react";
+import { OverlayProps } from "src/utils/types";
+import MigrateContent from "./MigrateContent";
+
+export interface MigrateCollectionRewardsOverlayProps extends OverlayProps {
+  tip: number;
+  onConfirm(): void;
+}
+
+const transifexTags = "v2/views/MigrateCollectionRewardsOverlay";
+
+function MigrateCollectionRewardsOverlay({
+  isOpen,
+  onClose,
+  ...collectionData
+}: MigrateCollectionRewardsOverlayProps) {
+  return (
+    <MigrateContent {...collectionData} isOpen={isOpen} onClose={onClose} />
+  );
+}
+
+export default observer(MigrateCollectionRewardsOverlay);