Skip to content

Commit 3d8bbb1

Browse files
e-roye-roy
committed
docs:add useNFTMetadata
1 parent d71eb69 commit 3d8bbb1

File tree

9 files changed

+479
-98
lines changed

9 files changed

+479
-98
lines changed

‎apps/docs/components/snippets/hooks/ankr/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export { default as use_nfts_by_owner } from './use_nfts_by_owner';
66
export { default as use_token_holders_count } from './use_token_holders_count';
77
export { default as use_token_holders } from './use_token_holders';
88
export { default as use_transactions_by_hash } from './use_transactions_by_hash';
9+
export { default as use_nft_metadata } from './use_nft_metadata';

‎apps/docs/components/snippets/hooks/ankr/use_nft_metadata.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// eslint-disable-next-line import/no-anonymous-default-export
2+
export default {
3+
jsx: `import { useNFTMetadata } from '@web3-ui/components'
4+
5+
function App() {
6+
const { data, error, isLoading } = useNFTMetadata({
7+
blockchain: Blockchain;
8+
contractAddress: string;
9+
tokenId: string;
10+
})
11+
12+
if (isLoading) return <div>Fetching...</div>
13+
if (error) return <div>Error fetching</div>
14+
return (
15+
<div>
16+
17+
</div>
18+
)
19+
}
20+
`,
21+
};

‎apps/docs/pages/hooks/ankr-hooks.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
use_token_holders_count,
1111
use_token_holders,
1212
use_transactions_by_hash,
13+
use_nft_metadata,
1314
} from '../../components/snippets/hooks/ankr';
1415

1516
const AnkrHooksPage: NextPage = () => {
@@ -61,6 +62,16 @@ const AnkrHooksPage: NextPage = () => {
6162
codeBlock
6263
/>
6364

65+
<h3 className="p-2 font-medium text-gray-700 text-lg">useNFTMetadata</h3>
66+
<CopyBlock
67+
text={use_nft_metadata['jsx']}
68+
language={'jsx'}
69+
showLineNumbers={false}
70+
theme={dracula}
71+
wrapLines={true}
72+
codeBlock
73+
/>
74+
6475
<h3 className="p-2 font-medium text-gray-700 text-lg">useNFTsByOwner</h3>
6576
<CopyBlock
6677
text={use_nfts_by_owner['jsx']}

‎packages/components/src/components/NFT/NFT.tsx

+9-98
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// import React, { useCallback, useEffect, useRef } from 'react';
22
import React, { useEffect } from 'react';
33
// import { useNFTsByOwner } from '@web3-ui/hooks';
4+
import { useNFTMetadata } from 'ankr-react';
45

56
export type NFTProps = {
67
/**
@@ -15,10 +16,6 @@ export type NFTProps = {
1516
* The size of the NFT card.
1617
*/
1718
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
18-
/**
19-
* Use testnet API (Rinkeby) instead of mainnet
20-
*/
21-
isTestnet?: boolean;
2219
};
2320

2421
export interface NFTData {
@@ -37,16 +34,14 @@ export const NFT = ({
3734
// contractAddress,
3835
// tokenId,
3936
size = 'xs',
40-
}: // isTestnet = false,
41-
NFTProps) => {
42-
// const _isMounted = useRef(true);
43-
const [nftData, setNftData] = React.useState<NFTData>();
44-
const [errorMessage, setErrorMessage] = React.useState<string>();
37+
}: NFTProps) => {
38+
// const { data, error, isLoading } = useNFTMetadata({
39+
// blockchain: 'eth',
40+
// contractAddress: '0xEdB61f74B0d09B2558F1eeb79B247c1F363Ae452',
41+
// tokenId: '2276'
42+
// });
4543

46-
useEffect(() => {
47-
setNftData(undefined);
48-
setErrorMessage('');
49-
}, []);
44+
// console.log('data', data);
5045

5146
// working ankr api hook for nfts by owner
5247
// const { data, error, isLoading } = useNFTsByOwner({
@@ -57,89 +52,5 @@ NFTProps) => {
5752
// console.log('error', error);
5853
// console.log(data);
5954

60-
return <NFTCard data={nftData} errorMessage={errorMessage} size={size} />;
61-
};
62-
63-
/**
64-
* Private component to display an NFT given the data
65-
*/
66-
export const NFTCard = ({
67-
data,
68-
errorMessage = '',
69-
size,
70-
hideIfError = false,
71-
}: {
72-
data: NFTData | undefined | null;
73-
errorMessage?: string | undefined;
74-
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
75-
hideIfError?: boolean;
76-
}) => {
77-
console.log(data);
78-
console.log(errorMessage);
79-
console.log(size);
80-
console.log(hideIfError);
81-
// const [error, setError] = useState(false);
82-
// const name = data?.name;
83-
// const imageUrl = data?.imageUrl;
84-
// const assetContractName = data?.assetContractName;
85-
// const assetContractSymbol = data?.assetContractSymbol;
86-
// const animationUrl = data?.animationUrl;
87-
// const tokenId = data?.tokenId;
88-
// const displayName = name || `${assetContractSymbol} #${tokenId}`;
89-
90-
// if (errorMessage || error || imageUrl === '(unknown)' || !imageUrl) {
91-
// if (hideIfError) return null;
92-
// return (
93-
// <>{errorMessage}</>
94-
// // <Alert status="error">
95-
// // <AlertIcon />
96-
// // {errorMessage}
97-
// // </Alert>
98-
// );
99-
// }
100-
101-
return (
102-
<div>nft here</div>
103-
// <Skeleton isLoaded={!!data} maxW={size} h="md">
104-
// <Box maxW={size} borderRadius="lg" borderWidth="1px" overflow="hidden">
105-
// {animationUrl ? (
106-
// animationUrl.endsWith('.mp3') ? (
107-
// <VStack>
108-
// <Image
109-
// src={imageUrl}
110-
// alt={displayName}
111-
// borderRadius="lg"
112-
// w={size}
113-
// onError={() => setError(true)}
114-
// />
115-
// <audio
116-
// src={animationUrl}
117-
// controls
118-
// autoPlay
119-
// muted
120-
// style={{ borderRadius: '7px' }}
121-
// />
122-
// </VStack>
123-
// ) : (
124-
// <Flex w={size} h={size} bg="black" justifyContent="center">
125-
// <video src={animationUrl} controls autoPlay muted />
126-
// </Flex>
127-
// )
128-
// ) : (
129-
// <Image src={imageUrl} alt={displayName} borderRadius="lg" w={size} />
130-
// )}
131-
// <Box p="6">
132-
// <Flex alignItems="center" justifyContent="space-between" pb="2">
133-
// <Heading as="h3" size="sm" style={{ overflowWrap: 'anywhere' }}>
134-
// {displayName}
135-
// </Heading>
136-
// {assetContractSymbol && <Tag size="sm">{assetContractSymbol}</Tag>}
137-
// </Flex>
138-
// <Text fontSize="xs">
139-
// {assetContractName} #{tokenId}
140-
// </Text>
141-
// </Box>
142-
// </Box>
143-
// </Skeleton>
144-
);
55+
return <div>nft here</div>;
14556
};

‎packages/components/src/provider/Web3uiProvider/Web3uiProvider.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { Provider as AnkrProvider } from 'ankr-react';
33
// TODO: HooksProvider is not working on build for storybook or docs on vercel
44
// import { HooksProvider } from '@web3-ui/hooks';
5+
// import { AlchemyProvider } from '@web3-ui/hooks';
56
import { CSS, getCssText, createTheme } from '../../theme/stitches.config';
67

78
export interface IWeb3uiProviderProps {

‎packages/hooks/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
},
5151
"devDependencies": {
5252
"@types/react": "18.0.15",
53+
"alchemy-sdk": "^2.0.3",
5354
"ankr-react": "^0.3.0",
5455
"react": "^18.1.0",
5556
"tsconfig": "*",

‎packages/hooks/src/provider/AlchemyProvider.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, { createContext, useEffect, useState, FC } from 'react';
2+
// import { QueryClient, QueryClientProvider } from 'react-query';
3+
// import AnkrscanProvider from '@ankr.com/ankr.js';
4+
import { Alchemy, Network, AlchemySettings } from 'alchemy-sdk';
5+
6+
interface IProviderProps {
7+
children: React.ReactNode;
8+
alchemyKey?: string;
9+
network?: Network;
10+
}
11+
12+
// const queryClient = new QueryClient();
13+
14+
interface IGlobalContextType {
15+
alchemyKey?: string;
16+
alchemyProvider: Alchemy;
17+
network?: Network;
18+
}
19+
20+
export const AlchemyGlobalContext = createContext<IGlobalContextType>({
21+
alchemyKey: '',
22+
alchemyProvider: new Alchemy(),
23+
network: Network.ETH_MAINNET,
24+
});
25+
26+
export const AlchemyProvider: FC<IProviderProps> = ({
27+
children,
28+
alchemyKey = '',
29+
network = Network.ETH_MAINNET,
30+
}) => {
31+
const [alchemyProvider, setalchemyProvider] = useState<Alchemy>(
32+
new Alchemy({ apiKey: alchemyKey, network })
33+
);
34+
35+
useEffect(() => {
36+
setalchemyProvider(new Alchemy({ apiKey: alchemyKey, network }));
37+
}, [alchemyKey, network]);
38+
39+
return (
40+
<AlchemyGlobalContext.Provider
41+
value={{
42+
alchemyKey,
43+
alchemyProvider,
44+
network,
45+
}}
46+
>
47+
{children}
48+
{/* <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> */}
49+
</AlchemyGlobalContext.Provider>
50+
);
51+
};

‎packages/hooks/src/provider/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './HooksProvider';
2+
export * from './AlchemyProvider';

0 commit comments

Comments
 (0)