Skip to content

Commit 107f064

Browse files
AbhinavMVAbhinavMV
committed
chore: env variables fix and small ui package fixes
1 parent ae21889 commit 107f064

File tree

13 files changed

+600
-127
lines changed

13 files changed

+600
-127
lines changed

‎.env

-2
This file was deleted.

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
**/*.tsbuildinfo
44
**/.DS_Store
55
.env
6+
/storybook-static/
67
**/coverage

‎.storybook/main.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ module.exports = {
1414
onlyFiles: true,
1515
absolute: true,
1616
}),
17-
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
17+
addons: [
18+
'@storybook/addon-links',
19+
'@storybook/addon-essentials',
20+
'msw-storybook-addon',
21+
],
1822
framework: '@storybook/react',
1923
staticDirs: ['../' + previewFolder],
2024
typescript: {

‎.storybook/preview.ts ‎.storybook/preview.js

File renamed without changes.

‎package.json

+80-80
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,81 @@
11
{
2-
"name": "web3uikit",
3-
"version": "1.0.0",
4-
"main": "index.js",
5-
"license": "MIT",
6-
"private": true,
7-
"workspaces": [
8-
"apps/*",
9-
"packages/*"
10-
],
11-
"scripts": {
12-
"build": "nx run-many --target=build --all --parallel --verbose=true",
13-
"test": "nx affected --target=test --all --parallel --verbose=true",
14-
"test:ui": "nx affected --target=test:ui --all --parallel --verbose=true",
15-
"nm:clear": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
16-
"nx:clear": "nx clear-cache",
17-
"nx:graph": "nx graph --skip-nx-cache",
18-
"start:dev": "nx run-many --target=start:dev --all --parallel --verbose=true",
19-
"storybook": "start-storybook -p 6006",
20-
"build-storybook": "build-storybook",
21-
"analyze": "nx run example:analyze",
22-
"icons:create": "nx run-many --target=icons:create --all --parallel --verbose=true",
23-
"new": "plop"
24-
},
25-
"dependencies": {
26-
"@babel/core": "^7.18.2",
27-
"@jscutlery/semver": "^2.22.0",
28-
"@nrwl/workspace": "^14.1.4",
29-
"dotenv": "^16.0.1",
30-
"nx": "^14.1.4",
31-
"tslib": "^2.3.0"
32-
},
33-
"devDependencies": {
34-
"@mdx-js/react": "^2.1.1",
35-
"@nrwl/eslint-plugin-nx": "14.1.5",
36-
"@nrwl/jest": "14.1.9",
37-
"@nrwl/js": "14.1.9",
38-
"@nrwl/linter": "14.1.5",
39-
"@storybook/addon-essentials": "^6.4.22",
40-
"@storybook/addon-links": "^6.4.22",
41-
"@storybook/builder-vite": "^0.1.36",
42-
"@storybook/react": "^6.4.22",
43-
"@storybook/testing-react": "^1.2.4",
44-
"@testing-library/jest-dom": "^5.16.4",
45-
"@testing-library/react": "^13.2.0",
46-
"@types/jest": "^27.5.1",
47-
"@types/node": "^17.0.26",
48-
"@types/react": "^18.0.6",
49-
"@types/react-dom": "^18.0.2",
50-
"@types/styled-components": "^5.1.25",
51-
"@typescript-eslint/eslint-plugin": "~5.18.0",
52-
"@typescript-eslint/parser": "~5.18.0",
53-
"@vitejs/plugin-react": "^1.3.2",
54-
"@vitest/ui": "^0.15.1",
55-
"eslint": "~8.12.0",
56-
"eslint-config-prettier": "8.1.0",
57-
"fast-glob": "^3.2.11",
58-
"jest": "^28.1.0",
59-
"jest-styled-components": "^7.0.8",
60-
"msw": "^0.42.1",
61-
"msw-storybook-addon": "^1.6.3",
62-
"plop": "^3.1.1",
63-
"react": "^18.0.0",
64-
"react-dom": "^18.0.0",
65-
"react-lazily": "^0.9.1",
66-
"rollup-plugin-dts": "^4.2.1",
67-
"rollup-plugin-node-builtins": "^2.1.2",
68-
"storybook": "^6.5.8",
69-
"styled-components": "^5.3.5",
70-
"ts-jest": "27.1.4",
71-
"ts-node": "9.1.1",
72-
"typescript": "^4.6.3",
73-
"vite": "^2.9.5",
74-
"vite-plugin-dts": "^1.1.1",
75-
"vite-tsconfig-paths": "^3.4.1",
76-
"vitest": "^0.15.1"
77-
},
78-
"msw": {
79-
"workerDirectory": "public"
80-
}
81-
}
2+
"name": "web3uikit",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"private": true,
7+
"workspaces": [
8+
"apps/*",
9+
"packages/*"
10+
],
11+
"scripts": {
12+
"build": "nx run-many --target=build --all --parallel --verbose=true",
13+
"test": "nx affected --target=test --all --parallel --verbose=true",
14+
"test:ui": "nx affected --target=test:ui --all --parallel --verbose=true",
15+
"nm:clear": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
16+
"nx:clear": "nx clear-cache",
17+
"nx:graph": "nx graph --skip-nx-cache",
18+
"start:dev": "nx run-many --target=start:dev --all --parallel --verbose=true",
19+
"storybook": "start-storybook -p 6006",
20+
"build-storybook": "build-storybook",
21+
"analyze": "nx run example:analyze",
22+
"icons:create": "nx run-many --target=icons:create --all --parallel --verbose=true",
23+
"new": "plop"
24+
},
25+
"dependencies": {
26+
"@babel/core": "^7.18.2",
27+
"@jscutlery/semver": "^2.22.0",
28+
"@nrwl/workspace": "^14.1.4",
29+
"dotenv": "^16.0.1",
30+
"nx": "^14.1.4",
31+
"tslib": "^2.3.0"
32+
},
33+
"devDependencies": {
34+
"@mdx-js/react": "^2.1.1",
35+
"@nrwl/eslint-plugin-nx": "14.1.5",
36+
"@nrwl/jest": "14.1.9",
37+
"@nrwl/js": "14.1.9",
38+
"@nrwl/linter": "14.1.5",
39+
"@storybook/addon-essentials": "^6.4.22",
40+
"@storybook/addon-links": "^6.4.22",
41+
"@storybook/builder-vite": "^0.1.36",
42+
"@storybook/react": "^6.4.22",
43+
"@storybook/testing-react": "^1.2.4",
44+
"@testing-library/jest-dom": "^5.16.4",
45+
"@testing-library/react": "^13.2.0",
46+
"@types/jest": "^27.5.1",
47+
"@types/node": "^17.0.26",
48+
"@types/react": "^18.0.6",
49+
"@types/react-dom": "^18.0.2",
50+
"@types/styled-components": "^5.1.25",
51+
"@typescript-eslint/eslint-plugin": "~5.18.0",
52+
"@typescript-eslint/parser": "~5.18.0",
53+
"@vitejs/plugin-react": "^1.3.2",
54+
"@vitest/ui": "^0.15.1",
55+
"eslint": "~8.12.0",
56+
"eslint-config-prettier": "8.1.0",
57+
"fast-glob": "^3.2.11",
58+
"jest": "^28.1.0",
59+
"jest-styled-components": "^7.0.8",
60+
"msw": "^0.42.1",
61+
"msw-storybook-addon": "^1.6.3",
62+
"plop": "^3.1.1",
63+
"react": "^18.0.0",
64+
"react-dom": "^18.0.0",
65+
"react-lazily": "^0.9.1",
66+
"rollup-plugin-dts": "^4.2.1",
67+
"rollup-plugin-node-builtins": "^2.1.2",
68+
"storybook": "^6.5.8",
69+
"styled-components": "^5.3.5",
70+
"ts-jest": "27.1.4",
71+
"ts-node": "9.1.1",
72+
"typescript": "^4.6.3",
73+
"vite": "^2.9.5",
74+
"vite-plugin-dts": "^1.1.1",
75+
"vite-tsconfig-paths": "^3.4.1",
76+
"vitest": "^0.15.1"
77+
},
78+
"msw": {
79+
"workerDirectory": "public"
80+
}
81+
}

