mirror of https://github.com/certusone/oyster.git
feat: connect button
This commit is contained in:
parent
d466152aaa
commit
210bcfe350
|
@ -10,7 +10,7 @@ import {
|
||||||
LendingReserveParser,
|
LendingReserveParser,
|
||||||
} from "../../models";
|
} from "../../models";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
import { TokenIcon } from "../TokenIcon";
|
||||||
import { Button, Card } from "antd";
|
import { Card } from "antd";
|
||||||
import { cache, ParsedAccount } from "../../contexts/accounts";
|
import { cache, ParsedAccount } from "../../contexts/accounts";
|
||||||
import { NumericInput } from "../Input/numeric";
|
import { NumericInput } from "../Input/numeric";
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
|
@ -21,6 +21,7 @@ import "./style.less";
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { BackButton } from "./../BackButton";
|
import { BackButton } from "./../BackButton";
|
||||||
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
|
||||||
export const BorrowInput = (props: {
|
export const BorrowInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -150,14 +151,14 @@ export const BorrowInput = (props: {
|
||||||
/>
|
/>
|
||||||
<div>{name}</div>
|
<div>{name}</div>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<ConnectButton
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={onBorrow}
|
onClick={onBorrow}
|
||||||
loading={pendingTx}
|
loading={pendingTx}
|
||||||
disabled={fromAccounts.length === 0}
|
disabled={fromAccounts.length === 0}
|
||||||
>
|
>
|
||||||
{LABELS.BORROW_ACTION}
|
{fromAccounts.length === 0 ? LABELS.NO_DEPOSITS : LABELS.BORROW_ACTION}
|
||||||
</Button>
|
</ConnectButton>
|
||||||
<BackButton />
|
<BackButton />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -8,9 +8,9 @@ export const ConnectButton = (
|
||||||
props: ButtonProps & React.RefAttributes<HTMLElement>
|
props: ButtonProps & React.RefAttributes<HTMLElement>
|
||||||
) => {
|
) => {
|
||||||
const { wallet, connected } = useWallet();
|
const { wallet, connected } = useWallet();
|
||||||
const { onClick, children, ...rest } = props;
|
const { onClick, children, disabled, ...rest } = props;
|
||||||
return (
|
return (
|
||||||
<Button {...rest} onClick={connected ? onClick : wallet.connect}>
|
<Button {...rest} onClick={connected ? onClick : wallet.connect} disabled={connected && disabled}>
|
||||||
{connected ? props.children : LABELS.CONNECT_LABEL}
|
{connected ? props.children : LABELS.CONNECT_LABEL}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,7 +7,7 @@ import {
|
||||||
} from "../../hooks";
|
} from "../../hooks";
|
||||||
import { LendingReserve } from "../../models/lending";
|
import { LendingReserve } from "../../models/lending";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
import { TokenIcon } from "../TokenIcon";
|
||||||
import { Button, Card, Slider } from "antd";
|
import { Card, Slider } from "antd";
|
||||||
import { NumericInput } from "../Input/numeric";
|
import { NumericInput } from "../Input/numeric";
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
import { useWallet } from "../../contexts/wallet";
|
import { useWallet } from "../../contexts/wallet";
|
||||||
|
@ -16,6 +16,7 @@ import { PublicKey } from "@solana/web3.js";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { LABELS, marks } from "../../constants";
|
import { LABELS, marks } from "../../constants";
|
||||||
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
|
||||||
export const DepositInput = (props: {
|
export const DepositInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -126,14 +127,14 @@ export const DepositInput = (props: {
|
||||||
|
|
||||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||||
|
|
||||||
<Button
|
<ConnectButton
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={onDeposit}
|
onClick={onDeposit}
|
||||||
loading={pendingTx}
|
loading={pendingTx}
|
||||||
disabled={fromAccounts.length === 0}
|
disabled={fromAccounts.length === 0}
|
||||||
>
|
>
|
||||||
{LABELS.DEPOSIT_ACTION}
|
{LABELS.DEPOSIT_ACTION}
|
||||||
</Button>
|
</ConnectButton>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
@ -9,7 +9,7 @@ import {
|
||||||
} from "../../hooks";
|
} from "../../hooks";
|
||||||
import { LendingReserve } from "../../models";
|
import { LendingReserve } from "../../models";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
import { TokenIcon } from "../TokenIcon";
|
||||||
import { Button, Card, Slider } from "antd";
|
import { Card, Slider } from "antd";
|
||||||
import { ParsedAccount, useMint } from "../../contexts/accounts";
|
import { ParsedAccount, useMint } from "../../contexts/accounts";
|
||||||
import { NumericInput } from "../Input/numeric";
|
import { NumericInput } from "../Input/numeric";
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
|
@ -21,6 +21,7 @@ import { LABELS, marks } from "../../constants";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { fromLamports, wadToLamports } from "../../utils/utils";
|
import { fromLamports, wadToLamports } from "../../utils/utils";
|
||||||
import { notify } from "../../utils/notifications";
|
import { notify } from "../../utils/notifications";
|
||||||
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
|
||||||
export const RepayInput = (props: {
|
export const RepayInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -169,14 +170,14 @@ export const RepayInput = (props: {
|
||||||
disabled={true}
|
disabled={true}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button
|
<ConnectButton
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={onRepay}
|
onClick={onRepay}
|
||||||
loading={pendingTx}
|
loading={pendingTx}
|
||||||
disabled={fromAccounts.length === 0}
|
disabled={fromAccounts.length === 0}
|
||||||
>
|
>
|
||||||
{LABELS.REPAY_ACTION}
|
{LABELS.REPAY_ACTION}
|
||||||
</Button>
|
</ConnectButton>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import {
|
||||||
} from "../../hooks";
|
} from "../../hooks";
|
||||||
import { LendingReserve } from "../../models/lending";
|
import { LendingReserve } from "../../models/lending";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
import { TokenIcon } from "../TokenIcon";
|
||||||
import { Button, Card, Slider } from "antd";
|
import { Card, Slider } from "antd";
|
||||||
import { NumericInput } from "../Input/numeric";
|
import { NumericInput } from "../Input/numeric";
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
import { useWallet } from "../../contexts/wallet";
|
import { useWallet } from "../../contexts/wallet";
|
||||||
|
@ -17,6 +17,7 @@ import { PublicKey } from "@solana/web3.js";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { LABELS, marks } from "../../constants";
|
import { LABELS, marks } from "../../constants";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
|
||||||
export const WithdrawInput = (props: {
|
export const WithdrawInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -134,14 +135,14 @@ export const WithdrawInput = (props: {
|
||||||
|
|
||||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||||
|
|
||||||
<Button
|
<ConnectButton
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={onWithdraw}
|
onClick={onWithdraw}
|
||||||
loading={pendingTx}
|
loading={pendingTx}
|
||||||
disabled={fromAccounts.length === 0}
|
disabled={fromAccounts.length === 0}
|
||||||
>
|
>
|
||||||
{LABELS.WITHDRAW_ACTION}
|
{fromAccounts.length === 0 ? LABELS.NO_DEPOSITS : LABELS.WITHDRAW_ACTION}
|
||||||
</Button>
|
</ConnectButton>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
@ -27,6 +27,7 @@ export const LABELS = {
|
||||||
COLLATERAL: "Collateral",
|
COLLATERAL: "Collateral",
|
||||||
BORROW_QUESTION: "How much would you like to borrow?",
|
BORROW_QUESTION: "How much would you like to borrow?",
|
||||||
BORROW_ACTION: "Borrow",
|
BORROW_ACTION: "Borrow",
|
||||||
|
NO_DEPOSITS: "No collateral",
|
||||||
LIQUIDATE_ACTION: "Liquidate",
|
LIQUIDATE_ACTION: "Liquidate",
|
||||||
LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
|
LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
|
||||||
TABLE_TITLE_ASSET: "Asset",
|
TABLE_TITLE_ASSET: "Asset",
|
||||||
|
|
Loading…
Reference in New Issue