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

Wallet disconnected connect button #450

Merged
merged 2 commits into from
Oct 23, 2023
Merged

Wallet disconnected connect button #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ed60e4
feat(frontend): move wallet disconnected to separate component, add c…
guerrap Oct 23, 2023
7587e38
docs: add changeset
guerrap Oct 23, 2023
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
5 changes: 5 additions & 0 deletions .changeset/tough-insects-breathe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@carrot-kpi/host-frontend": minor
---

Add connect wallet button to wallet disconnected modal
14 changes: 2 additions & 12 deletions packages/frontend/src/components/authenticate/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React, { useCallback, useEffect, useState } from "react";
import LogoIcon from "../../icons/logo-icon";
import { t } from "i18next";
import { useAccount, useSignMessage } from "wagmi";
import WalletDisconnected from "../../icons/wallet-disconnected";
import { useSetPinningProxyJWT } from "../../hooks/useSetPinningProxyJWT";
import { PINNING_PROXY_URL } from "../../constants";
import { WalletDisconnected } from "../wallet-disconnected";

interface AuthenticateProps {
onCancel: () => void;
Expand Down Expand Up @@ -112,17 +112,7 @@ export const Authenticate = ({ onCancel }: AuthenticateProps) => {
</div>
</>
) : (
<>
<WalletDisconnected className="w-52" />
<div className="flex flex-col gap-3 items-center">
<Typography variant="h4">
{t("wallet.disconnected.title")}
</Typography>
<Typography>
{t("wallet.disconnected.description")}
</Typography>
</div>
</>
<WalletDisconnected />
)}
</div>
</div>
Expand Down
77 changes: 43 additions & 34 deletions packages/frontend/src/components/connect-wallet/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,17 @@ import { cva } from "class-variance-authority";
const rootStyles = cva(["flex", "gap-4"]);

interface ConnectWalletProps {
chainList?: boolean;
className?: {
root?: string;
connectButton?: string;
};
}

export const ConnectWallet = ({ className }: ConnectWalletProps) => {
export const ConnectWallet = ({
chainList = true,
className,
}: ConnectWalletProps) => {
const { t } = useTranslation();
const { chain } = useNetwork();
const { address, connector: activeConnector } = useAccount();
Expand Down Expand Up @@ -127,42 +132,45 @@ export const ConnectWallet = ({ className }: ConnectWalletProps) => {
/>
)}
<div className={rootStyles({ className: className?.root })}>
<div
className={`h-12 w-fit flex items-center ${
__LIBRARY_MODE__ || !multipleEnabledChains
? ""
: "cursor-pointer"
} gap-3`}
onClick={
multipleEnabledChains
? handleNetworksPopoverOpen
: undefined
}
ref={setNetworksPopoverAnchor}
>
<ChainIcon
backgroundColor={
supportedChain
? SUPPORTED_CHAINS[chainId as ChainId]
.iconBackgroundColor
: "#ff0000"
{chainList && (
<div
className={`h-12 w-fit flex items-center ${
__LIBRARY_MODE__ || !multipleEnabledChains
? ""
: "cursor-pointer"
} gap-3`}
onClick={
multipleEnabledChains
? handleNetworksPopoverOpen
: undefined
}
logo={<Logo width={18} height={18} />}
/>
<div className="flex flex-col">
<Typography variant="xs">
{t("connect.wallet.network")}
</Typography>
<Typography variant="sm">
{supportedChain ? chainName : "Unsupported"}
</Typography>
ref={setNetworksPopoverAnchor}
>
<ChainIcon
backgroundColor={
supportedChain
? SUPPORTED_CHAINS[chainId as ChainId]
.iconBackgroundColor
: "#ff0000"
}
logo={<Logo width={18} height={18} />}
/>
<div className="flex flex-col">
<Typography variant="xs">
{t("connect.wallet.network")}
</Typography>
<Typography variant="sm">
{supportedChain ? chainName : "Unsupported"}
</Typography>
</div>
{!__LIBRARY_MODE__ && multipleEnabledChains && (
<CaretDown className="w-3" />
)}
</div>
{!__LIBRARY_MODE__ && multipleEnabledChains && (
<CaretDown className="w-3" />
)}
</div>
)}
{address ? (
<Button
size="small"
ref={setConnectWallet}
onClick={handleAccountPopoverOpen}
className={{
Expand All @@ -173,10 +181,11 @@ export const ConnectWallet = ({ className }: ConnectWalletProps) => {
</Button>
) : (
<Button
size="small"
ref={setConnectWallet}
onClick={handleConnectPopoverOpen}
className={{
root: "h-12 px-3 w-full xl:w-fit",
root: className?.connectButton,
}}
>
{t("connect.wallet")}
Expand Down
14 changes: 2 additions & 12 deletions packages/frontend/src/components/permissioned/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { t } from "i18next";
import ErrorIcon from "../../icons/error";
import { Button, Typography } from "@carrot-kpi/ui";
import { useAccount } from "wagmi";
import WalletDisconnected from "../../icons/wallet-disconnected";
import { DISCORD_LINK } from "../../constants";
import { WalletDisconnected } from "../wallet-disconnected";

interface PermissionedProps {
onBack: () => void;
Expand Down Expand Up @@ -51,17 +51,7 @@ export const Permissioned = ({ onBack }: PermissionedProps) => {
</div>
</>
) : (
<>
<WalletDisconnected className="w-52" />
<div className="flex flex-col gap-3 items-center">
<Typography variant="h4">
{t("wallet.disconnected.title")}
</Typography>
<Typography>
{t("wallet.disconnected.description")}
</Typography>
</div>
</>
<WalletDisconnected />
)}
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion packages/frontend/src/components/ui/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,11 @@ export const Navbar = ({
</nav>
<div className="flex md:flex-row items-center gap-4">
<div className="hidden md:block">
<ConnectWallet />
<ConnectWallet
className={{
connectButton: "h-12 px-3 w-full xl:w-fit",
}}
/>
</div>
<Button
ref={setPreferencesAnchor}
Expand Down
20 changes: 20 additions & 0 deletions packages/frontend/src/components/wallet-disconnected/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from "react";
import { t } from "i18next";
import WalletDisconnectedIcon from "../../icons/wallet-disconnected";
import { Typography } from "@carrot-kpi/ui";
import { ConnectWallet } from "../connect-wallet";

export const WalletDisconnected = () => {
return (
<div className="flex flex-col gap-4 items-center">
<WalletDisconnectedIcon className="w-52" />
<div className="flex flex-col gap-3 items-center mb-4">
<Typography variant="h4">
{t("wallet.disconnected.title")}
</Typography>
<Typography>{t("wallet.disconnected.description")}</Typography>
</div>
<ConnectWallet chainList={false} />
</div>
);
};