UI refresh - Header #3
Conversation
| const signed = await signWithChainweaver(transaction); | ||
|
|
||
| if (!isSignedCommand(signed)) { | ||
| return console.log("Failed to sign transaction"); |
There was a problem hiding this comment.
Perhaps it is nicer to throw something, so a visual notification will be displayed to the user in the UI.
| if (result.status === "success") { | ||
| return result.data.valueOf() as boolean; | ||
| } else { | ||
| console.log(result.error); |
There was a problem hiding this comment.
we need to handle this situation better, so feedback is displayed in the UI
| const client = getClient(API_HOST); | ||
| const response = await client.submit(transaction); | ||
| console.log("Send response: ", response); | ||
| const requestKey = response[0]; |
There was a problem hiding this comment.
There is a cleaner way to do this, see the main branch.
| <input | ||
| onChange={handleInputChange} | ||
| value={inputValue} | ||
| className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
There was a problem hiding this comment.
i love tailwind, but I think this way of using it is too similar to using inline css styles, which has its known downsides.
| import { Candidate, CandidateProps } from "./Candidate"; | ||
| import { SpinnerRoundFilled } from "spinners-react"; | ||
|
|
||
| const candidates: Array<CandidateProps["candidate"]> = [ |
There was a problem hiding this comment.
This has been moved to an InMemoryCandidateRepository on the main branch
| import ReactDOM from "react-dom/client"; | ||
| import App from "./App.tsx"; | ||
| import { ChainWebApiContext } from "./api/api.ts"; | ||
| import "./index.css"; |
There was a problem hiding this comment.
Maybe group or sort imports alphabetically or logically.
|
Thank you for your contribution! It would be really nice if the styling would match that of the new docs website where the tutorial lives: https://docs.kadena.io/build/guides/election-dapp-tutorial. @barthuijgen 's PR is no longer up-to-date with main. Your React implementation looks very good. It would be very nice if we could integrate it with the latest structure of the frontend in the main branch. Some parts of that are missing in the branch you branch off of. |
Important
This is a continuation of @barthuigen's work. His PR should be merged before moving forward with this one.
These changes restyle the header to look modern and in line with Kadena's style. Functionality should be the same. Further improvements are some responsive tweaks, the header functions on mobile devices as well as on desktops.
The design is purely what I found pleasing, and I'm open to suggestions.
Desktop
Mobile