Link to wallet provider
This commit is contained in:
parent
5844deac1a
commit
fd76123610
|
@ -7,6 +7,7 @@ import {
|
||||||
useSelectedQuoteCurrencyAccount,
|
useSelectedQuoteCurrencyAccount,
|
||||||
} from '../utils/markets';
|
} from '../utils/markets';
|
||||||
import { useWallet } from '../utils/wallet';
|
import { useWallet } from '../utils/wallet';
|
||||||
|
import Link from './Link';
|
||||||
|
|
||||||
export default function DepositDialog({ onClose, depositCoin }) {
|
export default function DepositDialog({ onClose, depositCoin }) {
|
||||||
let coinMint =
|
let coinMint =
|
||||||
|
@ -15,7 +16,7 @@ export default function DepositDialog({ onClose, depositCoin }) {
|
||||||
(address) => COIN_MINTS[address] === depositCoin,
|
(address) => COIN_MINTS[address] === depositCoin,
|
||||||
);
|
);
|
||||||
const { market } = useMarket();
|
const { market } = useMarket();
|
||||||
const [, , , , providerName] = useWallet();
|
const { providerName, providerUrl } = useWallet();
|
||||||
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
|
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
|
||||||
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
|
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
|
||||||
let account;
|
let account;
|
||||||
|
@ -42,7 +43,7 @@ export default function DepositDialog({ onClose, depositCoin }) {
|
||||||
<p style={{ color: 'rgba(255,255,255,0.5)' }}>
|
<p style={{ color: 'rgba(255,255,255,0.5)' }}>
|
||||||
{account
|
{account
|
||||||
? account.pubkey.toBase58()
|
? account.pubkey.toBase58()
|
||||||
: `Visit ${providerName} to create an account for this mint`}
|
: <>Visit <Link external to={providerUrl}>{providerName}</Link> to create an account for this mint</>}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,14 +1,11 @@
|
||||||
import { Button, Col, Row, Divider } from 'antd';
|
import { Button, Col, Divider, Row } from 'antd';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import FloatingElement from './layout/FloatingElement';
|
import FloatingElement from './layout/FloatingElement';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import {
|
import { useBaseCurrencyBalances, useMarket, useQuoteCurrencyBalances } from '../utils/markets';
|
||||||
useBaseCurrencyBalances,
|
|
||||||
useQuoteCurrencyBalances,
|
|
||||||
useMarket,
|
|
||||||
} from '../utils/markets';
|
|
||||||
import DepositDialog from './DepositDialog';
|
import DepositDialog from './DepositDialog';
|
||||||
import { useWallet, WALLET_PROVIDERS } from '../utils/wallet';
|
import { useWallet } from '../utils/wallet';
|
||||||
|
import Link from './Link';
|
||||||
|
|
||||||
const RowBox = styled(Row)`
|
const RowBox = styled(Row)`
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
@ -16,7 +13,6 @@ const RowBox = styled(Row)`
|
||||||
|
|
||||||
const Tip = styled.p`
|
const Tip = styled.p`
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #2abdd2;
|
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -31,10 +27,8 @@ export default function StandaloneBalancesDisplay() {
|
||||||
|
|
||||||
const [baseCurrencyBalances] = useBaseCurrencyBalances();
|
const [baseCurrencyBalances] = useBaseCurrencyBalances();
|
||||||
const [quoteCurrencyBalances] = useQuoteCurrencyBalances();
|
const [quoteCurrencyBalances] = useQuoteCurrencyBalances();
|
||||||
let [, , providerUrl] = useWallet();
|
const { providerUrl, providerName } = useWallet();
|
||||||
const [depositCoin, setDepositCoin] = useState('');
|
const [depositCoin, setDepositCoin] = useState('');
|
||||||
const providerName = WALLET_PROVIDERS.find(({ url }) => url === providerUrl)
|
|
||||||
?.name;
|
|
||||||
return (
|
return (
|
||||||
<FloatingElement style={{ flex: 1, paddingTop: 10 }}>
|
<FloatingElement style={{ flex: 1, paddingTop: 10 }}>
|
||||||
<Divider style={{ borderColor: 'white' }}>{baseCurrency}</Divider>
|
<Divider style={{ borderColor: 'white' }}>{baseCurrency}</Divider>
|
||||||
|
@ -62,7 +56,7 @@ export default function StandaloneBalancesDisplay() {
|
||||||
{/* </ActionButton>*/}
|
{/* </ActionButton>*/}
|
||||||
{/*</Col>*/}
|
{/*</Col>*/}
|
||||||
</RowBox>
|
</RowBox>
|
||||||
<Tip>All deposits go to your {providerName} wallet</Tip>
|
<Tip>All deposits go to your <Link external to={providerUrl}>{providerName}</Link> wallet</Tip>
|
||||||
<Divider>{quoteCurrency}</Divider>
|
<Divider>{quoteCurrency}</Divider>
|
||||||
<RowBox
|
<RowBox
|
||||||
align="middle"
|
align="middle"
|
||||||
|
@ -88,7 +82,7 @@ export default function StandaloneBalancesDisplay() {
|
||||||
{/* </ActionButton>*/}
|
{/* </ActionButton>*/}
|
||||||
{/*</Col>*/}
|
{/*</Col>*/}
|
||||||
</RowBox>
|
</RowBox>
|
||||||
<Tip>All deposits go to your {providerName} wallet</Tip>
|
<Tip>All deposits go to your <Link external to={providerUrl}>{providerName}</Link> wallet</Tip>
|
||||||
<DepositDialog
|
<DepositDialog
|
||||||
depositCoin={depositCoin}
|
depositCoin={depositCoin}
|
||||||
onClose={() => setDepositCoin('')}
|
onClose={() => setDepositCoin('')}
|
||||||
|
|
|
@ -29,7 +29,7 @@ const LogoWrapper = styled.div`
|
||||||
|
|
||||||
export default function TopBar() {
|
export default function TopBar() {
|
||||||
const [current, setCurrent] = useState('/');
|
const [current, setCurrent] = useState('/');
|
||||||
const [connected, wallet, providerUrl, setProvider] = useWallet();
|
const { connected, wallet, providerUrl, setProvider } = useWallet();
|
||||||
const { endpoint, setEndpoint } = useConnectionConfig();
|
const { endpoint, setEndpoint } = useConnectionConfig();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
|
|
@ -50,7 +50,7 @@ export default function TradeForm({ style, setChangeOrderRef }) {
|
||||||
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
|
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
|
||||||
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
|
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
|
||||||
const openOrdersAccount = useSelectedOpenOrdersAccount(true);
|
const openOrdersAccount = useSelectedOpenOrdersAccount(true);
|
||||||
const [, wallet] = useWallet();
|
const {wallet} = useWallet();
|
||||||
const sendConnection = useSendConnection();
|
const sendConnection = useSendConnection();
|
||||||
const markPrice = useMarkPrice();
|
const markPrice = useMarkPrice();
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { settleFunds } from '../../utils/send';
|
||||||
|
|
||||||
export default function AccountsTable({ accountBalances }) {
|
export default function AccountsTable({ accountBalances }) {
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const [, wallet] = useWallet();
|
const {wallet} = useWallet();
|
||||||
|
|
||||||
async function onSettleFunds(account) {
|
async function onSettleFunds(account) {
|
||||||
const {
|
const {
|
||||||
|
|
|
@ -15,7 +15,7 @@ export default function BalancesTable({ balances }) {
|
||||||
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
|
const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
|
||||||
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
|
const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
|
||||||
const connection = useSendConnection();
|
const connection = useSendConnection();
|
||||||
const [, wallet] = useWallet();
|
const { wallet } = useWallet();
|
||||||
const openOrdersAccount = useSelectedOpenOrdersAccount(true);
|
const openOrdersAccount = useSelectedOpenOrdersAccount(true);
|
||||||
const { market } = useMarket();
|
const { market } = useMarket();
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@ const CancelButton = styled(Button)`
|
||||||
|
|
||||||
export default function OpenOrderTable({ openOrders }) {
|
export default function OpenOrderTable({ openOrders }) {
|
||||||
let { market } = useMarket();
|
let { market } = useMarket();
|
||||||
let [, wallet] = useWallet();
|
let { wallet } = useWallet();
|
||||||
let connection = useSendConnection();
|
let connection = useSendConnection();
|
||||||
|
|
||||||
const [cancelId, setCancelId] = useState(null);
|
const [cancelId, setCancelId] = useState(null);
|
||||||
|
|
|
@ -277,7 +277,7 @@ export function useOrderbook(depth = 20) {
|
||||||
// TODO: Update to use websocket
|
// TODO: Update to use websocket
|
||||||
export function useOpenOrdersAccounts(fast = false) {
|
export function useOpenOrdersAccounts(fast = false) {
|
||||||
const { market } = useMarket();
|
const { market } = useMarket();
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
async function getTokenAccounts() {
|
async function getTokenAccounts() {
|
||||||
if (!connected) {
|
if (!connected) {
|
||||||
|
@ -317,7 +317,7 @@ export function useOpenOrdersAddresses() {
|
||||||
// This is okay to poll
|
// This is okay to poll
|
||||||
export function useBaseCurrencyAccounts() {
|
export function useBaseCurrencyAccounts() {
|
||||||
const { market } = useMarket();
|
const { market } = useMarket();
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
async function getTokenAccounts() {
|
async function getTokenAccounts() {
|
||||||
if (!connected) {
|
if (!connected) {
|
||||||
|
@ -341,7 +341,7 @@ export function useBaseCurrencyAccounts() {
|
||||||
// This is okay to poll
|
// This is okay to poll
|
||||||
export function useQuoteCurrencyAccounts() {
|
export function useQuoteCurrencyAccounts() {
|
||||||
const { market } = useMarket();
|
const { market } = useMarket();
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
async function getTokenAccounts() {
|
async function getTokenAccounts() {
|
||||||
if (!connected) {
|
if (!connected) {
|
||||||
|
@ -470,7 +470,7 @@ export function useFills(limit = 100) {
|
||||||
|
|
||||||
// TODO: Update to use websocket
|
// TODO: Update to use websocket
|
||||||
export function useFillsForAllMarkets(limit = 100) {
|
export function useFillsForAllMarkets(limit = 100) {
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
|
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const allMarkets = useAllMarkets();
|
const allMarkets = useAllMarkets();
|
||||||
|
@ -527,7 +527,7 @@ export function useFillsForAllMarkets(limit = 100) {
|
||||||
|
|
||||||
// TODO: Update to use websocket
|
// TODO: Update to use websocket
|
||||||
export function useOpenOrdersForAllMarkets() {
|
export function useOpenOrdersForAllMarkets() {
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
|
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const allMarkets = useAllMarkets();
|
const allMarkets = useAllMarkets();
|
||||||
|
@ -637,7 +637,7 @@ export function useBalances() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useWalletBalancesForAllMarkets() {
|
export function useWalletBalancesForAllMarkets() {
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
|
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const allMarkets = useAllMarkets();
|
const allMarkets = useAllMarkets();
|
||||||
|
@ -713,7 +713,7 @@ async function getCurrencyBalance(market, connection, wallet, base = true) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useOpenOrderAccountBalancesForAllMarkets() {
|
export function useOpenOrderAccountBalancesForAllMarkets() {
|
||||||
const [connected, wallet] = useWallet();
|
const { connected, wallet } = useWallet();
|
||||||
|
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const allMarkets = useAllMarkets();
|
const allMarkets = useAllMarkets();
|
||||||
|
|
|
@ -59,8 +59,9 @@ export function WalletProvider({ children }) {
|
||||||
connected,
|
connected,
|
||||||
providerUrl,
|
providerUrl,
|
||||||
setProviderUrl,
|
setProviderUrl,
|
||||||
providerName: WALLET_PROVIDERS.find(({ url }) => url === providerUrl)
|
providerName:
|
||||||
?.name,
|
WALLET_PROVIDERS.find(({ url }) => url === providerUrl)?.name ??
|
||||||
|
providerUrl,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
@ -70,11 +71,11 @@ export function WalletProvider({ children }) {
|
||||||
|
|
||||||
export function useWallet() {
|
export function useWallet() {
|
||||||
const context = useContext(WalletContext);
|
const context = useContext(WalletContext);
|
||||||
return [
|
return {
|
||||||
context.connected,
|
connected: context.connected,
|
||||||
context.wallet,
|
wallet: context.wallet,
|
||||||
context.providerUrl,
|
providerUrl: context.providerUrl,
|
||||||
context.setProviderUrl,
|
setProvider: context.setProviderUrl,
|
||||||
context.providerName,
|
providerName: context.providerName,
|
||||||
];
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue