Skip to content

Commit fba7001

Browse files
AbhinavMVAbhinavMV
committed
chore: fix build error and minor changes
1 parent c799839 commit fba7001

File tree

12 files changed

+249
-229
lines changed

12 files changed

+249
-229
lines changed

‎apps/example/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@
1313
"dependencies": {
1414
"@web3uikit/core": "*",
1515
"@web3uikit/icons": "*",
16+
"@web3uikit/ui": "*",
1617
"react": "^18.0.0",
1718
"react-dom": "^18.0.0",
19+
"react-moralis": "^1.3.5",
1820
"react-router-dom": "^6.3.0",
1921
"source-map-explorer": "*"
2022
},

‎apps/example/src/bootstrap.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import { StrictMode } from "react";
2-
import { createRoot } from "react-dom/client";
3-
import { BrowserRouter } from "react-router-dom";
4-
import { App } from ".";
5-
6-
const rootElement = document.getElementById("root");
7-
if (!rootElement) throw new Error("Failed to find the root element");
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import { BrowserRouter } from 'react-router-dom';
4+
import { App } from '.';
5+
import { MoralisProvider } from 'react-moralis';
6+
const rootElement = document.getElementById('root');
7+
if (!rootElement) throw new Error('Failed to find the root element');
8+
const MORALIS_APP_ID = 'Ee6dXw6BMrIwvZCToiliDH2qZaIipi1RIN2ODI3v';
9+
const MORALIS_SERVER_URL = 'https://inlxtebatbqn.usemoralis.com:2053/server';
810

911
const root = createRoot(rootElement);
1012
root.render(
11-
<StrictMode>
12-
<BrowserRouter basename="/">
13-
<App />
14-
</BrowserRouter>
15-
</StrictMode>
13+
<StrictMode>
14+
<MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL}>
15+
<BrowserRouter basename="/">
16+
<App />
17+
</BrowserRouter>
18+
</MoralisProvider>
19+
</StrictMode>,
1620
);

‎apps/example/src/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Suspense } from 'react';
55
const { Button, Logo, Typography, Avatar, BannerStrip, VerifyCode } = lazily(
66
() => import('@web3uikit/core'),
77
);
8-
// const { ConnectWallet, NFT } = lazily(() => import('@web3uikit/ui'));
8+
const { ConnectWallet, NFT } = lazily(() => import('@web3uikit/ui'));
99
export const App = () => {
1010
return (
1111
<Routes>
@@ -35,13 +35,13 @@ export const App = () => {
3535
/>
3636
<VerifyCode />
3737
</div>
38-
{/* <ConnectWallet />
38+
<ConnectWallet />
3939
<NFT
4040
address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
4141
chain="eth"
4242
fetchMetadata
4343
tokenId="1"
44-
/> */}
44+
/>
4545
</Suspense>
4646
}
4747
/>

‎packages/core/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,11 @@
2727
"react": "^18.0.0",
2828
"react-dom": "^18.0.0",
2929
"react-router-dom": "^6.3.0",
30-
"@types/react-blockies": "^1.4.1",
3130
"styled-components": "^5.3.5"
3231
},
3332
"dependencies": {
3433
"@web3uikit/config": "*",
3534
"@web3uikit/styles": "*",
36-
"@web3uikit/icons": "*",
37-
"react-blockies": "^1.4.1"
35+
"@web3uikit/icons": "*"
3836
}
3937
}

‎packages/ui/src/lib/Blockie/Blockie.styles.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import styled from 'styled-components';
22
import { resetCSS } from '@web3uikit/styles';
33

44
const BlockieStyled = styled.div`
5-
${resetCSS}
6-
border-radius: 50%;
7-
display: inline-flex;
8-
overflow: hidden;
5+
${resetCSS}
6+
border-radius: 50%;
7+
display: inline-flex;
8+
overflow: hidden;
99
`;
1010

1111
export const BlockieStyles = {
12-
BlockieStyled
12+
BlockieStyled,
1313
};

‎packages/ui/src/lib/ConnectButton/index.ts ‎packages/ui/src/lib/ConnectButton/index.tsx

File renamed without changes.

‎packages/ui/src/lib/NFT/NFT.styles.tsx ‎packages/ui/src/lib/NFT/NFT.styles.ts

File renamed without changes.

‎packages/ui/src/lib/NFT/NFT.tsx

