lukechilds
/
itchysats
mirror of https://github.com/lukechilds/itchysats.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge #660 

660: Move wallet info out of navbar into main screen r=bonomat a=bonomat

resolves #519
resolves #536

![image](https://user-images.githubusercontent.com/224613/142798202-f661ab9d-7812-4fdb-854d-123df2222528.png)


Co-authored-by: bonomat <philipp@hoenisch.at>
debug-collab-settlement
bors[bot] 3 years ago
committed by GitHub
parent
4e39ce4199 090214fd49
commit
2de980b12c
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 114
      taker-frontend/src/App.tsx
  2. 3
      taker-frontend/src/components/NavBar.tsx
  3. 20
      taker-frontend/src/components/Wallet.tsx

114
taker-frontend/src/App.tsx
View File

@ -5,6 +5,7 @@ import {
AccordionItem,
AccordionPanel,
Box,
Center,
StackDivider,
useToast,
VStack,
@ -33,7 +34,7 @@ import {
StateGroupKey,
WalletInfo,
} from "./components/Types";
import { Wallet } from "./components/Wallet";
import { Wallet, WalletInfoBar } from "./components/Wallet";
import useLatestEvent from "./Hooks";
async function getMargin(payload: MarginRequestPayload): Promise<MarginResponse> {
@ -138,58 +139,65 @@ export const App = () => {
<Route path="/wallet" element={<Wallet walletInfo={walletInfo} />} />
<Route
path="/"
element={<VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
<Trade
orderId={order?.id}
quantity={format(effectiveQuantity)}
maxQuantity={max_quantity || 0}
minQuantity={min_quantity || 0}
referencePrice={referencePrice}
askPrice={askPrice}
margin={margin}
leverage={leverage}
liquidationPrice={liquidationPrice}
onQuantityChange={(valueString: string) => {
setUserHasEdited(true);
setQuantity(parse(valueString));
if (!order) {
return;
}
let quantity = valueString ? Number.parseFloat(valueString) : 0;
let payload: MarginRequestPayload = {
leverage: order.leverage,
price: order.price,
quantity,
};
calculateMargin(payload);
}}
onLongSubmit={makeNewOrderRequest}
isSubmitting={isCreatingNewOrderRequest}
/>
<History
cfds={cfds.filter((cfd) => cfd.state.getGroup() !== StateGroupKey.CLOSED)}
title={"Open Positions"}
/>
<Accordion allowToggle width={"100%"}>
<AccordionItem>
<h2>
<AccordionButton>
<AccordionIcon />
<Box w={"100%"} textAlign="center">
Show Closed Positions
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<History
cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>
</VStack>}
element={<>
<Center>
<WalletInfoBar walletInfo={walletInfo} />
</Center>
<VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
<Trade
orderId={order?.id}
quantity={format(effectiveQuantity)}
maxQuantity={max_quantity || 0}
minQuantity={min_quantity || 0}
referencePrice={referencePrice}
askPrice={askPrice}
margin={margin}
leverage={leverage}
liquidationPrice={liquidationPrice}
onQuantityChange={(valueString: string) => {
setUserHasEdited(true);
setQuantity(parse(valueString));
if (!order) {
return;
}
let quantity = valueString ? Number.parseFloat(valueString) : 0;
let payload: MarginRequestPayload = {
leverage: order.leverage,
price: order.price,
quantity,
};
calculateMargin(payload);
}}
onLongSubmit={makeNewOrderRequest}
isSubmitting={isCreatingNewOrderRequest}
/>
<History
cfds={cfds.filter((cfd) => cfd.state.getGroup() !== StateGroupKey.CLOSED)}
title={"Open Positions"}
/>
<Accordion allowToggle width={"100%"}>
<AccordionItem>
<h2>
<AccordionButton>
<AccordionIcon />
<Box w={"100%"} textAlign="center">
Show Closed Positions
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<History
cfds={cfds.filter((cfd) =>
cfd.state.getGroup() === StateGroupKey.CLOSED
)}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>
</VStack>
</>}
/>
</Routes>
</Box>

3
taker-frontend/src/components/NavBar.tsx
View File

@ -17,7 +17,6 @@ import { useNavigate } from "react-router-dom";
import logoBlack from "../images/logo_nav_bar_black.svg";
import logoWhite from "../images/logo_nav_bar_white.svg";
import { WalletInfo } from "./Types";
import { WalletNavBar } from "./Wallet";
interface NavProps {
walletInfo: WalletInfo | null;
@ -57,8 +56,6 @@ export default function Nav({ walletInfo }: NavProps) {
</MenuList>
</Menu>
<WalletNavBar walletInfo={walletInfo} />
<Flex alignItems={"center"}>
<Stack direction={"row"} spacing={7}>
<Button onClick={toggleColorMode} bg={"transparent"}>

20
taker-frontend/src/components/Wallet.tsx
View File

@ -1,6 +1,7 @@
import { CheckIcon, CopyIcon } from "@chakra-ui/icons";
import { CheckIcon, CopyIcon, ExternalLinkIcon } from "@chakra-ui/icons";
import { Box, Center, Divider, HStack, IconButton, Skeleton, Text, useClipboard } from "@chakra-ui/react";
import * as React from "react";
import { useNavigate } from "react-router-dom";
import Timestamp from "./Timestamp";
import { WalletInfo } from "./Types";
@ -49,19 +50,28 @@ export default function Wallet(
);
}
const WalletNavBar = ({
const WalletInfoBar = ({
walletInfo,
}: WalletProps) => {
const { balance } = walletInfo || {};
const navigate = useNavigate();
return (
<HStack>
<Text align={"left"} as="b">On-chain balance:</Text>
<Text align={"left"} as="b">Wallet Balance:</Text>
<Skeleton isLoaded={balance != null}>
<Text>{balance} BTC</Text>
<HStack>
<Text>{balance} BTC</Text>
<IconButton
bg={"transparent"}
aria-label="Go to wallet"
icon={<ExternalLinkIcon />}
onClick={() => navigate("/wallet")}
/>
</HStack>
</Skeleton>
</HStack>
);
};
export { Wallet, WalletNavBar };
export { Wallet, WalletInfoBar };

Write Preview
Loading…
Cancel
Save