Skip to content

Commit

Permalink
Update style of wallet extension select view (#21)
Browse files Browse the repository at this point in the history
* Update style of wallet extension select view

* Update

---------

Co-authored-by: notset <notset@email.com>
  • Loading branch information
hyifeng and notset authored Dec 6, 2023
1 parent 8563d89 commit 017b9f9
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 48 deletions.
3 changes: 3 additions & 0 deletions projects/16-open-qf/src/site/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,6 @@ next-env.d.ts
!.yarn/releases
!.yarn/sdks
!.yarn/versions

.yalc
yalc.lock
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import tw from "tailwind-styled-components";
import Modal from "@osn/common-ui/es/Modal";
import {
polkadotJs,
Expand All @@ -7,55 +6,10 @@ import {
polkagate,
nova,
} from "./constants";
import useInjectedWeb3 from "./useInjectedWeb3";
import { useIsMounted } from "@osn/common";
import { useEffect, useState } from "react";
import WalletExtension from "./walletExtension";

const Wallets = [polkadotJs, subWalletJs, talisman, polkagate, nova];

const WalletExtensionWrapper = tw.div`
cursor-pointer
flex
justify-center
items-center
py-[12px]
px-[24px]
border
border-stroke-action-default
text-text-primary
text14medium
`;

function WalletExtension({ wallet, onClick }) {
const [installed, setInstalled] = useState(null);
const { loading: loadingInjectedWeb3, injectedWeb3 } = useInjectedWeb3();
const isMounted = useIsMounted();
const Logo = wallet.logo;

useEffect(() => {
if (loadingInjectedWeb3) {
return;
}

if (isMounted.current) {
setInstalled(!!injectedWeb3?.[wallet?.extensionName]);
}
}, [loadingInjectedWeb3, injectedWeb3, wallet?.extensionName, isMounted]);

if (!installed) {
return null;
}

return (
<WalletExtensionWrapper onClick={() => onClick(wallet)}>
<div className="flex items-center gap-[8px]">
<Logo className={wallet.title} alt={wallet.title} />
<span className="wallet-title">{wallet.title}</span>
</div>
</WalletExtensionWrapper>
);
}

function WalletsList({ setWalletExtensionType }) {
return (
<div className="space-y-2">
Expand All @@ -80,7 +34,7 @@ export default function SelectWalletPopup({
return (
<Modal open={open} setOpen={setOpen} footer={false}>
<div className="flex flex-col gap-[20px]">
<h2 className="text-2xl font-bold">Connect Wallet</h2>
<span className="text16semibold text-text-primary">Connect Wallet</span>
<WalletsList setWalletExtensionType={setWalletExtensionType} />
</div>
</Modal>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import tw from "tailwind-styled-components";
import useInjectedWeb3 from "./useInjectedWeb3";
import { useIsMounted } from "@osn/common";
import { useEffect, useState } from "react";
import { ReactComponent as ArrowCaretRight } from "@/imgs/icons/arrow-caret-right.svg";
import { LoadingIcon } from "@osn/common-ui";

const Wrapper = tw.div`
flex
justify-between
items-center
py-[12px]
px-[12px]
border
border-stroke-action-default
${(p) =>
p.disabled
? "border-none bg-fill-bg-tertiary pointer-events-none"
: "cursor-pointer"}
`;

const ArrowCaretRightIcon = tw(ArrowCaretRight)`
[&_path]:fill-text-secondary
`;

export default function WalletExtension({ wallet, onClick }) {
const [installed, setInstalled] = useState(null);
const { loading: loadingInjectedWeb3, injectedWeb3 } = useInjectedWeb3();
const isMounted = useIsMounted();
const Logo = wallet.logo;

useEffect(() => {
if (loadingInjectedWeb3) {
return;
}

if (isMounted.current) {
setInstalled(!!injectedWeb3?.[wallet?.extensionName]);
}
}, [loadingInjectedWeb3, injectedWeb3, wallet?.extensionName, isMounted]);

const disabled = loadingInjectedWeb3 || !installed;

return (
<Wrapper disabled={disabled} onClick={() => onClick(wallet)}>
<div className="flex items-center gap-[8px]">
<Logo className={wallet.title} alt={wallet.title} />
<span className="text-text-primary text14medium">{wallet.title}</span>
</div>
<div>
{loadingInjectedWeb3 ? (
<LoadingIcon width={24} height={24} />
) : installed ? (
<ArrowCaretRightIcon width={24} height={24} />
) : (
<span className="text12medium text-text-tertiary">Not installed</span>
)}
</div>
</Wrapper>
);
}
10 changes: 10 additions & 0 deletions projects/16-open-qf/src/site/components/layouts/detailLayout.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import MainContainer from "../containers/main";
import AppLayout from "./appLayout";

export default function DetailLayout({ backdrop, children, ...props }) {
return (
<AppLayout backdrop={backdrop} {...props}>
<MainContainer>{children}</MainContainer>
</AppLayout>
);
}
10 changes: 10 additions & 0 deletions projects/16-open-qf/src/site/imgs/icons/arrow-caret-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 017b9f9

Please sign in to comment.