Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Generate and transfer #25

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Generate and transfer #25

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
278c924
Transfer token function
philippe-ftx Sep 25, 2020
9aeef80
Transfer tokens UI (WIP)
philippe-ftx Sep 25, 2020
c8e4182
Cleanup up transfer UI
philippe-ftx Sep 26, 2020
b1ed18b
QR code + generate deposit account
philippe-ftx Sep 26, 2020
2a466ca
Merge master + cleanup
philippe-ftx Sep 28, 2020
fb23880
Merge branch 'master' into generate-and-transfer
nathanielparke Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 61 additions & 23 deletions src/components/DepositDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,52 @@
import React from 'react';
import { Modal } from 'antd';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Modal, Button } from 'antd';
import {
useSelectedBaseCurrencyAccount,
useMarket,
useSelectedQuoteCurrencyAccount,
} from '../utils/markets';
import { useWallet } from '../utils/wallet';
import Link from './Link';
import { useConnection } from '../utils/connection';
import { createTokenAccount } from '../utils/send';
import QRCode from 'qrcode.react';
import WalletConnect from './WalletConnect';
import { notify } from '../utils/notifications';

const ActionButton = styled(Button)`
color: #2abdd2;
background-color: #212734;
border-width: 0px;
`;

export default function DepositDialog({ onClose, baseOrQuote }) {
const { market, baseCurrency, quoteCurrency } = useMarket();

const { providerName, providerUrl } = useWallet();
const { connected, wallet } = useWallet();
const connection = useConnection();
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();

const [isCreatingTokenAccount, setIsCreatingTokenAccount] = useState(false);

const doCreateTokenAccount = async () => {
try {
setIsCreatingTokenAccount(true);
await createTokenAccount({
wallet,
connection,
mintPublicKey: coinMint,
});
} catch (e) {
notify({
message: 'Error creating token account: ' + e.message,
type: 'error',
});
} finally {
setIsCreatingTokenAccount(false);
}
};

let coinMint;
let account;
let depositCoin;
Expand All @@ -31,32 +64,37 @@ export default function DepositDialog({ onClose, baseOrQuote }) {
if (!coinMint) {
return null;
}

return (
<Modal
title={depositCoin}
visible={!!coinMint}
onOk={onClose}
onCancel={onClose}
>
<div style={{ paddingTop: '20px' }}>
<p style={{ color: 'white' }}>Mint address:</p>
<p style={{ color: 'rgba(255,255,255,0.5)' }}>{coinMint.toBase58()}</p>
<div>
<p style={{ color: 'white' }}>Deposit address:</p>
<p style={{ color: 'rgba(255,255,255,0.5)' }}>
{account ? (
account.pubkey.toBase58()
) : (
<>
Visit{' '}
<Link external to={providerUrl}>
{providerName}
</Link>{' '}
to create an account for this mint
</>
)}
</p>
</div>
<div>
<p style={{ color: 'white' }}>Deposit address:</p>
<p style={{ color: 'rgba(255,255,255,0.5)' }}>
{account ? (
account.pubkey.toBase58()
) : (
<>
{connected ? (
<ActionButton
block
size="large"
loading={isCreatingTokenAccount}
onClick={doCreateTokenAccount}
>
Create token account
</ActionButton>
) : (
<WalletConnect />
)}
</>
)}
</p>
{account && <QRCode value={account.pubkey.toBase58()} />}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QR codes need a white margin around them to work; passing in includeMargin to QRCode should work

</div>
</Modal>
);
Expand Down
110 changes: 87 additions & 23 deletions src/components/StandaloneBalancesDisplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ import {
useSelectedQuoteCurrencyAccount,
} from '../utils/markets';
import DepositDialog from './DepositDialog';
import TransferDialog from './TransferDialog';
import { useWallet } from '../utils/wallet';
import Link from './Link';
import { settleFunds } from '../utils/send';
import { useSendConnection } from '../utils/connection';
import WalletConnect from './WalletConnect';
import { notify } from '../utils/notifications';

const RowBox = styled(Row)`
Expand All @@ -25,6 +27,10 @@ const Tip = styled.p`
padding-top: 6px;
`;

const Label = styled.span`
color: rgba(255, 255, 255, 0.5);
`;

const ActionButton = styled(Button)`
color: #2abdd2;
background-color: #212734;
Expand All @@ -36,8 +42,10 @@ export default function StandaloneBalancesDisplay() {
const balances = useBalances();
const openOrdersAccount = useSelectedOpenOrdersAccount(true);
const connection = useSendConnection();
const { providerUrl, providerName, wallet } = useWallet();
const { providerUrl, providerName, wallet, connected } = useWallet();
const [baseOrQuote, setBaseOrQuote] = useState('');
const [transferCoin, setTransferCoin] = useState(null);

const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
const baseCurrencyBalances =
Expand Down Expand Up @@ -67,39 +75,91 @@ export default function StandaloneBalancesDisplay() {
return (
<FloatingElement style={{ flex: 1, paddingTop: 10 }}>
{[
[baseCurrency, baseCurrencyBalances, 'base'],
[quoteCurrency, quoteCurrencyBalances, 'quote'],
].map(([currency, balances, baseOrQuote], index) => (
[
market?.baseMintAddress,
baseCurrency,
baseCurrencyAccount,
baseCurrencyBalances,
'base',
],
[
market?.quoteMintAddress,
quoteCurrency,
quoteCurrencyAccount,
quoteCurrencyBalances,
'quote',
],
].map(([mint, currency, account, balances, baseOrQuote], index) => (
<React.Fragment key={index}>
<Divider style={{ borderColor: 'white' }}>{currency}</Divider>
<RowBox
align="middle"
justify="space-between"
style={{ paddingBottom: 12 }}
>
<Col>Wallet balance:</Col>
<Col>{balances && balances.wallet}</Col>
</RowBox>
<RowBox
align="middle"
justify="space-between"
style={{ paddingBottom: 12 }}
>
<Col>Unsettled balance:</Col>
<Col>{balances && balances.unsettled}</Col>
</RowBox>
{connected ? (
<>
<RowBox
align="middle"
justify="space-between"
style={{ paddingBottom: 12 }}
>
<Col>
<Label>Wallet balance:</Label>
</Col>
<Col>{balances && balances.wallet}</Col>
</RowBox>
<RowBox
align="middle"
justify="space-between"
style={{ paddingBottom: 12 }}
>
<Col>
<Label>Unsettled balance:</Label>
</Col>
<Col>{balances && balances.unsettled}</Col>
</RowBox>
</>
) : (
<div
style={{
display: 'flex',
justifyContent: 'center',
paddingBottom: 12,
}}
>
<WalletConnect />
</div>
)}
<RowBox align="middle" justify="space-around">
<Col style={{ width: 150 }}>
<Col style={{ width: 100 }}>
<ActionButton
block
size="large"
disabled={!connected}
onClick={() => setBaseOrQuote(baseOrQuote)}
>
Deposit
</ActionButton>
</Col>
<Col style={{ width: 150 }}>
<ActionButton block size="large" onClick={onSettleFunds}>
<Col style={{ width: 100 }}>
<ActionButton
block
size="large"
disabled={!connected || !account?.pubkey}
onClick={() =>
setTransferCoin({
coin: currency,
source: account?.pubkey,
mint,
})
}
>
Transfer
</ActionButton>
</Col>
<Col style={{ width: 100 }}>
<ActionButton
block
size="large"
disabled={!connected || !openOrdersAccount}
onClick={onSettleFunds}
>
Settle
</ActionButton>
</Col>
Expand All @@ -117,6 +177,10 @@ export default function StandaloneBalancesDisplay() {
baseOrQuote={baseOrQuote}
onClose={() => setBaseOrQuote('')}
/>
<TransferDialog
transferCoin={transferCoin}
onClose={() => setTransferCoin(null)}
/>
</FloatingElement>
);
}
11 changes: 2 additions & 9 deletions src/components/TopBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import styled from 'styled-components';
import { useWallet, WALLET_PROVIDERS } from '../utils/wallet';
import { ENDPOINTS, useConnectionConfig } from '../utils/connection';
import LinkAddress from './LinkAddress';
import WalletConnect from './WalletConnect';

const Wrapper = styled.div`
background-color: #0d1017;
Expand Down Expand Up @@ -86,15 +87,7 @@ export default function TopBar() {
</Select>
</div>
<div>
<Button
type="text"
size="large"
onClick={connected ? wallet.disconnect : wallet.connect}
style={{ color: '#2abdd2' }}
>
<UserOutlined />
{!connected ? 'Connect wallet' : 'Disconnect'}
</Button>
<WalletConnect />
{connected && (
<Popover
content={<LinkAddress address={publicKey} />}
Expand Down
Loading