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

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { isFeatureEnabled } from '../../../helpers/featureFlags';
 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';
@@ -252,6 +253,10 @@ export function AzoriusGovernance(props: ICreationStepProps) {
           />
         </Box>
       )}
+      <GaslessVotingToggleDAOCreate
+        isEnabled={values.essentials.gaslessVoting}
+        onToggle={() => setFieldValue('essentials.gaslessVoting', !values.essentials.gaslessVoting)}
+      />
       <StepButtons
         {...props}
         isEdit={mode === DAOCreateMode.EDIT}

src/components/DaoCreator/formComponents/Multisig.tsx

@@ -3,6 +3,7 @@ import { MinusCircle, Plus } from '@phosphor-icons/react';
 import { Field, FieldAttributes } from 'formik';
 import { useTranslation } from 'react-i18next';
 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';
@@ -11,7 +12,6 @@ import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import useStepRedirect from '../hooks/useStepRedirect';
 import { DAOCreateMode } from './EstablishEssentials';
-
 export function Multisig(props: ICreationStepProps) {
   const { values, errors, setFieldValue, isSubmitting, transactionPending, isSubDAO, mode } = props;
   const { t } = useTranslation('daoCreate');
@@ -151,6 +151,11 @@ export function Multisig(props: ICreationStepProps) {
           </LabelComponent>
         </Flex>
       </StepWrapper>
+
+      <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,176 @@
+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 { Address } from 'viem';
+import { DETAILS_BOX_SHADOW } from '../../constants/common';
+import { isFeatureEnabled } from '../../helpers/featureFlags';
+import { useNativeToken } from '../../hooks/useNativeToken';
+import EtherscanLink from './links/EtherscanLink';
+import Divider from './utils/Divider';
+
+interface GaslessVotingToggleProps {
+  address?: Address;
+  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 { formattedNativeTokenBalance } = useNativeToken();
+
+  if (!isFeatureEnabled('flag_gasless_voting')) return null;
+
+  // @todo: Remove this once we have a real address
+  const address = props.address || '0x01168475F8B9e46F710Ff3654cbD9405e8ADb421';
+
+  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
+      />
+
+      {address && (
+        <Box
+          borderRadius="0.75rem"
+          border="1px solid"
+          borderColor="neutral-3"
+          p="1rem 0.5rem"
+          w="100%"
+        >
+          <EtherscanLink
+            type="address"
+            value={address}
+            isTextLink
+          >
+            <Text as="span">{address}</Text>
+          </EtherscanLink>
+        </Box>
+      )}
+
+      <Flex
+        mt="-0.55rem"
+        justifyContent="space-between"
+      >
+        <Text textStyle="body-small">
+          {t('titleBalance', { ns: 'modals' })}:{' '}
+          <Text
+            as="span"
+            color="neutral-7"
+          >
+            {/* @todo: Should this not be the paymaster balance instead?? */}
+            {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/hooks/useNativeToken.ts

@@ -0,0 +1,25 @@
+import { useFractal } from '../providers/App/AppProvider';
+import { formatCoin } from '../utils';
+import { MOCK_MORALIS_ETH_ADDRESS } from '../utils/address';
+
+export const useNativeToken = () => {
+  const {
+    treasury: { assetsFungible },
+  } = useFractal();
+
+  // @todo: Confirm this works for all networks
+  const nativeToken = assetsFungible.find(
+    asset =>
+      !asset.tokenAddress ||
+      asset.tokenAddress.toLowerCase() === MOCK_MORALIS_ETH_ADDRESS.toLowerCase(),
+  );
+
+  const formattedNativeTokenBalance = nativeToken
+    ? formatCoin(nativeToken?.balance, true, nativeToken?.decimals, nativeToken?.symbol)
+    : null;
+
+  return {
+    nativeToken,
+    formattedNativeTokenBalance,
+  };
+};

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/types/createDAO.ts

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