Merge branch 'main' into arbitrum-docs

Author: saminacodes

.changeset/odd-fans-tickle.md

@@ -467,3 +467,39 @@ export function reportAssetPageview(properties: {
 }) {
   posthog.capture("asset pageview", properties);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the usage of fund wallet modal
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletOpened() {
+  posthog.capture("fund wallet opened");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of successful fund wallet buys
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletSuccessful() {
+  posthog.capture("fund wallet successful");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of failed fund wallet buys
+ * - To track the errors that users encounter when trying to buy from a fund wallet modal
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletFailed(params: { errorMessage: string }) {
+  posthog.capture("fund wallet failed", params);
+}

.changeset/short-icons-care.md

@@ -18,6 +18,7 @@ export function DateRangeSelector(props: {
 }) {
   const { range, setRange } = props;
   const daysDiff = differenceInCalendarDays(range.to, range.from);
+
   const matchingRange =
     normalizeTime(range.to).getTime() === normalizeTime(new Date()).getTime()
       ? durationPresets.find((preset) => preset.days === daysDiff)
@@ -85,7 +86,7 @@ export function getLastNDaysRange(id: DurationId) {
     throw new Error(`Invalid duration id: ${id}`);
   }
 
-  const todayDate = new Date(Date.now() + 1000 * 60 * 60 * 24); // add 1 day to avoid timezone issues
+  const todayDate = new Date(Date.now());
 
   const value: Range = {
     from: subDays(todayDate, durationInfo.days),

.changeset/thin-days-add.md

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  useResponsiveSearchParams,
+  useSetResponsiveSearchParams,
+} from "responsive-rsc";
+import {
+  DateRangeSelector,
+  type DurationId,
+} from "@/components/analytics/date-range-selector";
+import { IntervalSelector } from "@/components/analytics/interval-selector";
+import { getFiltersFromSearchParams, normalizeTimeISOString } from "@/lib/time";
+
+export function ResponsiveTimeFilters(props: { defaultRange: DurationId }) {
+  const responsiveSearchParams = useResponsiveSearchParams();
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
+  const { range, interval } = getFiltersFromSearchParams({
+    defaultRange: props.defaultRange,
+    from: responsiveSearchParams.from,
+    interval: responsiveSearchParams.interval,
+    to: responsiveSearchParams.to,
+  });
+
+  return (
+    <div className="flex justify-end gap-3 flex-col lg:flex-row">
+      <DateRangeSelector
+        className="rounded-full"
+        range={range}
+        setRange={(newRange) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              from: normalizeTimeISOString(newRange.from),
+              to: normalizeTimeISOString(newRange.to),
+            };
+            return newParams;
+          });
+        }}
+      />
+      <IntervalSelector
+        className="bg-card rounded-full"
+        intervalType={interval}
+        setIntervalType={(newInterval) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              interval: newInterval,
+            };
+            return newParams;
+          });
+        }}
+      />
+    </div>
+  );
+}

apps/dashboard/src/@/analytics/report.ts

@@ -9,6 +9,10 @@ import type { ThirdwebClient } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { CheckoutWidget, useActiveWalletChain } from "thirdweb/react";
 import { z } from "zod";
+import {
+  reportFundWalletFailed,
+  reportFundWalletSuccessful,
+} from "@/analytics/report";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { Button } from "@/components/ui/button";
@@ -252,6 +256,14 @@ function FundWalletModalContent(props: FundWalletModalProps) {
               className="!w-full !max-w-full !min-w-0 !rounded-b-none !border-none"
               theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
               name={props.checkoutWidgetTitle}
+              onSuccess={() => {
+                reportFundWalletSuccessful();
+              }}
+              onError={(error) => {
+                reportFundWalletFailed({
+                  errorMessage: error.message,
+                });
+              }}
             />
           </div>
 

apps/dashboard/src/@/components/analytics/date-range-selector.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { SearchIcon } from "lucide-react";
+import { SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-
 import type { SearchType } from "./types";
 
 export function AdvancedSearchInput(props: {
@@ -41,56 +41,57 @@ export function AdvancedSearchInput(props: {
   };
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-2">
-        <Select
-          value={searchType}
-          onValueChange={(value) => setSearchType(value as SearchType)}
-        >
-          <SelectTrigger className="w-[140px] bg-card">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="email">Email</SelectItem>
-            <SelectItem value="phone">Phone</SelectItem>
-            <SelectItem value="id">ID</SelectItem>
-            <SelectItem value="address">Address</SelectItem>
-            <SelectItem value="externalWallet">External Wallet</SelectItem>
-          </SelectContent>
-        </Select>
+    <div className="flex flex-col md:flex-row gap-3">
+      <Select
+        value={searchType}
+        onValueChange={(value) => setSearchType(value as SearchType)}
+      >
+        <SelectTrigger className="w-[140px] bg-card">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="email">Email</SelectItem>
+          <SelectItem value="phone">Phone</SelectItem>
+          <SelectItem value="id">ID</SelectItem>
+          <SelectItem value="address">Address</SelectItem>
+          <SelectItem value="externalWallet">External Wallet</SelectItem>
+        </SelectContent>
+      </Select>
 
+      <div className="flex flex-1">
         <div className="relative flex-1">
           <Input
-            className="bg-card pl-9"
+            className="bg-card pl-9 border-r-0 rounded-r-none"
             placeholder={`Search by ${searchType}...`}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
           />
           <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
+
+          {props.hasResults && (
+            <div className="absolute top-1/2 -translate-y-1/2 right-2 ">
+              <Button
+                variant="ghost"
+                onClick={handleClear}
+                className="p-1 h-auto"
+              >
+                <XIcon className="size-4 text-muted-foreground" />
+              </Button>
+            </div>
+          )}
         </div>
 
         <Button
           onClick={handleSearch}
+          variant="outline"
           disabled={!query.trim() || props.isLoading}
-          size="sm"
+          className="rounded-l-none gap-2 bg-card disabled:opacity-100"
         >
-          {props.isLoading ? "Searching..." : "Search"}
+          {props.isLoading && <Spinner className="size-4" />}
+          Search
         </Button>
       </div>
-
-      {props.hasResults && (
-        <div className="flex justify-center">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleClear}
-            className="gap-2"
-          >
-            Clear Search & Return to List
-          </Button>
-        </div>
-      )}
     </div>
   );
 }