Skip to content

Commit

Permalink
Merge pull request #2201 from zeitgeistpm/web3-wallet-update
Browse files Browse the repository at this point in the history
Web 3 Wallet Update - Custom Modal
  • Loading branch information
robhyrk authored Feb 21, 2024
2 parents 6c06d49 + 4310ba2 commit bcfe3fb
Show file tree
Hide file tree
Showing 22 changed files with 908 additions and 993 deletions.
7 changes: 5 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,11 @@ NEXT_PUBLIC_SITE_URL=http://localhost:3000
# disable grillchat
NEXT_PUBLIC_GRILLCHAT_DISABLE=true

# web3auth client id
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID_ZTG=BHyRKGUvkWeDLXdLO1FBFZDqLtSMPuDN-zMWN1_Yb9KMZKWriIu-7ZxMBPBT72P-ER6FH_a-rlesWwY8Vgm0fjg
# web3auth
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=
NEXT_PUBLIC_AUTH0_CLIENT_ID=
NEXT_PUBLIC_DISCORD_CLIENT_ID=
NEXT_PUBLIC_AUTH0_DOMAIN=

NEXT_PUBLIC_OTHER_TAGS=["Coindesk"]

Expand Down
2 changes: 1 addition & 1 deletion components/account/Account.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const Account = () => {
<Modal open={walletSelectModalOpen} onClose={closeWalletSelect}>
<Dialog.Panel
className="
w-full max-w-[564px] rounded-ztg-10 bg-white p-[15px]"
w-full max-w-[450px] rounded-lg bg-white p-4"
>
<WalletSelect />
</Dialog.Panel>
Expand Down
6 changes: 4 additions & 2 deletions components/account/AccountButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { useUserLocation } from "lib/hooks/useUserLocation";
import { useWallet } from "lib/state/wallet";
import { formatNumberLocalized, shortenAddress } from "lib/util";
import { FaNetworkWired } from "react-icons/fa";

import Link from "next/link";
import { useRouter } from "next/router";
import React, { FC, Fragment, PropsWithChildren, useState } from "react";
Expand Down Expand Up @@ -89,6 +88,7 @@ const AccountButton: FC<{
isNovaWallet,
getProxyFor,
realAddress,
walletId,
} = useWallet();
const proxy = getProxyFor(activeAccount?.address);

Expand Down Expand Up @@ -342,7 +342,9 @@ const AccountButton: FC<{
<div
className="mb-3 flex items-center px-6 hover:bg-slate-100"
onClick={() => {
accountModals.openAccountSelect();
walletId === "web3auth"
? accountModals.openWalletSelect()
: accountModals.openAccountSelect();
}}
>
<User />
Expand Down
1 change: 0 additions & 1 deletion components/account/AccountModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useChainConstants } from "lib/hooks/queries/useChainConstants";
const AccountModalContent: FC = () => {
const { activeAccount, disconnectWallet, accounts, selectAccount } =
useWallet();

const { data: activeBalance } = useZtgBalance(activeAccount?.address);
const { data: constants } = useChainConstants();

Expand Down
4 changes: 1 addition & 3 deletions components/account/AccountSelect.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Unpacked } from "@zeitgeistpm/utility/dist/array";
import { useWallet } from "lib/state/wallet";

import React, { FC, useEffect, useMemo, useState } from "react";
import React, { FC } from "react";
import Select, {
components,
ControlProps,
Expand All @@ -14,7 +13,6 @@ import Select, {
import CopyIcon from "../ui/CopyIcon";
import AccountSelectOption from "./AccountSelectOption";
import AccountSelectValue from "./AccountSelectValue";
import { useAccountModals } from "lib/state/account";

export type AccountOption = { label: string; value: string };

Expand Down
47 changes: 47 additions & 0 deletions components/account/WalletIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import Image from "next/image";

interface WalletIconProps {
extensionName: string;
logoAlt: string;
logoSrc: string;
onClick?: () => void;
hasError?: boolean;
error?: any;
className?: string;
}

const WalletIcon = ({
logoAlt,
logoSrc,
extensionName,
onClick,
hasError,
error,
className,
}: WalletIconProps) => {
return (
<button
key={extensionName}
className="flex flex-1 cursor-pointer flex-row items-center justify-center rounded-md border bg-mystic py-1 hover:bg-gray-100"
onClick={onClick}
>
<Image
className={`center ${className}`}
width={32}
height={32}
alt={logoAlt}
src={logoSrc}
/>
{hasError && (
<div className="ml-auto w-ztg-275 text-ztg-12-120 text-vermilion">
{error.type === "NoAccounts" &&
"No accounts on this wallet. Please add account in wallet extension."}
{error.type === "InteractionDenied" &&
"Not allowed to interact with extension. Please change permission settings."}
</div>
)}
</button>
);
};

export default WalletIcon;
102 changes: 55 additions & 47 deletions components/account/WalletSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ import { BaseDotsamaWallet } from "@talismn/connect-wallets";
import { useAccountModals } from "lib/state/account";
import { usePrevious } from "lib/hooks/usePrevious";
import { supportedWallets, useWallet } from "lib/state/wallet";
import Web3wallet from "components/web3wallet";
import WalletIcon from "./WalletIcon";
import { userConfigAtom } from "lib/state/wallet";
import { useAtom } from "jotai";

import { useEffect } from "react";
import { Download } from "react-feather";

const WalletSelect = () => {
const { selectWallet, errors, accounts, connected } = useWallet();
const { selectWallet, errors, accounts, connected, walletId } = useWallet();
const [userConfig] = useAtom(userConfigAtom);

const accountModals = useAccountModals();

const wasConnected = usePrevious(connected);
Expand All @@ -22,56 +27,59 @@ const WalletSelect = () => {
};

useEffect(() => {
if (!wasConnected && connected && accounts.length) {
if (
!wasConnected &&
connected &&
accounts.length &&
walletId !== "web3auth"
) {
accountModals.openAccountSelect();
} else if (
!wasConnected &&
connected &&
accounts.length &&
walletId === "web3auth"
) {
accountModals.closeWalletSelect();
}
}, [wasConnected, connected, accounts, errors]);

return (
<div className="flex flex-col">
<div className="mb-3 text-ztg-16-150 font-bold text-black">
Connect Wallet
</div>
{supportedWallets.map((wallet, idx) => {
const error = errors.find(
(e) => e.extensionName === wallet.extensionName,
);
const hasError = error != null;
return (
<div key={wallet.extensionName}>
<div
className={
"flex h-ztg-64 cursor-pointer flex-row items-center rounded-ztg-12 bg-sky-100 px-ztg-12 dark:bg-sky-700 " +
(idx < 3 ? "mb-ztg-12 " : "")
}
onClick={() => {
handleSelectWallet(wallet);
}}
>
<img
className="center mr-ztg-10 h-ztg-32 w-ztg-32 text-ztg-12-120"
alt={wallet.logo?.alt}
src={wallet.logo?.src}
<div className="flex flex-col p-4">
<h3 className="mb-4 text-2xl font-bold">
{userConfig?.selectedAddress
? "Log back in to Zeitgeist"
: "Create Account"}
</h3>
<p className="mb-4">
{userConfig?.selectedAddress
? "Use one of the following options to log in and start using Prediction Markets."
: "Use one of the following options to create a wallet and start using Prediction Markets."}
</p>
<Web3wallet />
<h3 className="my-4 text-lg font-bold">Crypto Wallet</h3>
<div className="flex justify-between gap-6">
{supportedWallets
.filter((w) => w.extensionName !== "web3auth")
.map((wallet) => {
const error = errors.find(
(e) => e.extensionName === wallet.extensionName,
);
const hasError = error != null;
return (
<WalletIcon
onClick={() => {
handleSelectWallet(wallet);
}}
extensionName={wallet.extensionName}
logoAlt={wallet.logo?.alt}
logoSrc={wallet.logo?.src}
hasError={hasError}
error={error}
/>
<div className="flex items-center text-ztg-18-150">
{wallet.title}
</div>
{!wallet.installed && wallet.extensionName !== "web3auth" && (
<div className="ml-auto">
<Download size={24} />
</div>
)}
{hasError && (
<div className="ml-auto w-ztg-275 text-ztg-12-120 text-vermilion">
{error.type === "NoAccounts" &&
"No accounts on this wallet. Please add account in wallet extension."}
{error.type === "InteractionDenied" &&
"Not allowed to interact with extension. Please change permission settings."}
</div>
)}
</div>
</div>
);
})}
);
})}
</div>
</div>
);
};
Expand Down
1 change: 0 additions & 1 deletion components/portfolio/TransferButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Decimal from "decimal.js";
import React, { useMemo, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import type { ApiPromise } from "@polkadot/api";
import { encodeAddress } from "@polkadot/keyring";
import { AssetId, IOForeignAssetId, ZTG, isRpcSdk } from "@zeitgeistpm/sdk";
import AddressInput, { AddressOption } from "components/ui/AddressInput";
import AssetInput from "components/ui/AssetInput";
Expand Down
54 changes: 54 additions & 0 deletions components/web3wallet/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import WalletIcon from "components/account/WalletIcon";
import useWeb3Wallet from "lib/hooks/useWeb3Wallet";
import { useState } from "react";

const Web3wallet = () => {
const { loginGoogle, loginTwitter, loginDiscord, loginEmail } =
useWeb3Wallet();
const [email, setEmail] = useState<string>("");

return (
<div>
<h3 className="mb-4 text-lg font-bold">Social</h3>
<div className="grid grid-cols-3 gap-x-6 gap-y-4">
<WalletIcon
logoAlt="google"
logoSrc="/icons/google-g.svg"
extensionName="web3auth"
onClick={loginGoogle}
/>
<WalletIcon
logoAlt="twitter"
logoSrc="/icons/x-logo.svg"
extensionName="web3auth"
className="px-1 invert"
onClick={loginTwitter}
/>
<WalletIcon
logoAlt="discord"
logoSrc="/icons/discord.svg"
extensionName="web3auth"
onClick={loginDiscord}
/>
<div className="col-span-3 grid grid-cols-3 gap-x-6">
<h3 className="col-span-3 mb-4 text-lg font-bold">Email</h3>
<input
type="text"
placeholder="Enter email for passwordless login"
className="col-span-2 rounded-md border px-2 py-1 leading-8 placeholder:text-xs focus:outline-none focus:ring-1 focus:ring-ztg-blue"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button
className="col-span-1 rounded-md bg-ztg-blue py-1 leading-8 text-white hover:bg-black"
onClick={() => loginEmail(email)}
>
Submit
</button>
</div>
</div>
</div>
);
};

export default Web3wallet;
3 changes: 1 addition & 2 deletions lib/hooks/queries/useAccountTokenPositions.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useQuery } from "@tanstack/react-query";
import { isIndexedSdk, isRpcSdk } from "@zeitgeistpm/sdk";
import { isRpcSdk } from "@zeitgeistpm/sdk";
import { useSdkv2 } from "../useSdkv2";
import { encodeAddress } from "@polkadot/util-crypto";

export const positionsRootKey = "account-token-positions";

Expand Down
3 changes: 1 addition & 2 deletions lib/hooks/queries/useFeePayingAsset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export const useFeePayingAsset = (
const { data: constants } = useChainConstants();
const { data: assetMetadata } = useAllAssetMetadata();
const { assetSelection } = useFeePayingAssetSelection();

const enabled =
!!nativeBalance &&
!!foreignAssetBalances &&
Expand Down Expand Up @@ -79,6 +78,7 @@ export const useFeePayingAsset = (
sufficientBalance: true,
};
} else if (IOForeignAssetId.is(assetSelection.value)) {
console.log(IOForeignAssetId.is(assetSelection.value));
const balance = foreignAssetBalances.find(
(asset) =>
IOForeignAssetId.is(assetSelection.value) &&
Expand Down Expand Up @@ -110,7 +110,6 @@ export const useFeePayingAsset = (
enabled: enabled,
},
);

return query;
};

Expand Down
Loading

0 comments on commit bcfe3fb

Please sign in to comment.