Skip to content

Commit

Permalink
Introduce Menu Button
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucemans
lucemans committed Nov 22, 2023
1 parent c336730 commit 866dc82
Show file tree
Hide file tree
Showing 6 changed files with 239 additions and 120 deletions.
1 change: 1 addition & 0 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@vitejs/plugin-react": "^4.2.0",
"@web3modal/wagmi": "^3.3.2",
"autoprefixer": "^10.4.16",
"clsx": "^2.0.0",
"postcss": "^8.4.31",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
8 changes: 8 additions & 0 deletions web/pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

237 changes: 127 additions & 110 deletions web/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { MenuSVG } from '@ensdomains/thorin';
import { FC, PropsWithChildren } from 'react';
import { FC, PropsWithChildren, useState } from 'react';
import useSWR from 'swr';
import { namehash } from 'viem';
import { useAccount, useContractRead, useEnsResolver } from 'wagmi';

import { Field } from './field/Field';
import { Header } from './header/Header';
import { GoGassless } from './migration/GoGassless';
import { UserProfile } from './UserProfile';

Expand Down Expand Up @@ -147,131 +148,147 @@ export const App = () => {
});
};

const [headerExpanded, setHeaderExpanded] = useState(false);

if (!data) return <div>Loading...</div>;

return (
<div className="w-full mx-auto max-w-xl px-4 pt-8 pb-16 flex flex-col gap-4">
<div className="flex justify-between items-center pb-2">
<div className="flex gap-4 items-center">
<img src="/mark.svg" alt="mark" className="h-12" />
<button onClick={() => { }}>
<MenuSVG />
</button>
<>
{headerExpanded && (
<Header
onClose={() => {
setHeaderExpanded(false);
}}
name={name}
/>
)}
<div className="w-full mx-auto max-w-xl px-4 pt-8 pb-16 flex flex-col gap-4">
<div className="flex justify-between items-center pb-2">
<div className="flex gap-4 items-center">
<img src="/mark.svg" alt="mark" className="h-12" />
<button
onClick={() => {
setHeaderExpanded(true);
}}
>
<MenuSVG />
</button>
</div>
<div className="h-12">
<UserProfile />
</div>
</div>
<div className="h-12">
<UserProfile />
<div className="px-4">
<span className="block font-bold text-3xl">
{name.split('.')[0]}
</span>
<span className="block text-xl">
.{name.split('.').slice(1).join('.')}
</span>
</div>
</div>
<div className="px-4">
<span className="block font-bold text-3xl">
{name.split('.')[0]}
</span>
<span className="block text-xl">
.{name.split('.').slice(1).join('.')}
</span>
</div>
<div className="relative flex flex-col items-center gap-4 p-4 bg-ens-light-background-primary dark:bg-ens-dark-background-primary border-ens-light-border dark:border-ens-dark-border border rounded-2xl">
<div className="w-full flex items-center justify-center">
<div className="relative aspect-square h-40 w-40">
<div className="aspect-square h-40 overflow-hidden w-40 rounded-full drop-shadow-md bg-ens-light-background-secondary dark:bg-ens-dark-background-secondary">
<div
className="w-full h-full"
style={{
background:
'linear-gradient(323deg, #DE82FF -15.56%, #7F6AFF 108.43%)',
}}
>
{data.records['avatar'] && (
<div className="relative flex flex-col items-center gap-4 p-4 bg-ens-light-background-primary dark:bg-ens-dark-background-primary border-ens-light-border dark:border-ens-dark-border border rounded-2xl">
<div className="w-full flex items-center justify-center">
<div className="relative aspect-square h-40 w-40">
<div className="aspect-square h-40 overflow-hidden w-40 rounded-full drop-shadow-md bg-ens-light-background-secondary dark:bg-ens-dark-background-secondary">
<div
className="w-full h-full"
style={{
background:
'linear-gradient(323deg, #DE82FF -15.56%, #7F6AFF 108.43%)',
}}
>
{data.records['avatar'] && (
<img
src={data.records['avatar']}
alt="avatar"
className="w-full h-full object-cover"
/>
)}
</div>
</div>
{editable && (
<div className="right-1 bottom-1 absolute w-14 h-14 rounded-full bg-ens-light-blue-primary dark:bg-ens-dark-blue-primary text-ens-light-text-accent dark:text-ens-dark-text-accent flex items-center justify-center">
<img
src={data.records['avatar']}
alt="avatar"
className="w-full h-full object-cover"
src="/pencil.svg"
alt="pencil"
className="h-[1em] fill-ens-light-text-accent"
/>
)}
</div>
</div>
)}
</div>
{editable && (
<div className="right-1 bottom-1 absolute w-14 h-14 rounded-full bg-ens-light-blue-primary dark:bg-ens-dark-blue-primary text-ens-light-text-accent dark:text-ens-dark-text-accent flex items-center justify-center">
<img
src="/pencil.svg"
alt="pencil"
className="h-[1em] fill-ens-light-text-accent"
/>
</div>
)}
</div>
</div>
<div className="w-full flex flex-col gap-2">
<Field
label="Display Name"
record="name"
value={data.records['name']}
editable={editable}
/>
<Field
label="Website"
record="url"
value={data.records['url']}
editable={editable}
/>
<Field
label="X"
record="com.twitter"
value={data.records['com.twitter']}
editable={editable}
/>
<Field
label="Telegram"
record="org.telegram"
value={data.records['org.telegram']}
editable={editable}
/>
<Field
label="Discord"
record="com.discord"
value={data.records['com.discord']}
editable={editable}
/>
<Field
label="Github"
record="com.github"
value={data.records['com.github']}
editable={editable}
/>
{DEVELOPER_MODE && (
<div className="w-full flex flex-col gap-2">
<Field
label="Resolver"
record="resolver"
editable={false}
value={ensResolver ?? '...'}
label="Display Name"
record="name"
value={data.records['name']}
editable={editable}
/>
<Field
label="Website"
record="url"
value={data.records['url']}
editable={editable}
/>
<Field
label="X"
record="com.twitter"
value={data.records['com.twitter']}
editable={editable}
/>
<Field
label="Telegram"
record="org.telegram"
value={data.records['org.telegram']}
editable={editable}
/>
<Field
label="Discord"
record="com.discord"
value={data.records['com.discord']}
editable={editable}
/>
)}
{DEVELOPER_MODE && ownerData && (
<Field
label="Owner"
record="owner"
editable={false}
value={ownerData.toString()}
label="Github"
record="com.github"
value={data.records['com.github']}
editable={editable}
/>
{DEVELOPER_MODE && (
<Field
label="Resolver"
record="resolver"
editable={false}
value={ensResolver ?? '...'}
/>
)}
{DEVELOPER_MODE && ownerData && (
<Field
label="Owner"
record="owner"
editable={false}
value={ownerData.toString()}
/>
)}
</div>
{editable && (
<FloatingButton>
<button
className="btn btn-primary btn-full"
onClick={() => mutateProfile()}
>
Update profile
</button>
</FloatingButton>
)}
{shouldSuggestGassless && (
<FloatingButton>
<GoGassless name={name} />
</FloatingButton>
)}
</div>
{editable && (
<FloatingButton>
<button
className="btn btn-primary btn-full"
onClick={() => mutateProfile()}
>
Update profile
</button>
</FloatingButton>
)}
{shouldSuggestGassless && (
<FloatingButton>
<GoGassless name={name} />
</FloatingButton>
)}
</div>
</div>
</>
);
};

Expand Down
55 changes: 46 additions & 9 deletions web/src/dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,58 @@
import { clsx } from 'clsx';
import { FC, PropsWithChildren } from 'react';
import { FiX } from 'react-icons/fi';

export const Dialog: FC<PropsWithChildren<{ onClose: () => void }>> = ({
onClose,
children,
}) => {
const variants = {
top: {
outer: 'inset-x-0 top-0',
inner: 'rounded-b-xl',
},
bottom: {
outer: 'inset-x-0 bottom-0',
inner: 'rounded-t-xl',
},
auto: {
outer: 'inset-x-0 bottom-0 md:inset-0',
inner: 'rounded-t-xl md:rounded-b-xl',
},
};

const close_styling = {
center: 'absolute left-1/2 -translate-x-1/2 -bottom-9 bg-ens-light-background-primary dark:bg-ens-dark-background-primary rounded-full p-1.5',
corner: 'absolute top-4 right-4 p-1 hover:bg-ens-light-grey-surface hover:dark:bg-ens-dark-grey-surface rounded-full',
};

export const Dialog: FC<
PropsWithChildren<{
onClose: () => void;
variant?: 'bottom' | 'top' | 'auto';
closeVariant?: 'center' | 'corner';
}>
> = ({ onClose, children, variant = 'auto', closeVariant = 'corner' }) => {
const vstyle = variants[variant];
const closestyle = close_styling[closeVariant];

return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
<div tabIndex={-1}>
<div className="fixed z-10 inset-0 bg-ens-light-grey-active/20 dark:bg-ens-light-grey-active/20 backdrop-blur-md"></div>
<div className="fixed z-20 inset-x-0 bottom-0 md:inset-0 flex items-center justify-center max-w-full">
<div className="relative bg-ens-light-background-primary dark:bg-ens-dark-background-primary p-4 rounded-t-xl md:rounded-b-xl shadow-xl w-full max-w-md border border-ens-light-border dark:border-ens-dark-border">
<div tabIndex={-1} className="z-10">
<div className="fixed z-0 inset-0 bg-ens-light-grey-active/20 dark:bg-ens-light-grey-active/20 backdrop-blur-md"></div>
<div
className={clsx(
'fixed z-10 flex items-center justify-center max-w-full',
vstyle.outer
)}
>
<div
className={clsx(
'relative bg-ens-light-background-primary dark:bg-ens-dark-background-primary p-4 shadow-xl w-full max-w-md border border-ens-light-border dark:border-ens-dark-border',
vstyle.inner
)}
>
<button
onClick={() => {
onClose();
}}
className="absolute top-4 right-4 p-1 hover:bg-ens-light-grey-surface hover:dark:bg-ens-dark-grey-surface rounded-full"
className={clsx('absolute', closestyle)}
>
<FiX />
</button>
Expand Down
6 changes: 5 additions & 1 deletion web/src/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
@apply bg-ens-light-blue-surface text-ens-light-blue-dim dark:bg-ens-dark-blue-surface dark:text-ens-dark-blue-dim;
}

.btn.btn-outline {
@apply border border-ens-light-border dark:border-ens-dark-border;
}

.btn.btn-full {
@apply w-full;
}
}
Loading

0 comments on commit 866dc82

Please sign in to comment.