feat: connect button

src/components/BorrowInput/index.tsx

@@ -10,7 +10,7 @@ import {
   LendingReserveParser,
 } from "../../models";
 import { TokenIcon } from "../TokenIcon";
-import { Button, Card } from "antd";
+import { Card } from "antd";
 import { cache, ParsedAccount } from "../../contexts/accounts";
 import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
@@ -21,6 +21,7 @@ import "./style.less";
 import { LABELS } from "../../constants";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { BackButton } from "./../BackButton";
+import { ConnectButton } from "../ConnectButton";
 
 export const BorrowInput = (props: {
   className?: string;
@@ -150,14 +151,14 @@ export const BorrowInput = (props: {
             />
             <div>{name}</div>
           </div>
-          <Button
+          <ConnectButton
             type="primary"
             onClick={onBorrow}
             loading={pendingTx}
             disabled={fromAccounts.length === 0}
           >
-            {LABELS.BORROW_ACTION}
-          </Button>
+            {fromAccounts.length === 0 ? LABELS.NO_DEPOSITS : LABELS.BORROW_ACTION}
+          </ConnectButton>
           <BackButton />
         </div>
       )}

src/components/ConnectButton/index.tsx

@@ -8,9 +8,9 @@ export const ConnectButton = (
   props: ButtonProps & React.RefAttributes<HTMLElement>
 ) => {
   const { wallet, connected } = useWallet();
-  const { onClick, children, ...rest } = props;
+  const { onClick, children, disabled, ...rest } = props;
   return (
-    <Button {...rest} onClick={connected ? onClick : wallet.connect}>
+    <Button {...rest} onClick={connected ? onClick : wallet.connect} disabled={connected && disabled}>
       {connected ? props.children : LABELS.CONNECT_LABEL}
     </Button>
   );

src/components/DepositInput/index.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../hooks";
 import { LendingReserve } from "../../models/lending";
 import { TokenIcon } from "../TokenIcon";
-import { Button, Card, Slider } from "antd";
+import { Card, Slider } from "antd";
 import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
@@ -16,6 +16,7 @@ import { PublicKey } from "@solana/web3.js";
 import "./style.less";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { LABELS, marks } from "../../constants";
+import { ConnectButton } from "../ConnectButton";
 
 export const DepositInput = (props: {
   className?: string;
@@ -126,14 +127,14 @@ export const DepositInput = (props: {
 
           <Slider marks={marks} value={pct} onChange={setPct} />
 
-          <Button
+          <ConnectButton
             type="primary"
             onClick={onDeposit}
             loading={pendingTx}
             disabled={fromAccounts.length === 0}
           >
             {LABELS.DEPOSIT_ACTION}
-          </Button>
+          </ConnectButton>
         </div>
       )}
     </Card>

src/components/RepayInput/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "../../hooks";
 import { LendingReserve } from "../../models";
 import { TokenIcon } from "../TokenIcon";
-import { Button, Card, Slider } from "antd";
+import { Card, Slider } from "antd";
 import { ParsedAccount, useMint } from "../../contexts/accounts";
 import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
@@ -21,6 +21,7 @@ import { LABELS, marks } from "../../constants";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { fromLamports, wadToLamports } from "../../utils/utils";
 import { notify } from "../../utils/notifications";
+import { ConnectButton } from "../ConnectButton";
 
 export const RepayInput = (props: {
   className?: string;
@@ -169,14 +170,14 @@ export const RepayInput = (props: {
             disabled={true}
           />
 
-          <Button
+          <ConnectButton
             type="primary"
             onClick={onRepay}
             loading={pendingTx}
             disabled={fromAccounts.length === 0}
           >
             {LABELS.REPAY_ACTION}
-          </Button>
+          </ConnectButton>
         </div>
       )}
     </Card>

src/components/WithdrawInput/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../hooks";
 import { LendingReserve } from "../../models/lending";
 import { TokenIcon } from "../TokenIcon";
-import { Button, Card, Slider } from "antd";
+import { Card, Slider } from "antd";
 import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
@@ -17,6 +17,7 @@ import { PublicKey } from "@solana/web3.js";
 import "./style.less";
 import { LABELS, marks } from "../../constants";
 import { ActionConfirmation } from "./../ActionConfirmation";
+import { ConnectButton } from "../ConnectButton";
 
 export const WithdrawInput = (props: {
   className?: string;
@@ -134,14 +135,14 @@ export const WithdrawInput = (props: {
 
           <Slider marks={marks} value={pct} onChange={setPct} />
 
-          <Button
+          <ConnectButton
             type="primary"
             onClick={onWithdraw}
             loading={pendingTx}
             disabled={fromAccounts.length === 0}
           >
-            {LABELS.WITHDRAW_ACTION}
-          </Button>
+            {fromAccounts.length === 0 ? LABELS.NO_DEPOSITS : LABELS.WITHDRAW_ACTION}
+          </ConnectButton>
         </div>
       )}
     </Card>

src/constants/labels.ts

@@ -27,6 +27,7 @@ export const LABELS = {
   COLLATERAL: "Collateral",
   BORROW_QUESTION: "How much would you like to borrow?",
   BORROW_ACTION: "Borrow",
+  NO_DEPOSITS: "No collateral",
   LIQUIDATE_ACTION: "Liquidate",
   LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
   TABLE_TITLE_ASSET: "Asset",