@turtleclub/ui 0.3.0 → 0.4.0-beta.0

package/src/components/molecules/token-selector.tsx

@@ -1,7 +1,12 @@
 "use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select";
 import { useEffect } from "react";
 
 interface Token {
@@ -35,10 +40,13 @@ const TokenSelector = ({
   showBalance = true,
 }: TokenSelectorProps) => {
   // Auto-select first token if no value is provided and tokens exist
-  const effectiveValue = value || (tokens.length > 0 ? tokens[0].address : undefined);
+  const effectiveValue =
+    value || (tokens.length > 0 ? tokens[0].address : undefined);
 
   // Find the selected token to display in the trigger
-  const selectedToken = tokens.find((token) => token.address === effectiveValue);
+  const selectedToken = tokens.find(
+    (token) => token.address === effectiveValue,
+  );
 
   // Handle value change and auto-select first token on mount
   useEffect(() => {
@@ -48,17 +56,21 @@ const TokenSelector = ({
   }, [value, tokens, onValueChange]);
 
   return (
-    <Select value={effectiveValue} onValueChange={onValueChange} disabled={disabled}>
+    <Select
+      value={effectiveValue}
+      onValueChange={onValueChange}
+      disabled={disabled}
+    >
       <SelectTrigger
         // variant={variant}
         // size={size}
         className={cn(
-          "w-auto min-w-[80px] bg-muted hover:bg-muted/80 rounded-md font-medium",
-          "focus:ring-2 focus:ring-primary/20 focus:outline-none",
+          "bg-muted hover:bg-muted/80 w-auto min-w-[80px] rounded-md font-medium",
+          "focus:ring-primary/20 focus:ring-2 focus:outline-none",
           size === "xs" && "min-w-[80px] gap-2",
           size === "sm" && "min-w-[75px] gap-1.5",
           size === "default" && "min-w-[80px] gap-1.5",
-          className
+          className,
         )}
       >
         {selectedToken ? (
@@ -67,15 +79,15 @@ const TokenSelector = ({
               "flex items-center",
               size === "xs" && "gap-2",
               size === "sm" && "gap-1.5",
-              size === "default" && "gap-1.5"
+              size === "default" && "gap-1.5",
             )}
           >
             <span
               className={cn(
                 "flex items-center justify-center",
-                size === "xs" && "w-3.5 h-3",
-                size === "sm" && "w-4 h-3.5",
-                size === "default" && "w-5 h-4"
+                size === "xs" && "h-3 w-3.5",
+                size === "sm" && "h-3.5 w-4",
+                size === "default" && "h-4 w-5",
               )}
             >
               {selectedToken.icon}
@@ -85,7 +97,7 @@ const TokenSelector = ({
                 "font-medium",
                 size === "xs" && "text-xs",
                 size === "sm" && "text-sm",
-                size === "default" && "text-sm"
+                size === "default" && "text-sm",
               )}
             >
               {selectedToken.symbol}
@@ -97,24 +109,28 @@ const TokenSelector = ({
               "text-muted-foreground",
               size === "xs" && "text-xs",
               size === "sm" && "text-sm",
-              size === "default" && "text-sm"
+              size === "default" && "text-sm",
             )}
           >
             {placeholder}
           </span>
         )}
       </SelectTrigger>
-      <SelectContent className="border border-muted gap-2">
+      <SelectContent className="border-muted gap-2 border">
         {tokens.map((token) => (
-          <SelectItem key={token.address} value={token.address} className="cursor-pointer py-2">
+          <SelectItem
+            key={token.address}
+            value={token.address}
+            className="cursor-pointer py-2"
+          >
             <div className="flex flex-col gap-2">
               <div className="flex items-center gap-2">
                 <span
                   className={cn(
                     "flex items-center justify-center",
-                    size === "xs" && "w-3.5 h-3.5",
-                    size === "sm" && "w-4 h-4",
-                    size === "default" && "w-5 h-4"
+                    size === "xs" && "h-3.5 w-3.5",
+                    size === "sm" && "h-4 w-4",
+                    size === "default" && "h-4 w-5",
                   )}
                 >
                   {token.icon}
@@ -124,13 +140,15 @@ const TokenSelector = ({
                     "font-medium",
                     size === "xs" && "text-xs",
                     size === "sm" && "text-sm",
-                    size === "default" && "text-sm"
+                    size === "default" && "text-sm",
                   )}
                 >
                   {token.symbol}
                 </span>
               </div>
-              {showBalance && <span className="text-white/80 text-xs">≈ {token.balance}</span>}
+              {showBalance && (
+                <span className="text-xs text-white/80">≈ {token.balance}</span>
+              )}
             </div>
           </SelectItem>
         ))}

package/src/components/molecules/tx-status.tsx

@@ -49,7 +49,7 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
       showActions = true,
       ...props
     },
-    ref
+    ref,
   ) => {
     const defaultTitle = cancelled
       ? "Transaction Cancelled"
@@ -63,7 +63,12 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
         : "Please wait while your transaction is being processed...";
 
     const ExternalLinkIcon = ({ size = "w-4 h-4" }) => (
-      <svg className={size} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg
+        className={size}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -74,8 +79,18 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
     );
 
     const StepCheckIcon = () => (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      <svg
+        className="h-4 w-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M5 13l4 4L19 7"
+        />
       </svg>
     );
 
@@ -88,9 +103,9 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
       <Card
         ref={ref}
         className={cn(
-          "p-4 text-center space-y-3",
-          variant === "compact" && "p-3 space-y-2",
-          className
+          "space-y-3 p-4 text-center",
+          variant === "compact" && "space-y-2 p-3",
+          className,
         )}
         {...props}
       >
@@ -102,15 +117,24 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
           >
             {cancelled ? (
               <XIcon
-                className={cn(variant === "compact" ? "w-5 h-5" : "w-6 h-6", "text-destructive")}
+                className={cn(
+                  variant === "compact" ? "h-5 w-5" : "h-6 w-6",
+                  "text-destructive",
+                )}
               />
             ) : completed ? (
               <CheckIcon
-                className={cn(variant === "compact" ? "w-5 h-5" : "w-6 h-6", "text-primary")}
+                className={cn(
+                  variant === "compact" ? "h-5 w-5" : "h-6 w-6",
+                  "text-primary",
+                )}
               />
             ) : (
               <TurtleIcon
-                className={cn(variant === "compact" ? "w-5 h-5" : "w-6 h-6", "text-primary")}
+                className={cn(
+                  variant === "compact" ? "h-5 w-5" : "h-6 w-6",
+                  "text-primary",
+                )}
               />
             )}
           </IconAnimation>
@@ -120,88 +144,110 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
         <div className="space-y-1">
           <h3
             className={cn(
-              "font-medium text-foreground",
-              variant === "compact" ? "text-xs" : "text-sm"
+              "text-foreground font-medium",
+              variant === "compact" ? "text-xs" : "text-sm",
             )}
           >
             {title || defaultTitle}
           </h3>
-          <p className={cn("text-muted-foreground", variant === "compact" ? "text-xs" : "text-xs")}>
+          <p
+            className={cn(
+              "text-muted-foreground",
+              variant === "compact" ? "text-xs" : "text-xs",
+            )}
+          >
             {description || defaultDescription}
           </p>
         </div>
 
         {/* Transaction summary (completed state) */}
         {completed && !cancelled && (amount || token || protocol) && (
-          <div className="p-2 bg-muted/50 rounded-lg space-y-1">
+          <div className="bg-muted/50 space-y-1 rounded-lg p-2">
             {amount && token && (
               <div className="text-xs font-medium">
                 {amount} {token}
               </div>
             )}
-            {protocol && <div className="text-xs text-muted-foreground">via {protocol}</div>}
+            {protocol && (
+              <div className="text-muted-foreground text-xs">
+                via {protocol}
+              </div>
+            )}
           </div>
         )}
 
         {/* Transaction hash link */}
         {txHash && !cancelled && (
           <div className="space-y-1">
-            <div className="text-xs text-muted-foreground">Transaction Hash</div>
+            <div className="text-muted-foreground text-xs">
+              Transaction Hash
+            </div>
             {explorerUrl ? (
               <a
                 href={`${explorerUrl}/tx/${txHash}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 text-xs text-primary hover:text-primary/80 transition-colors"
+                className="text-primary hover:text-primary/80 inline-flex items-center gap-2 text-xs transition-colors"
               >
                 {formatTxHash(txHash)}
                 <ExternalLinkIcon />
               </a>
             ) : (
-              <div className="text-xs font-mono text-foreground">{formatTxHash(txHash)}</div>
+              <div className="text-foreground font-mono text-xs">
+                {formatTxHash(txHash)}
+              </div>
             )}
           </div>
         )}
 
         {/* Estimated time (pending state) */}
         {!completed && !cancelled && estimatedTime && (
-          <div className="text-xs text-muted-foreground">Estimated time: {estimatedTime}</div>
+          <div className="text-muted-foreground text-xs">
+            Estimated time: {estimatedTime}
+          </div>
         )}
 
         {/* Progress steps (pending state) */}
         {!completed && !cancelled && steps.length > 0 && (
-          <div className="space-y-2 pt-2 border-t border-border">
-            <div className="text-xs font-medium text-muted-foreground text-left">Progress</div>
+          <div className="border-border space-y-2 border-t pt-2">
+            <div className="text-muted-foreground text-left text-xs font-medium">
+              Progress
+            </div>
             <div className="space-y-2">
               {steps.map((step, index) => (
                 <div key={index} className="flex items-center gap-3 text-left">
                   <div
                     className={cn(
-                      "flex items-center justify-center w-5 h-5 rounded-full border-2 flex-shrink-0",
-                      step.completed && "bg-primary border-primary text-primary-foreground",
+                      "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2",
+                      step.completed &&
+                        "bg-primary border-primary text-primary-foreground",
                       step.current &&
                         !step.completed &&
                         "border-primary text-primary animate-pulse",
                       !step.completed &&
                         !step.current &&
-                        "border-muted-foreground/30 text-muted-foreground"
+                        "border-muted-foreground/30 text-muted-foreground",
                     )}
                   >
                     {step.completed ? (
                       <StepCheckIcon />
                     ) : step.current ? (
-                      <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+                      <div className="bg-primary h-2 w-2 animate-pulse rounded-full" />
                     ) : (
-                      <div className="w-2 h-2 rounded-full bg-muted-foreground/30" />
+                      <div className="bg-muted-foreground/30 h-2 w-2 rounded-full" />
                     )}
                   </div>
-                  <div className="flex-1 flex items-center justify-between">
+                  <div className="flex flex-1 items-center justify-between">
                     <span
                       className={cn(
                         "text-xs",
                         step.completed && "text-foreground",
-                        step.current && !step.completed && "text-foreground font-medium",
-                        !step.completed && !step.current && "text-muted-foreground"
+                        step.current &&
+                          !step.completed &&
+                          "text-foreground font-medium",
+                        !step.completed &&
+                          !step.current &&
+                          "text-muted-foreground",
                       )}
                     >
                       {step.label}
@@ -211,7 +257,7 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
                         href={`${explorerUrl}/tx/${step.txHash}`}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors ml-2"
+                        className="text-primary hover:text-primary/80 ml-2 inline-flex items-center gap-1 text-xs transition-colors"
                         title={`View transaction: ${step.txHash}`}
                       >
                         <span className="font-mono">
@@ -228,32 +274,37 @@ const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
         )}
 
         {/* Action buttons (completed or cancelled state) */}
-        {(completed || cancelled) && showActions && (onViewDetails || onClose) && (
-          <div
-            className={cn(
-              "flex gap-2 pt-2",
-              variant === "compact" ? "flex-col" : "flex-row justify-center"
-            )}
-          >
-            {!cancelled && onViewDetails && (
-              <Button size={variant === "compact" ? "sm" : "default"} onClick={onViewDetails}>
-                View Details
-              </Button>
-            )}
-            {onClose && (
-              <Button
-                variant="default"
-                size={variant === "compact" ? "sm" : "default"}
-                onClick={onClose}
-              >
-                {cancelled ? "Try Again" : "Done"}
-              </Button>
-            )}
-          </div>
-        )}
+        {(completed || cancelled) &&
+          showActions &&
+          (onViewDetails || onClose) && (
+            <div
+              className={cn(
+                "flex gap-2 pt-2",
+                variant === "compact" ? "flex-col" : "flex-row justify-center",
+              )}
+            >
+              {!cancelled && onViewDetails && (
+                <Button
+                  size={variant === "compact" ? "sm" : "default"}
+                  onClick={onViewDetails}
+                >
+                  View Details
+                </Button>
+              )}
+              {onClose && (
+                <Button
+                  variant="default"
+                  size={variant === "compact" ? "sm" : "default"}
+                  onClick={onClose}
+                >
+                  {cancelled ? "Try Again" : "Done"}
+                </Button>
+              )}
+            </div>
+          )}
       </Card>
     );
-  }
+  },
 );
 
 TxStatus.displayName = "TxStatus";

package/src/components/molecules/widget/asset-list/asset-filters.tsx

@@ -60,7 +60,7 @@ export const AssetFilters: React.FC<AssetFiltersProps> = ({
         onFiltersChange(newFilters);
       }
     },
-    [activeFilters, onFiltersChange, variant, multipleFilters]
+    [activeFilters, onFiltersChange, variant, multipleFilters],
   );
 
   return (
@@ -83,7 +83,9 @@ export const AssetFilters: React.FC<AssetFiltersProps> = ({
               {filters.map((filter) => (
                 <Badge
                   key={filter.id}
-                  variant={activeFilters.includes(filter.id) ? "default" : "muted"}
+                  variant={
+                    activeFilters.includes(filter.id) ? "default" : "muted"
+                  }
                   className="bg-muted cursor-pointer rounded-full"
                   onClick={() => handleFilterToggle(filter.id)}
                 >

package/src/components/molecules/widget/asset-list/asset-list.tsx

@@ -2,7 +2,10 @@
 import React, { useState } from "react";
 import { WidgetListItems } from "../widget-list-items";
 import { AssetRow } from "./asset-row";
-import { AssetFilters, AssetFilterItem as BaseAssetFilter } from "./asset-filters";
+import {
+  AssetFilters,
+  AssetFilterItem as BaseAssetFilter,
+} from "./asset-filters";
 import { useAssetFiltering, useAssetGrouping } from "./hooks";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
@@ -68,13 +71,15 @@ const defaultFilters: AssetFilterProp[] = [
     id: "eth",
     label: "ETH",
     filterFn: (asset) =>
-      ["ETH"].includes(asset.symbol.toUpperCase()) || ["ETH"].includes(asset.name.toUpperCase()),
+      ["ETH"].includes(asset.symbol.toUpperCase()) ||
+      ["ETH"].includes(asset.name.toUpperCase()),
   },
   {
     id: "btc",
     label: "BTC",
     filterFn: (asset) =>
-      ["BTC"].includes(asset.symbol.toUpperCase()) || ["BTC"].includes(asset.name.toUpperCase()),
+      ["BTC"].includes(asset.symbol.toUpperCase()) ||
+      ["BTC"].includes(asset.name.toUpperCase()),
   },
 ];
 

package/src/components/molecules/widget/asset-list/asset-row.tsx

@@ -26,7 +26,7 @@ export const AssetRow: React.FC<AssetRowProps> = ({
       className={cn(
         "flex cursor-pointer items-center justify-between rounded-lg px-3.5 py-2.5 transition-colors",
         "hover:bg-secondary",
-        className
+        className,
       )}
     >
       <div className="flex items-center gap-3">

package/src/components/molecules/widget/asset-list/hooks/index.ts

@@ -1,2 +1,2 @@
 export * from "./use-asset-filtering";
-export * from "./use-asset-grouping";
+export * from "./use-asset-grouping";

package/src/components/molecules/widget/asset-list/hooks/use-asset-filtering.ts

@@ -24,7 +24,7 @@ export function useAssetFiltering({
         (asset) =>
           asset.symbol.toLowerCase().includes(query) ||
           asset.name.toLowerCase().includes(query) ||
-          asset.address?.toLowerCase().includes(query)
+          asset.address?.toLowerCase().includes(query),
       );
     }
 
@@ -34,7 +34,9 @@ export function useAssetFiltering({
         .filter((f) => activeFilterIds.includes(f.id))
         .map((f) => f.filterFn);
 
-      result = result.filter((asset) => activeFilterFns.every((filterFn) => filterFn(asset)));
+      result = result.filter((asset) =>
+        activeFilterFns.every((filterFn) => filterFn(asset)),
+      );
     }
 
     return result;

package/src/components/molecules/widget/asset-list/hooks/use-asset-grouping.ts

@@ -9,7 +9,8 @@ interface UseAssetGroupingProps {
 
 const CHAIN_ICONS: Record<number, string> = {
   1: "https://storage.googleapis.com/turtle-assets/tokens/eth.png",
-  747474: "https://storage.googleapis.com/turtle-assets/partners/polygon/katana.svg",
+  747474:
+    "https://storage.googleapis.com/turtle-assets/partners/polygon/katana.svg",
 };
 
 export function useAssetGrouping({
@@ -49,7 +50,7 @@ export function useAssetGrouping({
         acc[asset.chainId].items.push(asset);
         return acc;
       },
-      {} as Record<string, WidgetListGroup<Asset>>
+      {} as Record<string, WidgetListGroup<Asset>>,
     );
 
     console.log("chainGroups", chainGroups);
@@ -59,14 +60,22 @@ export function useAssetGrouping({
     groupsArray.sort((a, b) => {
       // Get the highest balance in each group (items are already sorted)
       const maxBalanceA =
-        a.items.length > 0 ? parseFloat(a.items[0].balanceUSD.replace(/[$,]/g, "") || "0") : 0;
+        a.items.length > 0
+          ? parseFloat(a.items[0].balanceUSD.replace(/[$,]/g, "") || "0")
+          : 0;
       const maxBalanceB =
-        b.items.length > 0 ? parseFloat(b.items[0].balanceUSD.replace(/[$,]/g, "") || "0") : 0;
+        b.items.length > 0
+          ? parseFloat(b.items[0].balanceUSD.replace(/[$,]/g, "") || "0")
+          : 0;
 
       // If highest balances are equal, sort by number of tokens with non-zero balance
       if (maxBalanceA === maxBalanceB) {
-        const nonZeroCountA = a.items.filter((asset) => parseFloat(asset.balance) > 0).length;
-        const nonZeroCountB = b.items.filter((asset) => parseFloat(asset.balance) > 0).length;
+        const nonZeroCountA = a.items.filter(
+          (asset) => parseFloat(asset.balance) > 0,
+        ).length;
+        const nonZeroCountB = b.items.filter(
+          (asset) => parseFloat(asset.balance) > 0,
+        ).length;
         return nonZeroCountB - nonZeroCountA;
       }
 

package/src/components/molecules/widget/base-selector.tsx

@@ -47,7 +47,7 @@ const BaseSelector = ({
         size === "xs" && "h-7 min-w-[80px] gap-2 px-2.5 py-1",
         size === "sm" && "h-8 min-w-[75px] gap-1.5 px-3 py-1.5",
         size === "default" && "h-10 min-w-[80px] gap-1.5 px-3 py-2",
-        className
+        className,
       )}
       role="button"
       tabIndex={0}
@@ -58,7 +58,7 @@ const BaseSelector = ({
             "flex items-center",
             size === "xs" && "gap-2",
             size === "sm" && "gap-1.5",
-            size === "default" && "gap-1.5"
+            size === "default" && "gap-1.5",
           )}
         >
           {showIcon && icon && (
@@ -67,7 +67,7 @@ const BaseSelector = ({
                 "flex items-center justify-center",
                 size === "xs" && "h-3 w-3.5",
                 size === "sm" && "h-3.5 w-4",
-                size === "default" && "h-4 w-5"
+                size === "default" && "h-4 w-5",
               )}
             >
               {icon}
@@ -78,7 +78,7 @@ const BaseSelector = ({
               "font-medium",
               size === "xs" && "text-xs",
               size === "sm" && "text-sm",
-              size === "default" && "text-sm"
+              size === "default" && "text-sm",
             )}
           >
             {text}
@@ -90,7 +90,7 @@ const BaseSelector = ({
             "text-muted-foreground",
             size === "xs" && "text-xs",
             size === "sm" && "text-sm",
-            size === "default" && "text-sm"
+            size === "default" && "text-sm",
           )}
         >
           {placeholder}

package/src/components/molecules/widget/campaign-item.tsx

@@ -32,8 +32,8 @@ const CampaignItem = React.forwardRef<HTMLDivElement, CampaignItemProps>(
 
     // TODO: Refactor and add default icon here, maybe turtle icon?
     const defaultIcon = (
-      <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center">
-        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+      <div className="bg-primary/20 flex h-6 w-6 items-center justify-center rounded-full">
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
           <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" />
         </svg>
       </div>
@@ -48,12 +48,18 @@ const CampaignItem = React.forwardRef<HTMLDivElement, CampaignItemProps>(
       <WidgetItem ref={ref} onSelect={onSelect} selected={selected} {...props}>
         <WidgetItemTop>
           <WidgetItemLeft>
-            <LabelWithIcon icon={icon || defaultIcon} textSize="base" iconSize="lg">
+            <LabelWithIcon
+              icon={icon || defaultIcon}
+              textSize="base"
+              iconSize="lg"
+            >
               {name}
             </LabelWithIcon>
           </WidgetItemLeft>
           <WidgetItemRight>
-            <span className="text-md font-semibold text-foreground">{aprRange || "N/A"}</span>
+            <span className="text-md text-foreground font-semibold">
+              {aprRange || "N/A"}
+            </span>
           </WidgetItemRight>
         </WidgetItemTop>
         <WidgetItemBottom>
@@ -61,13 +67,13 @@ const CampaignItem = React.forwardRef<HTMLDivElement, CampaignItemProps>(
             {chains && <IconList items={chains} label="Chains" size="sm" />}
             <WidgetItemStats stats={stats} />
           </WidgetItemLeft>
-          <WidgetItemRight className="flex flex-col gap-1 items-end">
+          <WidgetItemRight className="flex flex-col items-end gap-1">
             {rewards && <IconList items={rewards} label="Rewards" size="sm" />}
           </WidgetItemRight>
         </WidgetItemBottom>
       </WidgetItem>
     );
-  }
+  },
 );
 
 CampaignItem.displayName = "CampaignItem";