Gasless voting UI

src/components/DaoCreator/constants.ts

@@ -14,6 +14,7 @@ export const initialState: CreatorFormState = {
     daoName: '',
     governance: GovernanceType.AZORIUS_ERC20,
     snapshotENS: '',
+    gaslessVoting: false,
   },
   erc20Token: {
     tokenCreationType: TokenCreationType.IMPORTED,

src/components/DaoCreator/formComponents/AzoriusGovernance.tsx

@@ -12,8 +12,10 @@ import { WarningCircle } from '@phosphor-icons/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isFeatureEnabled } from '../../../helpers/featureFlags';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { FractalModuleType, ICreationStepProps, VotingStrategyType } from '../../../types';
+import { GaslessVotingToggleDAOCreate } from '../../ui/GaslessVotingToggle';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { CustomNonceInput } from '../../ui/forms/CustomNonceInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
@@ -100,6 +102,8 @@ export function AzoriusGovernance(props: ICreationStepProps) {
     setFieldValue('azorius.executionPeriod', { bigintValue: minutes, value: minutes.toString() });
   }, [setFieldValue, executionPeriodDays]);
 
+  const { gaslessVotingSupported } = useNetworkConfigStore();
+
   return (
     <>
       <StepWrapper
@@ -252,6 +256,14 @@ export function AzoriusGovernance(props: ICreationStepProps) {
           />
         </Box>
       )}
+      {gaslessVotingSupported && (
+        <GaslessVotingToggleDAOCreate
+          isEnabled={values.essentials.gaslessVoting}
+          onToggle={() =>
+            setFieldValue('essentials.gaslessVoting', !values.essentials.gaslessVoting)
+          }
+        />
+      )}
       <StepButtons
         {...props}
         isEdit={mode === DAOCreateMode.EDIT}

src/components/DaoCreator/formComponents/Multisig.tsx

@@ -2,7 +2,9 @@ import { Text, Flex, Grid, IconButton, Icon, Button } from '@chakra-ui/react';
 import { MinusCircle, Plus } from '@phosphor-icons/react';
 import { Field, FieldAttributes } from 'formik';
 import { useTranslation } from 'react-i18next';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { ICreationStepProps } from '../../../types';
+import { GaslessVotingToggleDAOCreate } from '../../ui/GaslessVotingToggle';
 import { AddressInput } from '../../ui/forms/EthAddressInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
 import LabelWrapper from '../../ui/forms/LabelWrapper';
@@ -31,6 +33,8 @@ export function Multisig(props: ICreationStepProps) {
     return updatedNum !== num;
   };
 
