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.

Sign up for GitHub

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: root app layout and styles #33

Merged
merged 2 commits into from
Jan 20, 2023
Merged

feat: root app layout and styles #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75af077
feat: root app layout and styles
samsiegart Jan 18, 2023
bd8f36c
chore: use helper fn for truncated address
samsiegart Jan 19, 2023
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
5 changes: 4 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<html
lang="en"
class="h-full bg-gradient-to-b from-interYellow to-interOrange bg-no-repeat bg-fixed"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why class the <html> instead of <body>?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the background color, I want it to affect the entire page even if there's no content. This way we don't have to artificially stretch the body out to fill the whole screen just to apply the background.

>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/IST.png" />
Expand Down
Binary file added public/inter-protocol-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions public/inter-protocol-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 21 additions & 22 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { useState } from 'react';
import ConnectWalletButton from 'components/ConnectWalletButton';
import NetworkDropdown from 'components/NetworkDropdown';
import OfferSignerBridge from 'components/OfferSignerBridge';
import { ToastContainer } from 'react-toastify';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
Expand All @@ -14,12 +12,21 @@ import { makeLeader } from '@agoric/casting';

import 'react-toastify/dist/ReactToastify.css';
import 'styles/globals.css';
import Root from 'views/Root';

const router = createBrowserRouter([
{
path: '/',
element: <Vaults />,
element: <Root />,
errorElement: <ErrorPage />,
children: [
{
index: true,
element: <Vaults />,
errorElement: <ErrorPage />,
path: '/vaults',
},
],
},
]);

Expand Down Expand Up @@ -50,34 +57,26 @@ const App = () => {
}, [setError, leader, netConfig, setLeader]);

return (
<>
<div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to make sure I understand, was this necessary?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah nope.

<ToastContainer
position={'bottom-right'}
closeOnClick={false}
newestOnTop={true}
hideProgressBar={true}
autoClose={false}
></ToastContainer>
<OfferSignerBridge />
<div className="w-screen max-w-7xl m-auto">
<div className="flex w-full justify-end p-4">
<div className="flex flex-row space-x-2">
<NetworkDropdown />
<ConnectWalletButton />
<OfferSignerBridge />
</div>
</div>
<div className="w-full">
{error ? (
<>
<div>Error connecting to chain</div>
<details>{error.toString()}</details>
</>
) : (
<RouterProvider router={router} />
)}
</div>
{error ? (
<>
<div>Error connecting to chain</div>
<details>{error.toString()}</details>
</>
) : (
<RouterProvider router={router} />
)}
</div>
</>
</div>
);
};

Expand Down
16 changes: 11 additions & 5 deletions src/components/ConnectWalletButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,17 @@ import { useAtomValue } from 'jotai';
import { Oval } from 'react-loader-spinner';

import {
ChainConnection,
chainConnectionAtom,
isWalletConnectionInProgressAtom,
networkConfigAtom,
walletServiceAtom,
} from 'store/app';
import clsx from 'clsx';

const truncatedAddress = (chainConnection: ChainConnection) =>
chainConnection.address.substring(chainConnection.address.length - 7);

const ConnectWalletButton = () => {
const walletService = useAtomValue(walletServiceAtom);
const isConnectionInProgress = useAtomValue(isWalletConnectionInProgressAtom);
Expand All @@ -20,24 +24,26 @@ const ConnectWalletButton = () => {
return 'Connecting';
} else if (chainConnection) {
// TODO, add a way to call walletService.disconnect.
return 'Keplr Connected';
return `...${truncatedAddress(chainConnection)} Connected`;
}
return 'Connect Keplr';
return 'Connect Wallet';
})();

return (
<button
className={clsx(
'border border-primary group inline-flex items-center rounded-md px-3 py-2 bg-transparent text-base font-medium text-primary',
!isConnectionInProgress && !chainConnection && 'hover:bg-gray-100',
'uppercase box-border border-2 border-mineShaft h-11 inline-flex items-center justify-center rounded-[4px] w-44 py-2 bg-transparent text-xs font-black',
!isConnectionInProgress &&
!chainConnection &&
'hover:bg-black hover:bg-opacity-5',
)}
onClick={() => walletService.connect(url)}
>
<>
{status}
{isConnectionInProgress && (
<div className="ml-1">
<Oval color="#c084fc" height={18} width={18} />
<Oval color="var(--color-mineShaft)" height={18} width={18} />
</div>
)}
</>
Expand Down
17 changes: 17 additions & 0 deletions src/components/MainContentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { PropsWithChildren, ReactNode } from 'react';

type Props = PropsWithChildren<{ header?: ReactNode; subheader?: ReactNode }>;

const MainContentCard = ({ children, header, subheader }: Props) => {
return (
<div className="w-full bg-gradient-to-br from-[#fffcf2] to-[#ffffff] rounded-t-3xl rounded-b-xl shadow-[0px_34px_50px_0px_#ff7a1a]">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not familiar with this brackets in className syntax. Is some part of the build chain making classes on the fly?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, I could also define a custom class but just went with this method because these values are quite bespoke.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

<div className="bg-interYellow h-12 rounded-t-3xl">{header}</div>
<div className="w-full h-[1px] bg-[#f4cd0c]" />
<div className="w-full h-[1px] bg-[#ffe252]" />
<div className="bg-interYellow h-12">{subheader}</div>
<div className="p-8">{children}</div>
</div>
);
};

export default MainContentCard;
9 changes: 3 additions & 6 deletions src/components/NetworkDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,10 @@ const NetworkDropdown = () => {
));

