Wallet txn activities (MystenLabs#7437)

Wallet activities update. 
- Update  to match the latest design,
- I moved the from redux to react query
- Note (using the old icons)



https://user-images.githubusercontent.com/8676844/215287199-5e1d03fd-550b-41e0-a75b-4207d3bff043.mov


<img width="409" alt="Screenshot 2023-01-30 at 10 35 17 AM"
src="https://user-images.githubusercontent.com/8676844/215531395-1bb12f2a-8231-435a-9fa9-d1fd0b9a306a.png">

<img width="436" alt="Screenshot 2023-01-31 at 10 04 45 AM"
src="https://user-images.githubusercontent.com/8676844/215797180-8ce38727-278d-47d7-a058-e03e8dfff15c.png">

apps/wallet/src/ui/app/components/nft-display/NftImage.tsx

@@ -19,8 +19,10 @@ const nftImageStyles = cva('overflow-hidden', {
         borderRadius: {
             md: 'rounded-md',
             xl: 'rounded-xl',
+            sm: 'rounded',
         },
         size: {
+            xs: 'w-10 h-10',
             sm: 'w-12 h-12',
             md: 'w-36 h-36',
             lg: 'w-44 h-44',
@@ -45,6 +47,7 @@ export interface NftImageProps extends VariantProps<typeof nftImageStyles> {
     showLabel?: boolean;
 }
 
+//TODO: create a fallback image for broken images urls
 export function NftImage({
     src,
     name,
@@ -63,7 +66,7 @@ export function NftImage({
             {src ? (
                 <img
                     className={imgCls}
-                    src={src}
+                    src={src.replace(/^ipfs:\/\//, 'https://ipfs.io/ipfs/')}
                     alt={name || 'NFT'}
                     title={title}
                 />

apps/wallet/src/ui/app/components/receipt-card/DelegationObjectCard.tsx

@@ -0,0 +1,12 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { TxnAddress } from '_components/receipt-card/TxnAddress';
+
+export function DelegationObjectCard({
+    senderAddress,
+}: {
+    senderAddress: string;
+}) {
+    return <TxnAddress address={senderAddress} label="From" />;
+}

apps/wallet/src/ui/app/components/receipt-card/ReceiptCardBg.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+
+import type { ReactNode } from 'react';
+
+export function ReceiptCardBg({
+    status,
+    children,
+}: {
+    status: boolean;
+    children: ReactNode;
+}) {
+    return (
+        <div
+            className={cl(
+                "p-5 pb-0 rounded-t-lg flex flex-col item-center after:content-[''] after:bg-[url('_assets/images/receipt_bottom.svg')] after:w-[320px] after:h-5 after:ml-[-20px] after:top-4 after:-mt-6 after:relative divide-y divide-solid divide-steel/20 divide-x-0 gap-3.5",
+                status ? 'bg-success-light' : 'bg-issue-light'
+            )}
+        >
+            {children}
+        </div>
+    );
+}