Skip to content

Commit

Permalink
feat: continue with modals and nav
Browse files Browse the repository at this point in the history
  • Loading branch information
icfor committed Mar 6, 2024
1 parent 67d1f49 commit 910d9b2
Show file tree
Hide file tree
Showing 24 changed files with 168 additions and 117 deletions.
16 changes: 8 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@cosmjs/cosmwasm-stargate": "^0.31.3",
"@cosmjs/proto-signing": "^0.32.2",
"@cosmjs/stargate": "^0.32.2",
"@mui/base": "^5.0.0-beta.37",
"@mui/base": "^5.0.0-beta.38",
"bignumber.js": "^9.1.2",
"cosmjs-types": "^0.9.0",
"next": "14.1.0",
Expand Down
Binary file removed public/font/AkkuratLL-Black.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-BlackItalic.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-Bold.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-BoldItalic.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-Italic.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-Light.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-LightItalic.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-Regular.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-Thin.otf
Binary file not shown.
Binary file removed public/font/AkkuratLL-ThinItalic.otf
Binary file not shown.
12 changes: 0 additions & 12 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,6 @@ body {
}
}

@font-face {
font-family: Akkurat;
font-weight: 400;
src: url(../../public/font/AkkuratLL-Regular.otf);
}

@font-face {
font-family: Akkurat;
font-weight: 700;
src: url(../../public/font/AkkuratLL-Bold.otf);
}

* {
font-family: Akkurat;
}
14 changes: 6 additions & 8 deletions src/features/core/components/base-wrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
const [showAbstraction, setShowAbstraxion] = useModal();
const [, setShowAbstraxion] = useModal();

