Merge branch 'main' into blanksquare-rebranding

# Conflicts:
#	src/domains/shielder/components/TransactionDetailsModal/Title.tsx

Author: Piotr

src/domains/misc/components/Modal/Modal.tsx

@@ -58,13 +58,13 @@ const Modal = ({
 
   useEffect(() => {
     const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !nonDismissible) {
+      if (e.key === 'Escape' && !nonDismissible && isTopModal) {
         triggerClose();
       }
     };
     document.addEventListener('keydown', handleEsc);
     return () => void document.removeEventListener('keydown', handleEsc);
-  }, [nonDismissible, triggerClose]);
+  }, [nonDismissible, triggerClose, isTopModal]);
 
   const pages = Array.isArray(config) ? config : [config];
 

src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx

@@ -31,15 +31,18 @@ type Props = {
   },
   onContinue: (amount: bigint) => void,
   hasInsufficientFees: boolean,
+  value: string,
+  onValueChange: (value: string) => void,
 };
 
-const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) => {
+const SelectAmountPage = ({ onContinue, token, hasInsufficientFees, value, onValueChange }: Props) => {
   const { address } = useWallet();
   const chainConfig = useChain();
 
-  const [value, setValue] = useState('');
   const [isExceedingBalance, setIsExceedingBalance] = useState(false);
 
+  const amount = token.decimals ? fromDecimals(value, token.decimals) : 0n;
+
   const { fees, totalFee, isLoading } = useShielderFees({ token, operation: 'send' });
 
   const {
@@ -56,7 +59,6 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
     return result > 0n ? result : 0n;
   }, [token, totalFee]);
 
-  const amount = token.decimals ? fromDecimals(value, token.decimals) : 0n;
   const hasNotSelectedAmount = amount <= 0n;
   const isButtonDisabled = hasNotSelectedAmount || isExceedingBalance || hasInsufficientFees;
 
@@ -80,7 +82,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
         maxAmount={maxAmountToSend}
         token={token}
         effectiveAssetValue={value}
-        onAssetValueChange={setValue}
+        onAssetValueChange={onValueChange}
         accountAddress={address}
         onAssetBalanceExceeded={setIsExceedingBalance}
       />

src/domains/shielder/components/TokenList/Modals/SendModal/SendModal.tsx

@@ -26,6 +26,7 @@ const SendModal = ({ token }: Props) => {
   const { address } = useWallet();
   const [addressTo, setAddressTo] = useState('');
   const [amount, setAmount] = useState(0n);
+  const [inputValue, setInputValue] = useState('');
   const { withdraw, isWithdrawing } = useWithdraw();
   const [page, setPage] = useState(0);
   const { close } = useModalControls();
@@ -63,52 +64,49 @@ const SendModal = ({ token }: Props) => {
   return (
     <Modal
       page={page}
-      config={
-        [
-          {
-            title: 'Send',
-            content: (
-              <SelectAccountPage
-                key="select-account"
-                addressTo={addressTo}
-                setAddressTo={setAddressTo}
-                onConfirmClick={onConfirm}
-              />
-            ),
-          },
-          {
-            title: 'Send',
-            content: (
-              <SelectAmountPage
-                key="select-amount"
-                token={token}
-                onContinue={handleSelectAmount}
-                hasInsufficientFees={hasInsufficientFees}
-              />
-            ),
-          },
-          {
-            title: 'Send',
-            content: (
-              <ConfirmPage
-                key="confirmation"
-                amount={amount}
-                token={token}
-                addressTo={validatedAddressTo}
-                onConfirm={handleWithdraw}
-                isLoading={isWithdrawing}
-                buttonLabel={
-                  hasInsufficientFees ?
-                    `Insufficient ${token.symbol} Balance` :
-                    isWithdrawing ? 'Sending privately' : 'Confirm'
-                }
-                addressFrom={address}
-                hasInsufficientFees={hasInsufficientFees}
-              />
-            ),
-          },
-        ]
-      }
+      config={[
+        {
+          title: 'Send',
+          content: (
+            <SelectAccountPage
+              addressTo={addressTo}
+              setAddressTo={setAddressTo}
+              onConfirmClick={onConfirm}
+            />
+          ),
+        },
+        {
+          title: 'Send',
+          content: (
+            <SelectAmountPage
+              token={token}
+              onContinue={handleSelectAmount}
+              hasInsufficientFees={hasInsufficientFees}
+              value={inputValue}
+              onValueChange={setInputValue}
+            />
+          ),
+        },
+        {
+          title: 'Send',
+          content: (
+            <ConfirmPage
+              amount={amount}
+              token={token}
+              addressTo={validatedAddressTo}
+              onConfirm={handleWithdraw}
+              isLoading={isWithdrawing}
+              buttonLabel={
+                hasInsufficientFees ?
+                  `Insufficient ${token.symbol} Balance` :
+                  isWithdrawing ? 'Sending privately' : 'Confirm'
+              }
+              addressFrom={address}
+              hasInsufficientFees={hasInsufficientFees}
+            />
+          ),
+        },
+      ]}
     />
   );
 };

src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx

@@ -31,13 +31,14 @@ type Props = {
   },
   onContinue: (amount: bigint) => void,
   hasInsufficientFees: boolean,
+  value: string,
+  onValueChange: (value: string) => void,
 };
 
-const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) => {
+const SelectAmountPage = ({ onContinue, token, hasInsufficientFees, value, onValueChange }: Props) => {
   const { address } = useWallet();
   const chainConfig = useChain();
 
-  const [value, setValue] = useState('');
   const [isExceedingBalance, setIsExceedingBalance] = useState(false);
 
   const amount = token.decimals ? fromDecimals(value, token.decimals) : 0n;
@@ -85,7 +86,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees }: Props) =>
         maxAmount={maxAmountToShield}
         token={token}
         effectiveAssetValue={value}
