From f7aa3e62396f088e958d5c73a17f7ae717750886 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 12 Aug 2025 21:41:49 +0000
Subject: [PATCH] [BLD-80] Dashboard: in-app wallet settings page UI
 improvements (#7843)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the UI components and improving the country selection functionality in the dashboard application. It includes updates to transitions, checkbox indicators, and country names for better clarity and usability.

### Detailed summary
- Updated transition duration in `DynamicHeight.tsx`.
- Added `MinusIcon` for indeterminate state in `checkbox.tsx`.
- Corrected country names in `utils.ts` for several countries.
- Improved structure and styling of the `CountrySelector` component.
- Added `ChevronDownIcon` and `Button` for toggling tiers in `country-selector.tsx`.
- Refactored `Fieldset` and `FieldsetWithDescription` components for better layout and usability in settings forms.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Checkbox now supports an indeterminate state with a clear visual indicator.
  - Wallet settings sections gain per-section Save buttons with loading spinners.
  - SMS country selection adds collapsible tier cards, partial-selection counters, and improved country tiles with clear selection states.

- Refactor
  - Unified fieldset layouts with consistent headers, descriptions, dividers, and footers.
  - Branding settings reorganized into a responsive two‑column layout with improved flow.
  - Country tier rendering moved to modular TierCard components.

- Bug Fixes
  - Corrected several country display names (e.g., South Korea, North Macedonia, Eswatini, Saint Lucia).

- Style
  - Adjusted a height-transition timing/easing for dynamic-height animations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/@/components/ui/DynamicHeight.tsx     |   4 +-
 .../src/@/components/ui/checkbox.tsx          |   8 +-
 .../wallets/settings/components/index.tsx     | 249 +++++++++++-------
 .../sms-country-select/country-selector.tsx   | 220 +++++++++-------
 .../components/sms-country-select/utils.ts    |  16 +-
 5 files changed, 299 insertions(+), 198 deletions(-)

diff --git a/apps/dashboard/src/@/components/ui/DynamicHeight.tsx b/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
index d2bb3b91e78..4835281db51 100644
--- a/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
+++ b/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
@@ -17,9 +17,7 @@ export function DynamicHeight(props: {
         boxSizing: "border-box",
         height: height ? `${height}px` : "auto",
         overflow: "hidden",
-        transition:
-          props.transition ||
-          "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        transition: props.transition || "height 250ms ease",
       }}
     >
       <div
diff --git a/apps/dashboard/src/@/components/ui/checkbox.tsx b/apps/dashboard/src/@/components/ui/checkbox.tsx
index efb59e0f275..d0b272766f4 100644
--- a/apps/dashboard/src/@/components/ui/checkbox.tsx
+++ b/apps/dashboard/src/@/components/ui/checkbox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -21,7 +21,11 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="size-4" />
+      {props.checked === "indeterminate" ? (
+        <MinusIcon className="size-3" />
+      ) : (
+        <CheckIcon className="size-4" />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx
index ee84c438bd0..30194d44594 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx
@@ -3,7 +3,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectEmbeddedWalletsService } from "@thirdweb-dev/service-utils";
 import { CircleAlertIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import Link from "next/link";
 import type React from "react";
 import { useState } from "react";
 import { type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
@@ -240,11 +239,7 @@ export const InAppWalletSettingsUI: React.FC<
 
   return (
     <Form {...form}>
-      <form
-        autoComplete="off"
-        className="flex flex-col gap-6"
-        onSubmit={handleSubmit}
-      >
+      <form autoComplete="off" className="space-y-6" onSubmit={handleSubmit}>
         {/* Branding */}
         <BrandingFieldset
           client={props.client}
@@ -252,12 +247,28 @@ export const InAppWalletSettingsUI: React.FC<
           requiredPlan={brandingRequiredPlan}
           teamPlan={props.teamPlan}
           teamSlug={props.teamSlug}
+          isUpdating={props.isUpdating}
         />
 
-        <NativeAppsFieldset form={form} />
+        <NativeAppsFieldset form={form} isUpdating={props.isUpdating} />
 
         {/* Authentication */}
-        <Fieldset legend="Authentication">
+        <Fieldset
+          legend="Authentication"
+          footer={
+            <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+              <Button
+                className="gap-2"
+                type="submit"
+                size="sm"
+                variant="outline"
+              >
+                {props.isUpdating && <Spinner className="size-4" />}
+                Save
+              </Button>
+            </div>
+          }
+        >
           <JSONWebTokenFields
             form={form}
             requiredPlan={authRequiredPlan}
@@ -265,7 +276,7 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
 
-          <div className="h-5" />
+          <div className="my-5 border-t border-dashed" />
 
           <AuthEndpointFields
             form={form}
@@ -274,7 +285,7 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
 
-          <div className="h-5" />
+          <div className="my-5 border-t border-dashed" />
 
           <SMSCountryFields
             form={form}
@@ -284,13 +295,6 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
         </Fieldset>
-
-        <div className="flex justify-end">
-          <Button className="gap-2" type="submit" variant="primary">
-            {props.isUpdating && <Spinner className="size-4" />}
-            Save changes
-          </Button>
-        </div>
       </form>
     </Form>
   );
@@ -302,14 +306,22 @@ function BrandingFieldset(props: {
   teamSlug: string;
   requiredPlan: Team["billingPlan"];
   client: ThirdwebClient;
+  isUpdating: boolean;
 }) {
   return (
-    <Fieldset legend="Branding">
-      <SwitchContainer
-        description="Pass a custom logo and app name to be used in the emails sent to users."
-        switchId="branding-switch"
-        title="Custom email logo and name"
-      >
+    <FieldsetWithDescription
+      legend="Branding"
+      description="Set an app name and logo to be used in the emails sent to users"
+      footer={
+        <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+          <Button className="gap-2" type="submit" size="sm" variant="outline">
+            {props.isUpdating && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      }
+    >
+      <div className="absolute top-8 right-6">
         <GatedSwitch
           currentPlan={props.teamPlan}
           requiredPlan={props.requiredPlan}
@@ -330,64 +342,69 @@ function BrandingFieldset(props: {
           teamSlug={props.teamSlug}
           trackingLabel="customEmailLogoAndName"
         />
-      </SwitchContainer>
+      </div>
 
       <GatedCollapsibleContainer
-        className="grid grid-cols-1 gap-6 lg:grid-cols-2"
+        className="border-t border-dashed pt-5"
         currentPlan={props.teamPlan}
         isExpanded={!!props.form.watch("branding")}
         requiredPlan={props.requiredPlan}
       >
-        {/* Application Image */}
-        <FormField
-          control={props.form.control}
-          name="branding.applicationImageUrl"
-          render={() => (
-            <FormItem className="space-y-1">
-              <FormLabel>Application Image URL</FormLabel>
-              <FormDescription className="!mb-4">
-                Logo that will display in the emails sent to users.{" "}
-                <br className="max-sm:hidden" /> The image must be squared with
-                recommended size of 72x72 px.
-              </FormDescription>
-              <FormControl>
-                <AppImageFormControl
-                  client={props.client}
-                  setUri={(uri) => {
-                    props.form.setValue("branding.applicationImageUrl", uri, {
-                      shouldDirty: true,
-                      shouldTouch: true,
-                    });
-                  }}
-                  uri={props.form.watch("branding.applicationImageUrl")}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <div className="flex flex-col gap-6 lg:flex-row">
+          <FormField
+            control={props.form.control}
+            name="branding.applicationImageUrl"
+            render={() => (
+              <FormItem className="lg:border-r lg:border-dashed lg:pr-6">
+                <div className="space-y-1">
+                  <FormLabel>Application Image URL</FormLabel>
+                  <FormDescription className="!mb-4">
+                    Logo that will display in the emails sent to users.{" "}
+                    <br className="max-sm:hidden" /> The image must be squared
+                    with recommended size of 72x72 px.
+                  </FormDescription>
+
+                  <FormMessage />
+                </div>
+
+                <FormControl>
+                  <AppImageFormControl
+                    client={props.client}
+                    setUri={(uri) => {
+                      props.form.setValue("branding.applicationImageUrl", uri, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                      });
+                    }}
+                    uri={props.form.watch("branding.applicationImageUrl")}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
 
-        {/* Application Name */}
-        <FormField
-          control={props.form.control}
-          name="branding.applicationName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Application Name</FormLabel>
-              <FormDescription className="!mb-2">
-                Name that will be displayed in the emails sent to users.{" "}
-                <br className="max-sm:hidden" /> Defaults to your API Key's
-                name.
-              </FormDescription>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          {/* Application Name */}
+          <FormField
+            control={props.form.control}
+            name="branding.applicationName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Application Name</FormLabel>
+                <FormDescription>
+                  Name that will be displayed in the emails sent to users.{" "}
+                  <br className="max-sm:hidden" /> Defaults to your API Key's
+                  name.
+                </FormDescription>
+                <FormControl>
+                  <Input {...field} className="max-w-md" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
       </GatedCollapsibleContainer>
-    </Fieldset>
+    </FieldsetWithDescription>
   );
 }
 
@@ -418,7 +435,7 @@ function AppImageFormControl(props: {
       <div className="relative">
         <FileInput
           accept={{ "image/*": [] }}
-          className="w-24 rounded-full bg-background lg:w-28"
+          className="w-24 rounded-full bg-background"
           client={props.client}
           disableHelperText
           setValue={async (v) => {
@@ -514,14 +531,13 @@ function JSONWebTokenFields(props: {
         description={
           <>
             Optionally allow users to authenticate with a custom JWT.{" "}
-            <Link
-              className="text-link-foreground hover:text-foreground"
+            <UnderlineLink
               href="https://portal.thirdweb.com/wallets/custom-auth"
               rel="noopener noreferrer"
               target="_blank"
             >
               Learn more
-            </Link>
+            </UnderlineLink>
           </>
         }
         switchId="authentication-switch"
@@ -606,14 +622,13 @@ function AuthEndpointFields(props: {
           <>
             Optionally allow users to authenticate with any arbitrary payload
             that you provide.{" "}
-            <Link
-              className="text-link-foreground hover:text-foreground"
+            <UnderlineLink
               href="https://portal.thirdweb.com/wallets/custom-auth"
               rel="noopener noreferrer"
               target="_blank"
             >
               Learn more
-            </Link>
+            </UnderlineLink>
           </>
         }
         switchId="auth-endpoint-switch"
@@ -743,10 +758,21 @@ function AuthEndpointFieldsContent(props: {
 
 function NativeAppsFieldset(props: {
   form: UseFormReturn<ApiKeyEmbeddedWalletsValidationSchema>;
+  isUpdating: boolean;
 }) {
   const { form } = props;
   return (
-    <Fieldset legend="Native Apps">
+    <Fieldset
+      legend="Native Apps"
+      footer={
+        <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+          <Button className="gap-2" type="submit" size="sm" variant="outline">
+            {props.isUpdating && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      }
+    >
       <FormField
         control={form.control}
         name="redirectUrls"
@@ -789,21 +815,60 @@ function GatedCollapsibleContainer(props: {
     return null;
   }
 
-  return <div className={cn("mt-6", props.className)}>{props.children}</div>;
+  return (
+    <div
+      className={cn("mt-5 fade-in-0 duration-300 animate-in", props.className)}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+function Fieldset(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border bg-card relative">
+      <DynamicHeight>
+        <fieldset className="p-4 md:px-6 md:py-5">
+          {/* put inside div to remove default styles on legend  */}
+          <div className="border-b pb-4 mb-5 border-dashed font-semibold text-xl tracking-tight">
+            <legend> {props.legend}</legend>
+          </div>
+
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
+  );
 }
 
-function Fieldset(props: { legend: string; children: React.ReactNode }) {
+function FieldsetWithDescription(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  description: React.ReactNode;
+}) {
   return (
-    <DynamicHeight>
-      <fieldset className="rounded-lg border border-border bg-card p-4 md:p-6">
-        {/* put inside div to remove default styles on legend  */}
-        <div className="mb-4 font-semibold text-xl tracking-tight">
-          <legend> {props.legend}</legend>
-        </div>
+    <div className="rounded-lg border bg-card relative">
+      <DynamicHeight>
+        <fieldset className="p-4 md:p-6">
+          {/* put inside div to remove default styles on legend  */}
+          <div className="pr-20">
+            <legend className="font-semibold text-xl tracking-tight">
+              {props.legend}
+            </legend>
+            <p className="text-muted-foreground text-sm">{props.description}</p>
+          </div>
 
-        {props.children}
-      </fieldset>
-    </DynamicHeight>
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
   );
 }
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx
index a8dbbf57552..da376e2c3b0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx
@@ -1,6 +1,8 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: EXPECTED */
 
-import { CheckIcon, MinusIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import type { SMSCountryTiers } from "../../api/sms";
@@ -31,17 +33,6 @@ export default function CountrySelector({
     return tierCountries.every((country) => isCountrySelected(country));
   };
 
-  // Check if some countries in a tier are selected
-  const isTierIndeterminate = (tier: string) => {
-    const tierCountries = countryTiers[tier as keyof typeof countryTiers];
-    const selectedInTier = tierCountries.filter((country) =>
-      isCountrySelected(country),
-    );
-    return (
-      selectedInTier.length > 0 && selectedInTier.length < tierCountries.length
-    );
-  };
-
   // Toggle a tier selection
   const toggleTier = (tier: string) => {
     const tierCountries = countryTiers[tier as keyof typeof countryTiers];
@@ -81,101 +72,144 @@ export default function CountrySelector({
     onChange(newSelected);
   };
 
-  // Get selected countries count for a tier
-  const getSelectedCountInTier = (tier: string) => {
-    const tierCountries = countryTiers[tier as keyof typeof countryTiers];
-    return tierCountries.filter((country) => isCountrySelected(country)).length;
-  };
+  return (
+    <div className="space-y-5">
+      {Object.entries(countryTiers).map(([tier, tierCountries], index) => {
+        const selectedTierCountries = tierCountries.filter((country) =>
+          isCountrySelected(country),
+        );
+
+        return (
+          <TierCard
+            key={tier}
+            tierIndex={index}
+            tier={tier}
+            onToggleTier={() => toggleTier(tier)}
+            tierCountries={tierCountries}
+            selectedTierCountries={selectedTierCountries}
+            onToggleCountry={toggleCountry}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function TierCard(props: {
+  tier: string;
+  tierIndex: number;
+  onToggleTier: () => void;
+  tierCountries: string[];
+  selectedTierCountries: string[];
+  onToggleCountry: (country: string) => void;
+}) {
+  const {
+    tier,
+    tierIndex,
+    onToggleTier,
+    tierCountries: countries,
+    selectedTierCountries: selectedCountries,
+    onToggleCountry,
+  } = props;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const isPartiallySelected =
+    selectedCountries.length > 0 && selectedCountries.length < countries.length;
+  const isTierFullySelected = selectedCountries.length === countries.length;
 
   return (
-    <div className="space-y-3">
-      {Object.entries(countryTiers).map(([tier, countries], index) => (
-        <div className="overflow-hidden rounded-md border" key={tier}>
-          <div className="flex items-center bg-muted/30 p-2">
-            <div className="relative mr-2 flex items-center">
-              <Checkbox
-                checked={isTierSelected(tier)}
-                className="h-4 w-4"
-                id={`tier-${index + 1}`}
-                onCheckedChange={() => toggleTier(tier)}
-              />
-              {isTierIndeterminate(tier) && (
-                <MinusIcon className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 h-2.5 w-2.5 transform text-primary" />
-              )}
-            </div>
-            <label
-              className="flex-1 cursor-pointer font-medium text-sm"
-              htmlFor={`tier-${index + 1}`}
-            >
-              Tier {index + 1}
-              {isTierIndeterminate(tier) && (
-                <span className="ml-1 font-normal text-muted-foreground text-xs">
-                  ({getSelectedCountInTier(tier)}/{countries.length})
-                </span>
-              )}
-            </label>
-            <span
-              className={cn(
-                "font-medium text-xs",
-                tier === "tier1"
-                  ? "text-green-600 dark:text-green-500"
-                  : "text-muted-foreground",
-              )}
-            >
-              {tierPricing[tier as keyof typeof tierPricing]}
+    <div className="overflow-hidden rounded-xl border bg-background">
+      {/* header */}
+      <div className="flex items-center px-4 py-3 gap-3 justify-between">
+        {/* left */}
+        <div className="flex items-center gap-2">
+          <Checkbox
+            checked={
+              isPartiallySelected ? "indeterminate" : isTierFullySelected
+            }
+            id={`tier-${tier}`}
+            onCheckedChange={onToggleTier}
+          />
+          <label
+            className="flex-1 cursor-pointer font-medium text-sm"
+            htmlFor={`tier-${tier}`}
+          >
+            Tier {tierIndex + 1}
+          </label>
+
+          {isPartiallySelected && (
+            <span className="text-muted-foreground text-sm">
+              ({selectedCountries.length}/{countries.length})
             </span>
-          </div>
+          )}
+        </div>
 
-          <div
+        {/* right */}
+        <div className="flex items-center gap-3">
+          <span
             className={cn(
-              "grid grid-cols-2 gap-1.5 p-2",
-              countries.length === 2
-                ? "md:grid-cols-2"
-                : countries.length === 3
-                  ? "md:grid-cols-3"
-                  : "md:grid-cols-4",
+              "text-sm",
+              tier === "tier1"
+                ? "text-green-600 dark:text-green-500"
+                : "text-muted-foreground",
             )}
           >
-            {countries.map((country) => (
-              <div
+            {tierPricing[tier as keyof typeof tierPricing]}
+          </span>
+
+          <Button
+            variant="ghost"
+            className="p-0 size-7"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isExpanded && "rotate-180",
+              )}
+            />
+          </Button>
+        </div>
+      </div>
+
+      {/* body */}
+      {isExpanded && (
+        <div
+          className={cn(
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 translate-y-[1px] translate-x-[1px] -ml-[1px] border-t",
+          )}
+        >
+          {countries.map((country) => {
+            const isSelected = selectedCountries.includes(country);
+            return (
+              <Button
+                variant="outline"
                 className={cn(
-                  "relative flex cursor-pointer items-center justify-between rounded-md border p-1.5 transition-colors ",
-                  isCountrySelected(country)
-                    ? "border-primary bg-primary/10"
-                    : "border-transparent hover:bg-muted/50",
+                  "justify-between gap-3 text-start h-auto rounded-none border-l-0 border-t-0 border-border py-2.5 bg-background",
                 )}
                 key={country}
-                onClick={() => toggleCountry(country)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    toggleCountry(country);
-                  }
-                }}
-                role="button"
-                tabIndex={0}
+                onClick={() => onToggleCountry(country)}
                 title={countryNames[country] || country}
               >
-                <span className="flex items-center space-x-2">
-                  <span aria-hidden="true" className="text-lg">
-                    {getCountryFlag(country)}
-                  </span>
-                  <span className="font-medium text-xs">
-                    {countryNames[country] || country}
-                    {countryPrefixes[country]
-                      ? ` (${countryPrefixes[country]})`
-                      : ""}
-                  </span>
-                </span>
-                <div className="flex h-3 w-3 items-center justify-center">
-                  {isCountrySelected(country) && (
-                    <CheckIcon className="h-3 w-3 text-primary" />
-                  )}
+                <div className="flex items-center gap-3">
+                  <div className="text-3xl">{getCountryFlag(country)}</div>
+                  <div className="space-y-0.5">
+                    <div className="font-medium text-sm">
+                      {countryNames[country] || country}
+                    </div>
+                    <div className="text-muted-foreground text-xs tabular-nums">
+                      {countryPrefixes[country]
+                        ? `${countryPrefixes[country]}`
+                        : ""}
+                    </div>
+                  </div>
                 </div>
-              </div>
-            ))}
-          </div>
+                {isSelected && <CheckIcon className="size-5 text-foreground" />}
+              </Button>
+            );
+          })}
         </div>
-      ))}
+      )}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts
index 89943daa541..b43d8694c12 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts
@@ -117,14 +117,14 @@ export const countryNames: Record<string, string> = {
   KG: "Kyrgyzstan",
   KH: "Cambodia",
   KI: "Kiribati",
-  KN: "St Kitts and Nevis",
-  KR: "Korea Republic of",
+  KN: "Saint Kitts and Nevis",
+  KR: "South Korea",
   KW: "Kuwait",
   KY: "Cayman Islands",
   KZ: "Kazakhstan",
   LA: "Laos PDR",
   LB: "Lebanon",
-  LC: "St Lucia",
+  LC: "Saint Lucia",
   LI: "Liechtenstein",
   LK: "Sri Lanka",
   LR: "Liberia",
@@ -139,7 +139,7 @@ export const countryNames: Record<string, string> = {
   ME: "Montenegro",
   MG: "Madagascar",
   MH: "Marshall Islands",
-  MK: "Macedonia",
+  MK: "North Macedonia",
   ML: "Mali",
   MM: "Myanmar",
   MN: "Mongolia",
@@ -172,14 +172,14 @@ export const countryNames: Record<string, string> = {
   PH: "Philippines",
   PK: "Pakistan",
   PL: "Poland",
-  PM: "St Pierre and Miquelon",
+  PM: "Saint Pierre and Miquelon",
   PR: "Puerto Rico",
   PS: "Palestinian Territory",
   PT: "Portugal",
   PW: "Palau",
   PY: "Paraguay",
   QA: "Qatar",
-  RE: "Reunion/Mayotte",
+  RE: "Réunion",
   RO: "Romania",
   RS: "Serbia",
   RW: "Rwanda",
@@ -200,7 +200,7 @@ export const countryNames: Record<string, string> = {
   ST: "Sao Tome and Principe",
   SV: "El Salvador",
   SY: "Syria",
-  SZ: "Swaziland",
+  SZ: "Eswatini",
   TC: "Turks and Caicos Islands",
   TD: "Chad",
   TG: "Togo",
@@ -217,7 +217,7 @@ export const countryNames: Record<string, string> = {
   UG: "Uganda",
   US: "United States",
   UY: "Uruguay",
-  VC: "St Vincent Grenadines",
+  VC: "Saint Vincent and the Grenadines",
   VE: "Venezuela",
   VG: "Virgin Islands, British",
   VI: "Virgin Islands, U.S.",