From 2cb980bf121e7c8551855925b2be82e08d3865af Mon Sep 17 00:00:00 2001 From: Ashutosh Kumar Date: Tue, 30 Jul 2024 03:50:47 +0530 Subject: [PATCH] WIP: --- .gitignore | 3 +- src/modules/common/ConnectWalletButton.tsx | 38 +++ src/modules/common/Toolbar.tsx | 258 +++++++++--------- .../creator/deployment/steps/Config.tsx | 4 +- src/modules/creator/steps/Review.tsx | 2 +- src/modules/explorer/components/Toolbar.tsx | 12 +- src/services/beacon/hooks/useTezos.ts | 25 +- 7 files changed, 190 insertions(+), 152 deletions(-) create mode 100644 src/modules/common/ConnectWalletButton.tsx diff --git a/.gitignore b/.gitignore index 7c913880..c2727221 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,5 @@ yarn-error.log* .idea .env.example -.cosine \ No newline at end of file +.cosine +bun.lockb \ No newline at end of file diff --git a/src/modules/common/ConnectWalletButton.tsx b/src/modules/common/ConnectWalletButton.tsx new file mode 100644 index 00000000..b127e096 --- /dev/null +++ b/src/modules/common/ConnectWalletButton.tsx @@ -0,0 +1,38 @@ +import React from "react" +import { TezosToolkit } from "@taquito/taquito" +import { SmallButton } from "./SmallButton" + +export const ConnectWalletButton = ({ + connect, + variant = "" +}: { + connect: () => Promise + variant?: string +}) => { + if (variant === "header") { + return ( + connect()}> + Connect Wallet B + + ) + } + if (variant === "explorer") { + return ( + { + connect() + }} + > + Connect Wallet C + + ) + } + return ( + connect()}> + Connect Wallet A + + ) +} diff --git a/src/modules/common/Toolbar.tsx b/src/modules/common/Toolbar.tsx index 825a60d6..b8471198 100644 --- a/src/modules/common/Toolbar.tsx +++ b/src/modules/common/Toolbar.tsx @@ -11,23 +11,19 @@ import { useMediaQuery, Theme } from "@material-ui/core" -import { useHistory } from "react-router-dom" -import { TezosToolkit } from "@taquito/taquito" import HomeButton from "assets/logos/homebase-logo.svg" import { useTezos } from "services/beacon/hooks/useTezos" import { toShortAddress } from "services/contracts/utils" import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons" -import { Network } from "services/beacon" + import { UserProfileName } from "modules/explorer/components/UserProfileName" import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar" -import { NavigationMenu } from "modules/explorer/components/NavigationMenu" -import { SmallButton } from "./SmallButton" + import { ChangeNetworkButton } from "./ChangeNetworkButton" import { ArrowBackIos } from "@material-ui/icons" -import { EnvKey, getEnv } from "services/config" -import { networkNameMap } from "services/bakingBad" +import { ConnectWalletButton } from "./ConnectWalletButton" const AddressMenu = styled(Box)(() => ({ width: 264, @@ -154,22 +150,131 @@ const BackButtonText = styled(Grid)({ alignItems: "baseline" }) -export const ConnectWalletButton = ({ connect }: { connect: () => Promise }) => ( - connect()}> - Connect Wallet - -) +const AccountButton: React.FC = ({ + children, + isMobileExtraSmall, + handleClick, + handleNetworkClick, + handleLogout, + handleCopy, + setPopperOpen, + popperOpen, + anchorEl +}) => { + const { connect, account, network } = useTezos() + console.log("XX", { account }) + if (account) + return ( + + {children} + + + + + + + + + + + + + + + + + + + + + { + setPopperOpen(false) + }} + PaperProps={{ + style: { + borderRadius: 4, + backgroundColor: "transparent" + } + }} + > + + handleCopy(account)}> + + + + + + {toShortAddress(account)} + + + + + + + Change network ({network}) + + + + + + + + + + Log out + + + + + + + ) + else { + return ( + + + + + + + + + ) + } +} export const Navbar: React.FC<{ mode: "creator" | "explorer" disableMobileMenu?: boolean }> = ({ mode, children, disableMobileMenu }) => { - const { connect, account, reset, changeNetwork, network } = useTezos() + const { reset } = useTezos() const [anchorEl, setAnchorEl] = React.useState(null) const [popperOpen, setPopperOpen] = useState(false) const theme = useTheme() const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) const [networkAnchorEl, setNetworkAnchorEl] = React.useState(null) const [networkPopperOpen, setNetworkPopperOpen] = useState(false) @@ -178,14 +283,6 @@ export const Navbar: React.FC<{ setNetworkAnchorEl(event.currentTarget) setNetworkPopperOpen(!networkPopperOpen) } - - const handleNetworkChange = (network: Network) => { - changeNetwork(network) - setPopperOpen(!popperOpen) - setNetworkPopperOpen(!networkPopperOpen) - history.push("/explorer") - } - const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget) setPopperOpen(!popperOpen) @@ -201,8 +298,6 @@ export const Navbar: React.FC<{ setPopperOpen(false) } - const history = useHistory() - return ( @@ -224,110 +319,17 @@ export const Navbar: React.FC<{ - {account ? ( - - {children} - - - - - - - - - - - - - - - - - - - - - { - setPopperOpen(false) - }} - PaperProps={{ - style: { - borderRadius: 4, - backgroundColor: "transparent" - } - }} - > - - handleCopy(account)}> - - - - - - {toShortAddress(account)} - - - - - - - Change network ({network}) - - - - - - - - - - Log out - - - - - - - ) : ( - - - - - - connect()} - > - Connect Wallet - - - - )} + + {children} + diff --git a/src/modules/creator/deployment/steps/Config.tsx b/src/modules/creator/deployment/steps/Config.tsx index 2ab9f66c..87f7a7ce 100644 --- a/src/modules/creator/deployment/steps/Config.tsx +++ b/src/modules/creator/deployment/steps/Config.tsx @@ -118,7 +118,7 @@ const validateForm = (values: TokenContractSettings) => { return errors } -const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue, setFieldTouched }: any) => { +const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue }: any) => { const { dispatch } = useContext(DeploymentContext) const match = useRouteMatch() const history = useHistory() @@ -265,7 +265,7 @@ export const ConfigContract: React.FC = () => { - Configure Token Contract + Configure Token ContractX diff --git a/src/modules/creator/steps/Review.tsx b/src/modules/creator/steps/Review.tsx index f26f6aff..69cdce8e 100644 --- a/src/modules/creator/steps/Review.tsx +++ b/src/modules/creator/steps/Review.tsx @@ -9,7 +9,7 @@ import { MetadataCarrierParameters } from "services/contracts/metadataCarrier/ty import { DeploymentLoader } from "../components/DeploymentLoader" import { useCreatorRouteValidation } from "modules/creator/components/ProtectedRoute" import { useTezos } from "services/beacon/hooks/useTezos" -import { ConnectWalletButton } from "modules/common/Toolbar" +import { ConnectWalletButton } from "modules/common/ConnectWalletButton" const RocketImg = styled("img")({ marginBottom: 46, diff --git a/src/modules/explorer/components/Toolbar.tsx b/src/modules/explorer/components/Toolbar.tsx index 2cffe7b7..3ea17313 100644 --- a/src/modules/explorer/components/Toolbar.tsx +++ b/src/modules/explorer/components/Toolbar.tsx @@ -20,6 +20,7 @@ import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar" import { NavigationMenu } from "modules/explorer/components/NavigationMenu" import { ActionSheet, useActionSheet } from "../context/ActionSheets" import { SmallButton } from "../../common/SmallButton" +import { ConnectWalletButton } from "modules/common/ConnectWalletButton" const Header = styled(Grid)(({ theme }) => ({ width: "1000px", @@ -165,16 +166,7 @@ export const Navbar: React.FC<{ disableMobileMenu?: boolean }> = ({ disableMobil - { - connect() - }} - > - Connect Wallet - + )} diff --git a/src/services/beacon/hooks/useTezos.ts b/src/services/beacon/hooks/useTezos.ts index ec7d6b24..3c3aae67 100644 --- a/src/services/beacon/hooks/useTezos.ts +++ b/src/services/beacon/hooks/useTezos.ts @@ -56,13 +56,7 @@ export const useTezos = (): WalletConnectReturn => { const connect = useCallback( async (newNetwork?: Network) => { - console.log({ newNetwork }) - if ((newNetwork || network).startsWith("etherlink")) { - openEthWallet() - return "etherlink_login" - } const { wallet } = await connectWithBeacon(network) - const newTezos: TezosToolkit = createTezos(network || newNetwork) newTezos.setProvider({ wallet }) @@ -81,12 +75,17 @@ export const useTezos = (): WalletConnectReturn => { return newTezos }, - [dispatch, network, openEthWallet] + [dispatch, network] ) return { tezos, connect: async () => { + if (network.startsWith("etherlink")) { + openEthWallet() + return "etherlink_login" + } + const result = await connect() if (!result) { throw new Error("Failed to connect") @@ -94,6 +93,12 @@ export const useTezos = (): WalletConnectReturn => { return result }, reset: useCallback(async () => { + if (network.startsWith("etherlink")) { + // openEthWallet() + // return "etherlink_login"' + return alert("Implement Etherlink Logout") + } + if (!wallet) { throw new Error("No Wallet Connected") } @@ -103,13 +108,13 @@ export const useTezos = (): WalletConnectReturn => { dispatch({ type: TezosActionType.RESET_TEZOS }) - }, [dispatch, wallet]), + }, [dispatch, network, wallet]), changeNetwork: async (newNetwork: Network) => { mixpanel.register({ Network: newNetwork }) localStorage.setItem("homebase:network", newNetwork) if ((newNetwork || network).startsWith("etherlink")) { - openEthWallet() + return openEthWallet() } const newTezos: TezosToolkit = createTezos(newNetwork) if (!account) { @@ -141,8 +146,8 @@ export const useTezos = (): WalletConnectReturn => { queryClient.resetQueries() }, account, - network, wallet, + network, isEtherlink: network?.startsWith("etherlink"), etherlink: { isConnected,