Skip to content

Commit

Permalink
wip: upgrade useink and setup vite
Browse files Browse the repository at this point in the history
  • Loading branch information
gaboesquivel committed Aug 24, 2023
1 parent 2c53568 commit d8eadfa
Show file tree
Hide file tree
Showing 18 changed files with 190 additions and 152 deletions.
1 change: 1 addition & 0 deletions frontend/.eslintcache
Original file line number Diff line number Diff line change
@@ -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]"]
13 changes: 13 additions & 0 deletions frontend/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
12 changes: 11 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
39 changes: 22 additions & 17 deletions frontend/src/Resolver.tsx
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);

Expand All @@ -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(() => {
Expand All @@ -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 (
<div className="App h-screen flex flex-col justify-center">
{resolve?.isSubmitting && <Loader message={resolvedUrl ? `Redirecting to ${resolvedUrl}` : ""} />}
<div className="flex flex-col justify-center h-screen App">
{resolve?.isSubmitting && <Loader message={resolvedUrl ? `Redirecting to ${resolvedUrl}` : ''} />}
{!resolve?.isSubmitting && resolve?.result?.ok && !resolvedUrl && (
<div className="text-center">
<h1 className="text-2xl font-bold text-center">URL not found for <span className="bg-white/5 rounded-md p-2">{slug}</span></h1>
<p className="mt-6">Go back to <a href="/">shortener</a>.</p>
<h1 className="text-2xl font-bold text-center">
URL not found for <span className="p-2 rounded-md bg-white/5">{slug}</span>
</h1>
<p className="mt-6">
Go back to <a href="/">shortener</a>.
</p>
</div>
)}
</div>
Expand Down
31 changes: 12 additions & 19 deletions frontend/src/components/FormContainer.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -24,24 +24,17 @@ 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') ? (
<Loader message="Submitting transaction..." />
) : (
<>
<Header />
<div className="content">
<div className="form-panel">
<img src={linkLogo} className="link-logo" alt="logo" />{" "}
<LinkLogo className="link-logo" />{' '}
{finalized ? (
<SubmitResult
events={events}
slug={slug}
errorMessage={errorMessage}
/>
<SubmitResult events={events} slug={slug} errorMessage={errorMessage} />
) : (
<UrlShortenerForm />
)}
Expand Down
Loading

0 comments on commit d8eadfa

Please sign in to comment.