feat: Add MPToken issuance destroy and set features

packages/extension/package.json

@@ -18,6 +18,7 @@
     "@mui/icons-material": "^6.3.0",
     "@mui/material": "^6.3.0",
     "@sentry/react": "^7.117.0",
+    "@tanstack/react-query": "^5.90.12",
     "copy-to-clipboard": "^3.3.3",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.2.0",

packages/extension/src/components/molecules/MPTokenDisplay/MPTokenDisplay.tsx

@@ -0,0 +1,123 @@
+import { CSSProperties, FC, useMemo } from 'react';
+
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import TokenIcon from '@mui/icons-material/Token';
+import { Avatar, Paper, Tooltip, Typography } from '@mui/material';
+
+import { SECONDARY_GRAY } from '../../../constants';
+import { MPTokenDisplayData } from '../../../types/mptoken.types';
+import { formatToken } from '../../../utils';
+import { truncateMPTIssuanceId } from '../../../utils/fetchMPTokenData';
+import { IconTextButton } from '../../atoms/IconTextButton';
+
+export interface MPTokenDisplayProps {
+  mpToken: MPTokenDisplayData;
+  onRemoveClick?: () => void;
+  style?: CSSProperties;
+}
+
+const MAX_NAME_LENGTH = 12;
+const MAX_ISSUER_LENGTH = 16;
+
+export const MPTokenDisplay: FC<MPTokenDisplayProps> = ({ mpToken, onRemoveClick, style }) => {
+  const displayName = useMemo(() => {
+    // Priority: ticker > name > truncated issuance ID
+    const name = mpToken.ticker || mpToken.name;
+    if (name) {
+      return name.length > MAX_NAME_LENGTH ? `${name.slice(0, MAX_NAME_LENGTH)}...` : name;
+    }
+    return truncateMPTIssuanceId(mpToken.mptIssuanceId, 6, 4);
+  }, [mpToken.ticker, mpToken.name, mpToken.mptIssuanceId]);
+
+  const fullName = useMemo(() => {
+    return mpToken.ticker || mpToken.name || mpToken.mptIssuanceId;
+  }, [mpToken.ticker, mpToken.name, mpToken.mptIssuanceId]);
+
+  const displayIssuer = useMemo(() => {
+    if (mpToken.issuerName) {
+      return mpToken.issuerName.length > MAX_ISSUER_LENGTH
+        ? `${mpToken.issuerName.slice(0, MAX_ISSUER_LENGTH)}...`
+        : mpToken.issuerName;
+    }
+    if (mpToken.issuer) {
+      return mpToken.issuer.length > MAX_ISSUER_LENGTH
+        ? `${mpToken.issuer.slice(0, MAX_ISSUER_LENGTH)}...`
+        : mpToken.issuer;
+    }
+    return undefined;
+  }, [mpToken.issuerName, mpToken.issuer]);
+
+  const fullIssuer = useMemo(() => {
+    return mpToken.issuerName || mpToken.issuer || '';
+  }, [mpToken.issuerName, mpToken.issuer]);
+
+  return (
+    <Paper
+      elevation={5}
+      style={{
+        padding: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '10px',
+        ...style
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {mpToken.iconUrl ? (
+          <Avatar src={mpToken.iconUrl} alt={displayName} sx={{ width: 32, height: 32 }} />
+        ) : (
+          <Avatar sx={{ width: 32, height: 32, bgcolor: 'primary.main' }}>
+            <TokenIcon fontSize="small" />
+          </Avatar>
+        )}
+        <div style={{ marginLeft: '10px' }}>
+          <Tooltip
+            title={fullName}
+            placement="top"
+            arrow
+            disableHoverListener={fullName === displayName}
+          >
+            <Typography>
+              {displayName}
+              {displayIssuer && (
+                <Tooltip
+                  title={fullIssuer}
+                  placement="top"
+                  arrow
+                  disableHoverListener={fullIssuer === displayIssuer}
+                >
+                  <Typography
+                    component="span"
+                    variant="caption"
+                    style={{
+                      marginLeft: '5px',
+                      fontSize: 'smaller',
+                      fontStyle: 'italic',
+                      color: SECONDARY_GRAY
+                    }}
+                  >
+                    by {displayIssuer}
+                  </Typography>
+                </Tooltip>
+              )}
+            </Typography>
+          </Tooltip>
+          <Typography variant="body2" style={{ color: SECONDARY_GRAY }}>
+            {formatToken(mpToken.formattedBalance, mpToken.ticker || mpToken.name || 'MPT')}
+          </Typography>
+        </div>
+      </div>
+      {onRemoveClick && mpToken.canRemove && (
+        <Tooltip title="Remove MPToken authorization" placement="top" arrow>
+          <IconTextButton onClick={onRemoveClick}>
+            <DeleteOutlineIcon style={{ color: SECONDARY_GRAY }} fontSize="small" />
+            <Typography variant="body2" style={{ color: SECONDARY_GRAY, marginLeft: '3px' }}>
+              Remove
+            </Typography>
+          </IconTextButton>
+        </Tooltip>
+      )}
+    </Paper>
+  );
+};

packages/extension/src/components/molecules/MPTokenDisplay/index.ts

@@ -0,0 +1 @@
+export * from './MPTokenDisplay';

packages/extension/src/components/molecules/index.ts

@@ -4,6 +4,7 @@ export * from './TransactionHeader';
 export * from './DataCard';
 export * from './InformationMessage';
 export * from './InsufficientFundsWarning';
+export * from './MPTokenDisplay';
 export * from './NetworkIndicator';
 export * from './NFTCard';
 export * from './RawTransaction';

packages/extension/src/components/organisms/MPTokenListing/MPTokenListing.tsx

@@ -0,0 +1,96 @@
+import { FC, useCallback, useEffect, useState } from 'react';
+
+import { Typography } from '@mui/material';
+import * as Sentry from '@sentry/react';
+import { useNavigate } from 'react-router-dom';
+
+import { MPTOKEN_REMOVE_PATH, SECONDARY_GRAY, STORAGE_MESSAGING_KEY } from '../../../constants';
+import { useNetwork } from '../../../contexts';
+import { MPTokenDisplayData } from '../../../types/mptoken.types';
+import { fetchAllMPTokenDisplayData } from '../../../utils/fetchMPTokenData';
+import { generateKey, saveInChromeSessionStorage } from '../../../utils';
+import { MPTokenDisplay } from '../../molecules/MPTokenDisplay';
+
+export interface MPTokenListingProps {
+  address: string;
+}
+
+export const MPTokenListing: FC<MPTokenListingProps> = ({ address }) => {
+  const [mpTokens, setMPTokens] = useState<MPTokenDisplayData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { client } = useNetwork();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    async function fetchMPTokens() {
+      if (!client) {
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        const tokens = await fetchAllMPTokenDisplayData(client, address);
+        setMPTokens(tokens);
+      } catch (e) {
+        Sentry.captureException(e);
+        console.error('Error fetching MPTokens:', e);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchMPTokens();
+  }, [address, client]);
+
+  const handleRemoveClick = useCallback(
+    (mpToken: MPTokenDisplayData) => {
+      const key = generateKey();
+      saveInChromeSessionStorage(
+        key,
+        JSON.stringify({
+          mptIssuanceId: mpToken.mptIssuanceId,
+          tokenName: mpToken.ticker || mpToken.name || mpToken.mptIssuanceId,
+          issuer: mpToken.issuer,
+          issuerName: mpToken.issuerName
+        })
+      ).then(() => {
+        navigate(`${MPTOKEN_REMOVE_PATH}?inAppCall=true&${STORAGE_MESSAGING_KEY}=${key}`);
+      });
+    },
+    [navigate]
+  );
+
+  // Don't render anything if no MPTokens
+  if (!isLoading && mpTokens.length === 0) {
+    return null;
+  }
+
+  // Show loading state only when actively loading
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <div style={{ marginTop: '20px' }}>
+      <Typography
+        variant="subtitle2"
+        style={{
+          color: SECONDARY_GRAY,
+          marginBottom: '10px',
+          fontWeight: 600,
+          textTransform: 'uppercase',
+          letterSpacing: '0.5px'
+        }}
+      >
+        MPTokens
+      </Typography>
+      {mpTokens.map((token) => (
+        <MPTokenDisplay
+          key={token.mptIssuanceId}
+          mpToken={token}
+          onRemoveClick={token.canRemove ? () => handleRemoveClick(token) : undefined}
+        />
+      ))}
+    </div>
+  );
+};

packages/extension/src/components/organisms/MPTokenListing/index.ts

@@ -0,0 +1 @@
+export * from './MPTokenListing';