From 81bafc64a297881f8d8c5f06848bd0fd2665703f Mon Sep 17 00:00:00 2001 From: Yaki Date: Thu, 7 Dec 2023 15:12:17 -0600 Subject: [PATCH] chore: update new styles for existing components --- src/components/Button.tsx | 5 +- src/components/DashboardCard.tsx | 2 +- src/components/Input.tsx | 24 +++++ src/components/ProjectCard.tsx | 4 +- src/components/StakingDashboard.tsx | 30 +++--- src/modals/AccountSelector.tsx | 6 +- src/modals/ManageStaking.tsx | 147 ++++++++++++---------------- src/modals/ReadMore.tsx | 4 +- src/routes/staking.tsx | 2 +- 9 files changed, 114 insertions(+), 110 deletions(-) create mode 100644 src/components/Input.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index edd2b48..5be68c7 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -3,12 +3,13 @@ import React from "react"; interface ButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; variant: "primary" | "secondary"; + mini?: boolean; } const Button = (props: ButtonProps) => { - const { children, variant } = props; + const { children, variant, mini, type, ...rest } = props; return ( - ); diff --git a/src/components/DashboardCard.tsx b/src/components/DashboardCard.tsx index 38afb61..bfc91c4 100644 --- a/src/components/DashboardCard.tsx +++ b/src/components/DashboardCard.tsx @@ -10,7 +10,7 @@ interface DashboardCardProps { const DashboardCard = (props: DashboardCardProps) => { const { children, cardTitle, iconSrc, leading } = props; return ( -
+
{iconSrc && icon}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx new file mode 100644 index 0000000..76f7cdc --- /dev/null +++ b/src/components/Input.tsx @@ -0,0 +1,24 @@ +import { InputHTMLAttributes, forwardRef } from "react"; + +interface InputProps extends InputHTMLAttributes> { + id?: string; + type?: string; + disabled?: boolean; + onChange: (e: React.ChangeEvent) => void; + onBlur?: (e: React.FocusEvent) => void; +} + +const Input = forwardRef((props, ref) => { + return ( + <> + + + ); +}); + +export default Input; + diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx index dbb3e7d..5f98047 100644 --- a/src/components/ProjectCard.tsx +++ b/src/components/ProjectCard.tsx @@ -48,7 +48,7 @@ const ProjectCard = (props: ProjectCardProps) => { return (
+ className="flex flex-col justify-between w-full bg-tinkerGrey rounded-xl space-y-4">
@@ -136,7 +136,7 @@ const ProjectCard = (props: ProjectCardProps) => {
{selectedAccount ? (
- <> -
+

Select your Wallet

    {accounts.map((account, index) => { @@ -59,7 +59,7 @@ const AccountSelector = (props: { isOpen: boolean; }) => { role="menuitem" tabIndex={0} key={`${ account.address }-${ index }}`} - className={`flex flex-row items-center gap-4 cursor-pointer p-6 transition-colors hover:text-amber-300 ${ account.address === selectedAccount?.address ? 'rounded-lg bg-tinkerLightGrey text-white hover:bg-neutral-900' : 'text-white' }`} + className={`flex flex-row items-center gap-4 cursor-pointer p-6 transition-colors hover:text-amber-300 ${ account.address === selectedAccount?.address ? 'rounded-xl bg-tinkerLightGrey text-white hover:bg-neutral-900' : 'text-white' }`} onClick={() => { handleAccountSelection(account); }} @@ -91,7 +91,7 @@ const AccountSelector = (props: { isOpen: boolean; }) => {
-
+
diff --git a/src/modals/ManageStaking.tsx b/src/modals/ManageStaking.tsx index 30a0587..6d89aac 100644 --- a/src/modals/ManageStaking.tsx +++ b/src/modals/ManageStaking.tsx @@ -14,6 +14,8 @@ import useApi from "../hooks/useApi"; import useAccount from "../stores/account"; import useModal from "../stores/modals"; import classNames from "../utils/classNames"; +import Input from "../components/Input"; +import Button from "../components/Button"; const mode = { STAKE: "STAKE", @@ -26,7 +28,8 @@ const schema = z.object({ }), }); -const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { +const ManageStaking = (props: { isOpen: boolean; }) => { + const { isOpen } = props; const { setOpenModal, metadata } = useModal( (state) => ({ setOpenModal: state.setOpenModal, @@ -71,7 +74,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { if (parsedAmount <= 0) { stakeForm.setError("amount", { - type: "manual", + type: "min", message: "Amount must be greater than 0", }); @@ -83,7 +86,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { (metadata?.totalUserStaked as BigNumber).toString() == "0" ) { stakeForm.setError("amount", { - type: "manual", + type: "min", message: "Amount must be greater than or equal to 10", }); @@ -92,7 +95,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { if (new BigNumber(parsedAmount).isGreaterThan(maxValue)) { stakeForm.setError("amount", { - type: "manual", + type: "max", message: "Amount must be less than or equal to available balance", }); @@ -160,7 +163,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { if (parsedAmount <= 0) { unstakeForm.setError("amount", { - type: "manual", + type: "min", message: "Amount must be greater than 0", }); @@ -169,7 +172,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { if (new BigNumber(parsedAmount).isGreaterThan(maxValue)) { unstakeForm.setError("amount", { - type: "manual", + type: "max", message: "Amount must be less than or equal to total staked", }); @@ -269,7 +272,7 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { <> -
+

Manage Staking

@@ -317,10 +320,9 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { className={({ selected }) => classNames( "w-full rounded-md py-2.5 text-sm font-medium leading-5 text-neutral-700", - "ring-white ring-opacity-60 ring-offset-2 ring-offset-neutral-400 focus:outline-none focus:ring-2", selected - ? "bg-white shadow" - : "bg-neutral-900 text-neutral-100 transition-colors hover:bg-white/[0.12] hover:text-white" + ? "bg-white shadow border-2 border-tinkerYellow" + : "border-2 border-white/[0.12] bg-neutral-900 text-neutral-100 transition-colors hover:bg-white/[0.12] hover:text-white" ) } > @@ -331,10 +333,9 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { className={({ selected }) => classNames( "w-full rounded-md py-2.5 text-sm font-medium leading-5 text-neutral-700", - "ring-white ring-opacity-60 ring-offset-2 ring-offset-neutral-400 focus:outline-none focus:ring-2", selected - ? "bg-white shadow" - : "bg-neutral-900 text-neutral-100 transition-colors hover:bg-white/[0.12] hover:text-white" + ? "bg-white shadow border-2 border-tinkerYellow" + : "border-2 border-white/[0.12] bg-neutral-900 text-neutral-100 transition-colors hover:bg-white/[0.12] hover:text-white" ) } > @@ -351,49 +352,38 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => { )} >
-
+
- Stake Amount +
+ - -
- - MAX - + })} type="text" id="stakeAmount" + /> +
+ + MAX + +
+ {stakeForm.formState.errors.amount ? ( +

{stakeForm.formState.errors.amount.message} +

+ ) : null}
- {stakeForm.formState.errors.amount ? ( -
- {stakeForm.formState.errors.amount.message} -
- ) : null} - - + { )} >
-
+
- Unstake Amount +
+ - -
- - MAX - + })} type="text" id="unstakeAmount" + /> +
+ + MAX + +
+ {unstakeForm.formState.errors.amount ? ( +

{unstakeForm.formState.errors.amount.message} +

+ ) : null}
- {unstakeForm.formState.errors.amount ? ( -
- {unstakeForm.formState.errors.amount.message} -
- ) : null} - - + @@ -454,10 +433,10 @@ const ManageStaking = ({ isOpen }: { isOpen: boolean; }) => {
-
+
- + ); }; diff --git a/src/modals/ReadMore.tsx b/src/modals/ReadMore.tsx index e006ee0..8c5ef65 100644 --- a/src/modals/ReadMore.tsx +++ b/src/modals/ReadMore.tsx @@ -50,7 +50,7 @@ const ReadMore = (props: ReadMoreProps) => { <> -
+
@@ -68,7 +68,7 @@ const ReadMore = (props: ReadMoreProps) => {
-
+
diff --git a/src/routes/staking.tsx b/src/routes/staking.tsx index 048a6ed..2afb58f 100644 --- a/src/routes/staking.tsx +++ b/src/routes/staking.tsx @@ -343,7 +343,7 @@ const Staking = () => { for (const stakingCore of stakingCores) { const coreEraStake = (await api.query.ocifStaking.coreEraStake(stakingCore.key, currentStakingEra)).toPrimitive() as CoreEraStakeType; - console.log('coreEraStake', coreEraStake); + coreEraStakeInfo.push({ coreId: stakingCore.key, account: stakingCore.account, ...coreEraStake }); }