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.

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

Generate and transfer #25

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
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;
@@ -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' }}>SPL 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' }}>SPL 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>
);
110 changes: 87 additions & 23 deletions src/components/StandaloneBalancesDisplay.jsx
Original file line number Diff line number Diff line change
@@ -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)`
@@ -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;
@@ -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 =
@@ -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>
@@ -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
Original file line number Diff line number Diff line change
@@ -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;
@@ -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} />}
Loading