Refactor to use view transitions for card animations

app/features/accounts/account-hooks.ts

@@ -166,8 +166,20 @@ export function useAccounts<T extends AccountType = AccountType>(select?: {
       (data: Account[]) => {
         const extendedData = AccountService.getExtendedAccounts(user, data);
 
-        if (!currency && !type && isOnline === undefined) {
-          return extendedData as ExtendedAccount<T>[];
+        if (
+          !currency &&
+          !type &&
+          isOnline === undefined &&
+          !excludeClosedLoopAccounts &&
+          !onlyIncludeClosedLoopAccounts
+        ) {
+          return extendedData
+            .slice()
+            .sort(
+              (a, b) =>
+                new Date(a.createdAt).getTime() -
+                new Date(b.createdAt).getTime(),
+            ) as ExtendedAccount<T>[];
         }
 
         const filteredData = extendedData.filter(
@@ -193,7 +205,12 @@ export function useAccounts<T extends AccountType = AccountType>(select?: {
           },
         );
 
-        return filteredData;
+        return filteredData
+          .slice()
+          .sort(
+            (a, b) =>
+              new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+          );
       },
       [
         currency,

app/features/accounts/account-repository.ts

@@ -55,7 +55,7 @@ export class AccountRepository {
    */
   async get(id: string, options?: Options): Promise<Account> {
     // Currently we limit the number of proofs returned to 6000
-    // We will need to handle that somehow later (e.g. require use to swap when the limit is reaching)
+    // We will need to handle that somehow later (e.g. require user to swap when the limit is reaching)
     const query = this.db
       .from('accounts')
       .select('*, cashu_proofs(*)')
@@ -82,7 +82,7 @@ export class AccountRepository {
    */
   async getAll(userId: string, options?: Options): Promise<Account[]> {
     // Currently we limit the number of proofs returned to 6000
-    // We will need to handle that somehow later (e.g. require use to swap when the limit is reaching)
+    // We will need to handle that somehow later (e.g. require user to swap when the limit is reaching)
     const query = this.db
       .from('accounts')
       .select('*, cashu_proofs(*)')

app/features/gift-cards/add-gift-card.tsx

@@ -10,42 +10,31 @@ import {
 import { Button } from '~/components/ui/button';
 import { WalletCard, WalletCardBackground } from '~/components/wallet-card';
 import { useAddCashuAccount } from '~/features/accounts/account-hooks';
-import { NotFoundError } from '~/features/shared/error';
 import { useToast } from '~/hooks/use-toast';
-import type { Currency } from '~/lib/money/types';
 import { LinkWithViewTransition } from '~/lib/transitions';
-import { DISCOVER_MINTS } from './use-discover-cards';
+import type { GiftCardInfo } from './use-discover-cards';
 
 type AddGiftCardProps = {
-  mintUrl: string;
-  currency: Currency;
+  giftCard: GiftCardInfo;
 };
 
 /**
  * Add Gift Card component - displays the full size gift card image
  * and an "Add Card" button to add the discover card to the user's wallet.
  */
-export function AddGiftCard({ mintUrl, currency }: AddGiftCardProps) {
+export function AddGiftCard({ giftCard }: AddGiftCardProps) {
   const [isAdding, setIsAdding] = useState(false);
   const addAccount = useAddCashuAccount();
   const navigate = useNavigate();
   const { toast } = useToast();
 
-  const mint = DISCOVER_MINTS.find(
-    (m) => m.url === mintUrl && m.currency === currency,
-  );
-
-  if (!mint) {
-    throw new NotFoundError('Card not found');
-  }
-
   const handleAddCard = async () => {
     setIsAdding(true);
     try {
       await addAccount({
-        name: mint.name,
-        currency: mint.currency,
-        mintUrl: mint.url,
+        name: giftCard.name,
+        currency: giftCard.currency,
+        mintUrl: giftCard.url,
         type: 'cashu',
       });
       toast({
@@ -85,7 +74,7 @@ export function AddGiftCard({ mintUrl, currency }: AddGiftCardProps) {
           className="absolute inset-0 mx-auto flex max-w-sm items-center justify-center px-4"
         >
           <WalletCard className="w-full max-w-none">
-            <WalletCardBackground src={mint.image} alt={mint.name} />
+            <WalletCardBackground src={giftCard.image} alt={giftCard.name} />
           </WalletCard>
         </LinkWithViewTransition>
       </PageContent>

app/features/gift-cards/card-stack-constants.ts

@@ -0,0 +1,6 @@
+import { CARD_ASPECT_RATIO, CARD_SIZES } from '~/components/wallet-card';
+
+export const VERTICAL_CARD_OFFSET_IN_STACK = 52;
+
+export const CARD_WIDTH = CARD_SIZES.default.width;
+export const CARD_HEIGHT = Math.round(CARD_WIDTH / CARD_ASPECT_RATIO);