Merge remote-tracking branch 'origin/main' into mintable-module

GWSzeto · GWSzeto · commit 10a802aaeadc · 2024-10-29T18:09:30.000-04:00
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
@@ -208,6 +208,7 @@ export function FaucetButton({
               <FormItem>
                 <FormControl>
                   <Turnstile
+                    className="mt-4"
                     siteKey={TURNSTILE_SITE_KEY}
                     onSuccess={(token) => field.onChange(token)}
                   />
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/utils.ts b/apps/dashboard/src/app/(dashboard)/(chain)/utils.ts
@@ -23,7 +23,6 @@ import plumeCTA from "./temp-assets/plumeCTA.png";
 import rootStockBanner from "./temp-assets/rootstock-banner.png";
 import rootStockCTABG from "./temp-assets/rootstock-cta.png";
 import soneiumBanner from "./temp-assets/soneiumBanner.png";
-import soneiumCTA from "./temp-assets/soneiumCTA.png";
 import superpositionBanner from "./temp-assets/superpositionBanner.png";
 import superpositionCTA from "./temp-assets/superpositionCTA.png";
 import thirdwebBanner from "./temp-assets/thirdweb-banner.png";
@@ -404,13 +403,7 @@ const chainMetaRecord = {
     headerImgUrl: soneiumBanner.src,
     about:
       "Soneium, an Ethereum layer-2 developed by Sony Block Solutions Labs. This versatile chain is a general-purpose blockchain platform that aims to evoke emotion, empower creativity, and meet diverse needs to go mainstream. Soneium will be simplifying blockchain experiences while empowering developers, creators, and communities. Built on accessibility, scalability, and efficiency, it aims to solve real-world problems across industries globally. Soneium will change the way we interact with the internet, opening up a world of innovative applications and unlimited potential for users worldwide.",
-    cta: {
-      backgroundImageUrl: soneiumCTA.src,
-      title: "Begin your journey with Soneium Spark",
-      buttonLink:
-        "https://soneium.org/en/blog/soneium-minato-testnet-is-live-along-with-soneium-spark-incubation-program/",
-      buttonText: "Learn more",
-    },
+    cta: OP_CTA,
   },
 } satisfies Record<number, ExtraChainMetadata>;
 // END TEMPORARY
diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
@@ -208,6 +208,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
               "Ancient8",
               "Donatuz",
               "Mantle",
+              "Soneium",
             ].map((chain) => ({
               label: chain === "Optimism" ? "OP Mainnet" : chain,
               value: chain,
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
@@ -12,14 +11,15 @@ import {
   useAccountUsage,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { useDisclosure } from "@chakra-ui/react";
+import * as Sentry from "@sentry/nextjs";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { format } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ExternalLinkIcon, XIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
 import { ManageBillingButton } from "../ManageButton";
 import { RecurringPaymentFailureAlert } from "./RecurringPaymentFailureAlert";
@@ -301,7 +301,9 @@ export function BillingAlertsUI(props: {
   }
 
   return (
-    <div className={cn("flex flex-col gap-4", props.className)}>{alerts}</div>
+    <ErrorBoundary FallbackComponent={BillingAlertsErrorBoundary}>
+      <div className={cn("flex flex-col gap-4", props.className)}>{alerts}</div>
+    </ErrorBoundary>
   );
 }
 
@@ -331,16 +333,11 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
   // TODO: We should find a way to move this deeper into the
   // TODO: ManageBillingButton component and set an optional field to override
   const [paymentMethodSaving, setPaymentMethodSaving] = useState(false);
-
-  const {
-    onOpen: onPaymentMethodOpen,
-    onClose: onPaymentMethodClose,
-    isOpen: isPaymentMethodOpen,
-  } = useDisclosure();
+  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false);
 
   const handlePaymentAdded = () => {
     setPaymentMethodSaving(true);
-    onPaymentMethodClose();
+    setIsPaymentMethodOpen(false);
   };
 
   const isBilling = ctaHref === "/dashboard/settings/billing";
@@ -353,21 +350,21 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
       <OnboardingModal isOpen={isPaymentMethodOpen}>
         <LazyOnboardingBilling
           onSave={handlePaymentAdded}
-          onCancel={onPaymentMethodClose}
+          onCancel={() => setIsPaymentMethodOpen(false)}
         />
       </OnboardingModal>
 
       <AlertTitle>{title}</AlertTitle>
       <AlertDescription>{description}</AlertDescription>
 
       {showCTAs && (
-        <div className="mt-4 flex gap-2">
+        <div className="mt-4 flex flex-col gap-3 md:flex-row">
           {isBilling ? (
             <ManageBillingButton
               account={dashboardAccount}
               loading={paymentMethodSaving}
               loadingText="Verifying payment method"
-              onClick={onPaymentMethodOpen}
+              onClick={() => setIsPaymentMethodOpen(true)}
             />
           ) : (
             <Button variant="outline" asChild>
@@ -412,3 +409,17 @@ const AddPaymentNotification: React.FC<AddPaymentNotificationProps> = ({
     </Alert>
   );
 };
+
+function BillingAlertsErrorBoundary(errorProps: FallbackProps) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    Sentry.withScope((scope) => {
+      scope.setTag("component-crashed", "true");
+      scope.setTag("component-crashed-boundary", "BillingAlertsErrorBoundary");
+      scope.setLevel("fatal");
+      Sentry.captureException(errorProps.error);
+    });
+  }, [errorProps.error]);
+
+  return null;
+}
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx
@@ -1,4 +1,3 @@
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ThirdwebProvider } from "thirdweb/react";
 import { AccountStatus } from "../../../../../@3rdweb-sdk/react/hooks/useApi";
@@ -43,92 +42,88 @@ function tomorrow(d: Date) {
 
 function Story() {
   return (
-    <div className="py-4">
-      <ChakraProviderSetup>
-        <ThirdwebProvider>
-          <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
-            <BadgeContainer label="#usage">
-              <BillingAlertsUI
-                dashboardAccount={createDashboardAccountStub("foo")}
-                usageData={createBillableServiceUsageDataStub()}
-              />
-            </BadgeContainer>
+    <ThirdwebProvider>
+      <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
+        <BadgeContainer label="#usage">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo")}
+            usageData={createBillableServiceUsageDataStub()}
+          />
+        </BadgeContainer>
 
-            <BadgeContainer label="#paymentVerification">
-              <BillingAlertsUI
-                dashboardAccount={createDashboardAccountStub("foo", {
-                  status: AccountStatus.PaymentVerification,
-                  stripePaymentActionUrl: "https://example.com",
-                })}
-                usageData={createBillableServiceUsageDataStub({
-                  limits: {
-                    embeddedWallets: 100,
-                    storage: 100,
-                  },
-                })}
-              />
+        <BadgeContainer label="#paymentVerification">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              status: AccountStatus.PaymentVerification,
+              stripePaymentActionUrl: "https://example.com",
+            })}
+            usageData={createBillableServiceUsageDataStub({
+              limits: {
+                embeddedWallets: 100,
+                storage: 100,
+              },
+            })}
+          />
+        </BadgeContainer>
 
-              <BadgeContainer label="#serviceCutoff">
-                <BillingAlertsUI
-                  dashboardAccount={createDashboardAccountStub("foo", {
-                    recurringPaymentFailures: [
-                      {
-                        subscriptionId: "s1",
-                        subscriptionDescription: "s1 desc",
-                        paymentFailureCode: "400",
-                        serviceCutoffDate: yesterday(new Date()).toISOString(),
-                      },
-                    ],
-                  })}
-                  usageData={createBillableServiceUsageDataStub({
-                    limits: {
-                      embeddedWallets: 100,
-                      storage: 100,
-                    },
-                  })}
-                />
-              </BadgeContainer>
+        <BadgeContainer label="#serviceCutoff">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              recurringPaymentFailures: [
+                {
+                  subscriptionId: "s1",
+                  subscriptionDescription: "s1 desc",
+                  paymentFailureCode: "400",
+                  serviceCutoffDate: yesterday(new Date()).toISOString(),
+                },
+              ],
+            })}
+            usageData={createBillableServiceUsageDataStub({
+              limits: {
+                embeddedWallets: 100,
+                storage: 100,
+              },
+            })}
+          />
+        </BadgeContainer>
 
