From 61b648ff62b349635b077bb0b1900ae8a4e2a886 Mon Sep 17 00:00:00 2001
From: Onno Visser <23527729+onnovisser@users.noreply.github.com>
Date: Thu, 7 Sep 2023 16:32:50 +0200
Subject: [PATCH] account picker

---
 .../{usePermissions.ts => usePermissions.tsx} | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)
 rename centrifuge-app/src/utils/{usePermissions.ts => usePermissions.tsx} (91%)

diff --git a/centrifuge-app/src/utils/usePermissions.ts b/centrifuge-app/src/utils/usePermissions.tsx
similarity index 91%
rename from centrifuge-app/src/utils/usePermissions.ts
rename to centrifuge-app/src/utils/usePermissions.tsx
index 2fbf758210..14485de44b 100644
--- a/centrifuge-app/src/utils/usePermissions.ts
+++ b/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,7 +284,7 @@ export function usePoolAccess(poolId: string) {
 
   return {
     admin,
-    multisig: useMemo(
+    multisig: React.useMemo(
       () => (metadata?.adminMultisig && computeMultisig(metadata.adminMultisig)) || null,
       [metadata?.adminMultisig]
     ),
@@ -269,7 +292,7 @@ export function usePoolAccess(poolId: string) {
     missingPermissions: [...missingAdminPermissions, ...missingManagerPermissions],
     missingAdminPermissions,
     missingManagerPermissions,
-    assetOriginators: useMemo(
+    assetOriginators: React.useMemo(
       () =>
         aoProxies.map((addr, i) => ({
           address: addr,