Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pulling refs/heads/staging into test-staging #2432

Merged
merged 3 commits into from
May 29, 2024
Merged

Pulling refs/heads/staging into test-staging #2432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
de0e61a
style: add dropdown icon, remove old styling
robhyrk May 23, 2024
250eec6
styles: remove old styling, add dropdown icon, update styles
robhyrk May 24, 2024
7c8c1e8
Merge pull request #2427 from zeitgeistpm/account-selection
robhyrk May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions components/account/AccountModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } =
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/account/AccountModalHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}}
Expand Down
49 changes: 22 additions & 27 deletions components/account/AccountSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import Select, {
SingleValueProps,
StylesConfig,
} from "react-select";

import CopyIcon from "../ui/CopyIcon";
import AccountSelectOption from "./AccountSelectOption";
import AccountSelectValue from "./AccountSelectValue";
Expand All @@ -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>
Expand All @@ -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} />
Expand All @@ -47,7 +45,7 @@ const DropdownIndicator = () => {
};

const IndicatorSeparator = () => {
return <></>;
return null;
};

const customStyles: StylesConfig<AccountOption> = {
Expand Down Expand Up @@ -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>
Expand Down
26 changes: 15 additions & 11 deletions components/account/AccountSelectValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/ui/CopyIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down
Loading