return (
<Menu as="div" className="relative inline-block text-left">
<Menu.Button className="inline-flex w-full justify-center rounded-md bg-black bg-opacity-5 px-4 py-3 text-md font-medium text-primary hover:bg-opacity-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
<Menu as="div" className="relative inline-block text-left h-11">
<Menu.Button className="inline-flex w-full justify-center items-center rounded-md bg-black bg-opacity-5 px-4 h-full text-md font-medium hover:bg-opacity-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
{networkConfig.label}
<FiChevronDown
className="ml-2 -mr-1 h-6 w-5 text-primary"
aria-hidden="true"
/>
<FiChevronDown className="ml-2 -mr-1 h-6 w-5" aria-hidden="true" />
</Menu.Button>
<Transition
as={Fragment}
Expand Down
3 changes: 3 additions & 0 deletions src/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@
* {
border-color: #e5e7eb;
}
html {
@apply text-mineShaft;
}
}
6 changes: 6 additions & 0 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import 'base.css';
@import 'utilities.css';
@import 'components.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
--color-glow: #fed7aa;
Expand All @@ -10,5 +12,9 @@
--color-alternative-bright: #fafafa;
--color-primary: #c084fc;
--color-primary-dark: #a855f7;
--color-mineShaft: #484848;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this name is so specific as to not be a variable. Please name it for a role (e.g. text) or an approximate color (like gray)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered that but this color is referred to as "mine shaft" in the figma. It's also used a couple places not as text. I figured it would be easier for maintainers referring to the figma to reference it in the code as the same name. I could maybe add an alias for it in tailwind.config.cjs?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get why the Figma would use it, because they're designing a screen that doesn't have to be maintained. In code we should not name literal colors. If there were more time I'd say to work with the designers to understand how they use "mine shaft" and ask them to give it a semantic name. But I won't block on this.

--currentColor: #d1d5db;
--inter-yellow: #ffd81a;
--inter-orange: #ff7a1a;
--inter-purple: #b787f5;
}
8 changes: 0 additions & 8 deletions src/styles/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
@tailwind utilities;

@layer utilities {
.position-swap-icon {
top: 93.5%;
}

.position-swap-icon-remove {
top: 41%;
}

/* hiding arrows from number input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
Expand Down
67 changes: 67 additions & 0 deletions src/views/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { NavLink, Outlet, useLocation, Navigate } from 'react-router-dom';
import NetworkDropdown from '../components/NetworkDropdown';
import ConnectWalletButton from '../components/ConnectWalletButton';

type NavItemProps = {
label: string;
href: string;
};

const NavItem = ({ label, href }: NavItemProps) => {
return (
<li>
<NavLink
className="h-full justify-between flex flex-col font-serif"
to={href}
>
{({ isActive }) => (
<>
<div className="h-1.5"></div>
<span className="m-2 font-bold">{label}</span>
<div
className={
isActive
? 'h-1.5 bg-mineShaft w-full rounded-t-[3px] shadow-[0_-1px_8px_0px_#484848]'
: 'h-1.5'
}
></div>
</>
)}
</NavLink>
</li>
);
};

const Root = () => {
const { pathname } = useLocation();
const shouldRedirectToVaults = pathname === '/';

return (
<>
<div className="flex w-full justify-between h-24">
<div className="flex flex-row space-x-10">
<img
src="/inter-protocol-logo.svg"
alt="Inter Protocol Logo"
height="48"
width="174"
/>
<nav>
<ul className="h-full flex flex-row space-x-12">
<NavItem label="Vaults" href="/vaults" />
<NavItem label="Liquidations" href="/liquidations" />
</ul>
</nav>
</div>
<div className="flex flex-row space-x-2 items-center mr-6">
<NetworkDropdown />
<ConnectWalletButton />
</div>
</div>
{shouldRedirectToVaults && <Navigate to="/vaults"></Navigate>}
<Outlet />
</>
);
};

export default Root;
25 changes: 21 additions & 4 deletions src/views/Vaults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
import { watchVaultFactory } from 'service/vaults';
import CollateralChoices from 'components/CollateralChoices';
import ManageVaults from 'components/ManageVaults';
import MainContentCard from 'components/MainContentCard';
import { useVaultStore } from 'store/vaults';

enum Mode {
Expand Down Expand Up @@ -56,12 +57,28 @@ const Vaults = () => {
};
const buttonProps = buttonPropsForMode[mode];

const subheader = (
<div className="h-full flex flex-row items-center">
<div className="ml-16 h-fit">
<span className="font-medium font-serif text-[#736D6D] mr-2">
IST Outstanding
</span>
<span className="font-bold font-serif text-mineShaft">$ --</span>
</div>
<div className="ml-16 h-fit">
<span className="font-medium font-serif text-[#736D6D] mr-2">
Total Value Locked
</span>
<span className="font-bold font-serif text-mineShaft">$ --</span>
</div>
</div>
);

return (
<>
<h1>Vaults</h1>
<MainContentCard subheader={subheader}>
<div className="w-full flex justify-end">
<button
className="text-gray-50 font-medium text-xs uppercase flex flex-row justify-center items-center p-3 bg-purple-400 rounded-md"
className="text-[#f9fafe] text-xs uppercase flex flex-row justify-center items-center p-3 bg-interPurple rounded-md shadow-[0_10px_14px_-4px_rgba(183,135,245,0.3)]"
onClick={buttonProps.onClick}
>
{buttonProps.text}
Expand All @@ -70,7 +87,7 @@ const Vaults = () => {
{managerIdsLoadingError && <div>{managerIdsLoadingError}</div>}
{watchVbankError && <div>{watchVbankError}</div>}
{content}
</>
</MainContentCard>
);
};

Expand Down
Loading