Added deploy action for github pages

d3-inc · Oct 28, 2024 · c6375da · c6375da
1 parent 651c37b
commit c6375da
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 101 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,33 @@
+name: Deploy d3-api-demo to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main # Deploy when changes are pushed to the main branch
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.18.2'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build the widget test app for production
+        run: yarn build
+        env:
+          VITE_D3_API_KEY: ${{ secrets.VITE_D3_API_KEY }}
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,8 @@
-"use client";
-import { useIsClient } from "./hooks/useIsClient";
-import { RootProvider } from "./providers/index";
-import { AppView } from "./views/index";
+'use client';
+import { RootProvider } from './providers/index';
+import { AppView } from './views/index';
 
 export const App = () => {
-  const isClient = useIsClient();
-  if (!isClient) return null;
   return (
     <RootProvider>
       <AppView />

diff --git a/src/components/wallets/evmWalletButtons.tsx b/src/components/wallets/evmWalletButtons.tsx
@@ -25,16 +25,9 @@ export default function EVMWalletButtons() {
 
   return (
     <div className={clsx('flex items-center justify-center flex-col gap-3 mt-3')}>
-      {/* 
-        Coinbase and wallet connect connectors don't have an icon
-        Coinbase could be an extension as well so it could appear in both injected
-        and coinbase connector. So, we need to detect that and not show the duplicate options.
-      */}
       {Array.from(connectors)
         .reverse()
         .map((connector) => {
-          // When there are injected providers added, we don't need to render the injected
-          // option
           if (areAdditionalInjectorsInserted && connector?.id === 'injected') return null;
           return (
             <Button
@@ -68,7 +61,19 @@ export default function EVMWalletButtons() {
               ) : connector?.id === 'injected' && isCoin98Wallet() ? (
                 <ButtonContent label={'Coin98'} icon={connector.icon} />
               ) : (
-                <ButtonContent label={'MetaMask'} icon={connector.icon} />
+                <ButtonContent
+                  label={'MetaMask'}
+                  icon={
+                    connector.icon || (
+                      <img
+                        src="https://d3.app/images/icons/MetaMask.png"
+                        alt="metamask"
+                        width={24}
+                        height={24}
+                      />
+                    )
+                  }
+                />
               )}
             </Button>
           );

diff --git a/src/hooks/useIsClient.ts b/src/hooks/useIsClient.ts
diff --git a/src/views/cart/cartItems.tsx b/src/views/cart/cartItems.tsx
@@ -1,26 +1,23 @@
-import type { UseMutationResult } from "@tanstack/react-query";
-import clsx from "clsx";
-import { Loader2 } from "lucide-react";
-import type { Dispatch, SetStateAction } from "react";
-import { useCallback } from "react";
-import { useShallow } from "zustand/react/shallow";
-import { CartItem } from "../../components/cart/cartItem.js";
-import { Button } from "../../components/ui/button.js";
-import { ScrollArea } from "../../components/ui/scrollArea.js";
-import { useCart } from "../../hooks/useCart.js";
-import { useStore } from "../../state/store/index.js";
+import type { UseMutationResult } from '@tanstack/react-query';
+import clsx from 'clsx';
+import { Loader2 } from 'lucide-react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { CartItem } from '../../components/cart/cartItem.js';
+import { Button } from '../../components/ui/button.js';
+import { ScrollArea } from '../../components/ui/scrollArea.js';
+import { useCart } from '../../hooks/useCart.js';
+import { useStore } from '../../state/store/index.js';
 import type {
   ApiErrorResponse,
   CheckoutOrderRequestResponse,
   PaymentOption,
   PaymentOptionRequestResponse,
-} from "../../types/api.js";
-import { cn } from "../../utils/twMerge.js";
-import { CheckoutError } from "./checkoutError.js";
-import type {
-  CheckoutState,
-  StartCheckoutOrderPayload,
-} from "./hooks/types.js";
+} from '../../types/api.js';
+import { cn } from '../../utils/twMerge.js';
+import { CheckoutError } from './checkoutError.js';
+import type { CheckoutState, StartCheckoutOrderPayload } from './hooks/types.js';
 
 type CartItemsProps = {
   selectedPaymentMethod: PaymentOption | null;
@@ -51,22 +48,15 @@ export function CartItems({
   paymentOptionsError,
   isSwitchNetworkInProgress,
 }: CartItemsProps) {
-  const setAppSettings = useStore(
-    useCallback((state) => state.setAppSettings, [])
-  );
+  const setAppSettings = useStore(useCallback((state) => state.setAppSettings, []));
   const cart = useStore(useShallow((state) => state.cart));
 
   const { handleRemoveFromCart } = useCart();
   if (!cart?.items?.length) {
     return (
       <div className="flex flex-col gap-3 items-center justify-center flex-grow">
-        <p className="text-md">
-          Looks like you haven&apos;t added anything to your cart yet.
-        </p>
-        <Button
-          variant="secondary"
-          onClick={() => setAppSettings({ isCartViewOpen: false })}
-        >
+        <p className="text-md">Looks like you haven&apos;t added anything to your cart yet.</p>
+        <Button variant="secondary" onClick={() => setAppSettings({ isCartViewOpen: false })}>
           Back to Search
         </Button>
       </div>
@@ -75,29 +65,18 @@ export function CartItems({
   if (!paymentOptions?.options?.length) {
     return (
       <div className="flex flex-col gap-3 items-center justify-center flex-grow">
-        <p className="text-md">
-          No payment methods found for this checkout. Please try again
-        </p>
-        <Button
-          variant="secondary"
-          onClick={() => setAppSettings({ isCartViewOpen: false })}
-        >
+        <p className="text-md">No payment methods found for this checkout. Please try again</p>
+        <Button variant="secondary" onClick={() => setAppSettings({ isCartViewOpen: false })}>
           Back to Search
         </Button>
       </div>
     );
   }
 
   return (
-    <div
-      id="cart-items"
-      className={cn("flex flex-col flex-grow gap-3 overflow-auto pb-2 px-2")}
-    >
-      <ScrollArea className={clsx("h-9/12 w-full max-h-[335px]")}>
-        <div
-          id="cart-items-container"
-          className={cn("flex flex-col flex-grow gap-y-3 py-3 pe-2")}
-        >
+    <div id="cart-items" className={cn('flex flex-col flex-grow gap-3 overflow-auto pb-2')}>
+      <ScrollArea className={clsx('h-9/12 w-full max-h-[555px] px-2')}>
+        <div id="cart-items-container" className={cn('flex flex-col flex-grow gap-y-4 py-3 pe-2')}>
           {cart.items?.map((cartItem) => {
             return (
               <CartItem
@@ -117,9 +96,7 @@ export function CartItems({
         </div>
       </ScrollArea>
       <div className="flex flex-col gap-2 mt-auto px-1">
-        {startCheckoutOrder.isError ||
-        checkoutState.isError ||
-        isPaymentOptionsError ? (
+        {startCheckoutOrder.isError || checkoutState.isError || isPaymentOptionsError ? (
           <CheckoutError
             checkoutState={checkoutState}
             startCheckoutOrder={startCheckoutOrder}

diff --git a/src/views/cart/purchaseSuccess.tsx b/src/views/cart/purchaseSuccess.tsx
@@ -1,6 +1,6 @@
-import { CheckCircle2, ExternalLink, Search } from "lucide-react";
-import { Button } from "../../components/ui/button.js";
-import { cn } from "../../utils/twMerge.js";
+import { CheckCircle2, ExternalLink, Search } from 'lucide-react';
+import { Button } from '../../components/ui/button.js';
+import { cn } from '../../utils/twMerge.js';
 
 type PurchaseSuccessProps = {
   handleSearch: () => void;
@@ -10,25 +10,18 @@ export const PurchaseSuccess = ({ handleSearch }: PurchaseSuccessProps) => {
   return (
     <div className="flex justify-between my-auto flex-col">
       <div className="flex flex-col gap-2 items-center my-4">
-        <h2 className={cn("text-lg font-bold flex gap-2")}>
+        <h2 className={cn('text-lg font-bold flex gap-2')}>
           <CheckCircle2 size={30} className="text-green-500" />
           Order Successful
         </h2>
         <p>Thank you for your order. We are currently processing it.</p>
       </div>
       <div className="flex gap-2 items-center justify-center">
-        <Button
-          variant="secondary"
-          onClick={handleSearch}
-          aria-label={"back to search"}
-        >
+        <Button variant="secondary" onClick={handleSearch} aria-label={'back to search'}>
           <Search className="mr-2 h-4 w-4" />
           Browse Names
         </Button>
-        <Button
-          onClick={() => window.open("https://dev.d3.app/login")}
-          aria-label={"view assets"}
-        >
+        <Button onClick={() => window.open('https://d3.app/login')} aria-label={'view assets'}>
           <ExternalLink className="mr-2 h-4 w-4" />
           View Assets
         </Button>

diff --git a/src/views/index.tsx b/src/views/index.tsx
@@ -7,7 +7,7 @@ const RootLayout = lazy(() => import('./rootLayout/index.js'));
 
 export const AppView = () => {
   return (
-    <ThemeProvider defaultTheme={'auto'}>
+    <ThemeProvider defaultTheme={'light'}>
       <div className="d3 flex items-center justify-center w-full h-full relative">
         <TooltipProvider>
           <RootLayout />

diff --git a/src/views/rootLayout/index.tsx b/src/views/rootLayout/index.tsx
@@ -5,16 +5,12 @@ import { CartView } from '../cart/index.js';
 import { ConnectWallet } from '../connectWallet/index.js';
 import { Search } from '../search/index.js';
 
-const appTlds = import.meta.env.VITE_TLDS;
-
 const RootLayout = () => {
   const appSettings = useStore(useShallow((state) => state.appSettings));
-
-  if (!appTlds) return null;
   return (
     <div
       className={
-        'flex flex-col w-[93svw] h-dvh max-h-[90svh] max-w-[450px] bg-primary-foreground rounded-lg overflow-auto shadow-xl'
+        'flex flex-col w-[100svw] h-dvh max-h-[90svh] max-w-[450px] bg-primary-foreground rounded-lg overflow-auto shadow-xl'
       }
     >
       <ConnectWallet />

diff --git a/src/views/search/hooks/useSearch.ts b/src/views/search/hooks/useSearch.ts
@@ -12,7 +12,7 @@ type SearchQueryParams = {
   skip: number;
   limit: number;
 };
-const appTlds = import.meta.env.VITE_TLDS;
+const appTlds = import.meta.env.VITE_TLDS || 'core,shib';
 
 export const useSearch = () => {
   const cart = useStore(useShallow((state) => state.cart));

diff --git a/src/views/search/index.tsx b/src/views/search/index.tsx
@@ -17,14 +17,14 @@ export const Search = () => {
     handlePaymentMethods,
   } = useSearch();
   return (
-    <div className="px-2 flex flex-col gap-y-2 flex-grow">
+    <div className="flex flex-col gap-y-2 flex-grow">
       <SearchBar
         isSearchDisabled={isLoading}
         handleSearchSubmit={handleSearchSubmit}
         initialSearch={searchQueryParams.sld}
       />
       <div id="search-results" className={cn('flex flex-col flex-grow gap-3 overflow-auto pb-2')}>
-        <ScrollArea className={clsx('h-9/12 max-h-[375px]')}>
+        <ScrollArea className={clsx('h-9/12 max-h-[505px] px-2')}>
           <SearchResults
             searchResults={searchResults}
             isLoading={isLoading}

diff --git a/src/views/search/searchBar.tsx b/src/views/search/searchBar.tsx
@@ -31,7 +31,7 @@ export function SearchBar({
         handleSearchAction();
       }}
     >
-      <div className="flex gap-2 my-2">
+      <div className="flex gap-2 my-2 px-2">
         <div className="flex-grow">
           <Input
             value={searchValue}

diff --git a/src/views/search/searchResults.tsx b/src/views/search/searchResults.tsx
@@ -51,8 +51,8 @@ export function SearchResults({
 
   return (
     <>
-      <h2 className={cn('text-lg font-bold text-left')}>Search Results</h2>
-      <div id="search-results-container" className={cn('flex flex-col flex-grow gap-y-3 pb-2')}>
+      <h2 className={cn('text-lg font-bold text-left mb-3')}>Search Results</h2>
+      <div id="search-results-container" className={cn('flex flex-col flex-grow gap-y-4 pb-2')}>
         {searchResults.pageItems.map((searchResult) => {
           const isItemInCart = getIsItemInCart(searchResult);
           return (

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,12 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react-swc';
 import path from 'path';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   server: {
-    port: 3000,  // Specify the port here
+    port: 3000, // Specify the port here
   },
   resolve: {
     alias: {
@@ -15,4 +15,5 @@ export default defineConfig({
       'providers/*': path.resolve(__dirname, './src/providers'),
     },
   },
-})
+  base: '/',
+});