+127-113
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,146 @@
1-
import React, { useState } from "react";
1+
import React, { useState } from 'react';
22
import {
3-
useMoralis,
4-
useMoralisWeb3Api,
5-
useMoralisWeb3ApiCall,
6-
} from "react-moralis";
7-
import styles from "./NFT.styles";
8-
import { color } from "@web3uikit/styles";
9-
import { Button, Skeleton, Typography, Tooltip, Icon } from "@web3uikit/core";
10-
import NFTModal from "./NFT.modal";
11-
import { INFTProps, TNFTMetadata } from "./types";
12-
import NFTUtils from "./NFT.utils";
13-
import FetchedNFT from "./NFT.fetched";
3+
useMoralis,
4+
useMoralisWeb3Api,
5+
useMoralisWeb3ApiCall,
6+
} from 'react-moralis';
7+
import styles from './NFT.styles';
8+
import { color } from '@web3uikit/styles';
9+
import { Button, Skeleton, Typography, Tooltip } from '@web3uikit/core';
10+
import { Icon } from '@web3uikit/icons';
11+
import NFTModal from './NFT.modal';
12+
import { INFTProps, TNFTMetadata } from './types';
13+
import NFTUtils from './NFT.utils';
14+
import FetchedNFT from './NFT.fetched';
1415
const { DivStyled } = styles;
1516
const { image } = NFTUtils;
1617
const NFT: React.FC<INFTProps> = ({
17-
address,
18-
chain,
19-
name,
20-
tokenId,
21-
fetchMetadata,
22-
metadata,
23-
...props
18+
address,
19+
chain,
20+
name,
21+
tokenId,
22+
fetchMetadata,
23+
metadata,
24+
...props
2425
}) => {
25-
const { isInitialized, isInitializing } = useMoralis();
26-
const Web3API = useMoralisWeb3Api();
27-
const { data, error, isLoading, isFetching } = useMoralisWeb3ApiCall(
28-
Web3API.token.getTokenIdMetadata,
29-
{
30-
address,
31-
chain,
32-
token_id: String(tokenId),
33-
},
34-
{
35-
autoFetch:
36-
isInitialized && fetchMetadata && /^0x[a-fA-F0-9]{40}$/.test(address),
26+
const { isInitialized, isInitializing } = useMoralis();
27+
const Web3API = useMoralisWeb3Api();
28+
const { data, error, isLoading, isFetching } = useMoralisWeb3ApiCall(
29+
Web3API.token.getTokenIdMetadata,
30+
{
31+
address,
32+
chain,
33+
token_id: String(tokenId),
34+
},
35+
{
36+
autoFetch:
37+
isInitialized &&
38+
fetchMetadata &&
39+
/^0x[a-fA-F0-9]{40}$/.test(address),
40+
},
41+
);
42+
const [showTraits, setShowModal] = useState(false);
43+
44+
if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
45+
return <div data-testid="no-valid-address">No valid address</div>;
3746
}
38-
);
39-
const [showTraits, setShowModal] = useState(false);
4047

41-
if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
42-
return <div data-testid="no-valid-address">No valid address</div>;
43-
}
48+
if (!fetchMetadata) {
49+
return <FetchedNFT metadata={metadata} name={name} />;
50+
}
4451

45-
if (!fetchMetadata) {
46-
return <FetchedNFT metadata={metadata} name={name} />;
47-
}
52+
if (!isInitialized && !isInitializing) {
53+
return <div data-testid="no-moralis-instance" />;
54+
}
4855

49-
if (!isInitialized && !isInitializing) {
50-
return <div data-testid="no-moralis-instance" />;
51-
}
56+
if (isLoading || isFetching) {
57+
return (
58+
<div data-testid="nft-metadata-loading" {...props}>
59+
<DivStyled id="nft">
60+
<Skeleton theme="text" width="100%" height="200px" />
61+
<div id="information">
62+
<Skeleton theme="text" width="30%" height="18px" />
63+
<Skeleton theme="image" width="60px" height="60px" />
64+
</div>
65+
</DivStyled>
66+
</div>
67+
);
68+
}
5269

53-
if (isLoading || isFetching) {
54-
return (
55-
<div data-testid="nft-metadata-loading" {...props}>
56-
<DivStyled id="nft">
57-
<Skeleton theme="text" width="100%" height="200px" />
58-
<div id="information">
59-
<Skeleton theme="text" width="30%" height="18px" />
60-
<Skeleton theme="image" width="60px" height="60px" />
61-
</div>
62-
</DivStyled>
63-
</div>
64-
);
65-
}
70+
if (error) {
71+
return <div data-testid="nft-metadata-error">{error.message}</div>;
72+
}
6673

