Skip to content

Refactor Perpetua frontend to Valora with UI enhancements #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zeeghazi merged 6 commits into from
Mar 30, 2026
Merged

Refactor Perpetua frontend to Valora with UI enhancements #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e9b0d55
fix local build
zeeghazi Mar 7, 2026
ea3f553
remove asset manager and icp asset rendering logic
zeeghazi Mar 7, 2026
dae99ac
Rewrite of Perpetua frontend as Valora using TanStack Query with UI p…
zeeghazi Mar 7, 2026
0909292
remove valora from dashboard list of apps
zeeghazi Mar 7, 2026
86a7ac6
Fix mutation return values, error details, and actor null guards
zeeghazi Mar 30, 2026
35d1c55
Fix missing mutation returns and add feed cache invalidation on add item
zeeghazi Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,13 @@
"@dfinity/auth-client": "^3.2.7",
"@dfinity/candid": "^3.2.7",
"@dfinity/identity": "^3.2.7",
"@dfinity/identity-secp256k1": "^3.4.3",
"@dfinity/ledger-icp": "^6.0.1",
"@dfinity/principal": "^3.2.7",
"@dfinity/utils": "^3.1.0",
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
Expand Down Expand Up @@ -72,7 +76,6 @@
"@tanstack/react-virtual": "^3.12.0",
"@tensorflow/tfjs": "^4.21.0",
"@types/dompurify": "^3.0.5",
"@types/react-beautiful-dnd": "^13.1.8",
"@xstate/store": "^3.9.2",
"antd": "^5.20.5",
"arweave": "^1.15.5",
Expand Down Expand Up @@ -101,7 +104,7 @@
"jwk-to-pem": "^2.0.7",
"lodash": "^4.17.21",
"lru-cache": "^11.0.2",
"lucide-react": "^0.539.0",
"lucide-react": "^0.577.0",
"meilisearch": "^0.42.0",
"nanoid": "^5.0.7",
"next-themes": "^0.3.0",
Expand All @@ -113,7 +116,6 @@
"path-browserify": "^1.0.1",
"postcss": "^8.4.45",
"react": "^18.3.1",
"react-beautiful-dnd": "^13.1.1",
"react-circle-flags": "^0.0.20",
"react-csv": "^2.2.2",
"react-day-picker": "^8.10.1",
Expand Down
154 changes: 0 additions & 154 deletions src/alex_frontend/core/apps/Modules/shared/components/AssetManager.tsx
View file
Open in desktop

This file was deleted.

62 changes: 29 additions & 33 deletions src/alex_frontend/core/apps/Modules/shared/components/NftDisplay/NftDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,14 @@ import { ContentService } from '@/apps/Modules/LibModules/contentDisplay/service
import { useUsername } from '@/hooks/useUsername';
import { NftDisplayProps } from './types';
import { getTransactionService } from '@/apps/Modules/shared/services/transactionService';
import { useAssetManager } from '@/hooks/actors';

// Constants
const NFT_MANAGER_PRINCIPAL = "5sh5r-gyaaa-aaaap-qkmra-cai";
const MAX_FETCH_ATTEMPTS_PER_ARWEAVE_ID = 3;

