Added walletsToUse to choose displayed wallets in RK

masa-finance · May 10, 2023 · ab2b4d7 · ab2b4d7
1 parent 55471dc
commit ab2b4d7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx
@@ -33,6 +33,7 @@ type ConfiguredRainbowKitProviderValue = Record<string, never>;
 interface ConfiguredRainbowKitProviderProps {
   children: ReactNode;
   chainsToUse?: Array<keyof MasaNetworks>;
+  walletsToUse?: string[];
 }
 
 // const { chains, provider } = configureChains(
@@ -88,9 +89,23 @@ interface ConfiguredRainbowKitProviderProps {
 //   celoConnectors().map((cc) => cc.name)
 // );
 
+const walletConnectorsList = {
+  metamask: (chains) => ({
+    groupName: 'Recommended',
+    wallets: [injectedWallet({ chains }), metaMaskWallet({ chains })],
+  }),
+  valora: (chains) => ({
+    groupName: 'Celo',
+    wallets: [Valora({ chains })],
+  }),
+};
+
 export const ConfiguredRainbowKitProvider = ({
   children,
   chainsToUse,
+  walletsToUse = [
+    'metamask'
+  ],
 }: ConfiguredRainbowKitProviderProps) => {
   const rainbowkitChains = getRainbowkitChains(chainsToUse);
   const { chains, provider } = configureChains(rainbowkitChains, [
@@ -101,16 +116,13 @@ export const ConfiguredRainbowKitProvider = ({
     }),
   ]);
 
-  const celoConnectors = connectorsForWallets([
-    {
-      groupName: 'Recommended',
-      wallets: [injectedWallet({ chains }), metaMaskWallet({ chains })],
-    },
-    {
-      groupName: 'Celo',
-      wallets: [Valora({ chains })],
-    },
-  ]);
+  const walletConnectors = walletsToUse?.map((wallet) => {
+    if (walletConnectorsList[wallet]) {
+      return walletConnectorsList[wallet](chains);
+    }
+  }) ?? [];
+
+  const celoConnectors = connectorsForWallets(walletConnectors);
   const wagmiClient = createClient({
     autoConnect: true,
     connectors: celoConnectors,

diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx
@@ -45,6 +45,7 @@ export interface MasaContextProviderProps extends MasaShape {
   arweaveConfig?: ArweaveConfig;
   useRainbowKitWalletConnect?: boolean;
   chainsToUse?: Array<keyof MasaNetworks>;
+  walletsToUse?: string[];
 }
 
 export const MasaContextProvider = ({

diff --git a/src/provider/masa-provider.tsx b/src/provider/masa-provider.tsx
@@ -17,12 +17,13 @@ require('@rainbow-me/rainbowkit/styles.css');
 export const MasaProvider = ({
   children,
   chainsToUse,
+  walletsToUse,
   ...args
 }: MasaContextProviderProps): JSX.Element => {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <ConfiguredRainbowKitProvider chainsToUse={chainsToUse}>
+        <ConfiguredRainbowKitProvider chainsToUse={chainsToUse} walletsToUse={walletsToUse}>
           <MasaContextProvider {...args}>
             <div id="modal-mount" />
             <MasaInterface disableMetamask={args.useRainbowKitWalletConnect} />

diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx
@@ -202,6 +202,7 @@ const TemplateNoRainbowkit: Story = (props: Args) => {
     <>
       <MasaProvider
         company="Masa"
+        walletsToUse={['metamask']}
         useRainbowKitWalletConnect={false}
         forceNetwork={'alfajores'}
       >
@@ -216,6 +217,7 @@ const TemplateWithRainbowKit: Story = (props: Args) => {
     <>
       <MasaProvider
         company="Masa"
+        walletsToUse={['metamask', 'valora']}
         useRainbowKitWalletConnect={true}
         forceNetwork={'alfajores'}
       >