account picker

centrifuge-app/src/utils/usePermissions.ts → centrifuge-app/src/utils/usePermissions.tsx

@@ -6,8 +6,9 @@ import {
   isSameAddress,
   PoolRoles,
 } from '@centrifuge/centrifuge-js'
-import { useCentrifugeQuery, useWallet } from '@centrifuge/centrifuge-react'
-import { useMemo } from 'react'
+import { truncateAddress, useCentrifugeQuery, useCentrifugeUtils, useWallet } from '@centrifuge/centrifuge-react'
+import { Select } from '@centrifuge/fabric'
+import * as React from 'react'
 import { combineLatest, filter, map, repeatWhen, switchMap } from 'rxjs'
 import { diffPermissions } from '../pages/IssuerPool/Configuration/Admins'
 import { useCollections } from './useCollections'
@@ -106,6 +107,28 @@ type SuitableConfig = {
   proxyType?: string[] | ((accountProxyTypes: string[]) => boolean)
 }
 
+export function useSuitableAccountPicker(config: SuitableConfig) {
+  const accounts = useSuitableAccounts(config)
+  const [account, setAccount] = React.useState(accounts[0])
+  const utils = useCentrifugeUtils()
+
+  const pickerElement =
+    accounts?.length > 1 ? (
+      <Select
+        label="Select acting account"
+        options={accounts.map((acc, i) => ({
+          label: `${truncateAddress(utils.formatAddress(acc.actingAddress))}`,
+          value: i.toString(),
+        }))}
+        onChange={(e) => {
+          setAccount(accounts[Number(e.target.value)])
+        }}
+      />
+    ) : null
+
+  return [account, pickerElement, accounts] as const
+}
+
 export function useSuitableAccounts(config: SuitableConfig) {
   const { actingAddress, poolId, poolRole, proxyType } = config
   const {
@@ -261,15 +284,15 @@ export function usePoolAccess(poolId: string) {
 
   return {
     admin,
-    multisig: useMemo(
+    multisig: React.useMemo(
       () => (metadata?.adminMultisig && computeMultisig(metadata.adminMultisig)) || null,
       [metadata?.adminMultisig]
     ),
     adminPermissions,
     missingPermissions: [...missingAdminPermissions, ...missingManagerPermissions],
     missingAdminPermissions,
     missingManagerPermissions,
-    assetOriginators: useMemo(
+    assetOriginators: React.useMemo(
       () =>
         aoProxies.map((addr, i) => ({
           address: addr,