Skip to content

Commit

Permalink
cleanup hardcoded strings and use utils
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jennievon
Jennievon committed May 13, 2024
1 parent e1a7f48 commit f9dcfda
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 37 deletions.
38 changes: 22 additions & 16 deletions contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ import { z } from "zod";
import { useFormHook } from "@/src/hooks/useForm";
import Web3Service from "@/src/services/web3service";
import { useWalletStore } from "../../providers/wallet-provider";
import { Token } from "@/src/types";
import { ToastType, Token } from "@/src/types";
import { Alert, AlertDescription } from "../../ui/alert";
import ConnectWalletButton from "../common/connect-wallet";

export default function Dashboard() {
const {
Expand Down Expand Up @@ -105,7 +106,7 @@ export default function Dashboard() {
toast({
title: "Bridge Transaction",
description: "Bridge transaction initiated",
variant: "success",
variant: ToastType.SUCCESS,
});
const token = data.token;
const t = tokens.find((t) => t.value === token);
Expand All @@ -117,15 +118,15 @@ export default function Dashboard() {
toast({
title: "Bridge Transaction",
description: "Bridge transaction completed",
variant: "success",
variant: ToastType.SUCCESS,
});
form.reset();
} catch (error) {
console.error(error);
toast({
title: "Bridge Transaction",
description: "Error initiating bridge transaction",
variant: "destructive",
variant: ToastType.DESTRUCTIVE,
});
}
}
Expand Down Expand Up @@ -226,9 +227,9 @@ export default function Dashboard() {
)}
/>

<div>
<div className="pl-2">
<p className="text-sm text-muted-foreground">Balance:</p>
<strong className="text-lg float-right">
<strong className="text-lg float-right word-wrap">
{loading ? <Skeleton /> : fromTokenBalance || 0}
</strong>
</div>
Expand All @@ -255,7 +256,7 @@ export default function Dashboard() {
)}
/>