-        onAssetValueChange={setValue}
+        onAssetValueChange={onValueChange}
         accountAddress={address}
         onAssetBalanceExceeded={setIsExceedingBalance}
       />

src/domains/shielder/components/TokenList/Modals/ShieldModal/ShieldModal.tsx

@@ -25,6 +25,7 @@ const ShieldModal = ({ token }: Props) => {
   const { address } = useWallet();
   const { close } = useModalControls();
   const [amount, setAmount] = useState(0n);
+  const [inputValue, setInputValue] = useState('');
   const chainConfig = useChain();
   const { shield, isShielding, reset } = useShield();
   const [page, setPage] = useState(0);
@@ -63,40 +64,38 @@ const ShieldModal = ({ token }: Props) => {
     <Modal
       page={page}
       onClose={handleReset}
-      config={
-        [
-          {
-            title: 'Shield',
-            content: (
-              <SelectAmountPage
-                key="select-amount"
-                token={token}
-                onContinue={handleSelectAmount}
-                hasInsufficientFees={hasInsufficientFees}
-              />
-            ),
-          },
-          {
-            title: 'Shield',
-            content: (
-              <ConfirmPage
-                key="confirmation"
-                amount={amount}
-                token={token}
-                onConfirm={() => void handleShield()}
-                isLoading={isShielding}
-                buttonLabel={
-                  hasInsufficientFees ?
-                    `Insufficient ${chainConfig?.nativeCurrency.symbol} Balance` :
-                    isShielding ? 'Shielding' : 'Confirm'
-                }
-                addressFrom={address}
-                hasInsufficientFees={hasInsufficientFees}
-              />
-            ),
-          },
-        ]
-      }
+      config={[
+        {
+          title: 'Shield',
+          content: (
+            <SelectAmountPage
+              token={token}
+              onContinue={handleSelectAmount}
+              hasInsufficientFees={hasInsufficientFees}
+              value={inputValue}
+              onValueChange={setInputValue}
+            />
+          ),
+        },
+        {
+          title: 'Shield',
+          content: (
+            <ConfirmPage
+              amount={amount}
+              token={token}
+              onConfirm={() => void handleShield()}
+              isLoading={isShielding}
+              buttonLabel={
+                hasInsufficientFees ?
+                  `Insufficient ${chainConfig?.nativeCurrency.symbol} Balance` :
+                  isShielding ? 'Shielding' : 'Confirm'
+              }
+              addressFrom={address}
+              hasInsufficientFees={hasInsufficientFees}
+            />
+          ),
+        },
+      ]}
     />
   );
 };

src/domains/shielder/components/TokenList/TokenListItem.tsx

@@ -50,7 +50,7 @@ const TokenListItem = ({ token }: Props) => {
         variables.token.address === token.address &&
         variables.token.isNative === token.isNative;
     },
-  });
+  }) && selectedAccountType === 'public';
 
   const isWithdrawing = !!useIsMutating({
     predicate: mutation => {
@@ -60,7 +60,7 @@ const TokenListItem = ({ token }: Props) => {
         variables.token.address === token.address &&
         variables.token.isNative === token.isNative;
     },
-  });
+  }) && selectedAccountType === 'shielded';
 
   const isProcessing = isShielding || isWithdrawing;
   const processingText = isShielding ? 'Shielding' : isWithdrawing ? 'Sending privately' : undefined;

src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx

@@ -57,6 +57,7 @@ const ActivityDetailsModal = (props: Props) => {
     { isNative: true as const };
 
   const operation = transaction?.type === 'Withdraw' ? 'send' : 'shield';
+
   const { fees, totalFee: estimatedTotalFee } = useShielderFees({
     token,
     operation,

src/domains/shielder/components/TransactionDetailsModal/Title.tsx

@@ -60,10 +60,13 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
-  ${typography.subtitle2};
   
-  & > p {
+  & > :first-of-type {
+    ${typography.subtitle2};
+  };
+
+  & > :last-of-type {
     ${typography.caption2};
-    color:${vars('--color-neutral-foreground-3-rest')}
-  }
+    color:${vars('--color-neutral-foreground-3-rest')}  
+  };
 `;