-              <BadgeContainer label="#recurringPayment">
-                <BillingAlertsUI
-                  dashboardAccount={createDashboardAccountStub("foo", {
-                    recurringPaymentFailures: [
-                      {
-                        subscriptionId: "s1",
-                        subscriptionDescription: "s1 desc",
-                        paymentFailureCode: "400",
-                        serviceCutoffDate: tomorrow(new Date()).toISOString(),
-                      },
-                    ],
-                  })}
-                  usageData={createBillableServiceUsageDataStub({
-                    limits: {
-                      embeddedWallets: 100,
-                      storage: 100,
-                    },
-                  })}
-                />
-              </BadgeContainer>
+        <BadgeContainer label="#recurringPayment">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              recurringPaymentFailures: [
+                {
+                  subscriptionId: "s1",
+                  subscriptionDescription: "s1 desc",
+                  paymentFailureCode: "400",
+                  serviceCutoffDate: tomorrow(new Date()).toISOString(),
+                },
+              ],
+            })}
+            usageData={createBillableServiceUsageDataStub({
+              limits: {
+                embeddedWallets: 100,
+                storage: 100,
+              },
+            })}
+          />
+        </BadgeContainer>
 
-              <BadgeContainer label="usage + serviceCutoff">
-                <BillingAlertsUI
-                  dashboardAccount={createDashboardAccountStub("foo", {
-                    recurringPaymentFailures: [
-                      {
-                        subscriptionId: "s1",
-                        subscriptionDescription: "s1 desc",
-                        paymentFailureCode: "400",
-                        serviceCutoffDate: yesterday(new Date()).toISOString(),
-                      },
-                    ],
-                  })}
-                  usageData={createBillableServiceUsageDataStub()}
-                />
-              </BadgeContainer>
-            </BadgeContainer>
-          </div>
-        </ThirdwebProvider>
-      </ChakraProviderSetup>
-    </div>
+        <BadgeContainer label="usage + serviceCutoff">
+          <BillingAlertsUI
+            dashboardAccount={createDashboardAccountStub("foo", {
+              recurringPaymentFailures: [
+                {
+                  subscriptionId: "s1",
+                  subscriptionDescription: "s1 desc",
+                  paymentFailureCode: "400",
+                  serviceCutoffDate: yesterday(new Date()).toISOString(),
+                },
+              ],
+            })}
+            usageData={createBillableServiceUsageDataStub()}
+          />
+        </BadgeContainer>
+      </div>
+    </ThirdwebProvider>
   );
 }
diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
@@ -6,7 +6,6 @@ import { OnboardingModal } from "components/onboarding/Modal";
 import { getRecurringPaymentFailureResponse } from "lib/billing";
 import { ExternalLinkIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { Text } from "tw-components";
 import { LazyOnboardingBilling } from "../../../../onboarding/LazyOnboardingBilling";
 import { ManageBillingButton } from "../ManageButton";
 
@@ -70,14 +69,14 @@ export const RecurringPaymentFailureAlert: React.FC<
             <ul className="list-disc pl-3.5">
               {affectedServices.map((service) => (
                 <li key={service}>
-                  <Text>{service}</Text>
+                  <span>{service}</span>
                 </li>
               ))}
             </ul>
           </div>
         )}
 
-        <div className="flex gap-2">
+        <div className="flex flex-col gap-3 md:flex-row">
           <ManageBillingButton
             account={dashboardAccount}
             loading={paymentMethodSaving}
diff --git a/apps/dashboard/src/pages/grant/superchain.tsx b/apps/dashboard/src/pages/grant/superchain.tsx
@@ -92,7 +92,6 @@ const superchains = [
     name: "Soneium",
     link: "/soneium-minato?switch",
     src: require("../../../public/assets/grant/superchain/soneium-icon.png"),
-    isComingSoon: true,
   },
   {
     id: "campNetworkv2",
diff --git a/apps/dashboard/src/pages/open-source.tsx b/apps/dashboard/src/pages/open-source.tsx
@@ -70,6 +70,12 @@ const filterOut = [
   "Yash094",
   "gregfromstl",
   "DustinTurska",
+  "iuwqyir",
+  "GWSzeto",
+  "Joe-Thirdweb",
+  "AmineAfia",
+  "catalyst17",
+  "dirtycajunrice",
 ];
 
 const repositories = [

Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,6 @@ const superchains = [`
`92`	`92`	`name: "Soneium",`
`93`	`93`	`link: "/soneium-minato?switch",`
`94`	`94`	`src: require("../../../public/assets/grant/superchain/soneium-icon.png"),`
`95`		`- isComingSoon: true,`
`96`	`95`	`},`
`97`	`96`	`{`
`98`	`97`	`id: "campNetworkv2",`