feat: dynamic actions on floating button

MetaMask · Mar 15, 2024 · 5717734 · 5717734
1 parent 3476c77
commit 5717734
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 53 deletions.
diff --git a/packages/devnext/src/components/layout.tsx b/packages/devnext/src/components/layout.tsx
@@ -22,7 +22,13 @@ export const Layout = ({ children }: LayoutProps) => {
           router.push('/');
         }}
       />
-      <FloatingMetaMaskButton distance={{ bottom: 40 }} />
+      <FloatingMetaMaskButton
+        distance={{ bottom: 40 }}
+        buy={true}
+        gasprice={true}
+        network={true}
+        swap={true}
+      />
       {children}
       <SDKDebugPanel bottom={40} />
     </div>

diff --git a/packages/sdk-ui/src/components/floating-metamask-button/floating-metamask-button.tsx b/packages/sdk-ui/src/components/floating-metamask-button/floating-metamask-button.tsx
@@ -7,7 +7,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import { FAB } from 'react-native-paper';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import FABGroupFix from '../fab-group-fix/FabGroupFix';
 import { IconOriginal } from '../icons/IconOriginal';
@@ -16,11 +16,21 @@ import {
   MetaMaskModalProps,
 } from '../metamask-modal/metamask-modal';
 
+export interface ActionConfig {
+  label: string;
+  icon: string;
+  onPress: () => void;
+}
 export interface FloatingMetaMaskButtonProps {
   distance?: {
     bottom?: number;
     right?: number;
   };
+  network?: boolean;
+  swap?: boolean;
+  buy?: boolean;
+  gasprice?: boolean;
+  customActions?: ActionConfig[];
 }
 
 const getStyles = ({
@@ -41,8 +51,18 @@ const getStyles = ({
   });
 };
 
+// Icon component defined outside
+const InfuraGasPriceIcon = ({ color }: { color: string }) => {
+  return <MaterialIcons name="price-change" color={color} size={24} />;
+};
+
 export const FloatingMetaMaskButton = ({
   distance,
+  network,
+  swap,
+  buy,
+  gasprice,
+  customActions,
 }: FloatingMetaMaskButtonProps) => {
   const { sdk, connected, connecting, provider } = useSDK();
   const [modalOpen, setModalOpen] = useState(false);
@@ -83,6 +103,73 @@ export const FloatingMetaMaskButton = ({
     Platform.OS === 'web' && /Mobi|Android/i.test(navigator.userAgent);
   const DynamicFabGroup = isMobileBrowser ? FABGroupFix : FAB.Group;
 
+  const generateActions = () => {
+    const actions = [];
+
+    if (network) {
+      actions.push({
+        label: 'Network',
+        icon: 'swap-horizontal',
+        onPress: () => {
+          setTarget('network');
+          setModalOpen(true);
+        },
+      });
+    }
+
+    if (swap) {
+      actions.push({
+        label: 'SWAP',
+        icon: 'swap-horizontal',
+        onPress: () => {
+          setTarget('swap');
+          setModalOpen(true);
+        },
+      });
+    }
+
+    if (buy) {
+      actions.push({
+        label: 'Buy ETH',
+        icon: 'swap-horizontal',
+        onPress: () => {
+          provider?.request({
+            method: 'metamask_open',
+            params: [{ target: 'buy' }],
+          });
+        },
+      });
+    }
+
+    if (gasprice) {
+      actions.push({
+        icon: InfuraGasPriceIcon,
+        label: 'Infura GAS Api',
+        onPress: () => {
+          setTarget('gasprice');
+          setModalOpen(true);
+        },
+      });
+    }
+
+    // Add customActions
+    if (customActions) {
+      actions.push(...customActions);
+    }
+
+    // Additional action for disconnection
+    actions.push({
+      label: 'Disconnect',
+      icon: 'logout',
+      onPress: () => {
+        sdk?.terminate();
+        setActive(false);
+      },
+    });
+
+    return actions;
+  };
+
   return (
     <>
       <DynamicFabGroup
@@ -92,57 +179,7 @@ export const FloatingMetaMaskButton = ({
         onPress={handlePress}
         fabStyle={styles.fabStyle}
         style={styles.container}
-        actions={[
-          // {
-          //   icon: () => <IconOriginal />,
-          //   label: 'Open MetaMask',
-          //   onPress: () => console.log('Pressed notifications'),
-          // },
-          {
-            label: 'Network',
-            icon: 'swap-horizontal',
-            onPress: () => {
-              setTarget('network');
-              setModalOpen(true);
-            },
-          },
-          // {
-          //   label: 'Buy ETH',
-          //   icon: 'swap-horizontal',
-          //   onPress: () => {
-          //     provider?.request({
-          //       method: 'metamask_open',
-          //       params: [{ target: 'buy' }],
-          //     });
-          //   },
-          // },
-          // {
-          //   label: 'SWAP',
-          //   icon: 'swap-horizontal',
-          //   onPress: () => {
-          //     setTarget('swap');
-          //     setModalOpen(true);
-          //   },
-          // },
-          // {
-          //   icon: ({ color }) => (
-          //     <MaterialIcons name="price-change" color={color} size={24} />
-          //   ),
-          //   label: 'Infura GAS Api',
-          //   onPress: () => {
-          //     setTarget('gasprice');
-          //     setModalOpen(true);
-          //   },
-          // },
-          {
-            label: 'Disconnect',
-            icon: 'logout',
-            onPress: () => {
-              sdk?.terminate();
-              setActive(false);
-            },
-          },
-        ]}
+        actions={generateActions()}
         onStateChange={handleStateChange}
       />
       <MetaMaskModal