Merge pull request #36 from Laina-Protocol/feat/style-tweaks

feat: Build the whole app in CI, style tweaks

.github/workflows/deploy.yml

@@ -2,10 +2,6 @@ name: Build and Deploy
 on:
   push:
     branches: [ main ]
-  workflow_run:
-    workflows: [nodejs, rust, rustfmt]
-    types:
-      - completed
 
 permissions:
   contents: read

.github/workflows/verify-build.yml

@@ -0,0 +1,49 @@
+name: Verify Build
+on:
+  push:
+    branches: '**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+
+      - name: Read .nvmrc
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+        id: nvm
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
+
+      - name: Install Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: stable
+
+      - name: Rust cache
+        uses: Swatinem/rust-cache@v2
+
+      - name: Install Stellar
+        run: cargo install --locked stellar-cli --features opt
+
+      - name: Build contracts
+        run: make build
+
+      - name: Run clippy
+        run: cargo clippy -- -D warnings
+
+      - name: Setup env
+        run: cp .env.example .env
+
+      - name: Install and build
+        run: |
+          npm install
+          npm run init
+
+      - name: Install, build, and upload your site output
+        uses: withastro/action@v2

src/components/Nav.tsx

@@ -35,15 +35,15 @@ export default function Nav() {
 }
 
 const LinkCluster = () => (
-  <div className="flex flex-row ml-auto mr-12">
+  <div className="flex flex-row ml-auto mr-14">
     <LinkItem to="/lend">Lend</LinkItem>
     <LinkItem to="/borrow">Borrow</LinkItem>
     <LinkItem to="/liquidate">Liquidate</LinkItem>
   </div>
 );
 
 const LinkItem = ({ to, children }: PropsWithChildren<{ to: string }>) => (
-  <Link to={to} className="font-semibold p-7 hover:underline">
+  <Link to={to} className="text-base font-semibold p-4 hover:underline">
     {children}
   </Link>
 );

src/pages/_borrow/BorrowPage.tsx

@@ -3,7 +3,7 @@ import { BorrowableAssetCard } from './BorrowableAssetCard';
 
 const BorrowPage = () => (
   <div>
-    <h1 className="text-3xl font-semibold mb-8">Borrow Assets</h1>
+    <h1 className="text-3xl font-semibold mb-8 tracking-tight">Borrow Assets</h1>
     {CURRENCIES.map((currency) => (
       <BorrowableAssetCard key={currency.symbol} currency={currency} />
     ))}

src/pages/_borrow/BorrowableAssetCard.tsx

@@ -45,7 +45,7 @@ export const BorrowableAssetCard = ({ currency }: BorrowableAssetCardProps) => {
       <img src={icon} alt="" className="w-12" />
 
       <div className="ml-6 w-64">
-        <h2 className="font-semibold text-2xl leading-6 mt-3">{name}</h2>
+        <h2 className="font-semibold text-2xl leading-6 mt-3 tracking-tight">{name}</h2>
         <span>{symbol}</span>
       </div>
 

src/pages/_landing/LandingPage.tsx

@@ -23,21 +23,21 @@ const LandingPage = () => (
   <>
     <section className="flex flex-row mb-14">
       <div className="w-1/2">
-        <h1 className="text-[42px] font-medium mb-8">
+        <h1 className="text-[42px] font-medium mb-8 tracking-tight">
           A trustless loan platform focusing on single-token lending pools.
         </h1>
-        <h2 className="text-[42px] font-bold">DeFi made simple.</h2>
+        <h2 className="text-[42px] font-bold tracking-tight">DeFi made simple.</h2>
       </div>
       <div className="w-1/2">
         <img src={CardsImage.src} alt="" />
       </div>
     </section>
     <section className="border-t-4 flex flex-row my-14">
       <div className="w-1/2 pt-14 pr-14 border-r-4">
-        <p className="text-2xl leading-relaxed mb-8">
+        <p className="text-2xl leading-relaxed mb-8 tracking-tight">
           Laina is currently in the early development stage and is only operating on the Stellar Testnet.
         </p>
-        <p className="text-2xl leading-relaxed mb-8">Now that you're here, take a peek.</p>
+        <p className="text-2xl leading-relaxed mb-8 tracking-tight">Now that you're here, take a peek.</p>
         <LinkButton to="/lend" className="text-lg">
           Open the app
         </LinkButton>
@@ -56,15 +56,17 @@ const LandingPage = () => (
     </section>
     <section className="flex flex-row my-20">
       <div className="w-1/2">
-        <h3 className="text-[42px] font-bold mb-14">The Team</h3>
+        <h3 className="text-[42px] font-bold mb-14 tracking-tight">The Team</h3>
         <div className="flex flex-row">
           {team.map((member) => (
             <TeamMember key={member.name} {...member} />
           ))}
         </div>
       </div>
       <div className="w-1/2 p-14 my-auto">
-        <p className="text-xl mb-8 leading-relaxed">Got a question? Ask us in the Stellar Dev Discord!</p>
+        <p className="text-xl mb-8 leading-relaxed tracking-tight">
+          Got a question? Ask us in the Stellar Dev Discord!
+        </p>
         <NativeLinkButton to="https://discord.com/invite/stellardev" className="text-lg">
           Join Stellar Discord
         </NativeLinkButton>

src/pages/_lend/LendPage.tsx

@@ -4,7 +4,7 @@ import { LendableAssetCard } from './LendableAssetCard';
 const LendPage = () => {
   return (
     <>
-      <h1 className="text-3xl font-semibold mb-8">Lend Assets</h1>
+      <h1 className="text-3xl font-semibold mb-8 tracking-tight">Lend Assets</h1>
       {CURRENCIES.map((currency) => (
         <LendableAssetCard currency={currency} key={currency.symbol} />
       ))}

src/pages/_lend/LendableAssetCard.tsx

@@ -110,16 +110,6 @@ export const LendableAssetCard = ({ currency }: LendableAssetCardProps) => {
     return () => clearInterval(intervalId);
   }, [fetchAvailableContractBalance, fetchPriceData]); // Now dependent on the memoized function
 
-  const buttonLabel = (): string => {
-    if (!wallet) {
-      return 'Connect a wallet first.';
-    }
-    if (isPoor) {
-      return 'Not enough funds in the wallet.';
-    }
-    return '';
-  };
-
   const openModal = () => {
     const modalEl = document.getElementById(DEPOSIT_MODAL_ID) as HTMLDialogElement;
     modalEl.showModal();
@@ -136,7 +126,7 @@ export const LendableAssetCard = ({ currency }: LendableAssetCardProps) => {
       <img src={icon} alt="" className="w-12" />
 
       <div className="ml-6 w-64">
-        <h2 className="font-semibold text-2xl">{name}</h2>
+        <h2 className="font-semibold text-2xl leading-6 mt-3 tracking-tight">{name}</h2>
         <span>{symbol}</span>
       </div>
 

src/pages/_liquidate/LiquidatePage.tsx

@@ -1,6 +1,6 @@
 const LiquidatePage = () => (
   <div>
-    <h1 className="text-3xl font-semibold mb-8">Available for Liquidation</h1>
+    <h1 className="text-3xl font-semibold mb-8 tracking-tight">Available for Liquidation</h1>
     <p>Coming soon!</p>
   </div>
 );