Close #11 Build the View Unlisted Asset UI

[DiegoFloresWenHao]

• dapp/src/components/viewasset.tsx
– Created an initial generic dialog component (later superseded by the more specific dialog below).
• dapp/src/components/ViewUnlistedAssetDialog.tsx
– Added a brand-new, multi-step Radix-Dialog component implementing the “View Unlisted Asset → List as Collateral → Review → Success” flow in TailwindCSS.
• dapp/src/components/connectwallet.tsx
– Fixed two SVG props: renamed fill-rule→fillRule and clip-rule→clipRule so React JSX parses them correctly.
• dapp/src/components/myassets/NFTGrid.tsx
– Imported ViewUnlistedAssetDialog and wrapped every “Unlisted” card in its trigger—so clicking those opens the listing dialog in sequence; all other statuses still link to the escrow page.
• dapp/package.json + package-lock.json
– Installed the @radix-ui/react-dialog dependency in the dapp sub-project to power the new dialog component.

[DanielEmmanuel1]

I'm seeing over 660 files changed why are u pushing node module files? @DiegoFloresWenHao ?

[DiegoFloresWenHao]

My apologies, I forgot to ignore the node module files when committing. Just fixed it

[DanielEmmanuel1]

Can u share screenshots
I can't seem to find your page, how are u mounting it on the DOM

I see u created the whole page has a component instead of a folder, where are u currently mounting this on?

[DiegoFloresWenHao]

All of the new work lives entirely inside the existing “My Assets” route—there is no new top‐level page or folder for the dialog. Here’s how it hangs together:
My Assets page
File: dapp/src/app/my_assets/page.tsx
Next.js’s App Router automatically maps any page.tsx under src/app to a URL segment. So that file mounts at http://localhost:3000/my_assets.
Inside it I imported the UI component from dapp/src/components/myassets/index.tsx (the MyAssets function).
MyAssets component
File: dapp/src/components/myassets/index.tsx
Renders the overall “My Assets” dashboard, including tabs, filters, and then either or .
NFTGrid
File: dapp/src/components/myassets/NFTGrid.tsx
I modified this so that whenever it renders a card whose status === "Unlisted", it wraps that card in our … trigger instead of linking off to the escrow page.
Dialog component
File: dapp/src/components/ViewUnlistedAssetDialog.tsx
This is not a page, but a reusable component. It uses Radix’s portal under the hood to mount its markup at the end of the DOM whenever you click the trigger.

How it appears in the DOM?

When you navigate to /my_assets, Next renders page.tsx → MyAssets → NFTGrid.
Clicking an unlisted card fires the <Dialog.Trigger> that lives around the card.
Radix Dialog then injects its overlay and content via a React portal, so you see the multi-step modal on top of the page.

In short:

• I did not create a new route or top-level folder—this is all grafted into your existing My Assets page under src/app/my_assets/page.tsx.
• The dialog lives as a component (ViewUnlistedAssetDialog) and is invoked via wrapping the NFT card in NFTGrid.
• Next’s App Router handles mounting the My Assets page; Radix’s portal handles mounting the modal

How to run:

Please execute

'cd dapp && npm run dev'

on the terminal to run.

Here are some screenshots

[DanielEmmanuel1]

Oh i see the problem
Can u update your main again cause new changes has been made
These isn't the UI for the latest changes

[DanielEmmanuel1]

Also now that I'm really checking the codes & your provided screenshoots
None of this actually matches our figma UI @DiegoFloresWenHao

[DiegoFloresWenHao]

I am trying to replicate the exact design and animations that you provided in this link for the View: Unlisted_Asset.
https://www.figma.com/design/PA2RC4F8pa66uT6i4q2ICd/Trajectifi?t=pNYPimm8B1S4Py2C-0
but in order to do that I need the source code of the animations setup. The webpage tells me I need a paid subscription to access them through the developer mode.