diff --git a/.vscode/settings.json b/.vscode/settings.json index 62f13581..379352f7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -22,7 +22,7 @@ "editor.cursorBlinking": "phase", "workbench.preferredDarkColorTheme": "Default High Contrast", "window.autoDetectColorScheme": true, - "workbench.colorTheme": "Default Dark+", + "workbench.colorTheme": "Kimbie Dark", "window.closeWhenEmpty": true, - "window.zoomLevel": 4 + "window.zoomLevel": 3 } diff --git a/package.json b/package.json index c914074c..c5ddb034 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,8 @@ }, "dependencies": { "@apollo/client": "^3.6.4", - "graphql": "^16.5.0" + "graphql": "^16.5.0", + "ts-node": "^10.9.1" }, "resolutions": { "bn.js": "5.2.1", diff --git a/packages/ui/package.json b/packages/ui/package.json index 5e52c3f7..2c05d957 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -18,26 +18,27 @@ "gh:publish": "gh-pages --dist dist/ --dotfiles --message 'Updatin’ GitHub Pages'" }, "dependencies": { - "@chakra-ui/icons": "1.1", - "@chakra-ui/react": "^1.8.8", - "@emotion/react": "^11.10.0", - "@emotion/styled": "^11.10.0", "@react-three/fiber": "^8.10.1", + "@tippyjs/react": "^4.2.6", "@types/three": "^0.149.0", "@walletconnect/web3-provider": "^1.8.0", "dotenv": "^16.0.0", "ethers": "^5.6.9", - "framer-motion": "^6.5.1", "graphql": "^16.5.0", "ipfs-http-client": "^57.0.3", "it-all": "^1.0.6", "multiformats": "^9.7.1", + "ramda": "^0.28.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet": "^6.1.0", - "react-hook-form": "^7.34.0", + "react-hook-form": "^7.43.0", "react-markdown": "^8.0.3", "react-router-dom": "^6.3.0", + "react-spinners": "^0.13.8", + "react-tabs": "^6.0.0", + "react-toastify": "^9.1.1", + "remark-gfm": "^3.0.1", "three": "^0.149.0", "util": "^0.12.5", "web3modal": "^1.9.8" @@ -54,13 +55,14 @@ "@types/babel__core": "^7", "@types/jest": "^28.1.6", "@types/node": "^18.6.4", + "@types/ramda": "^0.28.12", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "@types/react-helmet": "^6.1.5", "@types/rollup-plugin-node-globals": "^1", "@types/webpack": "^5.28.0", "@types/webpack-bundle-analyzer": "^4", - "@vitejs/plugin-react": "^2.0.0", + "@vitejs/plugin-react": "^3.0.1", "@webpack-cli/generators": "^2.5.0", "assert": "^2.0.0", "babel-jest": "^28.1.3", @@ -72,6 +74,7 @@ "https-browserify": "^1.0.0", "jest": "^28.1.3", "os-browserify": "^0.3.0", + "postcss-preset-env": "^8.0.1", "rollup": "^2.77.2", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-node-polyfills": "^0.2.1", @@ -82,7 +85,6 @@ "style-loader": "^3.3.1", "ts-jest": "^28.0.7", "ts-loader": "^9.3.1", - "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^4.0.0", "typescript": "^4.9.5", "vite": "^4.0.4", diff --git a/packages/ui/postcss.config.ts b/packages/ui/postcss.config.ts new file mode 100644 index 00000000..13a3f86d --- /dev/null +++ b/packages/ui/postcss.config.ts @@ -0,0 +1,8 @@ +import postcssPresetEnv from 'postcss-preset-env' + +// eslint-disable-next-line import/no-anonymous-default-export +export default { + plugins: [ + postcssPresetEnv({ stage: 0 }) + ], +} \ No newline at end of file diff --git a/packages/ui/public/favicon.png b/packages/ui/public/favicon.png deleted file mode 100644 index 4b97d82c..00000000 Binary files a/packages/ui/public/favicon.png and /dev/null differ diff --git a/packages/ui/public/favicon.svg b/packages/ui/public/favicon.svg index 0c5f0157..afccf4b4 100644 --- a/packages/ui/public/favicon.svg +++ b/packages/ui/public/favicon.svg @@ -12,6 +12,14 @@ xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> Kissy Octo + - - - - - - - - - - - - - - - - - - - - - - - - - - - + xmlns="http://www.w3.org/2000/svg"> + - - - \ No newline at end of file diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx index 02c7fc1c..28fb2957 100644 --- a/packages/ui/src/App.tsx +++ b/packages/ui/src/App.tsx @@ -1,9 +1,5 @@ import { Helmet } from 'react-helmet' -import { - ChakraProvider, Spinner, ColorModeScript, - ThemeConfig, extendTheme, -} from '@chakra-ui/react' import { Web3ContextProvider } from '@/lib/hooks' import { ApolloClient, @@ -17,6 +13,8 @@ import { Route, } from 'react-router-dom' import React from 'react' +import { Spinner } from './components/Spinner' +import { ToastContainer } from 'react-toastify' const Home = React.lazy(() => import('./pages/home')) const New = React.lazy(() => import('./pages/new')) @@ -26,12 +24,6 @@ const Disburse = React.lazy(() => import('./pages/disburse')) const SelfMint = React.lazy(() => import('./pages/self-mint')) const Owners = React.lazy(() => import('./pages/owners')) -const themeConfig: ThemeConfig = { - initialColorMode: 'dark', - useSystemColorMode: true, -} -const theme = extendTheme({ config: themeConfig }) - const client = new ApolloClient({ uri: nftGraph, cache: new InMemoryCache(), @@ -39,36 +31,36 @@ const client = new ApolloClient({ const App: React.FC = () => ( <> - - - - - - - - - }> - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - - - - + + + + + + + }> + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + + + ) diff --git a/packages/ui/src/components/Expandable.tsx b/packages/ui/src/components/Expandable.tsx index 42810d20..6a94b497 100644 --- a/packages/ui/src/components/Expandable.tsx +++ b/packages/ui/src/components/Expandable.tsx @@ -2,9 +2,7 @@ import { Maybe } from '@/lib/types' import React, { ReactNode, useCallback, useRef, useState, } from 'react' -import { - Box, chakra, Flex, FormLabel, Link, Text, -} from '@chakra-ui/react' +import { Link } from 'react-router-dom' export const Anchor = ({ name }: { name: string }) => { const anchor = name.toLowerCase().replace(/\s+/g, '-') @@ -12,21 +10,19 @@ export const Anchor = ({ name }: { name: string }) => { return ( - 🔗 + 🔗 ) } -const Label = ({ name }: { name: string }) => ( - +export const Label = ({ name }: { name: string }) => ( +
- ■ - {name}: - + ■ + +
) export const Expandable: React.FC<{ @@ -39,24 +35,17 @@ export const Expandable: React.FC<{ const box = useRef(null) return ( - - +
+
- toggle(name)} - _after={{ content: '":"'}} - > - - {hide[name] ? '▸' : '▾'} - +

toggle(name)}> + {hide[name] ? '▸' : '▾'} {name} - +

{!hide[name] && button} - +
{!hide[name] && children} - +
) } diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx index 59580752..0ccef4f1 100644 --- a/packages/ui/src/components/Header.tsx +++ b/packages/ui/src/components/Header.tsx @@ -1,29 +1,30 @@ -import { Flex, FlexProps, Tooltip } from '@chakra-ui/react' import { LinkedSVG } from '@/components' -import React from 'react' +import React, { HTMLAttributes } from 'react' +import Tippy from '@tippyjs/react' +import Hs from '../styles/Header.module.css' export const Header: React.FC< - FlexProps & { links?: Record<'cup' | 'sign', string> } + HTMLAttributes + & { links?: Record<'cup' | 'sign', string> } > = ({ links = { cup: '/new', sign: '/' }, ...props }) => ( - - +
+ - - + + - - + +
) export default Header \ No newline at end of file diff --git a/packages/ui/src/components/HomeLink.tsx b/packages/ui/src/components/HomeLink.tsx index a9d320d6..9406aef1 100644 --- a/packages/ui/src/components/HomeLink.tsx +++ b/packages/ui/src/components/HomeLink.tsx @@ -1,15 +1,12 @@ import { LinkedSVG } from '@/components' import React from 'react' +import '../styles/HomeLink.css' export const HomeLink: React.FC = () => ( ) diff --git a/packages/ui/src/components/JSONForm.tsx b/packages/ui/src/components/JSONForm.tsx index c96faa11..c378bc96 100644 --- a/packages/ui/src/components/JSONForm.tsx +++ b/packages/ui/src/components/JSONForm.tsx @@ -1,22 +1,36 @@ -import { Textarea } from '@chakra-ui/react' -import React from 'react' +import React, { useEffect } from 'react' import { FieldValues, UseFormRegister } from 'react-hook-form' import JSON5 from 'json5' import { ERC1155Metadata } from '@/lib/types' +import { HashLoader } from 'react-spinners' +import jf from '../styles/JSONForm.module.css' export const JSONForm: React.FC<{ register: UseFormRegister metadata: ERC1155Metadata + setValue: (name: string, value: string) => void }> = ({ - register, metadata -}) => ( - -) + register, metadata, setValue +}) => { + useEffect(() => { + if(metadata) { + setValue('json5', JSON5.stringify(metadata, null, 2)) + } + }, [metadata, setValue]) + + return ( + metadata == null ? ( +
+ +

Fetching metadata…

+
+ ) : ( +