Link to wallet provider

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 }) {
           <p style={{ color: 'rgba(255,255,255,0.5)' }}>
             {account
               ? 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>
         </div>
       </div>

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 (
     <FloatingElement style={{ flex: 1, paddingTop: 10 }}>
       <Divider style={{ borderColor: 'white' }}>{baseCurrency}</Divider>
@@ -62,7 +56,7 @@ export default function StandaloneBalancesDisplay() {
         {/*  </ActionButton>*/}
         {/*</Col>*/}
       </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>
       <RowBox
         align="middle"
@@ -88,7 +82,7 @@ export default function StandaloneBalancesDisplay() {
         {/*  </ActionButton>*/}
         {/*</Col>*/}
       </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
         depositCoin={depositCoin}
         onClose={() => setDepositCoin('')}

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();

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();
 

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 {

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();
 

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);

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();

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,
+  };
 }