<div className="flex items-center p-3">
<div className="flex items-center p-2">
{/* Percentage Buttons */}
<div className="flex items-center space-x-2">
{PERCENTAGES.map((percentage) => (
Expand Down Expand Up @@ -372,15 +373,20 @@ export default function Dashboard() {
</div>
</div>
<div className="flex items-center justify-center mt-4">
<Button
type="submit"
className="text-sm font-bold leading-none w-full"
size={"lg"}
>
{walletConnected
? "Initiate Bridge Transaction"
: "Connect Wallet"}
</Button>
{walletConnected ? (
<Button
type="submit"
className="text-sm font-bold leading-none w-full"
size={"lg"}
>
Initiate Bridge Transaction
</Button>
) : (
<ConnectWalletButton
className="text-sm font-bold leading-none w-full"
variant="default"
/>
)}
</div>
</form>
</Form>
Expand Down
10 changes: 5 additions & 5 deletions contracts/src/bridge/frontend/src/components/modules/common/connect-wallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import { useWalletStore } from "../../providers/wallet-provider";
import { Button } from "../../ui/button";
import { Link2Icon, LinkBreak2Icon } from "@radix-ui/react-icons";
import React from "react";
import { downloadMetaMask, ethereum } from "@/src/lib/utils";
import { cn, downloadMetaMask, ethereum } from "@/src/lib/utils";

const ConnectWalletButton = () => {
const ConnectWalletButton = ({ className, text, variant }: any) => {
const { walletConnected, connectWallet, disconnectWallet } = useWalletStore();

return (
<Button
className="text-sm font-medium leading-none"
variant={"outline"}
className={cn("text-sm font-medium leading-none", className)}
variant={variant ? variant : "outline"}
onClick={
ethereum
? walletConnected
Expand All @@ -28,7 +28,7 @@ const ConnectWalletButton = () => {
) : (
<>
<Link2Icon className="h-4 w-4 mr-1" />
{ethereum ? "Connect" : "Install"}
{ethereum ? text ?? "Connect Wallet" : "Download MetaMask"}
</>
)}
</Button>
Expand Down
32 changes: 16 additions & 16 deletions contracts/src/bridge/frontend/src/components/providers/wallet-provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,19 @@ import detectEthereumProvider from "@metamask/detect-provider";
import Web3Service from "@/src/services/web3service";
import { toast } from "../ui/use-toast";
import {
ToastType,
WalletConnectionContextType,
WalletConnectionProviderProps,
WalletNetwork,
} from "@/src/types";
import { L1CHAINS, L2CHAINS } from "@/src/lib/constants";
import { requestMethods } from "@/src/routes";

const WalletContext = createContext<WalletConnectionContextType | null>(null);

const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
const [provider, setProvider] = useState<any>(null);
const [isWalletConnected, setIsWalletConnected] = useState<boolean>(false);
const [signer, setSigner] = useState<any>(null);
const [address, setAddress] = useState<string>("");
const [isL1ToL2, setIsL1ToL2] = React.useState(true);
Expand All @@ -27,7 +30,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
setProvider(detectedProvider);
//@ts-ignore
const chainId = await detectedProvider!.request({
method: "eth_chainId",
method: requestMethods.getChainId,
});

if (isL1ToL2 && chainId !== WalletNetwork.L1_SEPOLIA) {
Expand All @@ -40,20 +43,21 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {

//@ts-ignore
const accounts = await detectedProvider!.request({
method: "eth_requestAccounts",
method: requestMethods.connectAccounts,
});
setIsWalletConnected(true);
setAddress(accounts[0]);
toast({
title: "Connected",
description: "Connected to wallet! Account: " + accounts[0],
variant: "success",
variant: ToastType.SUCCESS,
});
} catch (error) {
console.error("Error connecting to wallet:", error);
toast({
title: "Error",
description: "Error connecting to wallet",
variant: "destructive",
variant: ToastType.DESTRUCTIVE,
});
}
};
Expand All @@ -69,15 +73,15 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
toast({
title: "Disconnected",
description: "Disconnected from wallet",
variant: "info",
variant: ToastType.INFO,
});
}
} catch (error) {
console.error("Error disconnecting from wallet:", error);
toast({
title: "Error",
description: "Error disconnecting from wallet",
variant: "destructive",
variant: ToastType.DESTRUCTIVE,
});
}
};
Expand All @@ -87,12 +91,12 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
try {
if (isL1ToL2) {
await provider.request({
method: "wallet_switchEthereumChain",
method: requestMethods.switchNetwork,
params: [{ chainId: WalletNetwork.L2_TEN_TESTNET }],
});
} else {
await provider.request({
method: "wallet_switchEthereumChain",
method: requestMethods.switchNetwork,
params: [{ chainId: WalletNetwork.L1_SEPOLIA }],
});
}
Expand All @@ -118,21 +122,21 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
</pre>
</>
),
variant: "info",
variant: ToastType.INFO,
});
} else {
toast({
title: "Wrong Network",
description: "Please install the network to continue.",
variant: "info",
variant: ToastType.INFO,
});
}
} else {
// generic error message
toast({
title: "Error",
description: "Error switching network",
variant: "destructive",
variant: ToastType.DESTRUCTIVE,
});
}
}
Expand Down Expand Up @@ -163,7 +167,6 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
}, [provider]);

useEffect(() => {
//connect wallet
connectWallet();
}, []);

Expand All @@ -172,7 +175,7 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
provider,
signer,
address,
walletConnected: !!provider,
walletConnected: isWalletConnected,
isL1ToL2,
fromChains,
toChains,
Expand All @@ -181,13 +184,11 @@ const WalletProvider = ({ children }: WalletConnectionProviderProps) => {
switchNetwork,
};

// Render the provider with the context value
return (
<WalletContext.Provider value={value}>{children}</WalletContext.Provider>
);
};

// Custom hook to use the wallet context
const useWalletStore = () => {
const context = useContext(WalletContext);
if (!context) {
Expand All @@ -196,5 +197,4 @@ const useWalletStore = () => {
return context;
};

// Export provider and custom hook
export { WalletProvider, useWalletStore };

0 comments on commit f9dcfda

Please sign in to comment.