Skip to content

Commit

Permalink
dark mode bridge styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@karooolis
karooolis committed Apr 18, 2024
1 parent c07a1d3 commit f475021
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 60 deletions.
39 changes: 24 additions & 15 deletions packages/account-kit/src/steps/gas-tank/DepositContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { useAccount } from "wagmi";
import { useConfig } from "../../AccountKitProvider";
import { AccountModalTitle } from "../../AccoutModalTitle";
import { AccountModalSection } from "../../AccountModalSection";
import { useDepositHandler } from "./hooks/useDepositHandler";
import { GasTankStateContent } from "./GasTankStateContent";
import { ChainSelect } from "./components/ChainSelect";
import { AmountInput } from "./components/AmountInput";
import { BalancesFees } from "./components/BalancesFees";
import { ViewTransaction } from "./ViewTransaction";
import { Button } from "../../ui/Button";
import { useDepositHandler } from "./hooks/useDepositHandler";

export type DepositMethod = "direct" | "native" | "relay";

Expand All @@ -18,7 +18,7 @@ export function DepositContent() {
const userAccount = useAccount();
const userAccountAddress = userAccount.address;
const userAccountChainId = userAccount?.chain?.id;
const [depositAmount, setDepositAmount] = useState<string>("");
const [depositAmount, setDepositAmount] = useState<string>("0.005");
const [depositMethod, setDepositMethod] = useState<DepositMethod>(() => {
if (chain.id === userAccountChainId) return "direct";
else if (chain.sourceId === userAccountChainId) return "native";
Expand All @@ -38,12 +38,12 @@ export function DepositContent() {
<GasTankStateContent amount={depositAmount} isSuccess={isSuccess} />
</AccountModalSection>

<AccountModalSection>
<div className="flex flex-col gap-2 p-5">
<AccountModalSection className="h-full">
<div className="flex flex-col h-full gap-2 p-5">
{!isSuccess && (
<>
<p className="pb-2">
Add funds from your wallet to your tank to fund transactions for any MUD apps on Chain Name.
<p className="pb-2 text-[15px] leading-[140%] dark:color-neutral-300">
Add funds from your wallet to your tank to fund transactions for any MUD apps on {chain.name}
</p>

<div className="flex gap-[12px]">
Expand All @@ -58,7 +58,11 @@ export function DepositContent() {
<BalancesFees amount={depositAmount} depositMethod={depositMethod} />

{error ? <div>{String(error)}</div> : null}
<Button className="w-full" pending={!userAccountAddress || isPending || isLoading} onClick={handleSubmit}>
<Button
className="w-full mt-[8px]"
pending={!userAccountAddress || isPending || isLoading}
onClick={handleSubmit}
>
{isPending && "Confirm in wallet"}
{isLoading && "Awaiting network"}
{!isPending && !isLoading && "Deposit"}
Expand All @@ -70,15 +74,17 @@ export function DepositContent() {

{isSuccess && (
<>
<h3>You’re good to go!</h3>
<p>
<h3 className="text-[18px] font-semibold leading-[130%] dark:text-white">You’re good to go!</h3>
<p className="mt-[6px] text-[15px] leading-[140%] dark:text-neutral-300">
You can now use this to fund any of your transactions on MUD apps deployed to Chain Name. We have
estimated of the number of transactions you can take above.
</p>

<div className="flex justify-between gap-[10px]">
<Button className="w-full">Deposit more</Button>
<Button className="w-full">Continue</Button>
<div className="flex justify-between gap-[10px] h-full">
<Button className="w-full self-end" variant="tertiary">
Deposit more
</Button>
<Button className="w-full self-end">Continue</Button>
</div>
</>
)}
Expand All @@ -88,6 +94,7 @@ export function DepositContent() {
);
}

// TODO: wip
const BridgeTabs = ({
depositMethod,
setDepositMethod,
Expand All @@ -96,10 +103,11 @@ const BridgeTabs = ({
setDepositMethod: (depositMethod: DepositMethod) => void;
}) => {
return (
<div className="flex justify-between">
<div className="flex justify-between mt-[8px]">
<Button
className="w-full"
variant={depositMethod === "native" ? "secondary" : "primary"}
size="sm"
variant={depositMethod === "native" ? "secondary" : "tertiary"}
onClick={() => {
setDepositMethod("native");
}}
Expand All @@ -109,7 +117,8 @@ const BridgeTabs = ({

<Button
className="w-full"
variant={depositMethod === "relay" ? "secondary" : "primary"}
size="sm"
variant={depositMethod === "relay" ? "secondary" : "tertiary"}
onClick={() => {
setDepositMethod("relay");
}}
Expand Down
19 changes: 13 additions & 6 deletions packages/account-kit/src/steps/gas-tank/GasTankStateContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,34 @@ export function GasTankStateContent({ amount, isSuccess }: GasTankStateContentPr
className={twMerge(
"flex items-center gap-[12px] bg-neutral-200 p-5",
isSuccess && "bg-green-900 text-white",
!isSuccess && "bg-neutral-200 text-black",
!isSuccess && "bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white",
)}
>
<GasTankIcon
className={twMerge(
"flex-shrink-0",
isTankEmpty && "text-red-500",
isAmountSet && "text-neutral-800",
isSuccess && "text-green-500",
isAmountSet && !isSuccess && "text-neutral-800 dark:text-neutral-400",
isSuccess && "text-green-500 dark:text-green-500",
)}
/>

{/* TODO: make this better */}
{isTankEmpty && !isAmountSet && <p className="font-mono text-[22px] uppercase">Empty</p>}
{isSuccess && (
<div className="flex justify-between items-center w-full">
<p className="font-mono text-[22px]">{formatEther(gasTankBalance)}Ξ</p>
<p className="font-mono text-[14px] text-neutral-700">~{formatActionsNumber(estimateActions)} actions</p>
<p className="font-mono text-[14px] text-neutral-700 dark:text-neutral-300">
~{formatActionsNumber(estimateActions)} actions
</p>
</div>
)}
{!isTankEmpty && !isAmountSet && !isSuccess && (
<div className="flex justify-between items-center w-full">
<p className="font-mono text-[22px]">{formatEther(gasTankBalance)}Ξ</p>
<p className="font-mono text-[14px] text-neutral-700">~{formatActionsNumber(estimateActions)} actions</p>
<p className="font-mono text-[14px] text-neutral-700 dark:text-neutral-300">
~{formatActionsNumber(estimateActions)} actions
</p>
</div>
)}
{!isSuccess && isAmountSet && (
Expand All @@ -56,7 +61,9 @@ export function GasTankStateContent({ amount, isSuccess }: GasTankStateContentPr
{formatEther(gasTankBalance ?? 0n)} <span className="text-green-500">→</span>{" "}
{formatEther(newGasTankBalance!)}Ξ
</p>
<p className="font-mono text-[14px] text-neutral-700">~{formatActionsNumber(estimateActions)} actions</p>
<p className="font-mono text-[14px] text-neutral-700 dark:text-neutral-300">
~{formatActionsNumber(estimateActions)} actions
</p>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/account-kit/src/steps/gas-tank/ViewTransaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function ViewTransaction({ hash, status }: Props) {
if (!hash) return null;

return (
<p className="text-neutral-400 text-center text-[14px]">
<p className="mt-[12px] text-neutral-400 text-center text-[14px]">
{status === "loading" && (
<>
View the status of your deposit{" "}
Expand Down
2 changes: 1 addition & 1 deletion packages/account-kit/src/steps/gas-tank/components/AmountInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export type AmountProps = {
export const AmountInput = ({ amount, setAmount }: AmountProps) => {
return (
<input
className="w-full px-[16px] border border-neutral-300"
className="w-full px-[16px] border border-neutral-300 font-medium text-[18px] dark:bg-neutral-900 dark:border-neutral-700"
type="number"
value={amount}
onChange={(evt) => setAmount(evt.target.value)}
Expand Down
18 changes: 10 additions & 8 deletions packages/account-kit/src/steps/gas-tank/components/BalancesFees.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,34 @@ export function BalancesFees({ amount, depositMethod }: Props) {

return (
<AccountModalSection>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 mt-[6px]">
<ul>
<li className="flex justify-between py-[8px] border-b border-black border-opacity-10">
<span className="opacity-50">Available to deposit</span>
<li className="flex justify-between py-[8px] border-b border-black border-opacity-10 dark:border-white dark:border-opacity-10">
<span className="font-medium opacity-50 dark:text-white">Available to deposit</span>
<span className="font-medium">
{userBalance?.data?.value
? parseFloat(formatEther(userBalance?.data?.value)).toLocaleString("en", {
minimumFractionDigits: 5,
})
: "..."}{" "}
ETH <span className="text-neutral-800">($3,605.21)</span>
ETH <span className="text-neutral-800 dark:text-neutral-400">($3,605.21)</span>
</span>
</li>
<li className="flex justify-between py-[8px] border-b border-black border-opacity-10">
<span className="opacity-50">Estimated fee</span>

<li className="flex justify-between py-[8px] border-b border-black border-opacity-10 dark:border-white dark:border-opacity-10">
<span className="font-medium opacity-50 dark:text-white">Estimated fee</span>
<span className="font-medium">
{fees
? parseFloat(fees).toLocaleString("en", {
minimumFractionDigits: 5,
})
: "..."}{" "}
ETH <span className="text-neutral-800">($3.40)</span>
ETH <span className="text-neutral-800 dark:text-neutral-400">($3.40)</span>
</span>
</li>

<li className="flex justify-between py-[8px]">
<span className="opacity-50">Transfer time</span>
<span className="font-medium opacity-50 dark:text-white">Transfer time</span>
<span className="font-medium">~{transferTime} seconds</span>
</li>
</ul>
Expand Down
8 changes: 3 additions & 5 deletions packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,9 @@ const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectIt
return (
<Select.Item
className={twMerge(
"text-[13px] leading-none text-violet11 rounded-[3px] flex items-center",
"h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8",
"text-[13px] leading-none flex items-center",
"h-[25px] pr-[35px] pl-[25px] relative select-none",
"data-[disabled]:pointer-events-none data-[highlighted]:outline-none",
"data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1",
className,
)}
ref={forwardedRef as Ref<HTMLDivElement>}
Expand All @@ -42,8 +41,7 @@ export function ChainSelect() {
className={twMerge(
"inline-flex items-center justify-center h-[50px] w-[70px]",
"text-[13px] leading-none gap-[5px]",
"bg-white",
"border border-neutral-300",
"border border-neutral-300 dark:bg-neutral-700 dark:border-none",
"outline-none",
)}
aria-label="Food"
Expand Down
55 changes: 31 additions & 24 deletions packages/account-kit/src/ui/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,73 @@ import { twMerge } from "tailwind-merge";
import { PendingIcon } from "../icons/PendingIcon";

type ButtonClassNameOptions = {
variant?: "primary" | "secondary";
size?: "sm" | "md";
variant?: "primary" | "secondary" | "tertiary";
pending?: boolean;
selected?: boolean;
};

const buttonClassName = ({ variant = "primary" }: ButtonClassNameOptions = {}) =>
const buttonClassName = ({
size = "md",
variant = "primary",
pending = false,
selected = false,
}: ButtonClassNameOptions = {}) =>
twMerge(
// eslint-disable-next-line max-len
"group self-center font-medium leading-none outline-none border border-transparent ring-2 ring-transparent focus:ring-orange-500 transition aria-disabled:pointer-events-none aria-busy:pointer-events-none",
"group self-center leading-none outline-none border border-transparent ring-2 ring-transparent focus:ring-orange-500 transition aria-disabled:pointer-events-none aria-busy:pointer-events-none",
{
primary: twMerge(
"bg-neutral-900 text-white hover:bg-neutral-700 active:bg-neutral-600 aria-disabled:bg-neutral-200 aria-disabled:text-neutral-400",
// eslint-disable-next-line max-len
"dark:bg-neutral-100 dark:text-black dark:hover:bg-neutral-200 dark:active:bg-neutral-300 dark:aria-disabled:bg-neutral-400 dark:aria-disabled:text-neutral-600",
pending && "dark:bg-neutral-700 dark:text-neutral-400",
),
secondary: twMerge(
// eslint-disable-next-line max-len
"text-black border-neutral-400 hover:bg-neutral-200 hover:border-neutral-500 active:bg-neutral-300 active:border-neutral-600 aria-disabled:text-neutral-400 aria-disabled:border-neutral-300",
// eslint-disable-next-line max-len
"dark:text-white dark:border-neutral-400 dark:hover:bg-neutral-700 dark:hover:border-neutral-300 dark:active:bg-neutral-600 dark:active:border-neutral-200 dark:aria-disabled:text-neutral-500 dark:aria-disabled:border-neutral-600",
),
tertiary: twMerge(
// eslint-disable-next-line max-len
"text-neutral-400 border-neutral-400 hover:bg-neutral-200 hover:border-neutral-500 active:bg-neutral-300 active:border-neutral-600 aria-disabled:text-neutral-400 aria-disabled:border-neutral-300",
// eslint-disable-next-line max-len
"dark:text-neutral-400 dark:border-neutral-400 dark:hover:bg-neutral-500 dark:hover:border-neutral-300 dark:active:bg-neutral-600 dark:active:border-neutral-200 dark:aria-disabled:text-neutral-500 dark:aria-disabled:border-neutral-600",
),
}[variant],
{
sm: twMerge("p-3 font-medium text-[14px]"),
md: twMerge("p-4 font-semibold text-[16px]"),
}[size],
pending && "cursor-wait pointer-events-none",
selected && "",
);

type Props = {
children: React.ReactNode;
pending?: boolean;
variant?: ButtonClassNameOptions["variant"];
size?: ButtonClassNameOptions["size"];
};

type ButtonProps = Props & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

export const Button = ({ pending, variant, type, className, children, disabled, ...props }: ButtonProps) => {
export const Button = ({ pending, variant, size, type, className, children, disabled, ...props }: ButtonProps) => {
return (
<button
type={type || "button"}
className={twMerge(buttonClassName({ variant }), className)}
className={twMerge(buttonClassName({ variant, pending, size }), className)}
aria-busy={pending}
aria-disabled={disabled}
{...props}
>
<span className="inline-grid place-items-center overflow-hidden p-4">
<span
className={twMerge(
"col-start-1 row-start-1 leading-none",
"translate-y-0 opacity-100 transition",
"group-aria-busy:-translate-y-2 group-aria-busy:opacity-0",
)}
>
{children}
</span>

<span
aria-hidden
className={twMerge(
"col-start-1 row-start-1",
"translate-y-2 opacity-0 transition",
"group-aria-busy:translate-y-0 group-aria-busy:opacity-100",
)}
>
<span className={twMerge("flex", pending ? "justify-between" : "justify-center")}>
<span aria-hidden className={twMerge("col-start-1 row-start-1 hidden", "group-aria-busy:inline-block")}>
<PendingIcon />
</span>

<span className={twMerge("col-start-1 row-start-1 leading-none")}>{children}</span>
</span>
</button>
);
Expand Down

0 comments on commit f475021

Please sign in to comment.