feat: solana nft demo #1578
feat: solana nft demo #1578
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🌿 Documentation Preview
|
Blu-J
force-pushed
the
bluj/solana-nft-demo
branch
from
1bff319 to
5a2d0b2
Compare
Blu-J
force-pushed
the
bluj/solana-nft-demo
branch
from
28e53f0 to
ffb7d0b
Compare
|
Looking good! One thought on the design. After you collect an NFT, there is no visual indicator that the nft was actually collected. In the EVM component we add a link to the txn on the block explorer. I'm wondering if it's worth adding something like that. See in the completed state, I think we need at least a link to the txn this is the link from the evm card |
blakecduncan
left a comment
blakecduncan
left a comment
There was a problem hiding this comment.
This is awesome! None of my comments are blocking.
I know it's not in the figma design but I think it could be worth discussing with design to add a link to the txn in the block explorer.
| if (!solanaSigner) throw new Error("No signer found"); | ||
| if (!connection) throw new Error("No connection found"); | ||
| setTransactionState("signing"); | ||
| setTransactionState("sponsoring"); |
There was a problem hiding this comment.
These states are fired back to back. I don't think we will ever see the signing state in the ui
There was a problem hiding this comment.
On purpose, designers should know
| mint: stakeAccount.publicKey, | ||
| name: "Alchemy Duck", | ||
| symbol: "ALCHDUCK", | ||
| uri: "https://bafybeigtvzjqalevyw67xdhr7am5r3jxe5kjbg4pi2jv3nxvhelptwksoe.ipfs.dweb.link?filename=duckImage.png", |
There was a problem hiding this comment.
Nice! You added the image to ipfs 💯
| ); | ||
|
|
||
| const mint = stakeAccount.publicKey; | ||
| const tx = await sendTransactionAsync({ |
There was a problem hiding this comment.
nit: I'm not a big fan of mixing using the async function with the callbacks in the hook (I know we do this other places in this demo app so not an issue). If using the async function I prefer to wrap it in a try/catch and handle the error there. In this example, the onError callback will be called if there is an error but we will still get an unhandled error in this function.
There was a problem hiding this comment.
But in this case, this is a middleware that one can add. Ad we expect a transform, like map
And the mutation is the mutation pattern since we use it https://tanstack.com/query/v4/docs/framework/react/reference/useMutation.
As for the onError, sure, in this case it makes alot more sense to use a try catch
| ], | ||
| }); | ||
|
|
||
| console.log(`Created transaction: ${tx.hash} |
There was a problem hiding this comment.
I know this isn't in the design, but I think it would be really useful to link to this in the demo. Could be worth talking to design about this
Agreed |
* Revert "feat: solana nft demo (#1578)" This reverts commit 7ad9c20. * Revert "Revert "feat: solana nft demo (#1578)"" This reverts commit 9b84edc. * Revert "Revert "feat: solana nft demo (#1578)" (#1582)" This reverts commit 4691730. * fix: pr changes * chore: fix test that has a timing issue maybe * fix: allow the one card to do all * Update examples/ui-demo/src/components/small-cards/SolanaNftCard.tsx * feat: do auto from airdrop * chore: refactor to invert logic to injectable (#1584) * chore: refactor to invert logic to injectable * feat: do auto from airdrop * feat: make it so the adding self signer is automatically * chore: adding in the other transaction filtering based on the keys * fix: edge case on key may not be signer * feat: remove the address from the solana card * fix: link to transaction needs three lines for card * chore: remove old new badges for other cards * fix: imports are not .js * chore: undo stage change * fix: weird bug on import * chore: change the function * chore: add in the doc build * chore: change the sponsoring to include rent * fix: styling in card to match comments made in pr
2 participants
About
So this is to solve the figma case for the nft and the solana: https://www.figma.com/design/5iS6Lk5eer9WFYJRni2Hn1/UI-Demo-App?node-id=7685-7245&p=f&t=iQyWRlxsizSVMjBx-0
Closes : https://app.asana.com/1/1129441638109975/project/1209791905088814/task/1210059561435500
Proof that it works
2025-05-01_14-10-40.mp4
Pull Request Checklist
yarn test)sitefolder, and guidelines for updating/adding docs can be found in the contribution guide)feat!: breaking change)yarn lint:check) and fix any issues? (yarn lint:write)PR-Codex overview
This PR focuses on enhancing the Solana integration in the application by updating configurations, adding new hooks, and introducing a new component for NFT transactions.
Detailed summary
policyIdinexamples/ui-demo/src/app/config.tsxtoNEXT_PUBLIC_SOLANA_POLICY_ID.useSolanaConnectionandSolanaConnectiontypes inaccount-kit/react/src/hooks/useSolanaConnection.ts.useSolanaConnectionfromaccount-kit/react/src/hooks/index.ts.SolanaNftCardcomponent inexamples/ui-demo/src/components/small-cards/SolanaNftCard.tsxfor NFT transactions.SmallCardsWrapperto includeSolanaNftCard.useSolanaConnectioninsite/pages/reference/account-kit/react/hooks/useSolanaConnection.mdxanddocs/pages/reference/account-kit/react/hooks/useSolanaConnection.mdx.useSolanaTransactionto support apreSendfunction for transactions.examples/ui-demo/package.jsonfor Solana libraries.