geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #39 from exstake/add-input-and-button-components

Browse Source 
Add input and button components
This commit is contained in:
João Geonizeli
2021-08-28 10:28:47 -03:00
committed by GitHub
parent ec338aa5ec 0b78ef504d
commit e19a8ccbd3
8 changed files with 90 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/javascript/src/components/Button/Button.tsx Normal file
View File

@@ -0,0 +1,42 @@
import type { MouseEvent } from "react";
import React from "react";
import cn from "classnames";
type Props = React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
variant?: "primary" | "dangeour";
};
const baseStyles =
"cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg";
const Component: React.ForwardRefRenderFunction<unknown, Props> = (props) => {
const { className = "", variant = "primary", onClick, ...rest } = props;
const handleClick = (
e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
) => {
e.stopPropagation();
if (onClick) {
onClick(e);
}
};
const variantStyle =
variant === "primary"
? "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200"
: "bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200";
return (
<button
{...rest}
className={cn(baseStyles, className, variantStyle)}
onClick={(e) => handleClick(e)}
/>
);
};
export const Button = React.forwardRef<unknown, Props>(Component);

1
app/javascript/src/components/Button/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Button";

30
app/javascript/src/components/Input/Input.tsx Normal file
View File

@@ -0,0 +1,30 @@
import type { ChangeEvent } from "react";
import React from "react";
type Props = React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>;
const baseStyles =
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
const Component: React.ForwardRefRenderFunction<unknown, Props> = (props) => {
const { className = "", onChange, ...rest } = props;
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
if (!onChange) return;
onChange(e);
};
return (
<input
{...rest}
className={`${baseStyles} ${className}`}
onChange={handleChange}
/>
);
};
export const Input = React.forwardRef<unknown, Props>(Component);

1
app/javascript/src/components/Input/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Input";

2
app/javascript/src/components/index.ts
View File

@@ -1,3 +1,5 @@
export * from "./Navbar";
export * from "./SideNav";
export * from "./Modal";
export * from "./Input";
export * from "./Button";

17
app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
View File

@@ -1,15 +1,11 @@
import BigNumber from "bignumber.js";
import type { ChangeEvent, FC } from "react";
import React, { useState } from "react";
import cx from "classnames";
import { useRelayEnvironment } from "react-relay";
import { Modal } from "../../../../components";
import { Button, Modal, Input } from "../../../../components";
import { commitCreateStakeRemoveOrderMutation } from "./commitCreateStakeRemoveOrder";
const inputBaseStyles =
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
type RemoveStakeModal = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
isOpen: boolean;
@@ -72,8 +68,7 @@ export const RemoveStakeModal: FC<RemoveStakeModal> = ({
<span className="mb-2">CAKE disponível: {stakedCake}</span>
<form onSubmit={onSubmit} className="bg-white py-2">
<div className="flex flex-row">
<input
className={cx(inputBaseStyles)}
<Input
type="number"
value={amountInput}
onChange={handleInvestInput}
@@ -90,13 +85,9 @@ export const RemoveStakeModal: FC<RemoveStakeModal> = ({
{avaliableCake.isEqualTo(0) && (
<span className="text-red-500 mb-1">Você não possuí saldo.</span>
)}
<button
className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
disabled={!stakeAvaliable}
type="submit"
>
<Button variant="dangeour" disabled={!stakeAvaliable} type="submit">
Remover Stake
</button>
</Button>
</form>
</Modal>
);

18
app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
View File

@@ -1,20 +1,17 @@
import type { ChangeEvent, FC } from "react";
import React, { useState } from "react";
import cx from "classnames";
import { BigNumber } from "bignumber.js";
import { useRelayEnvironment } from "react-relay";
import { Modal } from "../../../components";
import { Button, Modal } from "../../../components";
import { commitCreateStakeOrderMutation } from "./createStakeOrder";
import { Input } from "../../../components/Input/Input";
type Props = {
poolName: string;
balance: string;
};
const inputBaseStyles =
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
const environment = useRelayEnvironment();
const [isOpen, setIsOpen] = useState(false);
@@ -72,8 +69,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
<span className="mb-2">CAKE disponível: {balance}</span>
<form onSubmit={onSubmit} className="bg-white py-2">
<div className="flex flex-row">
<input
className={cx(inputBaseStyles)}
<Input
type="number"
value={investAmountInput}
onChange={handleInvestInput}
@@ -90,13 +86,9 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
{avaliableCake.isEqualTo(0) && (
<span className="text-red-500 mb-1">Você não possuí saldo.</span>
)}
<button
className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
disabled={!stakeAvaliable}
type="submit"
>
<Button disabled={!stakeAvaliable} type="submit">
Fazer Stake
</button>
</Button>
</form>
</Modal>
</div>

14
app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
View File

@@ -11,6 +11,7 @@ import type { ExchangePanel_fiatBalances$key } from "./__generated__/ExchangePan
import type { ExchangePanel_balances$key } from "./__generated__/ExchangePanel_balances.graphql";
import { commitCreateSellCryptoOrderMutation } from "./createSellCryptoOrder";
import { commitCreateBuyCryptoOrderMutation } from "./createBuyCryptoOrder";
import { Input, Button } from "../../../../components";
const tabBaseStyles =
"w-full text-base font-bold text-black px-4 py-2 focus:ring-blue-500";
@@ -18,9 +19,6 @@ const tabBaseStyles =
const selectedTabStyles =
"bg-blue-600 hover:bg-blue-700 rounded-l-frounded-full text-white";
const inputBaseStyles =
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
type Props = {
fiatBalancesRefs: ExchangePanel_fiatBalances$key;
balancesRefs: ExchangePanel_balances$key;
@@ -161,8 +159,7 @@ export const ExchangePanel: FC<Props> = ({
<div className="flex flex-row">
{exchangeOption === "BUY" ? (
<>
<input
className={cx(inputBaseStyles)}
<Input
type="number"
value={fiatDock}
onChange={handleFiatAmountChange}
@@ -178,8 +175,7 @@ export const ExchangePanel: FC<Props> = ({
</>
) : (
<>
<input
className={cx(inputBaseStyles)}
<Input
type="number"
value={cryptoDock}
onChange={handleCryptoAmountChange}
@@ -196,13 +192,13 @@ export const ExchangePanel: FC<Props> = ({
)}
</div>
<button
<Button
className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
type="submit"
disabled={submitDisabled}
>
{exchangeOption === "BUY" ? "Comprar" : "Vender"} CAKE
</button>
</Button>
</form>
</div>
);