/**
* Universal NFT Display Component
*
*
* A flexible component for displaying NFTs consistently across the application.
* Supports different display densities, data loading strategies, and customizable features.
* Footer functionality has been removed and details are expected to be shown via hover effects.
Expand All @@ -38,7 +37,6 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
}) => {
const dispatch = useDispatch<AppDispatch>();
const store = useStore<RootState>(); // Use useStore to get the store instance
const {actor} = useAssetManager();
// Component state
const [isLoading, setIsLoading] = useState(true);
const [transaction, setTransaction] = useState<Transaction | undefined>(providedTransaction);
Expand All @@ -64,7 +62,6 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
const transactionDependency = providedTransaction ?? undefined;

const loadNFTData = useCallback(async (mountedChecker: { isMounted: boolean }) => {
if(!actor) return;
if (!tokenId) {
if (mountedChecker.isMounted) {
setError('Token ID is missing');
Expand Down Expand Up @@ -151,26 +148,26 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>

// Directly mutate the ref's current value
fetchAttemptsRef.current.set(currentArweaveId!, attempts + 1);

console.log(`[NftDisplay] Transaction for Arweave ID ${currentArweaveId} not in Redux/props. Attempt ${attempts + 1}. Requesting fetch via TransactionService for token: ${tokenId}`);

const transactionService = getTransactionService(dispatch, store.getState);
try {
// Service updates Redux. We rely on re-render from Redux state change.
await transactionService.fetchNftTransactions([currentArweaveId!], actor); // Added non-null assertion for currentArweaveId
await transactionService.fetchNftTransactions([currentArweaveId!]);
// After this, the useEffect dependency on `transactionsFromRedux` should trigger a re-run.
// For now, we just set loading and wait.
if (mountedChecker.isMounted) setIsLoading(true);
if (mountedChecker.isMounted) setIsLoading(true);
return; // Exit and wait for Redux update
} catch (serviceError) {
console.error(`[NftDisplay] TransactionService failed for Arweave ID ${currentArweaveId} (Token: ${tokenId}):`, serviceError);
throw new Error(`Service failed for ${currentArweaveId}: ${serviceError instanceof Error ? serviceError.message : String(serviceError)}`);
}
}

if (!finalTransaction) {
console.warn(`[NftDisplay] Transaction ${currentArweaveId} still not found after potential service call for token ${tokenId}. Might be transient or actual missing data.`);
if (mountedChecker.isMounted) setIsLoading(true);
if (mountedChecker.isMounted) setIsLoading(true);
return;
}

Expand All @@ -183,13 +180,13 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
const content = await ContentService.loadContent(finalTransaction);
finalContentUrls = await ContentService.getContentUrls(finalTransaction, content);
if (mountedChecker.isMounted) {
dispatch(setContentData({
id: finalTransaction.id,
dispatch(setContentData({
id: finalTransaction.id,
content: { ...content, urls: finalContentUrls }
}));
}
}

if (mountedChecker.isMounted) {
setTransaction(finalTransaction);
setContentUrls(finalContentUrls);
Expand All @@ -200,10 +197,10 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>

} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Failed to load NFT data';
console.error(`[NftDisplay] loadNFTData error for token ${tokenId}:`, errorMessage, err); // Corrected template literal
console.error(`[NftDisplay] loadNFTData error for token ${tokenId}:`, errorMessage, err);
if (mountedChecker.isMounted) {
setError(errorMessage);
setFailedTokens(prev => new Set(prev).add(tokenId!));
setFailedTokens(prev => new Set(prev).add(tokenId!));
}
} finally {
if (mountedChecker.isMounted) {
Expand All @@ -216,14 +213,13 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
actor,
tokenId, initialArweaveId, providedTransaction, //transactionDependency, // Using providedTransaction directly
dispatch,
store.getState, // Changed from store (full object) to store.getState (stable function reference)
nfts, arweaveToNftId, transactionsFromRedux, contentData,
failedTokens, // currentlyFetchingTokenIds, // This was causing issues, rely on isMounted and outer checks
loadingStrategy, isLoading
}, [
tokenId, initialArweaveId, providedTransaction,
dispatch,
store.getState,
nfts, arweaveToNftId, transactionsFromRedux, contentData,
failedTokens,
loadingStrategy, isLoading
]);

useEffect(() => {
Expand Down Expand Up @@ -271,12 +267,12 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
console.warn(`[NftDisplay] Content rendering failed for token ${tokenId}. Marking as failed.`);
setFailedTokens(prev => new Set(prev).add(tokenId));
setError("Content rendering failed for this NFT.");
setIsLoading(false);
setIsLoading(false);
}
}, [transaction, tokenId]);

const handleClick = useCallback(() => {
if (failedTokens.has(tokenId!)) return;
if (failedTokens.has(tokenId!)) return;
if (onClick) {
onClick();
} else if (onViewDetails) {
Expand All @@ -289,10 +285,10 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
}, [onClick, onViewDetails, tokenId, failedTokens]);

// This is the section you added/modified, I will integrate the original logic here:
const displayErrorFromFailedTokens = failedTokens.has(tokenId!)
? `Previously failed to load NFT: ${tokenId}. Data may not be available.`
const displayErrorFromFailedTokens = failedTokens.has(tokenId!)
? `Previously failed to load NFT: ${tokenId}. Data may not be available.`
: null;

// Combine error from props/state with error from failed tokens
const finalDisplayError = displayErrorFromFailedTokens || error;

Expand Down Expand Up @@ -325,7 +321,7 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
// This can happen if transaction is present but ContentService is still fetching URLs.
if (!transaction || !currentContent || !contentUrls) {
// If arweaveId was provided and we are presumably waiting for parent, this state is more likely.
const waitingMessage = initialArweaveId && !transaction
const waitingMessage = initialArweaveId && !transaction
? `Preparing NFT data for ${tokenId}... (Waiting for transaction)`
: `Preparing NFT content for ${tokenId}...`;
return (
Expand All @@ -334,7 +330,7 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>
</div>
);
}

// Original renderContent function (inline or separate)
const renderActualContent = () => {
switch (variant) {
Expand Down Expand Up @@ -378,16 +374,16 @@ export const NftDisplay: React.FC<NftDisplayProps & { showOwnerInfo?: boolean }>

// Main return structure you provided, now with renderActualContent
return (
<div
<div
className={`flex flex-col ${variant === 'full' ? 'p-4' : ''}`}
onClick={handleClick}
style={{ cursor: (onClick || onViewDetails && !failedTokens.has(tokenId!)) ? 'pointer' : 'default' }}
>
<div
<div
className={`relative overflow-hidden rounded-md border border-border ${variant === 'full' ? 'w-full max-w-3xl mx-auto' : ''}`}
style={{ aspectRatio: aspectRatio.toString() }}
>
{renderActualContent()}
{renderActualContent()}
</div>

{/* Owner Information Display (from original) */}
Expand Down
Loading
Loading