Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): ui / states improvements #161

Merged
merged 80 commits into from
Jan 18, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
80 commits
Select commit Hold shift + click to select a range
8aaa851
chore(blockchain): update hardhat configuration (#104)
remiroyc May 10, 2023
9bb4f12
fix(ci): update starknet workflow
remiroyc May 11, 2023
e572f38
fix(ci): update github worlflows
remiroyc May 11, 2023
96a000e
refactor(ci): rename workflows
remiroyc May 11, 2023
43e4d31
used create-t3-app to bootstrap the project and adapted previous comp…
YohanTz May 26, 2023
d1da6ce
chore: some things to make review easier
YohanTz May 26, 2023
bd43cf4
feat(cairo-contracts): scarb configuration
remiroyc May 25, 2023
5eb4a3d
chore: some things to make review easier
YohanTz May 26, 2023
cf6b709
nfts by collection ui in progress
YohanTz May 29, 2023
70ab664
feat: select nft + drawer
YohanTz May 30, 2023
6d893e3
a bit of refactor + color changes
YohanTz May 31, 2023
3c02388
added back testnet
YohanTz May 31, 2023
50319dd
added back border emerald when nft card selected
YohanTz May 31, 2023
8e91297
fix(deps): encoding
remiroyc Jun 1, 2023
48bd900
chore: started to fix errors
YohanTz Jun 1, 2023
f954a23
continued fixing build
YohanTz Jun 1, 2023
e0fca93
fix: build
YohanTz Jun 1, 2023
193089a
feat: wrapped some values with useMemo
YohanTz Jun 1, 2023
9ab8f66
some fixes + connect wallet buttons UI
YohanTz Jun 2, 2023
35676a6
refactor + show logo of the connected wallet
YohanTz Jun 2, 2023
e142918
started new modal
YohanTz Jun 5, 2023
75310ab
connect wallet ethereum / starknet modals
YohanTz Jun 6, 2023
da924b1
refactor: chain transfer summary
YohanTz Jun 6, 2023
873383f
change casing to fix build
YohanTz Jun 7, 2023
26b3e98
design system package
YohanTz Jun 15, 2023
7dd5d88
design system package with no refresh needed
YohanTz Jun 16, 2023
3bf0fb5
applied font styles
YohanTz Jun 19, 2023
a229aa1
navigation
YohanTz Jun 19, 2023
05e978a
illustrations + disconnect ui
YohanTz Jun 21, 2023
509863d
removed unnecessary comment in tailwind config
YohanTz Jun 21, 2023
7ee5958
comment on tailwind config
YohanTz Jun 21, 2023
7eec336
home page
YohanTz Jun 21, 2023
67db32c
started portfolio page
YohanTz Jun 21, 2023
4a05a19
added dark mode / bridge icons to the header
YohanTz Jun 21, 2023
f4d4784
added dark mode support, without proper colors for now
YohanTz Jun 21, 2023
db0cd47
started dark mode
YohanTz Jun 21, 2023
7b80f85
coinbase wallet support + started useNftSelection
YohanTz Jun 23, 2023
cb99744
added eslint perfectionist plugin
YohanTz Jun 23, 2023
ddda20a
selected nfts are now stored in the local storage, by address
YohanTz Jun 23, 2023
f1742fd
new custom hook `useTargetChain`
YohanTz Jun 23, 2023
892dac6
continued dark mode
YohanTz Jun 26, 2023
e7f0ef0
added chain image on nftcard
YohanTz Jun 26, 2023
28b058c
modified hook `useTargetChain` to `useCurrentChain`
YohanTz Jun 26, 2023
437032c
Lounge modifications
YohanTz Jun 26, 2023
70aa29f
started portfolio page
YohanTz Jun 27, 2023
248f60d
small adjustments + ethereum color updates
YohanTz Jun 27, 2023
4fe3c44
new logos for starknet / ethereum + started lounge
YohanTz Jun 27, 2023
ab6d3a6
new delete nft button style
YohanTz Jun 27, 2023
ae5aeff
added display options icons
YohanTz Jun 27, 2023
4f05b1e
some fixes + grid / list view of lounge
YohanTz Jun 28, 2023
706f56e
started mobile
YohanTz Jul 4, 2023
24317d0
bump starknet-react
YohanTz Jul 4, 2023
c150c97
continued mobile
YohanTz Jul 4, 2023
ed9389c
started mobile
YohanTz Jul 6, 2023
f98deee
mobile modifications
YohanTz Jul 7, 2023
3d75d01
approve + transfer connected to SCs
YohanTz Jul 9, 2023
e43b17e
added todo comment
YohanTz Jul 9, 2023
b029d88
added font sizes for smaller screens
YohanTz Jul 10, 2023
8e96108
refactor nft transfer to custom hook
YohanTz Jul 31, 2023
a69a0e7
chore: new folder architecture
YohanTz Sep 4, 2023
2713aae
states / ui improvements
YohanTz Sep 12, 2023
2e10c8c
fix: lint
YohanTz Sep 12, 2023
b0741ef
removed unused file caused by the merge, and fix build
YohanTz Sep 12, 2023
00679a8
attempt to fix build
YohanTz Sep 12, 2023
47f3304
attempt to fix build 2
YohanTz Sep 12, 2023
6944a70
updated assets + refactor chain switch component
YohanTz Oct 9, 2023
8392df6
nft api fix + new target chain switch
YohanTz Oct 9, 2023
aa56d7a
attempt to fix build bug
YohanTz Oct 10, 2023
f54e2f5
deleted unwanted pnpm lock file
YohanTz Oct 10, 2023
82365f5
added hover states and multiple design changes
YohanTz Oct 10, 2023
966ed14
notifications
YohanTz Oct 17, 2023
95ffe65
Update IconButton.tsx
YohanTz Oct 10, 2023
cbc843a
new api
YohanTz Oct 18, 2023
8086047
loading / empty states fixes
YohanTz Oct 18, 2023
ba833a5
completed whole flow
YohanTz Oct 18, 2023
0cae2b9
improved the whole flow
YohanTz Oct 18, 2023
5b0eb9a
fix(web): add console log for nfts api
remiroyc Oct 18, 2023
7543dff
fix(web): add console log for nfts api
remiroyc Oct 18, 2023
0323b7b
refactor: fix lint and type issues
gershon Jan 16, 2024
08b1f10
build: tryfix build issue
gershon Jan 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
navigation
  • Loading branch information
YohanTz authored and gershon committed Jan 16, 2024
commit a229aa168128e9740ce35976f8517ea03484b63c
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,13 @@ function StarknetConnectorList() {
<button onClick={disconnect}>Disconnect</button>
) : (
<>
<Dialog.Description className="mb-6 mt-5 font-semibold">
<Typography
variant="heading_light_xxs"
component={Dialog.Description}
className="mb-6 mt-5"
>
Choose your Starknet wallet
</Dialog.Description>
</Typography>
<div className="flex flex-col gap-4">
{connectors.map((connector) => {
return (
Expand Down
100 changes: 100 additions & 0 deletions apps/web/src/app/bridge/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
"use client";

import ConnectStarkNetButton from "./ConnectStarkNetButton";
import ConnectEthereumButton from "./ConnectEthereumButton";
import { useEffect, useState } from "react";
import { type Chain } from "../helpers";
import { Typography } from "design-system";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useAccount as useStarknetAccount } from "@starknet-react/core";
import { useAccount as useEthereumAccount } from "wagmi";

const connectedPages = [
{ name: "Portfolio", path: "/portfolio" },
{ name: "Bridge", path: "/bridge" },
{ name: "Lounge room", path: "/lounge" },
];

export default function Header() {
const [openedModal, setOpenedModal] = useState<Chain | undefined>(undefined);
const {
isConnected: isEthereumConnected,
isConnecting: isEthereumConnecting,
} = useEthereumAccount();
const {
isConnected: isStarknetConnected,
isConnecting: isStarknetConnecting,
} = useStarknetAccount();

const router = useRouter();
const pathname = usePathname();

const isFullyConnected = isEthereumConnected && isStarknetConnected;
// TODO @YohanTz: fix isConnecting in starknet-react
const isConnecting =
isEthereumConnecting ||
isStarknetConnecting ||
isStarknetConnecting === undefined;

useEffect(() => {
if (pathname === "/" && isFullyConnected) {
router.push("/bridge");
return;
}

if (!isFullyConnected && !isConnecting) {
router.push("/");
}
}, [pathname, isFullyConnected, router, isConnecting]);

function openModal(chain: Chain) {
setOpenedModal(chain);
}

function closeModal() {
setOpenedModal(undefined);
}

return (
<div className="fixed z-20 flex w-full items-center justify-between border-b border-neutral-50 bg-white p-6">
<Link href="/">
<Typography variant="logo">starklane</Typography>
</Link>
<div className="flex gap-20">
{isFullyConnected && (
<div className="flex items-center gap-8">
{connectedPages.map((connectedPage) => {
return (
<Link key={connectedPage.name} href={connectedPage.path}>
<Typography
variant="heading_light_xxs"
className={
pathname === connectedPage.path ? "text-primary-300" : ""
}
>
{connectedPage.name}
</Typography>
</Link>
);
})}
</div>
)}
<div className="flex gap-4">
<ConnectEthereumButton
isModalOpen={openedModal === "Ethereum"}
onOpenModalChange={(open: boolean) => {
open ? openModal("Ethereum") : closeModal();
}}
/>
<ConnectStarkNetButton
isModalOpen={openedModal === "Starknet"}
onOpenModalChange={(open: boolean) => {
open ? openModal("Starknet") : closeModal();
}}
/>
</div>
</div>
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function ChainTransferSummary({

return (
<div
className={`flex justify-between gap-3 rounded-xl bg-neutral-50 px-3.5 ${
className={`flex justify-between gap-3 rounded-2xl bg-neutral-50 px-3.5 ${
isTargetChain ? "pb-3 pt-7" : "pb-7 pt-3"
}`}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function TargetChainSwitch({
const isSSR = useIsSSR();

return (
<div className=" my-4 inline-flex gap-0.5">
<div className=" my-8 inline-flex gap-0.5">
<button
onClick={() => setTargetChain("Ethereum")}
className={`flex items-center gap-2 rounded-l-2xl py-3 pl-3 pr-6 ${
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import argentXLogo from "../../public/argentX_logo.png";
import braavosLogo from "../../public/braavos_logo.png";
import ethereumLogo from "../../public/ethereum_logo.png";
import metaMaskLogo from "../../public/metamask_logo.png";
import starknetLogo from "../../public/starknet_logo.png";
import argentXLogo from "../../../public/argentX_logo.png";
import braavosLogo from "../../../public/braavos_logo.png";
import ethereumLogo from "../../../public/ethereum_logo.png";
import metaMaskLogo from "../../../public/metamask_logo.png";
import starknetLogo from "../../../public/starknet_logo.png";
import { type StaticImageData } from "next/image";

export type Chain = "Ethereum" | "Starknet";
Expand Down
47 changes: 47 additions & 0 deletions apps/web/src/app/bridge/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
"use client";

import { useState } from "react";
import TargetChainSwitch from "./components/TargetChainSwitch";
import TokenList from "./components/TokenList";
import NftTransferDrawer from "./components/NftTransferDrawer";
import { type Chain } from "./helpers";
import { useLocalStorage } from "usehooks-ts";
import { Typography } from "design-system";

// TODO @YohanTz: Refactor when the UX is finalized
export default function Page() {
// TODO @YohanTz: Use custom hook to manage the local storage of selected Nfts (by chain + by address)
const [selectedNftIds, setSelectedNftIds] = useState<Array<string>>([]);
const [targetChain, setTargetChain] = useLocalStorage<Chain>(
"chain",
"Ethereum"
);

return (
<div className="flex">
<main className="mx-auto mt-[8.125rem] w-full max-w-7xl px-4 text-center">
<Typography component="h1" variant="heading_light_l">
Where do you want to move
<br />
your digital goods?
</Typography>
<TargetChainSwitch
targetChain={targetChain}
setTargetChain={setTargetChain}
/>
<Typography component="p" variant="body_text_20" className="mb-20">
Select the assets you want to transfer to {targetChain}
</Typography>
<TokenList
selectedNftIds={selectedNftIds}
setSelectedNftIds={setSelectedNftIds}
/>
</main>
<NftTransferDrawer
selectedNftIds={selectedNftIds}
setSelectedNftIds={setSelectedNftIds}
targetChain={targetChain}
/>
</div>
);
}
39 changes: 0 additions & 39 deletions apps/web/src/app/components/Header.tsx

This file was deleted.

10 changes: 0 additions & 10 deletions apps/web/src/app/head.tsx

This file was deleted.

6 changes: 3 additions & 3 deletions apps/web/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { publicProvider } from "wagmi/providers/public";
import { useLocalStorage } from "usehooks-ts";
import localFont from "next/font/local";

import Footer from "./components/Footer";
import Header from "./components/Header";
import Footer from "./bridge/components/Footer";
import Header from "./bridge/components/Header";
import { api } from "~/utils/api";
import { type Chain } from "./helpers";
import { type Chain } from "./bridge/helpers";

// TODO @YohanTz: Handle wallet connect and coinbase wallet connectors
// const alchemyId = process.env.ALCHEMY_ID;
Expand Down
9 changes: 9 additions & 0 deletions apps/web/src/app/lounge/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function Page() {
return (
<div className="flex">
<main className="mx-auto mt-[8.125rem] w-full max-w-7xl px-4 text-center">
Lounge
</main>
</div>
);
}
43 changes: 1 addition & 42 deletions apps/web/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,9 @@
"use client";

import { useState } from "react";
import TargetChainSwitch from "./components/TargetChainSwitch";
import TokenList from "./components/TokenList";
import NftTransferDrawer from "./components/NftTransferDrawer";
import { type Chain } from "./helpers";
import { useLocalStorage } from "usehooks-ts";
import { Typography } from "design-system";

// TODO @YohanTz: Refactor when the UX is finalized
export default function Page() {
// TODO @YohanTz: Use custom hook to manage the local storage of selected Nfts (by chain + by address)
const [selectedNftIds, setSelectedNftIds] = useState<Array<string>>([]);
const [targetChain, setTargetChain] = useLocalStorage<Chain>(
"chain",
"Ethereum"
);

return (
<div className="flex">
<main className="mx-auto mt-[8.125rem] w-full max-w-7xl px-4 text-center">
<Typography component="h1" className="mb-8" variant="heading_light_l">
Where do you want to move
<br />
your digital goods?
</Typography>
<TargetChainSwitch
targetChain={targetChain}
setTargetChain={setTargetChain}
/>
{/* <p className="mb-10 text-xl">
Select the assets you want to transfer to {targetChain}
</p> */}
<Typography component="p" variant="body_text_20" className="mb-10">
Select the assets you want to transfer to {targetChain}
</Typography>
<TokenList
selectedNftIds={selectedNftIds}
setSelectedNftIds={setSelectedNftIds}
/>
HOME
</main>
<NftTransferDrawer
selectedNftIds={selectedNftIds}
setSelectedNftIds={setSelectedNftIds}
targetChain={targetChain}
/>
</div>
);
}
9 changes: 9 additions & 0 deletions apps/web/src/app/portfolio/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function Page() {
return (
<div className="flex">
<main className="mx-auto mt-[8.125rem] w-full max-w-7xl px-4 text-center">
Portfolio
</main>
</div>
);
}
1 change: 1 addition & 0 deletions packages/design-system/src/Typography.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export function Typography({
const Component = component ?? "span";

return (
// TODO @YohanTz: Use tailwind-merge
<Component className={`${variants[variant]} ${className}`}>
{children}
</Component>
Expand Down