+  const { gaslessVotingSupported } = useNetworkConfigStore();
+
   return (
     <>
       <StepWrapper
@@ -151,6 +155,15 @@ export function Multisig(props: ICreationStepProps) {
           </LabelComponent>
         </Flex>
       </StepWrapper>
+
+      {gaslessVotingSupported && (
+        <GaslessVotingToggleDAOCreate
+          isEnabled={values.essentials.gaslessVoting}
+          onToggle={() =>
+            setFieldValue('essentials.gaslessVoting', !values.essentials.gaslessVoting)
+          }
+        />
+      )}
       <StepButtons
         {...props}
         isEdit={mode === DAOCreateMode.EDIT}

src/components/ui/GaslessVotingToggle.tsx

@@ -0,0 +1,182 @@
+import { Box, Text, HStack, Switch, Flex, Icon, Button } from '@chakra-ui/react';
+import { GasPump, WarningCircle } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+import { useBalance } from 'wagmi';
+import { DETAILS_BOX_SHADOW } from '../../constants/common';
+import { isFeatureEnabled } from '../../helpers/featureFlags';
+import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
+import { formatCoin } from '../../utils';
+import EtherscanLink from './links/EtherscanLink';
+import Divider from './utils/Divider';
+
+interface GaslessVotingToggleProps {
+  isEnabled: boolean;
+  onToggle: () => void;
+}
+
+function GaslessVotingToggleContent({
+  isEnabled,
+  onToggle,
+  isSettings,
+}: GaslessVotingToggleProps & { isSettings?: boolean }) {
+  const { t } = useTranslation('daoCreate');
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="1.5rem"
+      w="100%"
+    >
+      <HStack
+        justify="space-between"
+        width="100%"
+        alignItems="flex-start"
+      >
+        <Flex
+          flexDirection="column"
+          gap="0.25rem"
+        >
+          <Text textStyle={isSettings ? 'heading-small' : 'helper-text'}>
+            {isSettings
+              ? t('gaslessVotingLabelSettings', { ns: 'daoEdit' })
+              : t('gaslessVotingLabel')}
+          </Text>
+          <Text
+            textStyle={isSettings ? 'label-large' : 'helper-text'}
+            color="neutral-7"
+            w="17.25rem"
+          >
+            {isSettings
+              ? t('gaslessVotingDescriptionSettings', { ns: 'daoEdit' })
+              : t('gaslessVotingDescription')}
+          </Text>
+        </Flex>
+        <Switch
+          size="md"
+          isChecked={isEnabled}
+          onChange={() => onToggle()}
+          variant="secondary"
+        />
+      </HStack>
+    </Box>
+  );
+}
+
+export function GaslessVotingToggleDAOCreate(props: GaslessVotingToggleProps) {
+  const { t } = useTranslation('daoCreate');
+
+  if (!isFeatureEnabled('flag_gasless_voting')) return null;
+
+  return (
+    <Box
+      borderRadius="0.75rem"
+      bg="neutral-2"
+      p="1.5rem"
+      display="flex"
+      flexDirection="column"
+      alignItems="flex-start"
+      gap="1.5rem"
+      boxShadow={DETAILS_BOX_SHADOW}
+      mt={2}
+    >
+      <GaslessVotingToggleContent {...props} />
+
+      <Box
+        p="1rem"
+        bg="neutral-3"
+        borderRadius="0.75rem"
+      >
+        <Flex alignItems="center">
+          <Icon
+            as={WarningCircle}
+            color="lilac-0"
+            width="1.5rem"
+            height="1.5rem"
+          />
+          <Text
+            color="lilac-0"
+            marginLeft="1rem"
+          >
+            {t('gaslessVotingGettingStarted')}
+          </Text>
+        </Flex>
+      </Box>
+    </Box>
+  );
+}
+
+export function GaslessVotingToggleDAOSettings(props: GaslessVotingToggleProps) {
+  const { t } = useTranslation('daoEdit');
+  const { safe } = useDaoInfoStore();
+
+  // @todo: Use the paymaster address here.
+  const { data: balance } = useBalance({ address: safe?.address });
+
+  if (!isFeatureEnabled('flag_gasless_voting')) return null;
+  if (!safe) return null;
+
+  const formattedNativeTokenBalance =
+    balance && formatCoin(balance.value, true, balance.decimals, balance.symbol);
+
+  // @todo: Retrieve the paymaster address here. Replace safe.address with the paymaster address.
+  const gasTankAddress = safe.address;
+
+  return (
+    <Box
+      gap="1.5rem"
+      display="flex"
+      flexDirection="column"
+    >
+      <Divider
+        my="1rem"
+        w={{ base: 'calc(100% + 1.5rem)', md: 'calc(100% + 3rem)' }}
+        mx={{ base: '-0.75rem', md: '-1.5rem' }}
+      />
+
+      <GaslessVotingToggleContent
+        {...props}
+        isSettings
+      />
+
+      {gasTankAddress && (
+        <Box
+          borderRadius="0.75rem"
+          border="1px solid"
+          borderColor="neutral-3"
+          p="1rem 0.5rem"
+          w="100%"
+        >
+          <EtherscanLink
+            type="address"
+            value={gasTankAddress}
+            isTextLink
+          >
+            <Text as="span">{gasTankAddress}</Text>
+          </EtherscanLink>
+        </Box>
+      )}
+
+      <Flex
+        mt="-0.55rem"
+        justifyContent="space-between"
+      >
+        <Text textStyle="body-small">
+          {t('titleBalance', { ns: 'modals' })}:{' '}
+          <Text
+            as="span"
+            color="neutral-7"
+          >
+            {formattedNativeTokenBalance}
+          </Text>
+        </Text>
+        <Button
+          variant="secondary"
+          leftIcon={<Icon as={GasPump} />}
+        >
+          {t('addGas')}
+        </Button>
+      </Flex>
+    </Box>
+  );
+}

src/helpers/featureFlags.ts

@@ -1,4 +1,4 @@
-export const FEATURE_FLAGS = ['flag_dev', 'flag_yelling'] as const;
+export const FEATURE_FLAGS = ['flag_dev', 'flag_gasless_voting', 'flag_yelling'] as const;
 
 export type FeatureFlagKeys = typeof FEATURE_FLAGS;
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[number];

src/i18n/locales/en/daoCreate.json

@@ -104,5 +104,8 @@
   "networks": "Networks",
   "networkDescription": "What network would you like to deploy this DAO on?",
   "attachFractalModuleDescription": "This setting controls whether Parent DAO will be able to execute arbitrary transactions on Child DAO bypassing voting process on Child DAO.",
-  "fractalModuleAttachedDescription": "This setting can not be modified as Fractal Module already attached to the DAO."
+  "fractalModuleAttachedDescription": "This setting can not be modified as Fractal Module already attached to the DAO.",
+  "gaslessVotingLabel": "Gasless Voting",
+  "gaslessVotingDescription": "Sponsor gas for votes and proposals.",
+  "gaslessVotingGettingStarted": "To get you started, we're covering your first 0.1 ETH of gas fees. You can top up your balance in your DAO settings, or by sending ETH to this address directly in your wallet."
 }

