🚧

src/app/(app)/send-funds/processing-transaction.tsx

@@ -0,0 +1 @@
+export { default } from "../../../components/home/ProcessingTransaction";

src/components/home/HomeActions.tsx

@@ -1,15 +1,35 @@
+import { exaPluginAddress } from "@exactly/common/generated/chain";
 import { ArrowDownToLine, ArrowUpRight } from "@tamagui/lucide-icons";
 import { router } from "expo-router";
 import React from "react";
 import { PixelRatio } from "react-native";
 import { ms } from "react-native-size-matters";
+import { zeroAddress } from "viem";
+import { useAccount } from "wagmi";
 
+import { useReadExaPluginProposals } from "../../generated/contracts";
+import queryClient from "../../utils/queryClient";
 import Button from "../shared/Button";
 import Text from "../shared/Text";
 import View from "../shared/View";
 
 export default function HomeActions() {
   const fontScale = PixelRatio.getFontScale();
+  const { address } = useAccount();
+
+  const { data: proposal } = useReadExaPluginProposals({
+    address: exaPluginAddress,
+    args: [address ?? zeroAddress],
+  });
+
+  const handleSend = () => {
+    if (proposal && proposal[0] > 0n) {
+      queryClient.setQueryData(["proposal", "withdrawal"], proposal);
+      router.push(`/send-funds/processing-transaction`);
+    } else {
+      router.push(`/send-funds`);
+    }
+  };
   return (
     <View flexDirection="row" display="flex" gap="$s4" justifyContent="center" alignItems="center">
       <Button
@@ -37,7 +57,7 @@ export default function HomeActions() {
         main
         spaced
         onPress={() => {
-          router.push("/send-funds");
+          handleSend();
         }}
         iconAfter={<ArrowUpRight size={ms(18) * fontScale} color="$interactiveOnBaseBrandSoft" />}
         backgroundColor="$interactiveBaseBrandSoftDefault"

src/components/home/ProcessingTransaction.tsx

@@ -0,0 +1,98 @@
+import { WAD } from "@exactly/lib";
+import { Hourglass } from "@tamagui/lucide-icons";
+import { useQuery } from "@tanstack/react-query";
+import { LinearGradient } from "expo-linear-gradient";
+import { router } from "expo-router";
+import React from "react";
+import { ms } from "react-native-size-matters";
+import { ScrollView, styled, useTheme, XStack, YStack } from "tamagui";
+import type { Address } from "viem";
+import { formatUnits, zeroAddress } from "viem";
+
+import assetLogos from "../../utils/assetLogos";
+import shortenAddress from "../../utils/shortenAddress";
+import useMarketAccount from "../../utils/useMarketAccount";
+import ActionButton from "../shared/ActionButton";
+import AssetLogo from "../shared/AssetLogo";
+import SafeView from "../shared/SafeView";
+import Spinner from "../shared/Spinner";
+import Text from "../shared/Text";
+import View from "../shared/View";
+
+export default function ProcessingTransation() {
+  type ProposalType = [bigint, Address, Address, bigint];
+  const { data: proposal } = useQuery<ProposalType>({
+    queryKey: ["proposal", "withdrawal"],
+  });
+  const { market } = useMarketAccount(proposal?.[1]);
+
+  const theme = useTheme();
+
+  if (!proposal) return null;
+
+  const assetName = market?.symbol.slice(3) === "WETH" ? "ETH" : market?.symbol.slice(3);
+  const amount = formatUnits(proposal[0], market?.decimals ?? 0);
+  const usdValue = formatUnits((proposal[0] * (market?.usdPrice ?? 0n)) / WAD, market?.decimals ?? 0);
+
+  return (
+    <View fullScreen backgroundColor="$backgroundSoft">
+      <StyledGradient
+        locations={[0.5, 1]}
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        height={220}
+        opacity={0.8}
+        colors={[theme.backgroundMild.val, theme.backgroundSoft.val]}
+      />
+      <SafeView backgroundColor="transparent">
+        <View fullScreen padded>
+          <View fullScreen justifyContent="space-between">
+            <YStack gap="$s7" paddingBottom="$s9">
+              <XStack justifyContent="center" alignItems="center">
+                <Spinner />
+              </XStack>
+              <YStack gap="$s4_5" justifyContent="center" alignItems="center">
+                <Text secondary body>
+                  Sending to
+                  <Text emphasized primary body>
+                    &nbsp; {shortenAddress(proposal[2], 8, 8)}
+                  </Text>
+                </Text>
+                <Text title primary color="$uiNeutralPrimary">
+                  {Number(usdValue).toLocaleString(undefined, {
+                    style: "currency",
+                    currency: "USD",
+                    currencyDisplay: "narrowSymbol",
+                  })}
+                </Text>
+
+                <XStack alignItems="center" gap="$s3">
+                  <Text emphasized subHeadline color="$uiNeutralSecondary">
+                    {Number(amount).toLocaleString(undefined, { maximumFractionDigits: 8, minimumFractionDigits: 0 })}
+                    &nbsp; {assetName}
+                  </Text>
+                  <AssetLogo uri={assetLogos[assetName as keyof typeof assetLogos]} width={ms(16)} height={ms(16)} />
+                </XStack>
+              </YStack>
+            </YStack>
+
+            <ActionButton
+              marginTop="$s4"
+              marginBottom="$s5"
+              onPress={() => {
+                router.back();
+              }}
+              iconAfter={<Hourglass color="$interactiveOnBaseBrandDefault" />}
+            >
+              Wait for completion
+            </ActionButton>
+          </View>
+        </View>
+      </SafeView>
+    </View>
+  );
+}
+
+const StyledGradient = styled(LinearGradient, {});