67-
if (error) {
68-
return <div data-testid="nft-metadata-error">{error.message}</div>;
69-
}
74+
if (!data) {
75+
return <div data-testid="nft-metadata-error">No response</div>;
76+
}
7077

71-
if (!data) {
72-
return <div data-testid="nft-metadata-error">No response</div>;
73-
}
78+
if (!data?.metadata) {
79+
return (
80+
<DivStyled id="nft">
81+
<Skeleton theme="text" width="100%" height="200px" />
82+
<div id="information">
83+
<Tooltip
84+
children={<Icon svg="info" fill={color.yellowDark} />}
85+
content={'There is no metadata'}
86+
position={'top'}
87+
/>
88+
</div>
89+
</DivStyled>
90+
);
91+
}
7492

75-
if (!data?.metadata) {
7693
return (
77-
<DivStyled id="nft">
78-
<Skeleton theme="text" width="100%" height="200px" />
79-
<div id="information">
80-
<Tooltip
81-
children={<Icon svg="info" fill={color.yellowDark} />}
82-
content={"There is no metadata"}
83-
position={"top"}
84-
/>
94+
<div>
95+
<DivStyled id="nft">
96+
{image(
97+
(JSON.parse(String(data.metadata)) as TNFTMetadata)
98+
?.animation_url,
99+
(JSON.parse(String(data.metadata)) as TNFTMetadata)
100+
?.image ||
101+
(JSON.parse(String(data.metadata)) as TNFTMetadata)
102+
?.image_url,
103+
)}
104+
<div id="nft-info">
105+
<div>
106+
<Typography variant="caption14" color={color.blueDark}>
107+
{(JSON.parse(String(data.metadata)) as TNFTMetadata)
108+
?.name || name}
109+
</Typography>
110+
<Typography variant="caption12">
111+
{data.contract_type || 'ERC721'}
112+
</Typography>
113+
</div>
114+
</div>
115+
<div id="nft-footer">
116+
<Button
117+
icon="info"
118+
isTransparent
119+
iconColor={color.grey}
120+
iconLayout="icon-only"
121+
onClick={() => setShowModal(true)}
122+
/>
123+
{showTraits && (
124+
<NFTModal
125+
attributes={
126+
(
127+
JSON.parse(
128+
String(data.metadata),
129+
) as TNFTMetadata
130+
)?.traits ||
131+
(
132+
JSON.parse(
133+
String(data.metadata),
134+
) as TNFTMetadata
135+
)?.attributes
136+
}
137+
setShowModal={setShowModal}
138+
/>
139+
)}
140+
</div>
141+
</DivStyled>
85142
</div>
86-
</DivStyled>
87143
);
88-
}
89-
90-
return (
91-
<div>
92-
<DivStyled id="nft">
93-
{image(
94-
(JSON.parse(String(data.metadata)) as TNFTMetadata)?.animation_url,
95-
(JSON.parse(String(data.metadata)) as TNFTMetadata)?.image ||
96-
(JSON.parse(String(data.metadata)) as TNFTMetadata)?.image_url
97-
)}
98-
<div id="nft-info">
99-
<div>
100-
<Typography variant="caption14" color={color.blueDark}>
101-
{(JSON.parse(String(data.metadata)) as TNFTMetadata)?.name ||
102-
name}
103-
</Typography>
104-
<Typography variant="caption12">
105-
{data.contract_type || "ERC721"}
106-
</Typography>
107-
</div>
108-
</div>
109-
<div id="nft-footer">
110-
<Button
111-
icon="info"
112-
isTransparent
113-
iconColor={color.grey}
114-
iconLayout="icon-only"
115-
onClick={() => setShowModal(true)}
116-
/>
117-
{showTraits && (
118-
<NFTModal
119-
attributes={
120-
(JSON.parse(String(data.metadata)) as TNFTMetadata)?.traits ||
121-
(JSON.parse(String(data.metadata)) as TNFTMetadata)?.attributes
122-
}
123-
setShowModal={setShowModal}
124-
/>
125-
)}
126-
</div>
127-
</DivStyled>
128-
</div>
129-
);
130144
};
131145

132146
export default NFT;

0 commit comments

Comments
 (0)