UI improvements (#21)

* clean up env example files

* use createTheme from widget

* display price

* Design improvements

* Some more minor design improvements

* Fixed the products grid

* Removed test data

* Product grid improvements

* Grid fix

---------

Co-authored-by: Mikk <[email protected]>

.env.example

@@ -0,0 +1,5 @@
+STRIPE_SECRET_KEY=
+INTERNAL_API_KEY=my-secret-key
+QUEUE_DASHBOARD_USER=user
+QUEUE_DASHBOARD_PASSWORD=password
+# If you're doing local development then you might prefer to use .env files in /backend and /frontend

apps/backend/.env.example

@@ -1,10 +1,10 @@
+STRIPE_SECRET_KEY=
+STRIPE_TEST_MODE=true # setting this true will create an example project on Stripe first time
 REDIS_HOST=localhost
 REDIS_PORT=6379
-REDIS_USER=
-REDIS_PASSWORD=
-QUEUE_DASHBOARD_USER=user
-QUEUE_DASHBOARD_PASSWORD=password
-INTERNAL_API_KEY=
-STRIPE_SECRET_KEY=
-STRIPE_TEST_MODE=true
-PORT=3001
+REDIS_USER= # optional for local development
+REDIS_PASSWORD= # optional for local development
+PORT=3001 # optional, will default to 3001
+QUEUE_DASHBOARD_USER=user # optional, will default to STRIPE_SECRET_KEY
+QUEUE_DASHBOARD_PASSWORD=password # optional, if not specified, use STRIPE_SECRET_KEY for username and leave password empty
+INTERNAL_API_KEY=my-secret-key # optional, if not specified, use STRIPE_SECRET_KEY

apps/backend/src/superfluid-stripe-converter/superfluid-stripe-converter.controller.ts

@@ -9,12 +9,20 @@ import {
   SuperfluidStripeConfigService,
 } from './superfluid-stripe-config/superfluid-stripe-config.service';
 
+type StripeProductWithPriceExpanded = Stripe.Product & {
+  default_price: Stripe.Price
+}
+
 type ProductResponse = {
   stripeProduct: Stripe.Product;
   productDetails: WidgetProps['productDetails'];
   paymentDetails: WidgetProps['paymentDetails'];
 };
 
+type ProductsResponse = (ProductResponse & {
+  stripeProduct: StripeProductWithPriceExpanded
+})[]
+
 @Controller('superfluid-stripe-converter')
 export class SuperfluidStripeConverterController {
   constructor(
@@ -33,7 +41,7 @@ export class SuperfluidStripeConverterController {
       this.stripeClient.prices
         .list({
           product: productId,
-          active: true,
+          active: true
         })
         .autoPagingToArray(DEFAULT_PAGING),
       this.superfluidStripeConfigService.loadOrInitializeBlockchainConfig(),
@@ -51,11 +59,12 @@ export class SuperfluidStripeConverterController {
   }
 
   @Get('products')
-  async products(): Promise<ProductResponse[]> {
-    const [stripeProducts, stripePrices, blockchainConfig] = await Promise.all([
+  async products(): Promise<ProductsResponse> {
+    const [stripeProducts_, stripePrices, blockchainConfig] = await Promise.all([
       this.stripeClient.products
         .list({
           active: true,
+          expand: ["data.default_price"]
         })
         .autoPagingToArray(DEFAULT_PAGING),
       this.stripeClient.prices
@@ -66,6 +75,8 @@ export class SuperfluidStripeConverterController {
       this.superfluidStripeConfigService.loadOrInitializeCompleteConfig(),
     ]);
 
+    const stripeProducts = stripeProducts_ as StripeProductWithPriceExpanded[];
+
     // check eligibility somewhere?
 
     const results = await Promise.all(

apps/frontend/.env.example

@@ -1,5 +1,6 @@
-NEXT_PUBLIC_WALLECT_CONNECT_PROJECT_ID=952483bf7a0f5ace4c40eb53967f1368
-BACKEND_PROTOCOL=http
 BACKEND_HOST=localhost
-BACKEND_PORT=3001
-INTERNAL_API_KEY=my-secret-key
+BACKEND_PROTOCOL=http # optional
+BACKEND_PORT=3001 # optional
+NEXT_PUBLIC_WALLECT_CONNECT_PROJECT_ID=952483bf7a0f5ace4c40eb53967f1368 # optional, but strongly recommended, will default to WalletConnect v1 otherwise
+INTERNAL_API_KEY=my-secret-key # optional, will fallback to STRIPE_SECRET_KEY
+STRIPE_SECRET_KEY= # optional

apps/frontend/package.json

@@ -27,7 +27,7 @@
     "@emotion/styled": "latest",
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
-    "@superfluid-finance/widget": "0.0.0-dev-20231026111944",
+    "@superfluid-finance/widget": "0.0.0-dev-20231103081953",
     "clsx": "^2.0.0",
     "connectkit": "^1.5.3",
     "next": "latest",

apps/frontend/src/components/Layout.tsx

@@ -1,31 +1,23 @@
-import {
-  Box,
-  CssBaseline,
-  Paper,
-  Stack,
-  Theme,
-  ThemeOptions,
-  ThemeProvider,
-  createTheme,
-} from '@mui/material';
-import { PropsWithChildren, useEffect, useMemo } from 'react';
+import { Stack, ThemeOptions, ThemeProvider } from '@mui/material';
+import { createWidgetTheme } from '@superfluid-finance/widget';
+import { PropsWithChildren, useMemo } from 'react';
 
 type Props = PropsWithChildren<{
   themeOptions: ThemeOptions;
 }>;
 
 export default function Layout({ children, themeOptions }: Props) {
   // TODO(KK): optimize, expose theme from widget?
-  const theme = useMemo(() => createTheme(themeOptions), [themeOptions]);
+  const theme = useMemo(() => createWidgetTheme(themeOptions), [themeOptions]);
 
   return (
     <ThemeProvider theme={theme}>
       <Stack
         alignItems="center"
-        justifyContent="center"
         bgcolor={theme.palette.background.default}
-        width="100%"
-        height="100%"
+        width="100vw"
+        minHeight="100vh"
+        sx={{ pt: '10dvh' }}
       >
         {children}
       </Stack>