chore: cleanup layout
This commit is contained in:
parent
62af878032
commit
5cd9478317
|
@ -0,0 +1,130 @@
|
||||||
|
import {
|
||||||
|
Account,
|
||||||
|
AccountInfo,
|
||||||
|
Connection,
|
||||||
|
PublicKey,
|
||||||
|
sendAndConfirmRawTransaction,
|
||||||
|
SYSVAR_CLOCK_PUBKEY,
|
||||||
|
TransactionInstruction,
|
||||||
|
} from "@solana/web3.js";
|
||||||
|
import BN from "bn.js";
|
||||||
|
import * as BufferLayout from "buffer-layout";
|
||||||
|
import { sendTransaction } from "../contexts/connection";
|
||||||
|
import { notify } from "../utils/notifications";
|
||||||
|
import * as Layout from "./../utils/layout";
|
||||||
|
import { depositInstruction, initReserveInstruction, LendingReserve } from "./../models/lending/reserve";
|
||||||
|
import { AccountLayout, MintInfo, Token } from "@solana/spl-token";
|
||||||
|
import { LENDING_PROGRAM_ID, TOKEN_PROGRAM_ID } from "../constants/ids";
|
||||||
|
import { createUninitializedAccount, ensureSplAccount, findOrCreateAccountByMint } from "./account";
|
||||||
|
import { cache, GenericAccountParser, MintParser, ParsedAccount } from "../contexts/accounts";
|
||||||
|
import { TokenAccount } from "../models";
|
||||||
|
import { isConstructorDeclaration } from "typescript";
|
||||||
|
import { LendingMarketParser } from "../models/lending";
|
||||||
|
import { sign } from "crypto";
|
||||||
|
import { fromLamports, toLamports } from "../utils/utils";
|
||||||
|
|
||||||
|
export const borrow = async (
|
||||||
|
from: TokenAccount,
|
||||||
|
amount: number,
|
||||||
|
reserve: LendingReserve,
|
||||||
|
reserveAddress: PublicKey,
|
||||||
|
connection: Connection,
|
||||||
|
wallet: any) => {
|
||||||
|
|
||||||
|
notify({
|
||||||
|
message: "Borrowing funds...",
|
||||||
|
description: "Please review transactions to approve.",
|
||||||
|
type: "warn",
|
||||||
|
});
|
||||||
|
|
||||||
|
const isInitalized = true; // TODO: finish reserve init
|
||||||
|
|
||||||
|
// user from account
|
||||||
|
const signers: Account[] = [];
|
||||||
|
const instructions: TransactionInstruction[] = [];
|
||||||
|
const cleanupInstructions: TransactionInstruction[] = [];
|
||||||
|
|
||||||
|
const accountRentExempt = await connection.getMinimumBalanceForRentExemption(
|
||||||
|
AccountLayout.span
|
||||||
|
);
|
||||||
|
|
||||||
|
const [authority] = await PublicKey.findProgramAddress(
|
||||||
|
[reserve.lendingMarket.toBuffer()], // which account should be authority
|
||||||
|
LENDING_PROGRAM_ID
|
||||||
|
);
|
||||||
|
|
||||||
|
const mint = (await cache.query(connection, reserve.liquidityMint, MintParser)) as ParsedAccount<MintInfo>;
|
||||||
|
const amountLamports = toLamports(amount, mint?.info);
|
||||||
|
|
||||||
|
const fromAccount = ensureSplAccount(
|
||||||
|
instructions,
|
||||||
|
cleanupInstructions,
|
||||||
|
from,
|
||||||
|
wallet.publicKey,
|
||||||
|
amountLamports + accountRentExempt,
|
||||||
|
signers
|
||||||
|
);
|
||||||
|
|
||||||
|
// create approval for transfer transactions
|
||||||
|
instructions.push(
|
||||||
|
Token.createApproveInstruction(
|
||||||
|
TOKEN_PROGRAM_ID,
|
||||||
|
fromAccount,
|
||||||
|
authority,
|
||||||
|
wallet.publicKey,
|
||||||
|
[],
|
||||||
|
amountLamports,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
let toAccount: PublicKey;
|
||||||
|
if (isInitalized) {
|
||||||
|
// get destination account
|
||||||
|
toAccount = await findOrCreateAccountByMint(
|
||||||
|
wallet.publicKey,
|
||||||
|
wallet.publicKey,
|
||||||
|
instructions,
|
||||||
|
cleanupInstructions,
|
||||||
|
accountRentExempt,
|
||||||
|
reserve.collateralMint,
|
||||||
|
signers
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toAccount = createUninitializedAccount(
|
||||||
|
instructions,
|
||||||
|
wallet.publicKey,
|
||||||
|
accountRentExempt,
|
||||||
|
signers,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// deposit
|
||||||
|
instructions.push(
|
||||||
|
depositInstruction(
|
||||||
|
amountLamports,
|
||||||
|
fromAccount,
|
||||||
|
toAccount,
|
||||||
|
authority,
|
||||||
|
reserveAddress,
|
||||||
|
reserve.liquiditySupply,
|
||||||
|
reserve.collateralMint,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
try {
|
||||||
|
let tx = await sendTransaction(
|
||||||
|
connection,
|
||||||
|
wallet,
|
||||||
|
instructions.concat(cleanupInstructions),
|
||||||
|
signers,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
notify({
|
||||||
|
message: "Funds borrowed.",
|
||||||
|
type: "success",
|
||||||
|
description: `Transaction - ${tx}`,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
// TODO:
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { borrow } from './borrow';
|
||||||
|
export { deposit } from './deposit';
|
||||||
|
export * from './account';
|
|
@ -0,0 +1,74 @@
|
||||||
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks';
|
||||||
|
import { LendingReserve, LendingReserveParser } from "../../models/lending";
|
||||||
|
import { TokenIcon } from "../TokenIcon";
|
||||||
|
import { formatNumber } from "../../utils/utils";
|
||||||
|
import { Button, Card } from "antd";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { cache, useAccount } from "../../contexts/accounts";
|
||||||
|
import { NumericInput } from "../Input/numeric";
|
||||||
|
import { useConnection } from "../../contexts/connection";
|
||||||
|
import { useWallet } from "../../contexts/wallet";
|
||||||
|
import { borrow } from '../../actions';
|
||||||
|
import { PublicKey } from "@solana/web3.js";
|
||||||
|
import './style.less';
|
||||||
|
|
||||||
|
export const BorrowInput = (props: { className?: string, reserve: LendingReserve, address: PublicKey }) => {
|
||||||
|
const connection = useConnection();
|
||||||
|
const { wallet } = useWallet();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const [value, setValue] = useState('');
|
||||||
|
|
||||||
|
const reserve = props.reserve;
|
||||||
|
const address = props.address;
|
||||||
|
|
||||||
|
const name = useTokenName(reserve?.liquidityMint);
|
||||||
|
const { balance: tokenBalance, accounts: fromAccounts } = useUserBalance(reserve?.liquidityMint);
|
||||||
|
// const collateralBalance = useUserBalance(reserve?.collateralMint);
|
||||||
|
|
||||||
|
const onBorrow = useCallback(() => {
|
||||||
|
borrow(
|
||||||
|
fromAccounts[0],
|
||||||
|
parseFloat(value),
|
||||||
|
reserve,
|
||||||
|
address,
|
||||||
|
connection,
|
||||||
|
wallet);
|
||||||
|
}, [value, reserve, fromAccounts, address]);
|
||||||
|
|
||||||
|
const bodyStyle: React.CSSProperties = {
|
||||||
|
display: 'flex',
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Card className={props.className} bodyStyle={bodyStyle}>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }}>
|
||||||
|
<div className="borrow-input-title">
|
||||||
|
How much would you like to borrow?
|
||||||
|
</div>
|
||||||
|
<div className="token-input">
|
||||||
|
<TokenIcon mintAddress={reserve?.liquidityMint} />
|
||||||
|
<NumericInput value={value}
|
||||||
|
onChange={(val: any) => {
|
||||||
|
setValue(val);
|
||||||
|
}}
|
||||||
|
autoFocus={true}
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
boxShadow: "none",
|
||||||
|
borderColor: "transparent",
|
||||||
|
outline: "transpaernt",
|
||||||
|
}}
|
||||||
|
placeholder="0.00"
|
||||||
|
/>
|
||||||
|
<div>{name}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="primary" onClick={onBorrow} disabled={fromAccounts.length === 0}>Borrow</Button>
|
||||||
|
</div>
|
||||||
|
</Card >;
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
.borrow-input-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
|
@ -1,3 +0,0 @@
|
||||||
.deposit-add-title {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
}
|
|
|
@ -1,19 +1,19 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks';
|
import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks';
|
||||||
import { LendingReserve, LendingReserveParser } from "../../models/lending";
|
import { LendingReserve, LendingReserveParser } from "../../models/lending";
|
||||||
import { TokenIcon } from "../../components/TokenIcon";
|
import { TokenIcon } from "../TokenIcon";
|
||||||
import { formatNumber } from "../../utils/utils";
|
import { formatNumber } from "../../utils/utils";
|
||||||
import { Button, Card } from "antd";
|
import { Button, Card } from "antd";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import { cache, useAccount } from "../../contexts/accounts";
|
import { cache, useAccount } from "../../contexts/accounts";
|
||||||
import { NumericInput } from "../../components/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";
|
||||||
import { deposit } from './../../actions/deposit';
|
import { deposit } from '../../actions/deposit';
|
||||||
import { PublicKey } from "@solana/web3.js";
|
import { PublicKey } from "@solana/web3.js";
|
||||||
import './style.less';
|
import './style.less';
|
||||||
|
|
||||||
export const DepositAdd = (props: { className?: string, reserve: LendingReserve, address: PublicKey }) => {
|
export const DepositInput = (props: { className?: string, reserve: LendingReserve, address: PublicKey }) => {
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const { wallet } = useWallet();
|
const { wallet } = useWallet();
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
|
@ -66,7 +66,7 @@ export const DepositAdd = (props: { className?: string, reserve: LendingReserve,
|
||||||
return <Card className={props.className} bodyStyle={bodyStyle}>
|
return <Card className={props.className} bodyStyle={bodyStyle}>
|
||||||
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }}>
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }}>
|
||||||
<div className="deposit-add-title">
|
<div className="deposit-input-title">
|
||||||
How much would you like to deposit?
|
How much would you like to deposit?
|
||||||
</div>
|
</div>
|
||||||
<div className="token-input">
|
<div className="token-input">
|
|
@ -0,0 +1,3 @@
|
||||||
|
.deposit-input-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
|
@ -101,7 +101,7 @@ export const UserLendingCard = (props: {
|
||||||
<Button>Deposit</Button>
|
<Button>Deposit</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link to={`/borrow/${address}`}>
|
<Link to={`/borrow/${address}`}>
|
||||||
<Button disabled={true}>Borrow</Button>
|
<Button>Borrow</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link to={`/withdraw/${address}`}>
|
<Link to={`/withdraw/${address}`}>
|
||||||
<Button disabled={true}>Withdraw</Button>
|
<Button disabled={true}>Withdraw</Button>
|
||||||
|
|
|
@ -50,8 +50,6 @@ export const useLending = () => {
|
||||||
.map(processAccount)
|
.map(processAccount)
|
||||||
.filter(item => item !== undefined);
|
.filter(item => item !== undefined);
|
||||||
|
|
||||||
console.log(accounts);
|
|
||||||
|
|
||||||
const toQuery = [
|
const toQuery = [
|
||||||
...accounts.filter(acc => (acc?.info as LendingReserve).lendingMarket !== undefined)
|
...accounts.filter(acc => (acc?.info as LendingReserve).lendingMarket !== undefined)
|
||||||
.map(acc => [
|
.map(acc => [
|
||||||
|
|
|
@ -10,10 +10,11 @@ import { AppLayout } from "./components/Layout";
|
||||||
import {
|
import {
|
||||||
HomeView,
|
HomeView,
|
||||||
DepositView,
|
DepositView,
|
||||||
DepositAddView,
|
DepositReserveView,
|
||||||
BorrowView,
|
BorrowView,
|
||||||
ReserveView,
|
ReserveView,
|
||||||
DashboardView,
|
DashboardView,
|
||||||
|
BorrowReserveView,
|
||||||
} from './views';
|
} from './views';
|
||||||
|
|
||||||
export function Routes() {
|
export function Routes() {
|
||||||
|
@ -31,8 +32,9 @@ export function Routes() {
|
||||||
<Route exact path="/dashboard" children={<DashboardView />} />
|
<Route exact path="/dashboard" children={<DashboardView />} />
|
||||||
<Route path="/reserve/:id" children={<ReserveView />} />
|
<Route path="/reserve/:id" children={<ReserveView />} />
|
||||||
<Route exact path="/deposit" component={() => <DepositView />} />
|
<Route exact path="/deposit" component={() => <DepositView />} />
|
||||||
<Route path="/deposit/:id" children={<DepositAddView />} />
|
<Route path="/deposit/:id" children={<DepositReserveView />} />
|
||||||
<Route exact path="/borrow" children={<BorrowView />} />
|
<Route exact path="/borrow" children={<BorrowView />} />
|
||||||
|
<Route path="/borrow/:id" children={<BorrowReserveView />} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
</LendingProvider>
|
</LendingProvider>
|
||||||
|
|
|
@ -0,0 +1,42 @@
|
||||||
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks';
|
||||||
|
import { LendingReserve, LendingReserveParser } from "../../models/lending";
|
||||||
|
import { TokenIcon } from "../../components/TokenIcon";
|
||||||
|
import { formatNumber } from "../../utils/utils";
|
||||||
|
import { Button, Card } from "antd";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { cache, useAccount } from "../../contexts/accounts";
|
||||||
|
import { NumericInput } from "../../components/Input/numeric";
|
||||||
|
import { useConnection } from "../../contexts/connection";
|
||||||
|
import { useWallet } from "../../contexts/wallet";
|
||||||
|
import { deposit } from '../../actions/deposit';
|
||||||
|
import './style.less';
|
||||||
|
|
||||||
|
import { BorrowInput } from '../../components/BorrowInput';
|
||||||
|
import { SideReserveOverview, SideReserveOverviewMode } from '../../components/SideReserveOverview';
|
||||||
|
|
||||||
|
export const BorrowReserveView = () => {
|
||||||
|
const connection = useConnection();
|
||||||
|
const { wallet } = useWallet();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const lendingReserve = useLendingReserve(id);
|
||||||
|
const reserve = lendingReserve?.info;
|
||||||
|
|
||||||
|
if (!reserve || !lendingReserve) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="borrow-reserve">
|
||||||
|
<div className="borrow-reserve-container">
|
||||||
|
<BorrowInput
|
||||||
|
className="borrow-reserve-item borrow-reserve-item-left"
|
||||||
|
reserve={reserve}
|
||||||
|
address={lendingReserve.pubkey} />
|
||||||
|
<SideReserveOverview
|
||||||
|
className="borrow-reserve-item borrow-reserve-item-right"
|
||||||
|
reserve={reserve}
|
||||||
|
address={lendingReserve.pubkey}
|
||||||
|
mode={SideReserveOverviewMode.Borrow} />
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
|
@ -1,30 +1,30 @@
|
||||||
.deposit-add {
|
.borrow-reserve {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deposit-add-item {
|
.borrow-reserve-item {
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deposit-add-container {
|
.borrow-reserve-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deposit-add-item-left {
|
.borrow-reserve-item-left {
|
||||||
flex: 60%;
|
flex: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deposit-add-item-right {
|
.borrow-reserve-item-right {
|
||||||
flex: 30%;
|
flex: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive layout - makes a one column layout instead of a two-column layout */
|
/* Responsive layout - makes a one column layout instead of a two-column layout */
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.deposit-add-item-right, .deposit-add-item-left {
|
.borrow-reserve-item-right, .borrow-reserve-item-left {
|
||||||
flex: 100%;
|
flex: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,47 +0,0 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
||||||
import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../../hooks';
|
|
||||||
import { LendingReserve, LendingReserveParser } from "../../../models/lending";
|
|
||||||
import { TokenIcon } from "../../../components/TokenIcon";
|
|
||||||
import { formatNumber } from "../../../utils/utils";
|
|
||||||
import { Button, Card } from "antd";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import { cache, useAccount } from "../../../contexts/accounts";
|
|
||||||
import { NumericInput } from "../../../components/Input/numeric";
|
|
||||||
import { useConnection } from "../../../contexts/connection";
|
|
||||||
import { useWallet } from "../../../contexts/wallet";
|
|
||||||
import { deposit } from './../../../actions/deposit';
|
|
||||||
import './style.less';
|
|
||||||
|
|
||||||
import { DepositAdd } from './../../../components/DepositAdd';
|
|
||||||
import { DepositInfoLine } from './../../../components/DepositInfoLine';
|
|
||||||
import { SideReserveOverview, SideReserveOverviewMode } from './../../../components/SideReserveOverview';
|
|
||||||
|
|
||||||
export const DepositAddView = () => {
|
|
||||||
const connection = useConnection();
|
|
||||||
const { wallet } = useWallet();
|
|
||||||
const { id } = useParams<{ id: string }>();
|
|
||||||
const lendingReserve = useLendingReserve(id);
|
|
||||||
const reserve = lendingReserve?.info;
|
|
||||||
|
|
||||||
if (!reserve || !lendingReserve) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="deposit-add">
|
|
||||||
<DepositInfoLine
|
|
||||||
className="deposit-add-item"
|
|
||||||
reserve={reserve}
|
|
||||||
address={lendingReserve.pubkey} />
|
|
||||||
<div className="deposit-add-container">
|
|
||||||
<DepositAdd
|
|
||||||
className="deposit-add-item deposit-add-item-left"
|
|
||||||
reserve={reserve}
|
|
||||||
address={lendingReserve.pubkey} />
|
|
||||||
<SideReserveOverview
|
|
||||||
className="deposit-add-item deposit-add-item-right"
|
|
||||||
reserve={reserve}
|
|
||||||
address={lendingReserve.pubkey}
|
|
||||||
mode={SideReserveOverviewMode.Deposit} />
|
|
||||||
</div>
|
|
||||||
</div>;
|
|
||||||
}
|
|
|
@ -1,2 +1 @@
|
||||||
export * from './view';
|
export * from './view';
|
||||||
export * from './add';
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks';
|
||||||
|
import { LendingReserve, LendingReserveParser } from "../../models/lending";
|
||||||
|
import { TokenIcon } from "../../components/TokenIcon";
|
||||||
|
import { formatNumber } from "../../utils/utils";
|
||||||
|
import { Button, Card } from "antd";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { cache, useAccount } from "../../contexts/accounts";
|
||||||
|
import { NumericInput } from "../../components/Input/numeric";
|
||||||
|
import { useConnection } from "../../contexts/connection";
|
||||||
|
import { useWallet } from "../../contexts/wallet";
|
||||||
|
import { deposit } from '../../actions/deposit';
|
||||||
|
import './style.less';
|
||||||
|
|
||||||
|
import { DepositInput } from '../../components/DepositInput';
|
||||||
|
import { DepositInfoLine } from '../../components/DepositInfoLine';
|
||||||
|
import { SideReserveOverview, SideReserveOverviewMode } from '../../components/SideReserveOverview';
|
||||||
|
|
||||||
|
export const DepositReserveView = () => {
|
||||||
|
const connection = useConnection();
|
||||||
|
const { wallet } = useWallet();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const lendingReserve = useLendingReserve(id);
|
||||||
|
const reserve = lendingReserve?.info;
|
||||||
|
|
||||||
|
if (!reserve || !lendingReserve) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="deposit-reserve">
|
||||||
|
<DepositInfoLine
|
||||||
|
className="deposit-reserve-item"
|
||||||
|
reserve={reserve}
|
||||||
|
address={lendingReserve.pubkey} />
|
||||||
|
<div className="deposit-reserve-container">
|
||||||
|
<DepositInput
|
||||||
|
className="deposit-reserve-item deposit-reserve-item-left"
|
||||||
|
reserve={reserve}
|
||||||
|
address={lendingReserve.pubkey} />
|
||||||
|
<SideReserveOverview
|
||||||
|
className="deposit-reserve-item deposit-reserve-item-right"
|
||||||
|
reserve={reserve}
|
||||||
|
address={lendingReserve.pubkey}
|
||||||
|
mode={SideReserveOverviewMode.Deposit} />
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
.deposit-reserve {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-reserve-item {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-reserve-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-reserve-item-left {
|
||||||
|
flex: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-reserve-item-right {
|
||||||
|
flex: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout - makes a one column layout instead of a two-column layout */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.deposit-reserve-item-right, .deposit-reserve-item-left {
|
||||||
|
flex: 100%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,7 @@
|
||||||
export { HomeView } from './home';
|
export { HomeView } from './home';
|
||||||
export { BorrowView } from './borrow';
|
export { BorrowView } from './borrow';
|
||||||
|
export { BorrowReserveView } from './borrowReserve';
|
||||||
export { DashboardView } from './dashboard';
|
export { DashboardView } from './dashboard';
|
||||||
export { DepositView, DepositAddView } from './deposit';
|
export { DepositView } from './deposit';
|
||||||
|
export { DepositReserveView } from './depositReserve';
|
||||||
export { ReserveView } from './reserve';
|
export { ReserveView } from './reserve';
|
||||||
|
|
|
@ -12,7 +12,7 @@ import { useWallet } from "../../contexts/wallet";
|
||||||
import { deposit } from './../../actions/deposit';
|
import { deposit } from './../../actions/deposit';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
|
|
||||||
import { DepositAdd } from './../../components/DepositAdd';
|
import { DepositInput } from '../../components/DepositInput';
|
||||||
import { UserLendingCard } from './../../components/UserLendingCard';
|
import { UserLendingCard } from './../../components/UserLendingCard';
|
||||||
import { ReserveStatus } from './../../components/ReserveStatus';
|
import { ReserveStatus } from './../../components/ReserveStatus';
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue