add solflare

components/ConnectWalletButton.tsx

@@ -100,9 +100,9 @@ const ConnectWalletButton = () => {
           >
             <div className="flex flex-row items-center px-3 justify-center h-full default-transition hover:text-th-fgd-1">
               <WalletIcon className="w-4 h-4 mr-2 fill-current" />
-              <div>
+              <div className="text-left">
                 <div className="mb-0.5 whitespace-nowrap">{t('connect')}</div>
-                <div className="font-normal text-th-fgd-3 text-left leading-3 tracking-wider text-xxs">
+                <div className="font-normal text-th-fgd-3 leading-3 tracking-wider text-xxs">
                   {WALLET_PROVIDERS.find((p) => p.url === selectedWallet)?.name}
                 </div>
               </div>

components/MarketPosition.tsx

@@ -197,8 +197,10 @@ export default function MarketPosition() {
           <div className="text-th-fgd-1">
             {isLoading ? (
               <DataLoader />
-            ) : (
+            ) : notionalSize ? (
               formatUsdValue(Math.abs(notionalSize))
+            ) : (
+              '$0'
             )}
           </div>
         </div>
@@ -207,7 +209,13 @@ export default function MarketPosition() {
             {t('average-entry')}
           </div>
           <div className="text-th-fgd-1">
-            {isLoading ? <DataLoader /> : formatUsdValue(avgEntryPrice)}
+            {isLoading ? (
+              <DataLoader />
+            ) : avgEntryPrice ? (
+              formatUsdValue(avgEntryPrice)
+            ) : (
+              '$0'
+            )}
           </div>
         </div>
         <div className="flex justify-between pb-3">
@@ -215,7 +223,13 @@ export default function MarketPosition() {
             {t('break-even')}
           </div>
           <div className="text-th-fgd-1">
-            {isLoading ? <DataLoader /> : formatUsdValue(breakEvenPrice)}
+            {isLoading ? (
+              <DataLoader />
+            ) : breakEvenPrice ? (
+              formatUsdValue(breakEvenPrice)
+            ) : (
+              '$0'
+            )}
           </div>
         </div>
         <div className="flex justify-between pb-3">

components/WalletSelect.tsx

@@ -42,7 +42,7 @@ export default function WalletSelect({ isPrimary = false }) {
               <ChevronDownIcon className="h-4 w-4" />
             )}
           </Menu.Button>
-          <Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 p-1 rounded-md right-0.5 mt-1 shadow-lg outline-none w-48 z-20">
+          <Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 p-1 rounded-md right-0.5 mt-1 shadow-lg outline-none w-52 z-20">
             {WALLET_PROVIDERS.map(({ name, url, icon }) => (
               <Menu.Item key={name}>
                 <button

hooks/useWallet.tsx

@@ -7,6 +7,7 @@ import {
   PhantomWalletAdapter,
   SlopeWalletAdapter,
   SolletExtensionAdapter,
+  SolflareExtensionWalletAdapter,
 } from '../utils/wallet-adapters'
 import { WalletAdapter } from '../@types/types'
 import useInterval from './useInterval'
@@ -23,6 +24,17 @@ export const WALLET_PROVIDERS = [
     icon: `https://www.phantom.app/img/logo.png`,
     adapter: PhantomWalletAdapter,
   },
+  {
+    name: 'Solflare',
+    url: 'https://solflare.com/access-wallet',
+    icon: `${ASSET_URL}/solflare.svg`,
+  },
+  {
+    name: 'Solflare Extension',
+    url: 'https://solflare.com',
+    icon: `${ASSET_URL}/solflare.svg`,
+    adapter: SolflareExtensionWalletAdapter,
+  },
   {
     name: 'Sollet.io',
     url: 'https://www.sollet.io',

utils/wallet-adapters/index.ts

@@ -1,3 +1,4 @@
 export * from './phantom'
+export * from './solflare-extension'
 export * from './sollet-extension'
 export * from './slope'

utils/wallet-adapters/solflare-extension.ts

@@ -0,0 +1,102 @@
+import EventEmitter from 'eventemitter3'
+import { PublicKey, Transaction } from '@solana/web3.js'
+import { notify } from '../../utils/notifications'
+import { DEFAULT_PUBLIC_KEY, WalletAdapter } from '../../@types/types'
+
+type SolflareExtensionEvent = 'disconnect' | 'connect'
+type SolflareExtensionRequestMethod =
+  | 'connect'
+  | 'disconnect'
+  | 'signTransaction'
+  | 'signAllTransactions'
+
+interface SolflareExtensionProvider {
+  publicKey?: PublicKey
+  isConnected?: boolean
+  autoApprove?: boolean
+  signTransaction: (transaction: Transaction) => Promise<Transaction>
+  signAllTransactions: (transactions: Transaction[]) => Promise<Transaction[]>
+  connect: () => Promise<void>
+  disconnect: () => Promise<void>
+  on: (event: SolflareExtensionEvent, handler: (args: any) => void) => void
+  off: (event: SolflareExtensionEvent, handler: (args: any) => void) => void
+  request: (method: SolflareExtensionRequestMethod, params: any) => Promise<any>
+}
+
+export class SolflareExtensionWalletAdapter
+  extends EventEmitter
+  implements WalletAdapter
+{
+  constructor() {
+    super()
+    this.connect = this.connect.bind(this)
+  }
+
+  private get _provider(): SolflareExtensionProvider | undefined {
+    if ((window as any)?.solflare?.isSolflare) {
+      return (window as any).solflare
+    }
+    return undefined
+  }
+
+  private _handleConnect = (...args) => {
+    this.emit('connect', ...args)
+  }
+
+  private _handleDisconnect = (...args) => {
+    this._provider?.off('connect', this._handleConnect)
+    this._provider?.off('disconnect', this._handleDisconnect)
+    this.emit('disconnect', ...args)
+  }
+
+  get connected() {
+    return this._provider?.isConnected || false
+  }
+
+  get autoApprove() {
+    return this._provider?.autoApprove || false
+  }
+
+  async signAllTransactions(
+    transactions: Transaction[]
+  ): Promise<Transaction[]> {
+    if (!this._provider) {
+      return transactions
+    }
+
+    return this._provider.signAllTransactions(transactions)
+  }
+
+  get publicKey() {
+    return this._provider?.publicKey || DEFAULT_PUBLIC_KEY
+  }
+
+  async signTransaction(transaction: Transaction) {
+    if (!this._provider) {
+      return transaction
+    }
+
+    return this._provider.signTransaction(transaction)
+  }
+
+  async connect() {
+    if (!this._provider) {
+      notify({
+        title: 'Solflare Extension Error',
+        type: 'error',
+        description:
+          'Please install the Solflare Extension and then reload this page.',
+      })
+      return
+    }
+    this._provider?.on('connect', this._handleConnect)
+    this._provider?.on('disconnect', this._handleDisconnect)
+    return this._provider?.connect()
+  }
+
+  async disconnect() {
+    if (this._provider) {
+      this._provider.disconnect()
+    }
+  }
+}