return (
<main className="flex min-h-screen flex-col items-center">
Expand All @@ -34,13 +34,11 @@ export default function RootLayout({
</div>
</nav>
{children}
{showAbstraction && (
<Abstraxion
onClose={() => {
setShowAbstraxion(false);
}}
/>
)}
<Abstraxion
onClose={() => {
setShowAbstraxion(false);
}}
/>
</main>
);
}
3 changes: 1 addition & 2 deletions src/features/core/components/common-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,12 @@ const CommonModal = ({ children, ...props }: Props) => {
{...props}
style={{
content: {
background: "#000",
background: "rgba(0,0,0,0.8)",
border: "none",
borderRadius: "48px",
bottom: "auto",
boxShadow: "0px 0px 50px 0px #FFFFFF40",
left: "50%",
opacity: 0.8,
padding: "45px",
right: "auto",
top: "50%",
Expand Down
44 changes: 31 additions & 13 deletions src/features/core/components/nav-account.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,48 @@
"use client";

import { useAbstraxionAccount, useModal } from "@burnt-labs/abstraxion";
import {
useAbstraxionAccount,
useAbstraxionSigningClient,
useModal,
} from "@burnt-labs/abstraxion";
import { Button } from "@burnt-labs/ui";

import { isTestnet } from "@/features/staking/lib/core/constants";
import { wallet } from "@/features/staking/lib/core/icons";

import { ButtonPill, FloatingDropdown } from "./base";

const Account = () => (
<span className="flex flex-row items-center gap-[8px] rounded-[8px] bg-bg-600 px-[16px] py-[18px]">
<span dangerouslySetInnerHTML={{ __html: wallet }} />
<span className="font-bold">Account</span>{" "}
<span className="rounded-[4px] bg-successBg p-[4px] text-[12px] uppercase text-success">
{isTestnet ? "Testnet" : "Mainnet"}
</span>
</span>
);

const NavAccount = () => {
const [, setShowAbstraxion] = useModal();
const { isConnected } = useAbstraxionAccount();
const { logout } = useAbstraxionSigningClient();

return (
<div className="cursor-pointer">
{isConnected ? (
<button
className="flex flex-row items-center gap-[8px] rounded-[8px] bg-bg-600 px-[16px] py-[18px]"
onClick={() => {
setShowAbstraxion(true);
}}
>
<div dangerouslySetInnerHTML={{ __html: wallet }} />
<span className="font-bold">Account</span>{" "}
<span className="text-[10px] uppercase">
{isTestnet ? "Testnet" : "Mainnet"}
</span>
</button>
<FloatingDropdown Trigger={Account} id="nav-account">
<div className="flex items-center justify-center rounded-[16px] bg-bg-600 px-[24px] py-[12px]">
<ButtonPill
className="bg-transparent"
onClick={() => {
logout?.();
}}
variant="danger"
>
Log out
</ButtonPill>
</div>
</FloatingDropdown>
) : (
<Button
onClick={() => {
Expand Down
4 changes: 3 additions & 1 deletion src/features/core/context/reducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ export const setPopupOpenId = (
type: "SET_POPUP_OPEN_ID",
});

export const setIsLoadingBlocking = (
// @TODO: Confirm if needed
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const setIsLoadingBlocking = (
content: Content<"SET_IS_LOADING_BLOCKING">,
): CoreAction => ({
content,
Expand Down
41 changes: 11 additions & 30 deletions src/features/staking/components/delegation-details.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type { useAbstraxionSigningClient } from "@burnt-labs/abstraxion";
import type { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
import { memo, useEffect, useState } from "react";

Expand All @@ -8,15 +7,9 @@ import {
FloatingDropdown,
} from "@/features/core/components/base";
import { HeaderTitleBase } from "@/features/core/components/table";
import { useCore } from "@/features/core/context/hooks";
import { setIsLoadingBlocking } from "@/features/core/context/reducer";
import type { CoreContextType } from "@/features/core/context/state";
import { sortUtil } from "@/features/core/utils";

import {
claimRewardsAction,
getAndSetValidatorAction,
} from "../context/actions";
import { getAndSetValidatorAction } from "../context/actions";
import { useStaking } from "../context/hooks";
import { setModalOpened } from "../context/reducer";
import {
Expand Down Expand Up @@ -85,9 +78,6 @@ const wrapperStyle =
const Menu = () => <span dangerouslySetInnerHTML={{ __html: menu }} />;

type DelegationRowProps = {
accountAddress: string;
client: ReturnType<typeof useAbstraxionSigningClient>["client"];
core: CoreContextType;
delegation: NonNullable<StakingState["delegations"]>["items"][number];
disabled?: boolean;
index: number;
Expand All @@ -96,9 +86,6 @@ type DelegationRowProps = {
};

const DelegationRowBase = ({
accountAddress,
client,
core,
delegation,
disabled,
index,
Expand Down Expand Up @@ -165,18 +152,16 @@ const DelegationRowBase = ({
<ButtonLink
disabled={disabled}
onClick={() => {
if (!client) return;

const addresses = {
delegator: accountAddress,
validator: delegation.validatorAddress,
};

core.dispatch(setIsLoadingBlocking(true));
if (!validator) return;

claimRewardsAction(addresses, client, staking).finally(() => {
core.dispatch(setIsLoadingBlocking(false));
});
staking.dispatch(
setModalOpened({
content: {
validator,
},
type: "rewards",
}),
);
}}
>
Claim rewards
Expand Down Expand Up @@ -301,9 +286,8 @@ const headerStyle =

const DelegationDetails = () => {
const stakingRef = useStaking();
const { core } = useCore();

const { client, staking } = stakingRef;
const { staking } = stakingRef;

const [delegationsSortMethod, setDelegationsSortMethod] =
useState<DelegationSortMethod>("none");
Expand Down Expand Up @@ -393,9 +377,6 @@ const DelegationDetails = () => {
</div>
{sortedDelegations.map((delegation, index) => (
<DelegationRow
accountAddress={stakingRef.account.bech32Address}
client={client}
core={core}
delegation={delegation}
index={index}
key={index}
Expand Down
85 changes: 80 additions & 5 deletions src/features/staking/components/modals/rewards.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,106 @@
import { Button } from "@/features/core/components/base";
import { memo, useEffect, useRef, useState } from "react";

import { Button, HeroText } from "@/features/core/components/base";
import CommonModal from "@/features/core/components/common-modal";

import { claimRewardsAction } from "../../context/actions";
import { useStaking } from "../../context/hooks";
import { setModalOpened } from "../../context/reducer";

type Step = "completed" | "loading";

const initialStep: Step = "loading";

const claimRewards = async (
stakingRef: ReturnType<typeof useStaking>,
setStep: (step: Step) => void,
) => {
const { client, staking } = stakingRef;
const { modal } = staking.state;

const validatorAddress = modal?.content.validator.operatorAddress;

if (!client || !validatorAddress) return;

const addresses = {
delegator: stakingRef.account.bech32Address,
validator: validatorAddress,
};

claimRewardsAction(addresses, client, stakingRef.staking).finally(() => {
setStep("completed");
});
};

const RewardsModal = () => {
const stakingRef = useStaking();
const [currentStep, setStep] = useState<Step>(initialStep);
const requested = useRef(false);

const { staking } = stakingRef;
const { modal } = staking.state;

const isOpen = modal?.type === "rewards";

useEffect(() => {
if (isOpen) {
if (requested.current) return;

requested.current = true;
claimRewards(stakingRef, setStep);
}
}, [isOpen, stakingRef]);

if (!isOpen) return null;

const content = (() => {
if (currentStep === "loading") {
return (
<div className="w-full text-center">
<div className="mb-[16px] uppercase">
<HeroText>CLAIMING</HeroText>
</div>
<div className="mb-[16px]">
Wait until your rewards are withdrawn.
</div>
<Button isLoading />
</div>
);
}

return (
<>
<div className="text-center">
<div className="mb-[16px] uppercase">
<HeroText>Success!</HeroText>
</div>
<div className="mb-[16px]">
You have claimed your staking rewards successfully.
</div>
</div>
<Button
onClick={() => {
stakingRef.staking.dispatch(setModalOpened(null));
}}
>
CLOSE
</Button>
</>
);
})();

return (
<CommonModal
isOpen={isOpen}
onRequestClose={() => {
if (currentStep === "loading") return;

stakingRef.staking.dispatch(setModalOpened(null));
}}
>
<div>Success!</div>
<div>You have claimed your staking rewards successfully.</div>
<Button>CLOSE</Button>
<div className="min-w-[390px]">{content}</div>
</CommonModal>
);
};

export default RewardsModal;
export default memo(RewardsModal);
Loading

0 comments on commit 910d9b2

Please sign in to comment.