From fd76123610b45f109ec15cf7d3f88c6b6cce24ba Mon Sep 17 00:00:00 2001 From: Gary Wang Date: Mon, 31 Aug 2020 05:14:53 -0700 Subject: [PATCH] Link to wallet provider --- src/components/DepositDialog.jsx | 5 +++-- src/components/StandaloneBalancesDisplay.jsx | 20 +++++++------------ src/components/TopBar.js | 2 +- src/components/TradeForm.jsx | 2 +- .../UserInfoTable/AccountsTable.jsx | 2 +- .../UserInfoTable/BalancesTable.jsx | 2 +- .../UserInfoTable/OpenOrderTable.jsx | 2 +- src/utils/markets.js | 14 ++++++------- src/utils/wallet.js | 19 +++++++++--------- 9 files changed, 32 insertions(+), 36 deletions(-) diff --git a/src/components/DepositDialog.jsx b/src/components/DepositDialog.jsx index ce31739..412ca70 100644 --- a/src/components/DepositDialog.jsx +++ b/src/components/DepositDialog.jsx @@ -7,6 +7,7 @@ import { useSelectedQuoteCurrencyAccount, } from '../utils/markets'; import { useWallet } from '../utils/wallet'; +import Link from './Link'; export default function DepositDialog({ onClose, depositCoin }) { let coinMint = @@ -15,7 +16,7 @@ export default function DepositDialog({ onClose, depositCoin }) { (address) => COIN_MINTS[address] === depositCoin, ); const { market } = useMarket(); - const [, , , , providerName] = useWallet(); + const { providerName, providerUrl } = useWallet(); const baseCurrencyAccount = useSelectedBaseCurrencyAccount(); const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount(); let account; @@ -42,7 +43,7 @@ export default function DepositDialog({ onClose, depositCoin }) {

{account ? account.pubkey.toBase58() - : `Visit ${providerName} to create an account for this mint`} + : <>Visit {providerName} to create an account for this mint}

diff --git a/src/components/StandaloneBalancesDisplay.jsx b/src/components/StandaloneBalancesDisplay.jsx index 11c2a19..bc962db 100644 --- a/src/components/StandaloneBalancesDisplay.jsx +++ b/src/components/StandaloneBalancesDisplay.jsx @@ -1,14 +1,11 @@ -import { Button, Col, Row, Divider } from 'antd'; +import { Button, Col, Divider, Row } from 'antd'; import React, { useState } from 'react'; import FloatingElement from './layout/FloatingElement'; import styled from 'styled-components'; -import { - useBaseCurrencyBalances, - useQuoteCurrencyBalances, - useMarket, -} from '../utils/markets'; +import { useBaseCurrencyBalances, useMarket, useQuoteCurrencyBalances } from '../utils/markets'; import DepositDialog from './DepositDialog'; -import { useWallet, WALLET_PROVIDERS } from '../utils/wallet'; +import { useWallet } from '../utils/wallet'; +import Link from './Link'; const RowBox = styled(Row)` padding-bottom: 20px; @@ -16,7 +13,6 @@ const RowBox = styled(Row)` const Tip = styled.p` font-size: 12px; - color: #2abdd2; padding-top: 6px; `; @@ -31,10 +27,8 @@ export default function StandaloneBalancesDisplay() { const [baseCurrencyBalances] = useBaseCurrencyBalances(); const [quoteCurrencyBalances] = useQuoteCurrencyBalances(); - let [, , providerUrl] = useWallet(); + const { providerUrl, providerName } = useWallet(); const [depositCoin, setDepositCoin] = useState(''); - const providerName = WALLET_PROVIDERS.find(({ url }) => url === providerUrl) - ?.name; return ( {baseCurrency} @@ -62,7 +56,7 @@ export default function StandaloneBalancesDisplay() { {/* */} {/**/} - All deposits go to your {providerName} wallet + All deposits go to your {providerName} wallet {quoteCurrency} */} {/**/} - All deposits go to your {providerName} wallet + All deposits go to your {providerName} wallet setDepositCoin('')} diff --git a/src/components/TopBar.js b/src/components/TopBar.js index 56dbd5e..0344fb3 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -29,7 +29,7 @@ const LogoWrapper = styled.div` export default function TopBar() { const [current, setCurrent] = useState('/'); - const [connected, wallet, providerUrl, setProvider] = useWallet(); + const { connected, wallet, providerUrl, setProvider } = useWallet(); const { endpoint, setEndpoint } = useConnectionConfig(); const location = useLocation(); const history = useHistory(); diff --git a/src/components/TradeForm.jsx b/src/components/TradeForm.jsx index 83ad2d8..cbe5666 100644 --- a/src/components/TradeForm.jsx +++ b/src/components/TradeForm.jsx @@ -50,7 +50,7 @@ export default function TradeForm({ style, setChangeOrderRef }) { const baseCurrencyAccount = useSelectedBaseCurrencyAccount(); const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount(); const openOrdersAccount = useSelectedOpenOrdersAccount(true); - const [, wallet] = useWallet(); + const {wallet} = useWallet(); const sendConnection = useSendConnection(); const markPrice = useMarkPrice(); diff --git a/src/components/UserInfoTable/AccountsTable.jsx b/src/components/UserInfoTable/AccountsTable.jsx index f5132e2..7998619 100644 --- a/src/components/UserInfoTable/AccountsTable.jsx +++ b/src/components/UserInfoTable/AccountsTable.jsx @@ -7,7 +7,7 @@ import { settleFunds } from '../../utils/send'; export default function AccountsTable({ accountBalances }) { const connection = useConnection(); - const [, wallet] = useWallet(); + const {wallet} = useWallet(); async function onSettleFunds(account) { const { diff --git a/src/components/UserInfoTable/BalancesTable.jsx b/src/components/UserInfoTable/BalancesTable.jsx index 484131c..aaf3c59 100644 --- a/src/components/UserInfoTable/BalancesTable.jsx +++ b/src/components/UserInfoTable/BalancesTable.jsx @@ -15,7 +15,7 @@ export default function BalancesTable({ balances }) { const baseCurrencyAccount = useSelectedBaseCurrencyAccount(); const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount(); const connection = useSendConnection(); - const [, wallet] = useWallet(); + const { wallet } = useWallet(); const openOrdersAccount = useSelectedOpenOrdersAccount(true); const { market } = useMarket(); diff --git a/src/components/UserInfoTable/OpenOrderTable.jsx b/src/components/UserInfoTable/OpenOrderTable.jsx index 3818a5d..7f561f5 100644 --- a/src/components/UserInfoTable/OpenOrderTable.jsx +++ b/src/components/UserInfoTable/OpenOrderTable.jsx @@ -17,7 +17,7 @@ const CancelButton = styled(Button)` export default function OpenOrderTable({ openOrders }) { let { market } = useMarket(); - let [, wallet] = useWallet(); + let { wallet } = useWallet(); let connection = useSendConnection(); const [cancelId, setCancelId] = useState(null); diff --git a/src/utils/markets.js b/src/utils/markets.js index adc6571..57936b4 100644 --- a/src/utils/markets.js +++ b/src/utils/markets.js @@ -277,7 +277,7 @@ export function useOrderbook(depth = 20) { // TODO: Update to use websocket export function useOpenOrdersAccounts(fast = false) { const { market } = useMarket(); - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); async function getTokenAccounts() { if (!connected) { @@ -317,7 +317,7 @@ export function useOpenOrdersAddresses() { // This is okay to poll export function useBaseCurrencyAccounts() { const { market } = useMarket(); - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); async function getTokenAccounts() { if (!connected) { @@ -341,7 +341,7 @@ export function useBaseCurrencyAccounts() { // This is okay to poll export function useQuoteCurrencyAccounts() { const { market } = useMarket(); - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); async function getTokenAccounts() { if (!connected) { @@ -470,7 +470,7 @@ export function useFills(limit = 100) { // TODO: Update to use websocket export function useFillsForAllMarkets(limit = 100) { - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); const allMarkets = useAllMarkets(); @@ -527,7 +527,7 @@ export function useFillsForAllMarkets(limit = 100) { // TODO: Update to use websocket export function useOpenOrdersForAllMarkets() { - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); const allMarkets = useAllMarkets(); @@ -637,7 +637,7 @@ export function useBalances() { } export function useWalletBalancesForAllMarkets() { - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); const allMarkets = useAllMarkets(); @@ -713,7 +713,7 @@ async function getCurrencyBalance(market, connection, wallet, base = true) { } export function useOpenOrderAccountBalancesForAllMarkets() { - const [connected, wallet] = useWallet(); + const { connected, wallet } = useWallet(); const connection = useConnection(); const allMarkets = useAllMarkets(); diff --git a/src/utils/wallet.js b/src/utils/wallet.js index 9edefea..0497b28 100644 --- a/src/utils/wallet.js +++ b/src/utils/wallet.js @@ -59,8 +59,9 @@ export function WalletProvider({ children }) { connected, providerUrl, setProviderUrl, - providerName: WALLET_PROVIDERS.find(({ url }) => url === providerUrl) - ?.name, + providerName: + WALLET_PROVIDERS.find(({ url }) => url === providerUrl)?.name ?? + providerUrl, }} > {children} @@ -70,11 +71,11 @@ export function WalletProvider({ children }) { export function useWallet() { const context = useContext(WalletContext); - return [ - context.connected, - context.wallet, - context.providerUrl, - context.setProviderUrl, - context.providerName, - ]; + return { + connected: context.connected, + wallet: context.wallet, + providerUrl: context.providerUrl, + setProvider: context.setProviderUrl, + providerName: context.providerName, + }; }