🐝 Alby support

components/activities/list.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext } from 'react'
 import { Activity, ActivityType } from 'lib/types'
 import EmptyState from 'components/layout/empty'
 import SomeError from 'components/layout/error'
@@ -12,14 +12,14 @@ interface ActivitiesListProps {
 }
 
 const ActivitiesList = ({ activityType }: ActivitiesListProps) => {
-  const { connected } = useContext(WalletContext)
+  const { wallets, initializing } = useContext(WalletContext)
   const { activities, loading } = useContext(ContractsContext)
 
-  if (!connected)
+  if (loading || initializing) return <Spinner />
+  if (!wallets.length)
     return (
       <EmptyState>🔌 Connect your wallet to view your activities</EmptyState>
     )
-  if (loading) return <Spinner />
   if (!activities) return <SomeError>Error getting activities</SomeError>
 
   const filteredActivities = activities.filter((a) => a.type === activityType)

components/activities/row.tsx

@@ -26,7 +26,7 @@ const ActivityRow = ({ activity }: ActivityRowProps) => {
       </div>
       <div className="level-right">
         <div className="level-item">
-          <ExplorerLink txid={txid} />
+          <ExplorerLink txid={txid} network={activity.network} />
         </div>
         <div className="level-item">
           <p className="time">{prettyAgo(createdAt)}</p>

components/assets/list.tsx

@@ -4,17 +4,30 @@ import SomeError from 'components/layout/error'
 import AssetRow from './row'
 import Spinner from 'components/spinner'
 import { ConfigContext } from 'components/providers/config'
+import { WalletContext } from 'components/providers/wallet'
+import { getAssetBalance } from 'lib/marina'
 
 const AssetsList = () => {
   const { config, loading } = useContext(ConfigContext)
+  const { wallets, balances } = useContext(WalletContext)
 
-  const [filteredAssets, setFilteredAssets] = useState<Asset[]>()
+  const [totalBalance, setTotalBalance] = useState<Record<string, number>>({})
+
+  useEffect(() => {
+    for (const asset of config.assets) {
+      let total = 0
+      for (const wallet of wallets) {
+        total += getAssetBalance(asset, balances[wallet.type])
+      }
+      setTotalBalance((prev) => ({ ...prev, [asset.id]: total }))
+    }
+  }, [balances, config.assets, wallets])
 
-  const { assets } = config
+  const [filteredAssets, setFilteredAssets] = useState<Asset[]>()
 
   useEffect(() => {
-    setFilteredAssets(assets.filter((asset: Asset) => asset.isSynthetic))
-  }, [assets])
+    setFilteredAssets(config.assets.filter((asset: Asset) => asset.isSynthetic))
+  }, [config.assets])
 
   if (loading) return <Spinner />
   if (!filteredAssets) return <SomeError>Error getting assets</SomeError>
@@ -23,7 +36,11 @@ const AssetsList = () => {
     <div className="assets-list">
       {filteredAssets &&
         filteredAssets.map((asset: Asset, index: number) => (
-          <AssetRow key={index} asset={asset} />
+          <AssetRow
+            key={index}
+            asset={asset}
+            balance={totalBalance[asset.id]}
+          />
         ))}
     </div>
   )

components/assets/row.tsx

@@ -3,19 +3,15 @@ import Image from 'next/image'
 import { Asset } from 'lib/types'
 import FilterButton from 'components/buttons/filter'
 import TradeButton from 'components/buttons/trade'
-import { useContext } from 'react'
-import { WalletContext } from 'components/providers/wallet'
-import { getAssetBalance } from 'lib/marina'
 import ProgressBar from 'components/progress'
 import LeftToMint from 'components/progress/leftToMint'
 
 interface AssetRowProps {
   asset: Asset
+  balance: number
 }
 
-const AssetRow = ({ asset }: AssetRowProps) => {
-  const { balances } = useContext(WalletContext)
-  const balance = getAssetBalance(asset, balances)
+const AssetRow = ({ asset, balance }: AssetRowProps) => {
   const disabled = !(asset.isAvailable && asset.id)
 
   return (

components/balance/fiat.tsx

@@ -7,7 +7,11 @@ import { ContractsContext } from 'components/providers/contracts'
 import { ConfigContext } from 'components/providers/config'
 
 const BalanceInFiat = () => {
-  const { balances, connected } = useContext(WalletContext)
+  const {
+    wallets,
+    balances: balancesByWallet,
+    initializing,
+  } = useContext(WalletContext)
   const { config } = useContext(ConfigContext)
   const { loading } = useContext(ContractsContext)
 
@@ -22,14 +26,18 @@ const BalanceInFiat = () => {
   useEffect(() => {
     setBalance(
       assets.reduce((prev, asset) => {
-        const quantity = getAssetBalance(asset, balances)
+        let quantity = 0
+        for (const balances of Object.values(balancesByWallet)) {
+          quantity += getAssetBalance(asset, balances)
+        }
         return prev + quantity * asset.value
       }, 0),
     )
-  }, [assets, balances])
+  }, [assets, balancesByWallet])
 
-  if (!connected) return <p>🔌 Connect your wallet to view your balance</p>
-  if (loading) return <Spinner />
+  if (loading || initializing) return <Spinner />
+  if (!wallets || wallets.length === 0)
+    return <p>🔌 Connect your wallet to view your balance</p>
 
   return (
     <>

components/balance/index.tsx

@@ -1,10 +1,21 @@
+import { WalletContext } from 'components/providers/wallet'
 import BalanceTable from './table'
+import { useContext } from 'react'
+import { WalletType } from 'lib/wallet'
 
 const Balance = () => {
+  const { balances } = useContext(WalletContext)
+
   return (
     <div className="is-box has-pink-border">
       <h3>Your balance</h3>
-      <BalanceTable />
+      {Object.entries(balances).map(([wallet, balances]) => (
+        <BalanceTable
+          key={wallet}
+          wallet={wallet as WalletType}
+          balances={balances}
+        />
+      ))}
     </div>
   )
 }

components/balance/row.tsx

@@ -1,15 +1,12 @@
 import Image from 'next/image'
 import { prettyQuantity } from 'lib/pretty'
 import { Asset } from 'lib/types'
-import { useContext } from 'react'
-import { getAssetBalance } from 'lib/marina'
-import { WalletContext } from 'components/providers/wallet'
 
 interface BalanceRowProps {
   asset: Asset
+  amount: number
 }
-const BalanceRow = ({ asset }: BalanceRowProps) => {
-  const { balances } = useContext(WalletContext)
+const BalanceRow = ({ asset, amount }: BalanceRowProps) => {
   return (
     <tr>
       <td>
@@ -23,9 +20,7 @@ const BalanceRow = ({ asset }: BalanceRowProps) => {
         </div>
         <span className="ml-5">{asset.ticker}</span>
       </td>
-      <td>
-        {prettyQuantity(getAssetBalance(asset, balances), asset.precision)}
-      </td>
+      <td>{prettyQuantity(amount, asset.precision)}</td>
       <style jsx>{`
         td:nth-child(2) {
           text-align: right;

components/balance/table.tsx

@@ -1,55 +1,66 @@
 import { useContext } from 'react'
-import { WalletContext } from 'components/providers/wallet'
 import BalanceRow from './row'
 import Spinner from 'components/spinner'
 import { ContractsContext } from 'components/providers/contracts'
 import { ConfigContext } from 'components/providers/config'
+import { getAssetBalance } from 'lib/marina'
+import { WalletType } from 'lib/wallet'
 
-const BalanceTable = () => {
-  const { connected } = useContext(WalletContext)
+type Props = {
+  wallet: WalletType
+  balances: Record<string, number>
+}
+
+const BalanceTable: React.FC<Props> = ({ wallet, balances }) => {
   const { config } = useContext(ConfigContext)
   const { loading } = useContext(ContractsContext)
 
   const { assets } = config
 
-  if (!connected) return <p>🔌 Connect your wallet to view your balance</p>
   if (loading) return <Spinner />
 
   return (
-    <table className="table is-fullwidth">
-      <thead>
-        <tr>
-          <th>Ticker</th>
-          <th>
-            <abbr title="Quantity" />
-            Qty
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {assets &&
-          assets.map((asset, index) => (
-            <BalanceRow key={index} asset={asset} />
-          ))}
-      </tbody>
-      <style jsx>{`
-        table {
-          font-size: 0.9rem;
-        }
-        td:nth-child(2),
-        th:nth-child(2) {
-          text-align: right;
-        }
-        td:nth-child(2) {
-          color: #63159b;
-        }
-        img {
-          height: 20px;
-          position: relative;
-          top: 4px;
-        }
-      `}</style>
-    </table>
+    <>
+      <h5>{wallet}</h5>
+      <table className="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>Ticker</th>
+            <th>
+              <abbr title="Quantity" />
+              Qty
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {assets &&
+            assets.map((asset, index) => (
+              <BalanceRow
+                key={index}
+                asset={asset}
+                amount={getAssetBalance(asset, balances)}
+              />
+            ))}
+        </tbody>
+        <style jsx>{`
+          table {
+            font-size: 0.9rem;
+          }
+          td:nth-child(2),
+          th:nth-child(2) {
+            text-align: right;
+          }
+          td:nth-child(2) {
+            color: #63159b;
+          }
+          img {
+            height: 20px;
+            position: relative;
+            top: 4px;
+          }
+        `}</style>
+      </table>
+    </>
   )
 }
 

components/banner/index.tsx

@@ -3,12 +3,14 @@ import { useContext } from 'react'
 
 export default function Banner() {
   const { network } = useContext(WalletContext)
-
   if (network !== 'testnet') return <></>
 
   return (
     <>
-      <p>This is a Testnet environment. Assets have no value</p>
+      <p>
+        This is a Testnet environment. Assets have no value. Make sure your
+        connected wallets have Liquid testnet enabled.
+      </p>
       <style jsx>{`
         p {
           background-color: #6b1d9c;

components/borrow/button.tsx

@@ -7,6 +7,7 @@ import { swapDepositAmountOutOfBounds } from 'lib/swaps'
 import { LightningEnabledTasks, Tasks } from 'lib/tasks'
 import { Contract } from 'lib/types'
 import { fromSatoshis } from 'lib/utils'
+import { WalletType } from 'lib/wallet'
 import Router from 'next/router'
 import { useContext, useEffect, useState } from 'react'
 
@@ -17,31 +18,37 @@ interface BorrowButtonProps {
 }
 
 const BorrowButton = ({ contract, minRatio, ratio }: BorrowButtonProps) => {
-  const { balances, connected } = useContext(WalletContext)
+  const { wallets, balances } = useContext(WalletContext)
   const { config } = useContext(ConfigContext)
   const { setNewContract } = useContext(ContractsContext)
 
-  const [enoughFunds, setEnoughFunds] = useState(false)
+  const [enoughFunds, setEnoughFunds] = useState<WalletType[]>([])
   const [mintLimitReached, setMintLimitReached] = useState(false)
 
   const { collateral, oracles, synthetic } = contract
 
   const { assets } = config
 
   useEffect(() => {
-    const asset = assets.find((a) => a.ticker === contract.collateral.ticker)
+    setEnoughFunds([])
+    const asset = assets.find((a) => a.ticker === collateral.ticker)
     if (!asset) return
-    const funds = getAssetBalance(asset, balances)
-    const needed = contract.collateral.quantity
-    const enoughFundsOnMarina = connected && funds > needed
-    if (LightningEnabledTasks[Tasks.Borrow]) {
-      const outOfBounds = swapDepositAmountOutOfBounds(needed)
-      setEnoughFunds(enoughFundsOnMarina || !outOfBounds)
-    } else {
-      setEnoughFunds(enoughFundsOnMarina)
+    if (!wallets.length) return
+
+    for (const wallet of wallets) {
+      const balance = getAssetBalance(asset, balances[wallet.type])
+      if (contract.collateral.quantity <= balance) {
+        setEnoughFunds((prev) => [...prev, wallet.type])
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contract.collateral.quantity])
+  }, [
+    assets,
+    balances,
+    collateral.ticker,
+    contract.collateral.quantity,
+    contract.collateral.ticker,
+    wallets,
+  ])
 
   const handleClick = () => {
     setNewContract(contract)
@@ -57,9 +64,8 @@ const BorrowButton = ({ contract, minRatio, ratio }: BorrowButtonProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contract.synthetic.quantity])
 
-  const enabled =
-    connected &&
-    enoughFunds &&
+  const enabled = () =>
+    enoughFunds.length > 0 &&
     collateral.quantity > 0 &&
     collateral.value > 0 &&
     ratio >= minRatio &&
@@ -74,7 +80,7 @@ const BorrowButton = ({ contract, minRatio, ratio }: BorrowButtonProps) => {
     <div className="has-text-centered">
       <button
         className="button is-primary is-cta"
-        disabled={!enabled}
+        disabled={!enabled()}
         onClick={handleClick}
       >
         Proceed to deposit