From 851c0863dcc62447d81a5116600631986866f145 Mon Sep 17 00:00:00 2001
From: Tyera Eulberg <tyera@solana.com>
Date: Tue, 2 Jun 2020 18:43:47 -0600
Subject: [PATCH] Default top-account filter to circulating

---
 explorer/src/components/TopAccountsCard.tsx | 34 ++++++++++++---------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/explorer/src/components/TopAccountsCard.tsx b/explorer/src/components/TopAccountsCard.tsx
index b1b189e0cc..a110fda47a 100644
--- a/explorer/src/components/TopAccountsCard.tsx
+++ b/explorer/src/components/TopAccountsCard.tsx
@@ -10,7 +10,7 @@ import { lamportsToSolString } from "utils";
 import { useQuery } from "utils/url";
 import { useSupply } from "providers/supply";
 
-type Filter = "circulating" | "nonCirculating" | null;
+type Filter = "circulating" | "nonCirculating" | "all" | null;
 
 export default function TopAccountsCard() {
   const supply = useSupply();
@@ -40,24 +40,25 @@ export default function TopAccountsCard() {
   let supplyCount: number;
   let accounts, header;
   switch (filter) {
-    case "circulating": {
-      accounts = richList.circulating;
-      supplyCount = supply.circulating;
-      header = "Circulating";
-      break;
-    }
     case "nonCirculating": {
       accounts = richList.nonCirculating;
       supplyCount = supply.nonCirculating;
       header = "Non-Circulating";
       break;
     }
-    default: {
+    case "all": {
       accounts = richList.total;
       supplyCount = supply.total;
       header = "Total";
       break;
     }
+    case "circulating":
+    default: {
+      accounts = richList.circulating;
+      supplyCount = supply.circulating;
+      header = "Circulating";
+      break;
+    }
   }
 
   return (
@@ -109,7 +110,11 @@ export default function TopAccountsCard() {
 const useQueryFilter = (): Filter => {
   const query = useQuery();
   const filter = query.get("filter");
-  if (filter === "circulating" || filter === "nonCirculating") {
+  if (
+    filter === "circulating" ||
+    filter === "nonCirculating" ||
+    filter === "all"
+  ) {
     return filter;
   } else {
     return null;
@@ -118,15 +123,16 @@ const useQueryFilter = (): Filter => {
 
 const filterTitle = (filter: Filter): string => {
   switch (filter) {
-    case "circulating": {
-      return "Circulating";
-    }
     case "nonCirculating": {
       return "Non-Circulating";
     }
-    default: {
+    case "all": {
       return "All";
     }
+    case "circulating":
+    default: {
+      return "Circulating";
+    }
   }
 };
 
@@ -150,7 +156,7 @@ const FilterDropdown = ({ filter, toggle, show }: DropdownProps) => {
     };
   };
 
-  const FILTERS: Filter[] = [null, "circulating", "nonCirculating"];
+  const FILTERS: Filter[] = [null, "nonCirculating", "all"];
   return (
     <div className="dropdown">
       <button