[DO NOT MERGE] Socean integration + Saber Tribeca integration + Saber Pools integration + Internal Token Transfer integration

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "react-hooks"],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
@@ -39,6 +39,8 @@
       {
         "argsIgnorePattern": "^_"
       }
-    ]
+    ],
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
   }
 }

.gitignore

@@ -33,5 +33,10 @@ yarn-error.log*
 # vercel
 .vercel
 
+# visual studio
+.vscode
+
+.npmrc
+.env
 # TypeScript cache
 *.tsbuildinfo

components/HotWallet/HotWallet.tsx

@@ -0,0 +1,37 @@
+import useHotWallet from '@hooks/useHotWallet'
+import HotWalletAccount from './HotWalletAccount'
+import { FireIcon } from '@heroicons/react/outline'
+import HotWalletName from './HotWalletName'
+
+const HotWallet = () => {
+  const { tokenAccountsInfo, hotWalletInfo } = useHotWallet()
+
+  if (!hotWalletInfo) {
+    return <></>
+  }
+
+  return (
+    <div className="bg-bkg-2 p-4 md:p-6 rounded-lg transition-all">
+      <h3 className="bg-bkg-2 mb-4 flex items-center">
+        <FireIcon className="flex-shrink-0 h-5 mr-1 text-primary-light w-5" />
+        Hot Wallet
+      </h3>
+
+      <HotWalletName
+        hotWalletAddress={hotWalletInfo.publicKey}
+        hotWalletName={hotWalletInfo.name}
+      />
+
+      <div style={{ maxHeight: '350px' }} className="overflow-y-auto space-y-3">
+        {tokenAccountsInfo?.map((tokenAccountInfo) => (
+          <HotWalletAccount
+            key={tokenAccountInfo.publicKey.toBase58()}
+            info={tokenAccountInfo}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HotWallet

components/HotWallet/HotWalletAccount.tsx

@@ -0,0 +1,53 @@
+import BigNumber from 'bignumber.js'
+import { abbreviateAddress } from '@utils/formatting'
+import { HotWalletAccountInfo } from '@hooks/useHotWallet'
+import { getExplorerUrl } from '@components/explorer/tools'
+import useWalletStore from 'stores/useWalletStore'
+import { createRef } from 'react'
+import { ExternalLinkIcon } from '@heroicons/react/outline'
+
+const HotWalletAccount = ({ info }: { info: HotWalletAccountInfo }) => {
+  const connection = useWalletStore((store) => store.connection)
+
+  const linkRef = createRef<HTMLAnchorElement>()
+
+  const amountFormatted = Number(
+    new BigNumber(info.amount.toString()).shiftedBy(-info.decimals).toString()
+  ).toLocaleString()
+
+  const usdTotalValueFormatted = Number(
+    new BigNumber(info.usdTotalValue.toNumber())
+      .shiftedBy(-info.decimals)
+      .toString()
+  ).toLocaleString()
+
+  return (
+    <div
+      className="flex flex-col items-start text-fgd-1 hover:bg-bkg-3 p-3 w-full cursor-pointer border border-fgd-4 rounded-lg relative"
+      onClick={() => linkRef.current?.click()}
+    >
+      <span className="text-xs text-th-fgd-1">
+        {abbreviateAddress(info.publicKey)}
+      </span>
+
+      <span className="text-fgd-3 text-xs flex flex-col">
+        {amountFormatted} {info.mintName ?? abbreviateAddress(info.mint)}
+      </span>
+
+      <span className="text-fgd-3 text-xs">${usdTotalValueFormatted}</span>
+
+      <a
+        className="absolute right-3"
+        href={getExplorerUrl(connection.endpoint, info.publicKey)}
+        ref={linkRef}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ExternalLinkIcon className="flex-shrink-0 h-4 ml-2 mt-0.5 text-primary-light w-4" />
+      </a>
+    </div>
+  )
+}
+
+export default HotWalletAccount

components/HotWallet/HotWalletName.tsx

@@ -0,0 +1,41 @@
+import { getExplorerUrl } from '@components/explorer/tools'
+import { ExternalLinkIcon } from '@heroicons/react/outline'
+import { PublicKey } from '@solana/web3.js'
+import { abbreviateAddress } from '@utils/formatting'
+import { createRef } from 'react'
+import useWalletStore from 'stores/useWalletStore'
+
+const HotWalletName = ({
+  hotWalletName,
+  hotWalletAddress,
+}: {
+  hotWalletName: string
+  hotWalletAddress: PublicKey
+}) => {
+  const connection = useWalletStore((store) => store.connection)
+
+  const linkRef = createRef<HTMLAnchorElement>()
+
+  return (
+    <div
+      className="bg-bkg-1 mb-3 px-4 py-2 rounded-md w-full relative cursor-pointer"
+      onClick={() => linkRef.current?.click()}
+    >
+      <p className="text-fgd-3 text-xs">{hotWalletName}</p>
+      <h3 className="mb-0">{abbreviateAddress(hotWalletAddress)}</h3>
+
+      <a
+        className="absolute right-3 top-2"
+        href={getExplorerUrl(connection.endpoint, hotWalletAddress)}
+        ref={linkRef}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ExternalLinkIcon className="flex-shrink-0 h-4 ml-2 mt-0.5 text-primary-light w-4" />
+      </a>
+    </div>
+  )
+}
+
+export default HotWalletName

components/Members/MemberItem.tsx

@@ -5,7 +5,7 @@ import { fmtMintAmount } from '@tools/sdk/units'
 import tokenService from '@utils/services/token'
 import useMembersListStore from 'stores/useMembersStore'
 import { ViewState } from './types'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Member } from '@utils/uiTypes/members'
 import { AddressImage, DisplayAddress } from '@cardinal/namespaces-components'
 import useWalletStore from 'stores/useWalletStore'
@@ -31,16 +31,25 @@ const MemberItem = ({ item }: { item: Member }) => {
     ? tokenService.getTokenInfo(realm?.account.communityMint.toBase58())?.symbol
     : ''
   const totalVotes = votesCasted
-  const communityAmount =
-    communityVotes && !communityVotes.isZero()
-      ? useMemo(() => fmtMintAmount(mint, communityVotes), [item.walletAddress])
-      : null
-  const councilAmount =
-    councilVotes && !councilVotes.isZero()
-      ? useMemo(() => fmtMintAmount(councilMint, councilVotes), [
-          item.walletAddress,
-        ])
-      : null
+
+  const getCommunityAmount = useCallback(() => {
+    if (communityVotes && !communityVotes.isZero()) {
+      return fmtMintAmount(mint, communityVotes)
+    }
+
+    return null
+  }, [communityVotes, mint])
+
+  const getCouncilAmount = useCallback(() => {
+    if (councilVotes && !councilVotes.isZero()) {
+      return fmtMintAmount(councilMint, councilVotes)
+    }
+
+    return null
+  }, [councilMint, councilVotes])
+
+  const communityAmount = getCommunityAmount()
+  const councilAmount = getCouncilAmount()
 
   async function handleGoToMemberOverview() {
     setCurrentCompactView(ViewState.MemberOverview)

components/Members/MemberOverview.tsx

@@ -22,7 +22,7 @@ import { accountsToPubkeyMap } from '@tools/sdk/accounts'
 import { fmtMintAmount } from '@tools/sdk/units'
 import { notify } from '@utils/notifications'
 import tokenService from '@utils/services/token'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import useMembersListStore from 'stores/useMembersStore'
 import useWalletStore from 'stores/useWalletStore'
 import { ViewState, WalletTokenRecordWithProposal } from './types'
@@ -52,18 +52,25 @@ const MemberOverview = () => {
     ? tokenService.getTokenInfo(realm?.account.communityMint.toBase58())?.symbol
     : ''
   const totalVotes = votesCasted
-  const communityAmount =
-    communityVotes && !communityVotes.isZero()
-      ? useMemo(() => fmtMintAmount(mint, communityVotes), [
-          member!.walletAddress,
-        ])
-      : null
-  const councilAmount =
-    councilVotes && !councilVotes.isZero()
-      ? useMemo(() => fmtMintAmount(councilMint, councilVotes), [
-          member!.walletAddress,
-        ])
-      : null
+
+  const getCommunityAmount = useCallback(() => {
+    if (communityVotes && !communityVotes.isZero()) {
+      return fmtMintAmount(mint, communityVotes)
+    }
+
+    return null
+  }, [communityVotes, mint])
+
+  const getCouncilAmount = useCallback(() => {
+    if (councilVotes && !councilVotes.isZero()) {
+      return fmtMintAmount(councilMint, councilVotes)
+    }
+
+    return null
+  }, [councilMint, councilVotes])
+
+  const communityAmount = getCommunityAmount()
+  const councilAmount = getCouncilAmount()
 
   const handleGoBackToMainView = async () => {
     setCurrentCompactView(ViewState.MainView)

components/SaberStats/SaberStat.tsx

@@ -0,0 +1,29 @@
+import { SaberStats } from '@hooks/useSaberStats'
+
+const SaberStat = ({
+  saberStat: { liquidityPoolName, uiBalance, pendingRewards, mintName },
+}: {
+  saberStat: SaberStats
+}) => {
+  return (
+    <div className="flex flex-col items-start text-fgd-1 hover:bg-bkg-3 p-3 w-full border border-fgd-4 rounded-lg relative">
+      <span>{liquidityPoolName}</span>
+      <div className="flex flex-col mt-3">
+        <span className="text-xs">Balance</span>
+        <span className="text-fgd-3 text-xs mt-1">{`${uiBalance.toLocaleString()} ${mintName}`}</span>
+      </div>
+
+      <div className="flex flex-col mt-2">
+        <span className="text-xs">Pending Rewards</span>
+        {pendingRewards.map(({ name, uiPendingAmount }) => (
+          <span
+            key={name}
+            className="text-fgd-3 text-xs mt-1"
+          >{`${uiPendingAmount.toLocaleString()} ${name}`}</span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SaberStat

components/SaberStats/SaberStats.tsx

@@ -0,0 +1,34 @@
+import useSaberStats from '@hooks/useSaberStats'
+import { FireIcon } from '@heroicons/react/outline'
+import SaberStatsName from './SaberStatsName'
+import SaberStat from './SaberStat'
+
+const SaberStats = () => {
+  const { saberAccountOwner, saberStats } = useSaberStats()
+
+  if (!saberStats || !saberAccountOwner) {
+    return <></>
+  }
+
+  return (
+    <div className="bg-bkg-2 p-4 md:p-6 rounded-lg transition-all">
+      <h3 className="bg-bkg-2 mb-4 flex items-center">
+        <FireIcon className="flex-shrink-0 h-5 mr-1 text-primary-light w-5" />
+        Saber Stats
+      </h3>
+
+      <SaberStatsName
+        saberAccountOwnerAddress={saberAccountOwner.publicKey}
+        saberAccountOwnerName={saberAccountOwner.name}
+      />
+
+      <div style={{ maxHeight: '350px' }} className="overflow-y-auto space-y-3">
+        {saberStats.map((saberStat) => (
+          <SaberStat key={saberStat.liquidityPoolName} saberStat={saberStat} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SaberStats

components/SaberStats/SaberStatsName.tsx

@@ -0,0 +1,41 @@
+import { getExplorerUrl } from '@components/explorer/tools'
+import { ExternalLinkIcon } from '@heroicons/react/outline'
+import { PublicKey } from '@solana/web3.js'
+import { abbreviateAddress } from '@utils/formatting'
+import { createRef } from 'react'
+import useWalletStore from 'stores/useWalletStore'
+
+const SaberStatsName = ({
+  saberAccountOwnerName,
+  saberAccountOwnerAddress,
+}: {
+  saberAccountOwnerName: string
+  saberAccountOwnerAddress: PublicKey
+}) => {
+  const connection = useWalletStore((store) => store.connection)
+
+  const linkRef = createRef<HTMLAnchorElement>()
+
+  return (
+    <div
+      className="bg-bkg-1 mb-3 px-4 py-2 rounded-md w-full relative cursor-pointer"
+      onClick={() => linkRef.current?.click()}
+    >
+      <p className="text-fgd-3 text-xs">{saberAccountOwnerName}</p>
+      <h3 className="mb-0">{abbreviateAddress(saberAccountOwnerAddress)}</h3>
+
+      <a
+        className="absolute right-3 top-2"
+        href={getExplorerUrl(connection.endpoint, saberAccountOwnerAddress)}
+        ref={linkRef}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ExternalLinkIcon className="flex-shrink-0 h-4 ml-2 mt-0.5 text-primary-light w-4" />
+      </a>
+    </div>
+  )
+}
+
+export default SaberStatsName

components/TreasuryAccount/AccountHeader.tsx

@@ -9,11 +9,12 @@ const AccountHeader = () => {
   const currentAccount = useTreasuryAccountStore(
     (s) => s.compact.currentAccount
   )
+
+  const nfts = useTreasuryAccountStore((s) => s.governanceNfts)
+
   const nftsCount =
     currentAccount?.governance && currentAccount.isNft
-      ? useTreasuryAccountStore((s) => s.governanceNfts)[
-          currentAccount?.governance?.pubkey.toBase58()
-        ]?.length
+      ? nfts[currentAccount?.governance?.pubkey.toBase58()]?.length
       : 0
   const isNFT = currentAccount?.isNft
   const tokenInfo = useTreasuryAccountStore((s) => s.compact.tokenInfo)