cleanup debug modal

src/app.tsx

@@ -104,6 +104,7 @@ import PostSettings from "./views/settings/post";
 import AccountSettings from "./views/settings/accounts";
 import ArticlesHomeView from "./views/articles";
 import ArticleView from "./views/articles/article";
+import WalletView from "./views/wallet";
 const TracksView = lazy(() => import("./views/tracks"));
 const UserTracksTab = lazy(() => import("./views/user/tracks"));
 const UserVideosTab = lazy(() => import("./views/user/videos"));
@@ -336,6 +337,19 @@ const router = createHashRouter([
           { path: "", element: <NotificationsView /> },
         ],
       },
+      {
+        path: "wallet",
+        children: [
+          {
+            path: "",
+            element: (
+              <RequireCurrentAccount>
+                <WalletView />
+              </RequireCurrentAccount>
+            ),
+          },
+        ],
+      },
       {
         path: "videos",
         children: [

src/components/copy-icon-button.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { IconButton, IconButtonProps, useToast } from "@chakra-ui/react";
+import { Button, ButtonProps, IconButton, IconButtonProps, useToast } from "@chakra-ui/react";
 
 import { CheckIcon, CopyToClipboardIcon } from "./icons";
 
@@ -8,7 +8,7 @@ type CopyIconButtonProps = Omit<IconButtonProps, "icon" | "value"> & {
   icon?: IconButtonProps["icon"];
 };
 
-export const CopyIconButton = ({ value, icon, ...props }: CopyIconButtonProps) => {
+export function CopyIconButton({ value, icon, ...props }: CopyIconButtonProps) {
   const toast = useToast();
   const [copied, setCopied] = useState(false);
 
@@ -27,4 +27,31 @@ export const CopyIconButton = ({ value, icon, ...props }: CopyIconButtonProps) =
       {...props}
     />
   );
+}
+
+type CopyButtonProps = Omit<ButtonProps, "icon" | "value"> & {
+  value: string | undefined | (() => string);
+  icon?: IconButtonProps["icon"];
 };
+export function CopyButton({ value, icon, children, ...props }: CopyButtonProps) {
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <Button
+      leftIcon={copied ? <CheckIcon boxSize="1.5em" /> : icon || <CopyToClipboardIcon boxSize="1.2em" />}
+      onClick={() => {
+        const v: string | undefined = typeof value === "function" ? value() : value;
+
+        if (v && navigator.clipboard && !copied) {
+          navigator.clipboard.writeText(v);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        } else toast({ description: v, isClosable: true, duration: null });
+      }}
+      {...props}
+    >
+      {copied ? "Copied" : children}
+    </Button>
+  );
+}