Merge pull request #429 from HausDAO/feat/update-summon-safe-app

Add modules market to summon-safe app
HausDAO · Oct 4, 2023 · 06117f2 · 06117f2
2 parents a47d30d + cc6127f
commit 06117f2
Show file tree

Hide file tree

Showing 15 changed files with 1,676 additions and 23 deletions.
diff --git a/apps/summon-safe/src/app/App.tsx b/apps/summon-safe/src/app/App.tsx
@@ -1,18 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { VALID_NETWORKS } from '@daohaus/keychain-utils';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
 import { Tab, TabItem, Card } from '@gnosis.pm/safe-react-components';
 import { Container, Grid } from '@material-ui/core';
+import { useSafeAppsSDK } from '@safe-global/safe-apps-react-sdk';
 
 import AppBar from '../components/AppBar';
 import AppFooter from '../components/AppFooter';
 import Daos from '../views/Daos';
 import SummonForm from '../views/SummonForm';
+import ModuleMarket from '../views/ModuleMarket';
 
 const TAB_OPTS: Array<TabItem> = [
   { id: 'listBaal', label: 'DAOs', icon: 'apps' },
   { id: 'newBaal', label: 'New DAO', icon: 'owners' },
+  { id: 'newBaalFromTemplate', label: 'New Module', icon: 'rocket' },
 ];
 
 const SafeApp = (): React.ReactElement => {
@@ -47,6 +49,7 @@ const SafeApp = (): React.ReactElement => {
                 <Daos newBaalEvent={() => setSelectedTab('newBaal')} />
               )}
               {selectedTab === 'newBaal' && <SummonForm resetTab={resetTab} />}
+              {selectedTab === 'newBaalFromTemplate' && <ModuleMarket />}
             </StyledCard>
           </StyledCardContainer>
         </StyledAppContainer>

diff --git a/apps/summon-safe/src/components/RecordsDataTable.tsx b/apps/summon-safe/src/components/RecordsDataTable.tsx
@@ -202,7 +202,7 @@ const RecordsDataTable: React.FC<RecordsProps> = (props: RecordsProps) => {
                 <Grid
                   key={`${id}_${column.field}`}
                   item
-                  xs={gridSize === 0 ? 6 : 4}
+                  xs={columns.length === 1 ? 12 : gridSize === 0 ? 6 : 4}
                 >
                   <InputText
                     id={column.field}

diff --git a/apps/summon-safe/src/components/SwitchText.tsx b/apps/summon-safe/src/components/SwitchText.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Switch, Text } from '@gnosis.pm/safe-react-components';
+
+interface SwitchTextProps {
+  label: string;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const SwitchText: React.FC<SwitchTextProps> = (props: SwitchTextProps) => {
+  const { label, onChange } = props;
+  const [isChecked, toggleSwitch] = useState(false);
+
+  return (
+    <Container>
+      <Text size="lg">{`${label}`}</Text>
+      <Switch
+        checked={isChecked}
+        onChange={() => {
+          onChange(!isChecked);
+          toggleSwitch(!isChecked);
+        }}
+      />
+    </Container>
+  );
+};
+
+export default SwitchText;
diff --git a/apps/summon-safe/src/index.html b/apps/summon-safe/src/index.html
@@ -24,6 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
     <title>Moloch v3 Summoner App</title>
   </head>
   <body>

diff --git a/apps/summon-safe/src/main.tsx b/apps/summon-safe/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from 'styled-components';
 import { theme, Loader, Title } from '@gnosis.pm/safe-react-components';
-import SafeProvider from '@gnosis.pm/safe-apps-react-sdk';
+import SafeProvider from '@safe-global/safe-apps-react-sdk';
 
 import GlobalStyle from './GlobalStyle';
 import App from './app/App';

diff --git a/apps/summon-safe/src/utils/common.ts b/apps/summon-safe/src/utils/common.ts
@@ -104,3 +104,37 @@ export const transformShamans = (response: string | undefined) => {
     }
   );
 };
+
+export const transformAddressData = (fieldId: string) => {
+  return (response: string | undefined) => {
+    if (!isString(response) || response === '') return '';
+    const data = response
+      .split(/[\n|,]/)
+      .map((str) => str.trim())
+      .filter(Boolean);
+    return data.reduce(
+      (acc, rec) => {
+        return {
+          [fieldId]: [...acc[fieldId], rec],
+        };
+      },
+      {
+        [fieldId]: [] as string[],
+      }
+    );
+  };
+};
+
+export const validateAddressData = (data: Record<string, string[]>) => {
+  const keys = Object.keys(data);
+
+  if (
+    !keys.every((key) => {
+      console.log('r', data, key, data[key]);
+      return isAddress(data[key][0]);
+    })
+  ) {
+    return VAL_MSG.ADDRESS_ERR;
+  }
+  return true;
+};