‎packages/core/tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
"compilerOptions": {
44
"rootDir": "src"
55
},
6-
"include": ["src", "../styles/src/lib/rgbToHex.ts"]
6+
"include": ["src"]
77
}

‎packages/ui/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
"react-blockies": "^1.4.1",
4040
"react-moralis": "^1.3.5",
4141
"moralis": "^1.8.0",
42-
"@walletconnect/web3-provider": "^1.7.8"
42+
"@walletconnect/web3-provider": "^1.7.8",
43+
"@moralisweb3/evm-wallet-connect-connector": "2.0.0-alpha.1",
44+
"@moralisweb3/evm-api": "2.0.0-alpha.1"
4345
}
4446
}

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

+42-36
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
1-
import React, { useState } from "react";
2-
import { Button, Typography } from "@web3uikit/core";
3-
import NFTStyles from "./NFT.styles";
4-
import NFTUtils from "./NFT.utils";
5-
import { TNFTMetadata } from "./types";
6-
import { color } from "@web3uikit/styles";
7-
import NFTModal from "./NFT.modal";
1+
import React, { useState } from 'react';
2+
import { Button, Typography } from '@web3uikit/core';
3+
import NFTStyles from './NFT.styles';
4+
import NFTUtils from './NFT.utils';
5+
import { TNFTMetadata } from './types';
6+
import { color } from '@web3uikit/styles';
7+
import NFTModal from './NFT.modal';
8+
import { Info } from '@web3uikit/icons';
89

