Skip to content

Commit

Permalink
Add smart and personal wallet switcher in CW details Modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@MananTank
MananTank committed Feb 14, 2024
1 parent d827363 commit ef87269
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 130 deletions.
149 changes: 75 additions & 74 deletions packages/thirdweb/src/react/hooks/connection/useAutoConnect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,100 +38,101 @@ export function AutoConnect() {
connectionManager.getStoredActiveWalletId(),
]);

// if no wallets were last connected
if (!lastConnectedWalletIds) {
setConnectionStatus("disconnected");
return;
}

// connect the last active wallet first
const lastActiveWalletConfig = wallets.find(
(w) => w.metadata.id === lastActiveWalletId,
);
async function handleWalletConnection(walletConfig: WalletConfig) {
// if this wallet requires a personal wallet to be connected
if (walletConfig.personalWalletConfigs) {
// get saved connection params for this wallet
const savedParams = await getSavedConnectParamsFromStorage(
walletConfig.metadata.id,
);

// if must be an object with `personalWalletId` property
if (!isValidWithPersonalWalletConnectionOptions(savedParams)) {
throw new Error("Invalid connection params");
}

// connect the active wallet and set it as active
if (lastActiveWalletConfig) {
// ------------ TRY ------------
try {
// if this wallet requires a personal wallet to be connected
if (lastActiveWalletConfig.personalWalletConfigs) {
// get saved connection params for this wallet
const savedParams = await getSavedConnectParamsFromStorage(
lastActiveWalletConfig.metadata.id,
);

// if must be an object with `personalWalletId` property
if (!isValidWithPersonalWalletConnectionOptions(savedParams)) {
throw new Error("Invalid connection params");
}

// find the personal wallet config
const personalWalletConfig =
lastActiveWalletConfig.personalWalletConfigs.find(
(w) => w.metadata.id === savedParams.personalWalletId,
);

if (!personalWalletConfig) {
throw new Error("Personal wallet not found");
}

// create and auto connect the personal wallet to get personal account
const personalWallet = personalWalletConfig.create({
client,
dappMetadata,
});

const personalAccount = await personalWallet.autoConnect();

// create wallet
const wallet = lastActiveWalletConfig.create({
client,
dappMetadata,
}) as WalletWithPersonalAccount;

// auto connect the wallet using the personal account
const account = await wallet.autoConnect({
personalAccount,
});
// find the personal wallet config
const personalWalletConfig = walletConfig.personalWalletConfigs.find(
(w) => w.metadata.id === savedParams.personalWalletId,
);

connect(account);
if (!personalWalletConfig) {
throw new Error("Personal wallet not found");
}

// if this wallet does not require a personal wallet to be connected
else {
const wallet = lastActiveWalletConfig.create({
client,
dappMetadata,
});
const account = await wallet.autoConnect();
// create and auto connect the personal wallet to get personal account
const personalWallet = personalWalletConfig.create({
client,
dappMetadata,
});

const personalAccount = await personalWallet.autoConnect();

// create wallet
const wallet = walletConfig.create({
client,
dappMetadata,
}) as WalletWithPersonalAccount;

// auto connect the wallet using the personal account
const account = await wallet.autoConnect({
personalAccount,
});

return account;
}

// if this wallet does not require a personal wallet to be connected
else {
const wallet = walletConfig.create({
client,
dappMetadata,
});
const account = await wallet.autoConnect();
return account;
}
}

// connect the last active wallet and set it as active
const activeWalletConfig = wallets.find(
(w) => w.metadata.id === lastActiveWalletId,
);

if (activeWalletConfig) {
try {
const account = await handleWalletConnection(activeWalletConfig);
if (account) {
connect(account);
} else {
setConnectionStatus("disconnected");
}
} catch (e) {
console.log("failed to auto connect last active wallet");
console.error("Failed to auto connect last active wallet");
console.error(e);
setConnectionStatus("disconnected");
}
} else {
setConnectionStatus("disconnected");
}

const otherWalletConfigs: WalletConfig[] = [];
wallets.forEach((w) => {
if (w.metadata.id === lastActiveWalletId) {
return;
}
if (lastConnectedWalletIds.includes(w.metadata.id)) {
otherWalletConfigs.push(w);
}
});
// then connect wallets that were last connected but were not set as active
const otherWallets = wallets.filter(
(w) =>
w.metadata.id !== lastActiveWalletId &&
lastConnectedWalletIds.includes(w.metadata.id),
);

// connect other wallets
otherWalletConfigs.forEach(async (config) => {
const wallet = config.create({
client,
dappMetadata,
});
const account = await wallet.autoConnect();
connectionManager.setConnectedAccount(account);
otherWallets.forEach(async (config) => {
const account = await handleWalletConnection(config);
if (account) {
connectionManager.setConnectedAccount(account);
}
});
};

Expand Down
112 changes: 57 additions & 55 deletions packages/thirdweb/src/react/ui/ConnectWallet/Details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import {
ExitIcon,
ChevronRightIcon,
TextAlignJustifyIcon,
EnterIcon,
} from "@radix-ui/react-icons";
import styled from "@emotion/styled";
import { useState, useEffect } from "react";
import {
useActiveAccount,
useActiveWalletChainId,
useDisconnect,
useSetActiveAccount,
} from "../../providers/wallet-provider.js";
import { useTWLocale } from "../../providers/locale-provider.js";
import { Modal } from "../components/Modal.js";
Expand Down Expand Up @@ -43,6 +45,12 @@ import type {
ConnectWallet_DetailsButtonOptions,
ConnectWallet_DetailsModalOptions,
} from "./ConnectWalletProps.js";
import {
smartWalletMetadata,
type Account,
type WalletWithPersonalAccount,
personalAccountToSmartAccountMap,
} from "../../../wallets/index.js";
// import { walletIds } from "../../../wallets/walletIds.js";

// TEMP
Expand Down Expand Up @@ -89,6 +97,9 @@ export const ConnectedWalletDetails: React.FC<{
account: activeAccount,
});

const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
const [isOpen, setIsOpen] = useState(false);

// const activeWalletConfig = undefined;
// const activeWalletConfig = useWalletConfig();
// const ensQuery = useENS();
Expand All @@ -103,19 +114,14 @@ export const ConnectedWalletDetails: React.FC<{
// string | undefined
// >(undefined);

const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
const [isOpen, setIsOpen] = useState(false);

// const sdk = useSDK();

// const personalWallet = activeWallet?.getPersonalWallet() as
// | WalletInstance
// | undefined;
const personalAccount = (activeAccount?.wallet as WalletWithPersonalAccount)
?.personalAccount;

// const personalWalletConfig =
// personalWallet && walletContext.getWalletConfig(personalWallet);
// const wrapperWalletConfig =
// wrapperWallet && walletContext.getWalletConfig(wrapperWallet);
const smartAccount = activeAccount
? personalAccountToSmartAccountMap.get(activeAccount)
: undefined;

const disableSwitchChain = !activeAccount?.wallet.switchChain;

Expand Down Expand Up @@ -171,7 +177,11 @@ export const ConnectedWalletDetails: React.FC<{
// const walletIconUrl =
// overrideWalletIconUrl || activeWalletConfig?.meta.iconURL || "";
// const avatarOrWalletIconUrl = avatarUrl || walletIconUrl;
const avatarOrWalletIconUrl = activeAccount?.wallet.metadata.iconUrl || "";
let avatarOrWalletIconUrl = activeAccount?.wallet.metadata.iconUrl || "";

if (activeAccount && "isSmartWallet" in activeAccount.wallet) {
avatarOrWalletIconUrl = smartWalletMetadata.iconUrl;
}

const trigger = props.detailsButton?.render ? (
<div>
Expand Down Expand Up @@ -399,27 +409,19 @@ export const ConnectedWalletDetails: React.FC<{
>
{networkSwitcherButton}

{/* Switch to Personal Wallet for Safe */}
{/* {personalWallet &&
personalWalletConfig &&
!props.hideSwitchToPersonalWallet && (
<WalletSwitcher
wallet={personalWallet}
{/* Switch to Personal Wallet */}
{personalAccount &&
!props.detailsModal?.hideSwitchToPersonalWallet && (
<AccountSwitcher
account={personalAccount}
name={locale.personalWallet}
/>
)} */}
)}

{/* Switch to Wrapper Wallet */}
{/* {wrapperWalletConfig && wrapperWallet && (
<WalletSwitcher
name={
wrapperWallet.walletId === walletIds.smartWallet
? locale.smartWallet
: wrapperWalletConfig.meta.name
}
wallet={wrapperWallet}
/>
)} */}
{/* Switch to Smart Wallet */}
{smartAccount && (
<AccountSwitcher name={locale.smartWallet} account={smartAccount} />
)}

{/* Switch Account for Metamask */}
{/* {isActuallyMetaMask &&
Expand Down Expand Up @@ -710,33 +712,33 @@ export const StyledChevronRightIcon = /* @__PURE__ */ styled(
};
});

// function WalletSwitcher({
// wallet,
// name,
// }: {
// wallet: WalletInstance;
// name: string;
// }) {
// const walletContext = useWalletContext();
// const locale = useTWLocale().connectWallet;
function AccountSwitcher({
account,
name,
}: {
account: Account;
name: string;
}) {
const setActiveAccount = useSetActiveAccount();
const locale = useTWLocale().connectWallet;

// return (
// <MenuButton
// type="button"
// onClick={() => {
// walletContext.setConnectedWallet(wallet);
// }}
// style={{
// fontSize: fontSize.sm,
// }}
// >
// <EnterIcon width={iconSize.md} height={iconSize.md} />
// <Text color="primaryText">
// {locale.switchTo} {name}
// </Text>
// </MenuButton>
// );
// }
return (
<MenuButton
type="button"
onClick={() => {
setActiveAccount(account);
}}
style={{
fontSize: fontSize.sm,
}}
>
<EnterIcon width={iconSize.md} height={iconSize.md} />
<Text color="primaryText">
{locale.switchTo} {name}
</Text>
</MenuButton>
);
}

// const ActiveDot = /* @__PURE__ */ StyledDiv(() => {
// const theme = useCustomTheme();
Expand Down
1 change: 1 addition & 0 deletions packages/thirdweb/src/wallets/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export {
smartWallet,
SmartWallet,
smartWalletMetadata,
personalAccountToSmartAccountMap,
} from "./smart/index.js";
export type { SmartWalletOptions } from "./smart/types.js";

Expand Down
Loading

0 comments on commit ef87269

Please sign in to comment.