Create example templates for transfer and Sablier stream

src/components/ProposalBuilder/ProposalActionCard.tsx

@@ -6,6 +6,7 @@ import PencilWithLineIcon from '../../assets/theme/custom/icons/PencilWithLineIc
 import { useGetAccountName } from '../../hooks/utils/useGetAccountName';
 import { useFractal } from '../../providers/App/AppProvider';
 import { useProposalActionsStore } from '../../store/actions/useProposalActionsStore';
+import { TokenBalance } from '../../types';
 import { CreateProposalAction, ProposalActionType } from '../../types/proposalBuilder';
 import { Card } from '../ui/cards/Card';
 import { SendAssetsData } from '../ui/modals/SendAssetsModal';
@@ -57,6 +58,57 @@ export function SendAssetsAction({
   );
 }
 
+export function AirdropAction({
+  index,
+  totalAmount,
+  recipientsCount,
+  onRemove,
+  asset,
+}: {
+  index: number;
+  totalAmount: bigint;
+  recipientsCount: number;
+  onRemove: (index: number) => void;
+  asset: TokenBalance;
+}) {
+  const { t } = useTranslation('common');
+  return (
+    <Card my="0.5rem">
+      <Flex justifyContent="space-between">
+        <Flex
+          alignItems="center"
+          gap="0.5rem"
+        >
+          <Icon
+            as={ArrowsDownUp}
+            w="1.5rem"
+            h="1.5rem"
+            color="lilac-0"
+          />
+          <Text>{t('airdrop')}</Text>
+          <Text color="lilac-0">
+            {formatUnits(totalAmount, asset.decimals)} {asset.symbol}
+          </Text>
+          <Text>{t('to').toLowerCase()}</Text>
+          <Text color="lilac-0">
+            {recipientsCount} {t('recipients')}
+          </Text>
+        </Flex>
+        <Button
+          color="red-0"
+          variant="tertiary"
+          size="sm"
+          onClick={() => {
+            onRemove(index);
+          }}
+        >
+          <Icon as={Trash} />
+        </Button>
+      </Flex>
+    </Card>
+  );
+}
+
 export function ProposalActionCard({
   action,
   index,
@@ -99,6 +151,31 @@ export function ProposalActionCard({
         onRemove={removeAction}
       />
     );
+  } else if (action.actionType === ProposalActionType.AIRDROP) {
+    const totalAmountString = action.transactions[1].parameters[2].value?.slice(1, -1);
+    const totalAmount = BigInt(
+      totalAmountString?.split(',').reduce((acc, curr) => acc + BigInt(curr), 0n) || '0',
+    );
+    const recipientsCount = action.transactions[1].parameters[1].value?.split(',').length || 0;
+
+    const actionAsset = assetsFungible.find(
+      asset => getAddress(asset.tokenAddress) === action.transactions[0].targetAddress,
+    );
+
+    if (!actionAsset) {
+      return null;
+    }
+
+    return (
+      <AirdropAction
+        key={index}
+        index={index}
+        asset={actionAsset}
+        totalAmount={totalAmount}
+        recipientsCount={recipientsCount}
+        onRemove={removeAction}
+      />
+    );
   }
 
   const isAddAction = action.actionType === ProposalActionType.ADD;

src/components/ProposalTemplates/ExampleTemplateCard.tsx

@@ -0,0 +1,46 @@
+import { Avatar, Flex, Text } from '@chakra-ui/react';
+// import { useCanUserCreateProposal } from '../../hooks/utils/useCanUserSubmitProposal';
+import ContentBox from '../ui/containers/ContentBox';
+import Markdown from '../ui/proposal/Markdown';
+
+type ExampleTemplateCardProps = {
+  title: string;
+  description: string;
+  onProposalTemplateClick: () => void;
+};
+
+export default function ExampleTemplateCard({
+  title,
+  description,
+  onProposalTemplateClick,
+}: ExampleTemplateCardProps) {
+  // const { canUserCreateProposal } = useCanUserCreateProposal();
+
+  return (
+    <ContentBox
+      containerBoxProps={{ flex: '0 0 calc(33.333333% - 0.6666666rem)', my: '0' }}
+      onClick={onProposalTemplateClick}
+    >
+      <Flex justifyContent="space-between">
+        <Avatar
+          size="lg"
+          w="50px"
+          h="50px"
+          name={title}
+          borderRadius={0}
+          getInitials={(_title: string) => _title.slice(0, 2)}
+          textStyle="heading-large"
+          color="white-0"
+        />
+      </Flex>
+      <Text
+        textStyle="heading-small"
+        color="white-0"
+        my="0.5rem"
+      >
+        {title}
+      </Text>
+      <Markdown content={description} />
+    </ContentBox>
+  );
+}