From d8eadface7452963fb616a8120bb481577cdacba Mon Sep 17 00:00:00 2001 From: Gabo Esquivel Date: Thu, 24 Aug 2023 13:06:29 -0600 Subject: [PATCH] wip: upgrade useink and setup vite --- frontend/.eslintcache | 1 + frontend/index.html | 13 +++++++ frontend/package.json | 12 ++++++- frontend/src/Resolver.tsx | 39 +++++++++++--------- frontend/src/components/FormContainer.tsx | 31 +++++++--------- frontend/src/components/Header.tsx | 27 ++++++-------- frontend/src/components/Loader.tsx | 28 +++++++-------- frontend/src/hooks/useSubmitHandler.ts | 8 +++-- frontend/src/index.tsx | 41 --------------------- frontend/src/lib/converter.ts | 7 ++++ frontend/src/link-logo.svg | 2 +- frontend/src/{index.css => main.css} | 0 frontend/src/main.tsx | 39 ++++++++++++++++++++ frontend/src/types/UI.ts | 2 +- frontend/tailwind.config.js | 44 +++++++++++------------ frontend/tsconfig.json | 32 ++++++++++------- frontend/tsconfig.node.json | 10 ++++++ frontend/vite.config.ts | 6 ++-- 18 files changed, 190 insertions(+), 152 deletions(-) create mode 100644 frontend/.eslintcache create mode 100644 frontend/index.html delete mode 100644 frontend/src/index.tsx create mode 100644 frontend/src/lib/converter.ts rename frontend/src/{index.css => main.css} (100%) create mode 100644 frontend/src/main.tsx create mode 100644 frontend/tsconfig.node.json diff --git a/frontend/.eslintcache b/frontend/.eslintcache new file mode 100644 index 0000000..d4ad5dc --- /dev/null +++ b/frontend/.eslintcache @@ -0,0 +1 @@ +[{"/Users/gaboesquivel/Code/ink-link/frontend/src/main.tsx":"1","/Users/gaboesquivel/Code/ink-link/frontend/src/contexts/index.ts":"2","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Notifications/index.ts":"3","/Users/gaboesquivel/Code/ink-link/frontend/src/App.tsx":"4","/Users/gaboesquivel/Code/ink-link/frontend/src/contexts/LinkContract.tsx":"5","/Users/gaboesquivel/Code/ink-link/frontend/src/contexts/UIContext.tsx":"6","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Notifications/Snackbar.tsx":"7","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Notifications/Notifications.tsx":"8","/Users/gaboesquivel/Code/ink-link/frontend/src/components/index.ts":"9","/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/index.ts":"10","/Users/gaboesquivel/Code/ink-link/frontend/src/Resolver.tsx":"11","/Users/gaboesquivel/Code/ink-link/frontend/src/const/index.ts":"12","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Button.tsx":"13","/Users/gaboesquivel/Code/ink-link/frontend/src/components/ConnectWallet.tsx":"14","/Users/gaboesquivel/Code/ink-link/frontend/src/components/FormContainer.tsx":"15","/Users/gaboesquivel/Code/ink-link/frontend/src/components/DryRunResult.tsx":"16","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Header.tsx":"17","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Loader.tsx":"18","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Modal.tsx":"19","/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/useLinkContract.ts":"20","/Users/gaboesquivel/Code/ink-link/frontend/src/components/NewUserGuide.tsx":"21","/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/useSubmitHandler.ts":"22","/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/useUI.ts":"23","/Users/gaboesquivel/Code/ink-link/frontend/src/components/LinksOverview.tsx":"24","/Users/gaboesquivel/Code/ink-link/frontend/src/lib/converter.ts":"25","/Users/gaboesquivel/Code/ink-link/frontend/src/components/Form.tsx":"26","/Users/gaboesquivel/Code/ink-link/frontend/src/components/SubmitResult.tsx":"27","/Users/gaboesquivel/Code/ink-link/frontend/src/components/AccountsDropdown.tsx":"28"},{"size":1132,"mtime":1692901862513,"results":"29","hashOfConfig":"30"},{"size":61,"mtime":1692896573527,"results":"31","hashOfConfig":"30"},{"size":60,"mtime":1692896573526,"results":"32","hashOfConfig":"30"},{"size":484,"mtime":1692896573523,"results":"33","hashOfConfig":"30"},{"size":1565,"mtime":1692896573527,"results":"34","hashOfConfig":"30"},{"size":562,"mtime":1692896573527,"results":"35","hashOfConfig":"30"},{"size":1105,"mtime":1692896573526,"results":"36","hashOfConfig":"30"},{"size":591,"mtime":1692896573525,"results":"37","hashOfConfig":"30"},{"size":266,"mtime":1692896573526,"results":"38","hashOfConfig":"30"},{"size":96,"mtime":1692896573527,"results":"39","hashOfConfig":"30"},{"size":2411,"mtime":1692901547363,"results":"40","hashOfConfig":"30"},{"size":572,"mtime":1692896573526,"results":"41","hashOfConfig":"30"},{"size":886,"mtime":1692896573524,"results":"42","hashOfConfig":"30"},{"size":2219,"mtime":1692896573524,"results":"43","hashOfConfig":"30"},{"size":1744,"mtime":1692903848192,"results":"44","hashOfConfig":"30"},{"size":1998,"mtime":1692896573524,"results":"45","hashOfConfig":"30"},{"size":1235,"mtime":1692903859581,"results":"46","hashOfConfig":"30"},{"size":1150,"mtime":1692903869594,"results":"47","hashOfConfig":"30"},{"size":1888,"mtime":1692896573525,"results":"48","hashOfConfig":"30"},{"size":330,"mtime":1692896573528,"results":"49","hashOfConfig":"30"},{"size":689,"mtime":1692896573525,"results":"50","hashOfConfig":"30"},{"size":2188,"mtime":1692900886603,"results":"51","hashOfConfig":"30"},{"size":299,"mtime":1692896573528,"results":"52","hashOfConfig":"30"},{"size":783,"mtime":1692896573525,"results":"53","hashOfConfig":"30"},{"size":207,"mtime":1692901537290,"results":"54","hashOfConfig":"30"},{"size":3317,"mtime":1692896573524,"results":"55","hashOfConfig":"30"},{"size":2907,"mtime":1692896573526,"results":"56","hashOfConfig":"30"},{"size":3249,"mtime":1692896573523,"results":"57","hashOfConfig":"30"},{"filePath":"58","messages":"59","suppressedMessages":"60","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1uz336x",{"filePath":"61","messages":"62","suppressedMessages":"63","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","suppressedMessages":"66","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"67","messages":"68","suppressedMessages":"69","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","suppressedMessages":"72","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"73","messages":"74","suppressedMessages":"75","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","suppressedMessages":"78","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"79","messages":"80","suppressedMessages":"81","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"82","messages":"83","suppressedMessages":"84","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"85","messages":"86","suppressedMessages":"87","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"88","messages":"89","suppressedMessages":"90","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"91","messages":"92","suppressedMessages":"93","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"94","messages":"95","suppressedMessages":"96","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"97","messages":"98","suppressedMessages":"99","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"100","messages":"101","suppressedMessages":"102","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"103","messages":"104","suppressedMessages":"105","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"106","messages":"107","suppressedMessages":"108","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"109","messages":"110","suppressedMessages":"111","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"112","messages":"113","suppressedMessages":"114","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"115","messages":"116","suppressedMessages":"117","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"118","messages":"119","suppressedMessages":"120","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"121","messages":"122","suppressedMessages":"123","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"124","messages":"125","suppressedMessages":"126","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"127","messages":"128","suppressedMessages":"129","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"130","messages":"131","suppressedMessages":"132","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"133","messages":"134","suppressedMessages":"135","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"136","messages":"137","suppressedMessages":"138","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"139","messages":"140","suppressedMessages":"141","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gaboesquivel/Code/ink-link/frontend/src/main.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/contexts/index.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Notifications/index.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/App.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/contexts/LinkContract.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/contexts/UIContext.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Notifications/Snackbar.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Notifications/Notifications.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/index.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/index.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/Resolver.tsx",[],["142","143"],"/Users/gaboesquivel/Code/ink-link/frontend/src/const/index.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Button.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/ConnectWallet.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/FormContainer.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/DryRunResult.tsx",[],["144"],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Header.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Loader.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Modal.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/useLinkContract.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/NewUserGuide.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/useSubmitHandler.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/hooks/useUI.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/LinksOverview.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/lib/converter.ts",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/Form.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/SubmitResult.tsx",[],[],"/Users/gaboesquivel/Code/ink-link/frontend/src/components/AccountsDropdown.tsx",[],[],{"ruleId":"145","severity":1,"message":"146","line":44,"column":6,"nodeType":"147","endLine":44,"endColumn":23,"suggestions":"148","suppressions":"149"},{"ruleId":"145","severity":1,"message":"150","line":53,"column":6,"nodeType":"147","endLine":53,"endColumn":8,"suggestions":"151","suppressions":"152"},{"ruleId":"145","severity":1,"message":"153","line":31,"column":6,"nodeType":"147","endLine":31,"endColumn":53,"suggestions":"154","suppressions":"155"},"react-hooks/exhaustive-deps","React Hook useMemo has missing dependencies: 'abi' and 'link.contract'. Either include them or remove the dependency array.","ArrayExpression",["156"],["157"],"React Hook useEffect has missing dependencies: 'resolve' and 'slug'. Either include them or remove the dependency array.",["158"],["159"],"React Hook useEffect has a missing dependency: 'shortenDryRun'. Either include it or remove the dependency array.",["160"],["161"],{"desc":"162","fix":"163"},{"kind":"164","justification":"165"},{"desc":"166","fix":"167"},{"kind":"164","justification":"165"},{"desc":"168","fix":"169"},{"kind":"164","justification":"165"},"Update the dependencies array to be: [abi, link.contract, resolve.result?.ok, resolve.result.value.raw]",{"range":"170","text":"171"},"directive","","Update the dependencies array to be: [resolve, slug]",{"range":"172","text":"173"},"Update the dependencies array to be: [shortenDryRun, shortenDryRun.send, values.alias, values.url]",{"range":"174","text":"175"},[1521,1538],"[abi, link.contract, resolve.result?.ok, resolve.result.value.raw]",[1786,1788],"[resolve, slug]",[921,968],"[shortenDryRun, shortenDryRun.send, values.alias, values.url]"] \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..e4b78ea --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/frontend/package.json b/frontend/package.json index ba1ecd3..56c0c42 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,23 +8,33 @@ "bn.js": "^5.2.1", "classnames": "^2.3.2", "formik": "^2.2.9", + "node-stdlib-browser": "^1.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.1", "typescript": "^5.2.2", "useink": "^1.13.0", "web-vitals": "^3.3.1", + "ws": "^8.13.0", "yup": "^1.1.1" }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.0", "@nabla/vite-plugin-eslint": "^1.5.0", + "@types/hoist-non-react-statics": "^3.3.1", "@types/node": "^20.1.1", "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "@vitejs/plugin-react": "^4.0.4", - "tailwindcss": "^3.3.2", + "autoprefixer": "^10.4.15", + "eslint": "^8.47.0", + "eslint-config-react-app": "^7.0.1", + "file-loader": "^6.2.0", + "postcss": "^8.4.28", + "tailwindcss": "^3.3.3", "vite": "^4.4.9", + "vite-plugin-node-stdlib-browser": "^0.2.1", + "vite-plugin-svgr": "^3.2.0", "vite-tsconfig-paths": "^4.2.0" }, "scripts": { diff --git a/frontend/src/Resolver.tsx b/frontend/src/Resolver.tsx index fb65c38..d6eb547 100644 --- a/frontend/src/Resolver.tsx +++ b/frontend/src/Resolver.tsx @@ -1,11 +1,12 @@ -import "./App.css"; -import { useEffect, useMemo } from "react"; -import { useParams } from "react-router-dom"; -import { Loader } from "./components"; -import { hexToString } from 'useink/utils'; -import { useLinkContract } from "./hooks"; -import { AbiMessage, ContractExecResult, Registry } from "useink/core"; -import { useAbiMessage } from "useink"; +import './App.css'; +import { useEffect, useMemo } from 'react'; +import { useParams } from 'react-router-dom'; +import { Loader } from './components'; + +import { useLinkContract } from './hooks'; +import { AbiMessage, ContractExecResult, Registry } from 'useink/core'; +import { useAbiMessage } from 'useink'; +import { hexToString } from './lib/converter'; // useink will decode results for ink! v4 +, but this dApp was built with ink! v3 and // requires this custom decoding function. @@ -14,13 +15,13 @@ export function decodeURL( message: AbiMessage, registry: Registry, ): string | undefined { - if (result.isErr || !message.returnType) return + if (result.isErr || !message.returnType) return; - const returnTypeName = message.returnType.lookupName || message.returnType.type + const returnTypeName = message.returnType.lookupName || message.returnType.type; const raw = registry.createTypeUnsafe(returnTypeName, [result.asOk.data]); const OptionNoneResponse = '0x00'; - if (raw.toHuman() === OptionNoneResponse) return + if (raw.toHuman() === OptionNoneResponse) return; const url = hexToString(raw.toHuman() as any); @@ -39,7 +40,7 @@ const Resolver: React.FC = () => { } return undefined; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [resolve?.result]); useEffect(() => { @@ -48,16 +49,20 @@ const Resolver: React.FC = () => { useEffect(() => { slug && resolve?.send([slug], { defaultCaller: true }); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( -
- {resolve?.isSubmitting && } +
+ {resolve?.isSubmitting && } {!resolve?.isSubmitting && resolve?.result?.ok && !resolvedUrl && (
-

URL not found for {slug}

-

Go back to shortener.

+

+ URL not found for {slug} +

+

+ Go back to shortener. +

)}
diff --git a/frontend/src/components/FormContainer.tsx b/frontend/src/components/FormContainer.tsx index 64ebf96..7396163 100644 --- a/frontend/src/components/FormContainer.tsx +++ b/frontend/src/components/FormContainer.tsx @@ -1,12 +1,12 @@ -import linkLogo from "../link-logo.svg"; -import { Formik } from "formik"; -import { initialValues, UrlShortenerSchema } from "../const"; -import { useLinkContract, useSubmitHandler, useUI } from "../hooks"; -import { UrlShortenerForm } from "./Form"; -import { Header } from "./Header"; -import { SubmitResult } from "./SubmitResult"; -import { ConnectWallet, Loader } from "."; -import { hasAny } from "useink/utils"; +import { ReactComponent as LinkLogo } from '../link-logo.svg'; +import { Formik } from 'formik'; +import { initialValues, UrlShortenerSchema } from '../const'; +import { useLinkContract, useSubmitHandler, useUI } from '../hooks'; +import { UrlShortenerForm } from './Form'; +import { Header } from './Header'; +import { SubmitResult } from './SubmitResult'; +import { ConnectWallet, Loader } from '.'; +import { hasAny } from 'useink/utils'; export const FormContainer = () => { const submitFn = useSubmitHandler(); @@ -24,10 +24,7 @@ export const FormContainer = () => { submitFn(values, helpers); }} > - {({ - status: { finalized, events, slug, errorMessage } = {}, - isSubmitting, - }) => { + {({ status: { finalized, events, slug, errorMessage } = {}, isSubmitting }) => { return isSubmitting && shorten && !hasAny(shorten, 'PendingSignature', 'None') ? ( ) : ( @@ -35,13 +32,9 @@ export const FormContainer = () => {
- logo{" "} + {' '} {finalized ? ( - + ) : ( )} diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index fbe8cea..a2148ca 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,9 +1,9 @@ -import { Button } from "."; -import { useUI } from "../hooks"; -import logo from "../logo.svg"; -import { AccountsDropdown } from "./AccountsDropdown"; -import { XCircleIcon } from "@heroicons/react/24/solid"; -import { useWallet } from "useink"; +import { Button } from '.'; +import { useUI } from '../hooks'; +import { ReactComponent as Logo } from '../logo.svg'; +import { AccountsDropdown } from './AccountsDropdown'; +import { XCircleIcon } from '@heroicons/react/24/solid'; +import { useWallet } from 'useink'; export const Header = () => { const { account, accounts, disconnect } = useWallet(); @@ -12,26 +12,19 @@ export const Header = () => { return (
- logo + {!account ? ( - + ) : (
- {accounts && accounts.length > 0 && ( - - )} + {accounts && accounts.length > 0 && }
)} diff --git a/frontend/src/components/Loader.tsx b/frontend/src/components/Loader.tsx index f7acba5..e49b769 100644 --- a/frontend/src/components/Loader.tsx +++ b/frontend/src/components/Loader.tsx @@ -1,37 +1,33 @@ -import squid from "../squid.svg"; +import { ReactComponent as Squid } from '../squid.svg'; export const Loader = ({ message }: { message: string }) => { return (
- logo - logo - logo - logo - logo - logo - logo + + + + + + +
- logo +

Shortened with link!

-

{message}

+

{message}

diff --git a/frontend/src/hooks/useSubmitHandler.ts b/frontend/src/hooks/useSubmitHandler.ts index 20b6fae..a3fe07e 100644 --- a/frontend/src/hooks/useSubmitHandler.ts +++ b/frontend/src/hooks/useSubmitHandler.ts @@ -20,7 +20,8 @@ export const useSubmitHandler = () => { setSubmitting(false); } - if (!result?.status.isInBlock) return; + // TODO: fix me + // if (!result?.status.isInBlock) return; const events: UIEvent[] = []; let slug = ''; @@ -35,7 +36,7 @@ export const useSubmitHandler = () => { }); // Collect pallet emitted events - result?.events.forEach(({ event }) => { + result?.contractEvents?.forEach(({ event }) => { if ('ContractEmitted' !== event.method) { let message = ''; @@ -51,7 +52,8 @@ export const useSubmitHandler = () => { } }); - const dispatchError = shorten.result?.dispatchError; + // TODO: fix me + const dispatchError = false; //shorten.result?.dispatchError; if (dispatchError && link?.contract) { const errorMessage = decodeError(dispatchError, link, undefined, 'Something went wrong'); diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx deleted file mode 100644 index 9c64049..0000000 --- a/frontend/src/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import App from "./App"; -import { BrowserRouter as Router } from "react-router-dom"; -import { LinkContractProvider, UIProvider } from "./contexts"; -import { InkConfig, UseInkProvider } from "useink"; -import { RococoContractsTestnet } from 'useink/chains'; -import { NotificationsProvider } from "useink/notifications"; -import { Notifications } from "./components/Notifications"; - -const config: InkConfig = { - config: { - dappName: "link!", - chains: [RococoContractsTestnet], - caller: { - default: "5EyR7vEk7DtvEWeefGcXXMV6hKwB8Ex5uvjHufm466mbjJkR", - } - }, -}; - -const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement -); - -root.render( - - - - - - - - - - - - - - -); diff --git a/frontend/src/lib/converter.ts b/frontend/src/lib/converter.ts new file mode 100644 index 0000000..573ff63 --- /dev/null +++ b/frontend/src/lib/converter.ts @@ -0,0 +1,7 @@ +export function hexToString(hex = '') { + const result = []; + for (let i = 0; i < hex.length; i += 2) { + result.push(String.fromCharCode(parseInt(hex.substr(i, 2), 16))); + } + return result.join(''); +} diff --git a/frontend/src/link-logo.svg b/frontend/src/link-logo.svg index aa7d76e..a1314a6 100644 --- a/frontend/src/link-logo.svg +++ b/frontend/src/link-logo.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/frontend/src/index.css b/frontend/src/main.css similarity index 100% rename from frontend/src/index.css rename to frontend/src/main.css diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx new file mode 100644 index 0000000..0feda56 --- /dev/null +++ b/frontend/src/main.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './main.css'; +import App from './App'; +import { BrowserRouter as Router } from 'react-router-dom'; +import { LinkContractProvider, UIProvider } from './contexts'; +import { InkConfig, UseInkProvider } from 'useink'; +import { RococoContractsTestnet } from 'useink/chains'; +import { NotificationsProvider } from 'useink/notifications'; +import { Notifications } from './components/Notifications'; + +const config: InkConfig = { + config: { + dappName: 'link!', + chains: [RococoContractsTestnet], + caller: { + default: '5EyR7vEk7DtvEWeefGcXXMV6hKwB8Ex5uvjHufm466mbjJkR', + }, + }, +}; + +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); + +root.render( + + + + + + + + + + + + + + , +); diff --git a/frontend/src/types/UI.ts b/frontend/src/types/UI.ts index e709c5e..9afc610 100644 --- a/frontend/src/types/UI.ts +++ b/frontend/src/types/UI.ts @@ -12,4 +12,4 @@ export type Flatten = Type extends Array ? Item : Type; export type UIError = { message: string; -}; \ No newline at end of file +}; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index e40e3d3..b6f0bc6 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,40 +1,40 @@ module.exports = { - content: ["./src/**/*.{js,ts,jsx,tsx}"], + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { colors: { gray: { - 50: "#F9F9FB", - 100: "#F3F3F6", - 200: "#E5E5EB", - 300: "#D1D1DB", - 400: "#9D9CAF", - 500: "#6C6B80", - 600: "#4C4B63", - 700: "#383751", - 800: "#201F37", - 900: "#121127", + 50: '#F9F9FB', + 100: '#F3F3F6', + 200: '#E5E5EB', + 300: '#D1D1DB', + 400: '#9D9CAF', + 500: '#6C6B80', + 600: '#4C4B63', + 700: '#383751', + 800: '#201F37', + 900: '#121127', }, purple: { - 300: "#D7B5FD", - 800: "#3D2B52", - 850: "#2A2442", - 900: "#201F37", - transparent: "rgba(191, 139, 250, 0.4)", - transparent2: "rgba(191, 139, 250, 0.3)", + 300: '#D7B5FD', + 800: '#3D2B52', + 850: '#2A2442', + 900: '#201F37', + transparent: 'rgba(191, 139, 250, 0.4)', + transparent2: 'rgba(191, 139, 250, 0.3)', }, success: { - 500: '#00c900' + 500: '#00c900', }, warning: { - 500: '#ffbe54' + 500: '#ffbe54', }, error: { - 500: '#d6502b' + 500: '#d6502b', }, info: { - 500: '#bc83fb' - } + 500: '#bc83fb', + }, }, }, }, diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index a1173c9..e7d7953 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -1,21 +1,29 @@ { "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": false, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ "moduleResolution": "bundler", + "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "forceConsistentCasingInFileNames": true, + + /* Importing .svg files requires this line */ + "types": ["node", "vite-plugin-svgr/client"] }, "include": ["src"], - "ignore": ["node_modules"] + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/frontend/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index ed3b88a..8958662 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -5,16 +5,18 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsConfigPaths from 'vite-tsconfig-paths'; import eslintPlugin from '@nabla/vite-plugin-eslint'; +import svgr from 'vite-plugin-svgr'; +import nodePolyfills from 'vite-plugin-node-stdlib-browser'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react(), tsConfigPaths(), eslintPlugin()], + plugins: [react(), tsConfigPaths(), eslintPlugin(), svgr(), nodePolyfills()], server: { port: 8081 }, build: { target: 'esnext', rollupOptions: { output: { - dir: './dist', + dir: './build', manualChunks(id) { if (/[\\/]node_modules[\\/](react|react-dom)[\\/]/.test(id)) { return 'react';