910
const { DivStyled } = NFTStyles;
1011
const { image } = NFTUtils;
1112

1213
const FetchedNFT: React.FC<{
13-
metadata?: TNFTMetadata;
14-
name?: string;
14+
metadata?: TNFTMetadata;
15+
name?: string;
1516
}> = ({ metadata, name }) => {
16-
const [showModal, setShowModal] = useState(false);
17-
return (
18-
<DivStyled id="nft">
19-
{image(metadata?.animation_url, metadata?.image || metadata?.image_url)}
20-
<div id="nft-info">
21-
<div>
22-
<Typography variant="body16">{metadata?.name || name}</Typography>
23-
<Typography variant="caption12">ERC721</Typography>
24-
</div>
25-
</div>
26-
<div id="nft-footer">
27-
<Button
28-
icon="info"
29-
isTransparent
30-
iconColor={color.grey}
31-
iconLayout="icon-only"
32-
onClick={() => setShowModal(true)}
33-
/>
34-
{showModal && (
35-
<NFTModal
36-
attributes={metadata?.traits || metadata?.attributes}
37-
setShowModal={setShowModal}
38-
/>
39-
)}
40-
</div>
41-
</DivStyled>
42-
);
17+
const [showModal, setShowModal] = useState(false);
18+
return (
19+
<DivStyled id="nft">
20+
{image(
21+
metadata?.animation_url,
22+
metadata?.image || metadata?.image_url,
23+
)}
24+
<div id="nft-info">
25+
<div>
26+
<Typography variant="body16">
27+
{metadata?.name || name}
28+
</Typography>
29+
<Typography variant="caption12">ERC721</Typography>
30+
</div>
31+
</div>
32+
<div id="nft-footer">
33+
<Button
34+
icon={<Info fontSize={20} />}
35+
isTransparent
36+
iconColor={color.grey}
37+
iconLayout="icon-only"
38+
onClick={() => setShowModal(true)}
39+
/>
40+
{showModal && (
41+
<NFTModal
42+
attributes={metadata?.traits || metadata?.attributes}
43+
setShowModal={setShowModal}
44+
/>
45+
)}
46+
</div>
47+
</DivStyled>
48+
);
4349
};
4450

4551
export default FetchedNFT;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const NFT: React.FC<INFTProps> = ({
114114
</div>
115115
<div id="nft-footer">
116116
<Button
117-
icon={<Info fill={color.grey} />}
117+
icon={<Info fill={color.grey} fontSize={20} />}
118118
isTransparent
119119
iconColor={color.grey}
120120
iconLayout="icon-only"

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { NFT } from '../NFT';
99
import styles from './NFTBalance.styles';
1010
import { Button, Typography, Skeleton } from '@web3uikit/core';
1111
import { INFTBalance } from './types';
12+
import { ChevronDown } from '@web3uikit/icons';
1213
const { DivStyled, DivFlexStyled } = styles;
1314

1415
const NFTBalance: React.FC<INFTBalance> = ({ address, chain, ...props }) => {
@@ -103,7 +104,7 @@ const NFTBalance: React.FC<INFTBalance> = ({ address, chain, ...props }) => {
103104
{data.result.length > limit && (
104105
<Button
105106
text="Show more"
106-
icon="chevronDown"
107+
icon={<ChevronDown fontSize={10} />}
107108
iconLayout="trailing"
108109
theme="translucent"
109110
onClick={() => setLimit(limit + 5)}

‎packages/ui/src/web3utils/decorators.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React, { useEffect } from 'react';
1+
import { useEffect } from 'react';
22
import { MoralisProvider, useMoralis } from 'react-moralis';
33
import { DecoratorFn } from '@storybook/react';
44
import { default as MoralisType } from 'moralis/types';
55

66
export const moralisContext: DecoratorFn = (Story) => {
7-
const MORALIS_APP_ID = 'Ee6dXw6BMrIwvZCToiliDH2qZaIipi1RIN2ODI3v';
8-
const MORALIS_SERVER_URL =
9-
'https://inlxtebatbqn.usemoralis.com:2053/server';
7+
const MORALIS_APP_ID = import.meta.env.STORYBOOK_MORALIS_APPLICATION_ID;
8+
const MORALIS_SERVER_URL = import.meta.env.STORYBOOK_MORALIS_SERVER_URL;
109

1110
const Web3Initialize = () => {
1211
const {

0 commit comments

Comments
 (0)