Fix client services sometimes not appearing (#252)

onflow · Aug 21, 2024 · fbdb829 · fbdb829
1 parent dfd2112
commit fbdb829
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/helpers/inject-wallets.ts b/helpers/inject-wallets.ts
@@ -6,7 +6,7 @@ import { filterUniqueServices } from './services'
 
 type InjectionPipeValue = [
   injectedServices: (ServiceWithWallet | Service)[],
-  newWallets: Record<string, Wallet>
+  newWallets: Record<string, Wallet>,
 ]
 
 type WalletIdMap = {
@@ -19,7 +19,7 @@ export const injectClientServices =
   (wallets: Wallet[] = []) => {
     const [injectedServices, newWallets] = pipe(
       assignServiceWallets(wallets),
-      deriveWalletsFromUnknownServices
+      deriveWalletsFromUnknownServices,
     )([clientServices, {}])
 
     const updatedWallets = concat(wallets, Object.values(newWallets))
@@ -28,7 +28,7 @@ export const injectClientServices =
       const newServices = pipe(
         // Find corresponding services
         filter(
-          (service: ServiceWithWallet) => service.walletUid === wallet.uid
+          (service: ServiceWithWallet) => service.walletUid === wallet.uid,
         ),
         // Remove wallet uid
         map(({ walletUid: _, ...service }) => service),
@@ -38,7 +38,7 @@ export const injectClientServices =
         filterUniqueServices({
           address: true,
           uid: true,
-        })
+        }),
       )(injectedServices as ServiceWithWallet[])
 
       const newWallet = clone(wallet)
@@ -62,14 +62,14 @@ export const generateWalletIdMap = (wallets: Wallet[]) =>
     {
       serviceUidToWalletUid: {},
       providerAddressToWalletUid: {},
-    } as WalletIdMap
+    } as WalletIdMap,
   )
 
 export const assignServiceWallets =
   (wallets: Wallet[]) =>
   ([services, newWallets]: InjectionPipeValue): [
     injectedServices: ServiceWithWallet[],
-    newWallets: Record<string, Wallet>
+    newWallets: Record<string, Wallet>,
   ] => {
     const walletIdMap = generateWalletIdMap(wallets)
     return [
@@ -100,10 +100,11 @@ export const deriveWalletsFromUnknownServices = ([
       newWallets[newWallet.uid] = newWallet
       services.push({
         ...service,
+        walletUid: newWallet.uid,
       })
       return [services, newWallets]
     },
-    [[], clone(newWallets)] as InjectionPipeValue
+    [[], clone(newWallets)] as InjectionPipeValue,
   )
 
 // Support legacy injected services which do not have an associated wallet known

diff --git a/helpers/wallet-pipes.ts b/helpers/wallet-pipes.ts
@@ -1,6 +1,6 @@
 // Version key is the highest the pipe supports
 
-import { always, identity, ifElse, pipe, reject, when } from 'rambda'
+import { always, filter, identity, ifElse, pipe, reject, when } from 'rambda'
 import {
   isExtension,
   serviceListOfMethod,
@@ -21,9 +21,12 @@ import {
 } from './constants'
 import { getBrowserFromUserAgent } from './device'
 import { isGreaterThanOrEqualToVersion } from './version'
-import { pipeWalletServices, walletsForNetwork } from './wallets'
+import {
+  pipeWalletServices,
+  removeEmptyWallets,
+  walletsForNetwork,
+} from './wallets'
 import { injectClientServices } from './inject-wallets'
-import { Service } from '../types'
 
 export const getWalletPipes = ({
   fclVersion,
@@ -112,19 +115,21 @@ export const getWalletPipes = ({
         // Select wallets for the correct network
         walletsForNetwork(network),
 
-        // Pre-process services
+        // Inject client services
+        injectClientServices(clientServices),
+
+        // Filter unsupported services and remove empty wallets after
         pipeWalletServices(({ wallets }) =>
           pipe(
             filterSupportedStrategies(supportedStrategies),
             // Remove opt in services unless marked as include, if supported
             filterOptInServices({ wallets, includeList: include }),
           ),
         ),
+        removeEmptyWallets,
 
-        // Inject client services
-        injectClientServices(clientServices),
-
-        // Post-process services
+        // Filter services based on installation status
+        // Do not remove empty wallets, as we want to show installable wallets
         pipeWalletServices(
           ({ wallets }) =>
             pipe(

diff --git a/helpers/wallets.ts b/helpers/wallets.ts
@@ -78,3 +78,7 @@ export function extractAllServicesWithProvider(wallets: Wallet[]) {
     return acc
   }, [])
 }
+
+export function removeEmptyWallets(wallets: Wallet[]) {
+  return wallets.filter(wallet => wallet.services.length > 0)
+}