Merge pull request #2432 from zeitgeistpm/staging

zeitgeistpm · May 29, 2024 · b0e0394 · b0e0394
2 parents f5107b5 + 7c8c1e8
commit b0e0394
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 56 deletions.
diff --git a/components/account/AccountModalContent.tsx b/components/account/AccountModalContent.tsx
@@ -5,6 +5,7 @@ import { useWallet } from "lib/state/wallet";
 import { useZtgBalance } from "lib/hooks/queries/useZtgBalance";
 import { ZTG } from "@zeitgeistpm/sdk";
 import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+import { formatNumberLocalized } from "lib/util";
 
 const AccountModalContent: FC = () => {
   const { activeAccount, disconnectWallet, accounts, selectAccount } =
@@ -38,40 +39,40 @@ const AccountModalContent: FC = () => {
         value={value}
         onChange={onAccountChange}
       />
-      <div className="mt-ztg-15 flex h-ztg-50 items-center justify-between">
-        <div className="flex h-full flex-grow items-center rounded-ztg-10 bg-sky-100 dark:bg-black">
-          <div className="flex items-center px-ztg-8">
-            <div className="center h-ztg-28 w-ztg-28 rounded-full bg-white dark:bg-sky-1000">
-              <div className="center h-ztg-22 w-ztg-22 rounded-full bg-sky-100 dark:bg-black">
-                <div className="center h-ztg-16 w-ztg-16 rounded-full bg-border-dark dark:bg-sky-1000">
+      <div className="mt-4 flex h-12.5 items-center justify-between">
+        <div className="flex h-full w-full items-center rounded-lg bg-sky-100 px-2">
+          <div className="flex items-center px-2">
+            <div className="center rounded-full bg-white">
+              <div className="center rounded-full bg-sky-100">
+                <div className="center h-6 w-6 rounded-full">
                   <img
-                    src="/icons/acc-balance.svg"
+                    src="/currencies/ztg.svg"
                     alt="Account balance"
                     style={{ marginTop: "-1px" }}
                   />
                 </div>
               </div>
             </div>
-            <div className="ml-ztg-16 flex flex-col">
-              <div className="text-ztg-10-150 font-bold uppercase text-sky-600">
+            <div className="ml-4 flex flex-col">
+              <div className="text-xxs font-bold uppercase text-sky-600">
                 balance
               </div>
-              <div className="font-mono text-ztg-14-120 font-bold text-sheen-green">
-                {`${activeBalance?.div(ZTG).toFixed(4)} ${
+              <div className="font-mono text-sm font-bold text-blue">
+                {`${formatNumberLocalized(Number(activeBalance?.div(ZTG)))} ${
                   constants?.tokenSymbol ?? ""
                 }` ?? "---"}
               </div>
             </div>
           </div>
         </div>
         <div
-          className="ml-ztg-16 flex h-full w-ztg-176 cursor-pointer items-center justify-evenly rounded-ztg-10 bg-border-light text-white dark:bg-sky-700"
+          className="ml-4 flex h-12.5 cursor-pointer items-center justify-center gap-2 rounded-lg bg-border-light px-2 text-white md:w-44"
           onClick={() => {
             disconnectWallet();
           }}
         >
-          <div className=" text-ztg-16-150 capitalize">disconnect</div>
-          <LogOut size={16} className="-ml-ztg-30 text-white" />
+          <div className="capitalize">disconnect</div>
+          <LogOut size={16} className="text-white" />
         </div>
       </div>
     </div>

diff --git a/components/account/AccountModalHead.tsx b/components/account/AccountModalHead.tsx
@@ -9,9 +9,9 @@ const AccountModalHead = () => {
 
   return (
     <div className="flex flex-row justify-between">
-      <div className="text-ztg-16-150 font-bold text-black">Account</div>
+      <div className="text-lg font-bold">Account</div>
       <div
-        className="mr-ztg-7 cursor-pointer underline"
+        className="cursor-pointer rounded-lg border-2 border-gray-300 px-1 hover:border-gray-400"
         onClick={() => {
           switchExtension();
         }}

diff --git a/components/account/AccountSelect.tsx b/components/account/AccountSelect.tsx
@@ -9,7 +9,6 @@ import Select, {
   SingleValueProps,
   StylesConfig,
 } from "react-select";
-
 import CopyIcon from "../ui/CopyIcon";
 import AccountSelectOption from "./AccountSelectOption";
 import AccountSelectValue from "./AccountSelectValue";
@@ -19,7 +18,7 @@ export type AccountOption = { label: string; value: string };
 const Control = ({ children, ...rest }: ControlProps<AccountOption, false>) => {
   return (
     <components.Control {...(rest as ControlProps)}>
-      <div className="flex cursor-pointer items-center justify-between rounded-ztg-10 bg-sky-100 dark:bg-black">
+      <div className="flex cursor-pointer items-center justify-between rounded-lg bg-sky-100">
         {children}
       </div>
     </components.Control>
@@ -28,7 +27,6 @@ const Control = ({ children, ...rest }: ControlProps<AccountOption, false>) => {
 
 const Option = (props: OptionProps<AccountOption, false>) => {
   const { label, value } = props.data;
-
   return (
     <components.Option {...props} className="bg-black">
       <AccountSelectOption name={label} address={value} />
@@ -47,7 +45,7 @@ const DropdownIndicator = () => {
 };
 
 const IndicatorSeparator = () => {
-  return <></>;
+  return null;
 };
 
 const customStyles: StylesConfig<AccountOption> = {
@@ -98,32 +96,29 @@ const AccountSelect: FC<AccountSelectProps> = ({
   const wallet = useWallet();
 
   return (
-    <div className="flex h-ztg-50 w-full items-center rounded-ztg-10 bg-sky-100 dark:bg-black">
-      <div className="flex-1">
-        <Select
-          isSearchable={false}
-          options={options}
-          styles={customStyles}
-          value={value}
-          isMulti={false}
-          isDisabled={disabled}
-          placeholder="Select an account"
-          components={{
-            Control,
-            Option,
-            SingleValue,
-            DropdownIndicator,
-            IndicatorSeparator,
-          }}
-          onChange={onChange}
-        />
-      </div>
-
+    <div className="flex w-full items-center justify-between rounded-lg bg-sky-100 px-2">
+      <Select
+        isSearchable={false}
+        options={options}
+        styles={customStyles}
+        value={value}
+        isMulti={false}
+        isDisabled={disabled}
+        placeholder="Select an account"
+        components={{
+          Control,
+          Option,
+          SingleValue,
+          DropdownIndicator,
+          IndicatorSeparator,
+        }}
+        onChange={onChange}
+      />
       {wallet.activeAccount?.address && (
         <CopyIcon
           copyText={wallet.activeAccount?.address}
-          className="w-auto pr-ztg-8"
-          size={16}
+          className="w-auto px-1"
+          size={18}
         />
       )}
     </div>

diff --git a/components/account/AccountSelectValue.tsx b/components/account/AccountSelectValue.tsx
@@ -1,30 +1,34 @@
 import Avatar from "components/ui/Avatar";
 import { shortenAddress } from "lib/util";
-
+import CopyIcon from "../ui/CopyIcon";
+import { IoIosArrowDropdownCircle } from "react-icons/io";
 import React, { FC } from "react";
-
+import { useWallet } from "lib/state/wallet";
 export interface AccountSelectValueProps {
   name: string;
   address: string;
 }
 
 const AccountSelectValue: FC<AccountSelectValueProps> = ({ name, address }) => {
+  const wallet = useWallet();
   return (
-    <div className="flex h-full  w-full items-center rounded-ztg-10 bg-sky-100 px-ztg-8 dark:bg-black">
-      <div className="center h-ztg-28 w-ztg-28 rounded-full bg-white dark:bg-sky-1000">
-        <div className="h-ztg-22 w-ztg-22 rounded-full bg-sky-100 dark:bg-black">
+    <div className="flex h-full w-full items-center rounded-lg bg-sky-100 px-2">
+      <div className="center rounded-full bg-white">
+        <div className="rounded-full bg-sky-100">
           <Avatar zoomed address={address} />
         </div>
       </div>
-      <div className="ml-ztg-16 flex flex-col">
-        <div className="text-ztg-10-150 font-bold uppercase text-sky-600">
-          {name}
-        </div>
-        <div className="font-mono text-ztg-12-120 font-semibold md:hidden">
+      <div className="ml-4 flex flex-col">
+        <div className="text-xxs font-bold uppercase text-sky-600">{name}</div>
+        <div className="flex items-center gap-1 font-mono text-sm font-semibold md:hidden">
           {shortenAddress(address, 8, 12)}
+          <IoIosArrowDropdownCircle size={16} />
         </div>
-        <div className="hidden font-mono text-ztg-12-120 font-semibold md:block">
+        <div className="hidden gap-1 font-mono text-sm font-semibold md:flex">
           {address}
+          {wallet.activeAccount?.address && (
+            <IoIosArrowDropdownCircle size={18} />
+          )}
         </div>
       </div>
     </div>

diff --git a/components/ui/CopyIcon.tsx b/components/ui/CopyIcon.tsx
@@ -39,7 +39,7 @@ const CopyIcon: FC<CopyIconProps> = ({
   }, [recentlyCopied]);
 
   return (
-    <div className={"relative flex w-ztg-20 items-center " + className}>
+    <div className={"relative flex items-center " + className}>
       <Copy
         size={size}
         role="button"
@@ -57,7 +57,7 @@ const CopyIcon: FC<CopyIconProps> = ({
         leaveTo="transform opacity-0 :scale-95"
       >
         <div className="absolute right-0 top-[50%] translate-x-[100%] translate-y-[-50%] pl-2">
-          <div className="rounded-md bg-black bg-opacity-30 p-1 text-sm text-white">
+          <div className="rounded-md bg-black p-1 text-sm text-white">
             Copied!
           </div>
         </div>