src/i18n/locales/en/daoEdit.json

@@ -1,3 +1,6 @@
 {
-  "cannotModifyGovernance": "You do not have permissions to modify this Safe's governance."
+  "cannotModifyGovernance": "You do not have permissions to modify this Safe's governance.",
+  "gaslessVotingLabelSettings": "Sponsor Gas",
+  "gaslessVotingDescriptionSettings": "Fund transaction fees for DAO voters from a shared DAO gas tank.",
+  "addGas": "Add Gas"
 }

src/pages/dao/settings/general/SafeGeneralSettingsPage.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { encodeFunctionData, zeroAddress } from 'viem';
 import { SettingsContentBox } from '../../../../components/SafeSettings/SettingsContentBox';
+import { GaslessVotingToggleDAOSettings } from '../../../../components/ui/GaslessVotingToggle';
 import { InputComponent } from '../../../../components/ui/forms/InputComponent';
 import { BarLoader } from '../../../../components/ui/loaders/BarLoader';
 import NestedPageHeader from '../../../../components/ui/page/Header/NestedPageHeader';
@@ -205,6 +206,13 @@ export function SafeGeneralSettingsPage() {
               </Button>
             </>
           )}
+
+          <GaslessVotingToggleDAOSettings
+            isEnabled={false}
+            onToggle={function (): void {
+              throw new Error('Function not implemented.');
+            }}
+          />
         </SettingsContentBox>
       ) : (
         <Flex

src/providers/NetworkConfig/networks/base.ts

@@ -110,6 +110,7 @@ export const baseConfig: NetworkConfig = {
     GovernanceType.AZORIUS_ERC20,
     GovernanceType.AZORIUS_ERC721,
   ],
+  gaslessVotingSupported: false,
 };
 
 export default baseConfig;

src/providers/NetworkConfig/networks/mainnet.ts

@@ -116,6 +116,7 @@ export const mainnetConfig: NetworkConfig = {
     GovernanceType.AZORIUS_ERC20,
     GovernanceType.AZORIUS_ERC721,
   ],
+  gaslessVotingSupported: true,
 };
 
 export default mainnetConfig;

src/providers/NetworkConfig/networks/optimism.ts

@@ -110,6 +110,7 @@ export const optimismConfig: NetworkConfig = {
     GovernanceType.AZORIUS_ERC20,
     GovernanceType.AZORIUS_ERC721,
   ],
+  gaslessVotingSupported: false,
 };
 
 export default optimismConfig;

src/providers/NetworkConfig/networks/polygon.ts

@@ -110,6 +110,7 @@ export const polygonConfig: NetworkConfig = {
     GovernanceType.AZORIUS_ERC20,
     GovernanceType.AZORIUS_ERC721,
   ],
+  gaslessVotingSupported: false,
 };
 
 export default polygonConfig;

src/providers/NetworkConfig/networks/sepolia.ts

@@ -110,6 +110,7 @@ export const sepoliaConfig: NetworkConfig = {
     GovernanceType.AZORIUS_ERC20,
     GovernanceType.AZORIUS_ERC721,
   ],
+  gaslessVotingSupported: true,
 };
 
 export default sepoliaConfig;

src/types/createDAO.ts

@@ -68,6 +68,7 @@ export type DAOEssentials = {
   daoName: string;
   governance: GovernanceType;
   snapshotENS: string;
+  gaslessVoting: boolean;
 };
 
 export type DAOGovernorERC20Token<T = bigint> = {

src/types/network.ts

@@ -79,4 +79,5 @@ export type NetworkConfig = {
     };
   };
   createOptions: GovernanceType[];
+  gaslessVotingSupported: boolean;
 };