From 2ebea4bc2bb0c848fce7bda2b46aa9289e507e1a Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Wed, 28 Feb 2024 15:45:13 +0800
Subject: [PATCH] feat: add modal button on logged in

---
 README.md                                     |  4 +
 src/app/page.tsx                              |  2 +-
 src/features/staking/components/logged-in.tsx | 74 +++++++++++++------
 src/features/staking/context/actions.ts       | 26 +++++--
 src/features/staking/context/hooks.ts         |  4 +-
 src/features/staking/lib/core/base.ts         | 25 +++++++
 src/features/staking/lib/core/coins.ts        |  3 +-
 7 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index e69de29..d484211 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,4 @@
+# Xion Staking
+
+A proof of concept application to stake tokens in Xion, using the native
+authentication via the dashboard.
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1f5bf74..a7a0058 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 import StakingPage from "@/features/staking/components/page";
 
-export default function Page(): JSX.Element {
+export default function Page() {
   return <StakingPage />;
 }
diff --git a/src/features/staking/components/logged-in.tsx b/src/features/staking/components/logged-in.tsx
index a2bfa36..38b3903 100644
--- a/src/features/staking/components/logged-in.tsx
+++ b/src/features/staking/components/logged-in.tsx
@@ -1,16 +1,17 @@
 "use client";
 
-import { useAbstraxionSigningClient } from "@burnt-labs/abstraxion";
+import { useAbstraxionSigningClient, useModal } from "@burnt-labs/abstraxion";
 import { Button } from "@burnt-labs/ui";
 import type { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import Link from "next/link";
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 
 import type { StakingState } from "../context";
 import {
   claimRewardsAction,
-  stakeValidator,
-  unstakeValidator,
+  setRedelegateAction,
+  stakeValidatorAction,
+  unstakeValidatorAction,
 } from "../context/actions";
 import { useStaking } from "../context/hooks";
 import type { StakeAddresses } from "../lib/core/base";
@@ -58,16 +59,20 @@ function StakingPage() {
   const [isLoading, setIsLoading] = useState(false);
   const { delegations, tokens, unbondings, validators } = staking.state;
   const { client } = useAbstraxionSigningClient();
-
-  const validatorsMap: Record<string, undefined | Validator> =
-    validators?.items.reduce<Record<string, undefined | Validator>>(
-      (acc, validator) => {
-        acc[validator.operatorAddress] = validator;
-
-        return acc;
-      },
-      {},
-    ) || {};
+  const [, setShowAbstraxion] = useModal();
+
+  const validatorsMap: Record<string, undefined | Validator> = useMemo(
+    () =>
+      validators?.items.reduce<Record<string, undefined | Validator>>(
+        (acc, validator) => {
+          acc[validator.operatorAddress] = validator;
+
+          return acc;
+        },
+        {},
+      ) || {},
+    [validators],
+  );
 
   return (
     <>
@@ -76,6 +81,15 @@ function StakingPage() {
         <div>
           <b>{account.bech32Address}</b>
         </div>
+        <div>
+          <Button
+            onClick={() => {
+              setShowAbstraxion(true);
+            }}
+          >
+            Open Settings
+          </Button>
+        </div>
         {tokens && (
           <div>
             Tokens: <b>{formatCoin(tokens)}</b>
@@ -112,11 +126,13 @@ function StakingPage() {
                         validator: validator.operatorAddress,
                       };
 
-                      unstakeValidator(addresses, client, staking).finally(
-                        () => {
-                          setIsLoading(false);
-                        },
-                      );
+                      unstakeValidatorAction(
+                        addresses,
+                        client,
+                        staking,
+                      ).finally(() => {
+                        setIsLoading(false);
+                      });
                     }}
                   >
                     Undelegate
@@ -147,7 +163,17 @@ function StakingPage() {
                   <Button
                     disabled={isLoading}
                     onClick={() => {
-                      // @TODO
+                      if (!client) return;
+
+                      setIsLoading(true);
+
+                      setRedelegateAction(
+                        account.bech32Address,
+                        client,
+                        staking,
+                      ).finally(() => {
+                        setIsLoading(false);
+                      });
                     }}
                   >
                     Redelelegate
@@ -208,9 +234,11 @@ function StakingPage() {
                     validator: validator.operatorAddress,
                   };
 
-                  stakeValidator(addresses, client, staking).finally(() => {
-                    setIsLoading(false);
-                  });
+                  stakeValidatorAction(addresses, client, staking).finally(
+                    () => {
+                      setIsLoading(false);
+                    },
+                  );
                 }}
                 validator={validator}
               />
diff --git a/src/features/staking/context/actions.ts b/src/features/staking/context/actions.ts
index ad8b721..7193a5f 100644
--- a/src/features/staking/context/actions.ts
+++ b/src/features/staking/context/actions.ts
@@ -7,6 +7,7 @@ import {
   getRewards,
   getUnbondingDelegations,
   getValidatorsList,
+  setRedelegate,
   stakeAmount,
   unstakeAmount,
 } from "../lib/core/base";
@@ -18,7 +19,7 @@ import {
   setValidators,
 } from "./reducer";
 
-export const fetchStakingData = async (
+export const fetchStakingDataAction = async (
   address: string,
   staking: StakingContextType,
 ) => {
@@ -105,7 +106,7 @@ export const fetchStakingData = async (
   }
 };
 
-export const stakeValidator = async (
+export const stakeValidatorAction = async (
   addresses: StakeAddresses,
   client: SigningClient,
   staking: StakingContextType,
@@ -115,10 +116,10 @@ export const stakeValidator = async (
     denom: "uxion",
   });
 
-  await fetchStakingData(addresses.delegator, staking);
+  await fetchStakingDataAction(addresses.delegator, staking);
 };
 
-export const unstakeValidator = async (
+export const unstakeValidatorAction = async (
   addresses: StakeAddresses,
   client: SigningClient,
   staking: StakingContextType,
@@ -131,7 +132,7 @@ export const unstakeValidator = async (
   // eslint-disable-next-line no-console
   console.log("debug: actions.ts: result", result);
 
-  await fetchStakingData(addresses.delegator, staking);
+  await fetchStakingDataAction(addresses.delegator, staking);
 };
 
 export const claimRewardsAction = async (
@@ -144,5 +145,18 @@ export const claimRewardsAction = async (
   // eslint-disable-next-line no-console
   console.log("debug: actions.ts: result", result);
 
-  await fetchStakingData(addresses.delegator, staking);
+  await fetchStakingDataAction(addresses.delegator, staking);
+};
+
+export const setRedelegateAction = async (
+  delegatorAddress: string,
+  client: SigningClient,
+  staking: StakingContextType,
+) => {
+  const result = await setRedelegate(delegatorAddress, client);
+
+  // eslint-disable-next-line no-console
+  console.log("debug: actions.ts: result", result);
+
+  await fetchStakingDataAction(delegatorAddress, staking);
 };
diff --git a/src/features/staking/context/hooks.ts b/src/features/staking/context/hooks.ts
index 977d0b8..deb7286 100644
--- a/src/features/staking/context/hooks.ts
+++ b/src/features/staking/context/hooks.ts
@@ -3,7 +3,7 @@ import { useContext, useEffect, useRef } from "react";
 
 import type { StakingContextType } from ".";
 import { StakingContext } from ".";
-import { fetchStakingData } from "./actions";
+import { fetchStakingDataAction } from "./actions";
 
 export const useStaking = () => {
   const stakingRef = useRef<StakingContextType>({} as StakingContextType);
@@ -31,7 +31,7 @@ export const useStakingSync = () => {
 
   useEffect(() => {
     if (isLoggedIn && address) {
-      fetchStakingData(address, staking);
+      fetchStakingDataAction(address, staking);
     }
   }, [isLoggedIn, address, staking]);
 };
diff --git a/src/features/staking/lib/core/base.ts b/src/features/staking/lib/core/base.ts
index d31a278..da7d038 100644
--- a/src/features/staking/lib/core/base.ts
+++ b/src/features/staking/lib/core/base.ts
@@ -2,6 +2,7 @@ import type { useAbstraxionSigningClient } from "@burnt-labs/abstraxion";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type {
   Coin,
+  MsgBeginRedelegateEncodeObject,
   MsgDelegateEncodeObject,
   MsgUndelegateEncodeObject,
   MsgWithdrawDelegatorRewardEncodeObject,
@@ -18,6 +19,7 @@ import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
 import BigNumber from "bignumber.js";
 import { MsgWithdrawDelegatorReward } from "cosmjs-types/cosmos/distribution/v1beta1/tx";
 import {
+  MsgBeginRedelegate,
   MsgDelegate,
   MsgUndelegate,
 } from "cosmjs-types/cosmos/staking/v1beta1/tx";
@@ -229,3 +231,26 @@ export const claimRewards = async (
 
   return await client.signAndBroadcast(addresses.delegator, [msgAny], fee);
 };
+
+// @TODO: Pass the target delegator
+export const setRedelegate = async (
+  delegatorAddress: string,
+  client: NonNullable<SigningClient>,
+) => {
+  const msg = MsgBeginRedelegate.fromPartial({
+    delegatorAddress,
+  });
+
+  const msgAny: MsgBeginRedelegateEncodeObject = {
+    typeUrl: "/cosmos.staking.v1beta1.MsgBeginRedelegate",
+    value: msg,
+  };
+
+  const fee: StdFee = await getCosmosFee({
+    address: delegatorAddress,
+    client,
+    msgs: [msgAny],
+  });
+
+  return await client.signAndBroadcast(delegatorAddress, [msgAny], fee);
+};
diff --git a/src/features/staking/lib/core/coins.ts b/src/features/staking/lib/core/coins.ts
index 537096d..1a5ac7c 100644
--- a/src/features/staking/lib/core/coins.ts
+++ b/src/features/staking/lib/core/coins.ts
@@ -31,7 +31,8 @@ export const formatCoin = (coin: Coin) => {
   return `${amount.toFormat()} ${resolved.denom}`;
 };
 
-export const getEmptyXionCoin = () => ({ amount: "0", denom: "xion" });
+export const getEmptyXionCoin = () =>
+  ({ amount: "0", denom: "xion" }) satisfies Coin;
 
 export const sumAllCoins = (coins: Coin[]) =>
   coins.reduce(