Skip to content

Commit

Permalink
fix linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@sainthiago
sainthiago committed Feb 6, 2025
1 parent 19abd4c commit 1fb975c
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 127 deletions.
23 changes: 11 additions & 12 deletions src/playground/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { createAppKit } from "@reown/appkit/react";

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

Check failure on line 2 in src/playground/src/App.tsx

View workflow job for this annotation

GitHub Actions / types 

`@tanstack/react-query` import should occur before import of `react`
import { WagmiProvider } from "wagmi";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { InfoList } from "./components/InfoList";

import "./App.css";
import { ActionButtonList } from "./components/ActionButtonList";

Check failure on line 6 in src/playground/src/App.tsx

View workflow job for this annotation

GitHub Actions / types 

`./components/ActionButtonList` import should occur before import of `./components/InfoList`
import { metadata, networks, projectId, wagmiAdapter } from "./config";

import { createAppKit } from "@reown/appkit/react";

Check failure on line 9 in src/playground/src/App.tsx

View workflow job for this annotation

GitHub Actions / types 

`@reown/appkit/react` import should occur before import of `react`
import "./App.css";

const queryClient = new QueryClient();

const generalConfig = {
Expand All @@ -31,22 +30,22 @@ createAppKit({
},
});

export function App() {
export function App(): JSX.Element {
const [transactionHash, setTransactionHash] = useState<
`0x${string}` | undefined
>(undefined);
const [signedMsg, setSignedMsg] = useState("");
const [balance, setBalance] = useState("");
const [signedMsg, setSignedMsg] = useState<string>("");
const [balance, setBalance] = useState<string>("");

const receiveHash = (hash: `0x${string}`) => {
const receiveHash = (hash: `0x${string}`): void => {
setTransactionHash(hash); // Update the state with the transaction hash
};

const receiveSignedMsg = (signedMsg: string) => {
const receiveSignedMsg = (signedMsg: string): void => {
setSignedMsg(signedMsg); // Update the state with the transaction hash
};

const receivebalance = (balance: string) => {
const receivebalance = (balance: string): void => {
setBalance(balance);
};

Expand Down Expand Up @@ -92,4 +91,4 @@ export function App() {
);
}

export default App;
export default App;
17 changes: 9 additions & 8 deletions src/playground/src/components/ActionButtonList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
useAppKitNetwork,
useDisconnect,
} from "@reown/appkit/react";

import { useEffect } from "react";
import { parseGwei, type Address } from "viem";
import {

Check failure on line 10 in src/playground/src/components/ActionButtonList.tsx

View workflow job for this annotation

GitHub Actions / types 

There should be at least one empty line between import groups
Expand All @@ -30,10 +31,10 @@ export const ActionButtonList = ({
sendHash,
sendSignMsg,
sendBalance,
}: ActionButtonListProps) => {
}: ActionButtonListProps): JSX.Element => {
const { disconnect } = useDisconnect(); // AppKit hook to disconnect
const { open } = useAppKit(); // AppKit hook to open the modal
const { switchNetwork } = useAppKitNetwork(); // AppKithook to switch network
const { switchNetwork } = useAppKitNetwork(); // AppKit hook to switch network
const { address, isConnected } = useAppKitAccount(); // AppKit hook to get the address and check if the user is connected

const { data: gas } = useEstimateGas({ ...TEST_TX }); // Wagmi hook to estimate gas
Expand All @@ -50,7 +51,7 @@ export const ActionButtonList = ({
}, [hash]);

// function to send a tx
const handleSendTx = () => {
const handleSendTx = (): void => {
try {
sendTransaction({
...TEST_TX,
Expand All @@ -61,8 +62,8 @@ export const ActionButtonList = ({
}
};

// function to sing a msg
const handleSignMsg = async () => {
// function to sign a msg
const handleSignMsg = async (): Promise<void> => {
const msg = "Hello Reown AppKit!"; // message to sign
const sig = await signMessageAsync({
message: msg,
Expand All @@ -72,14 +73,14 @@ export const ActionButtonList = ({
};

// function to get the balance
const handleGetBalance = async () => {
const handleGetBalance = async (): Promise<void> => {
const balance = await refetch();
sendBalance(
balance?.data?.value.toString() + " " + balance?.data?.symbol.toString()
);
};

const handleDisconnect = async () => {
const handleDisconnect = async (): Promise<void> => {
try {
await disconnect();
} catch (error) {
Expand All @@ -99,4 +100,4 @@ export const ActionButtonList = ({
) : (
<></>
);
};
};
214 changes: 109 additions & 105 deletions src/playground/src/components/InfoList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,124 @@
import { useEffect } from "react";
import {
useAppKitState,
useAppKitTheme,
useAppKitEvents,
useAppKitAccount,
useWalletInfo,
} from "@reown/appkit/react";
import { useWaitForTransactionReceipt } from "wagmi";

interface InfoListProps {
hash: `0x${string}` | undefined;
signedMsg: string;
balance: string;
}

export const InfoList = ({ hash, signedMsg, balance }: InfoListProps) => {
const kitTheme = useAppKitTheme(); // AppKit hook to get the theme information and theme actions
const state = useAppKitState(); // AppKit hook to get the state
const { address, caipAddress, isConnected, status, embeddedWalletInfo } =
useAppKitAccount(); // AppKit hook to get the account information
const events = useAppKitEvents(); // AppKit hook to get the events
const { walletInfo } = useWalletInfo(); // AppKit hook to get the wallet info

const { data: receipt } = useWaitForTransactionReceipt({
useAppKitState,
useAppKitTheme,
useAppKitEvents,
useAppKitAccount,
useWalletInfo,
} from "@reown/appkit/react";
import { useEffect } from "react";
import { useWaitForTransactionReceipt } from "wagmi";

interface InfoListProps {
hash: `0x${string}` | undefined;
signedMsg: string;
balance: string;
}

export const InfoList = ({
hash,
confirmations: 2, // Wait for at least 2 confirmation
timeout: 300000, // Timeout in milliseconds (5 minutes)
pollingInterval: 1000,
});

useEffect(() => {
console.log("Events: ", events);
}, [events]);

useEffect(() => {
console.log("Embedded Wallet Info: ", embeddedWalletInfo);
}, [embeddedWalletInfo]);

return (
<>
{balance && (
signedMsg,
balance,
}: InfoListProps): JSX.Element => {
const kitTheme = useAppKitTheme(); // AppKit hook to get the theme information and theme actions
const state = useAppKitState(); // AppKit hook to get the state
const { address, caipAddress, isConnected, status, embeddedWalletInfo } =
useAppKitAccount(); // AppKit hook to get the account information
const events = useAppKitEvents(); // AppKit hook to get the events
const { walletInfo } = useWalletInfo(); // AppKit hook to get the wallet info

const { data: receipt } = useWaitForTransactionReceipt({
hash,
confirmations: 2, // Wait for at least 2 confirmation
timeout: 300000, // Timeout in milliseconds (5 minutes)
pollingInterval: 1000,
});

useEffect(() => {
console.log("Events: ", events);
}, [events]);

useEffect(() => {
console.log("Embedded Wallet Info: ", embeddedWalletInfo);
}, [embeddedWalletInfo]);

return (
<>
{balance && (
<section>
<h2>Balance: {balance}</h2>
</section>
)}
{hash && (
<section>
<h2>Sign Tx</h2>
<pre>
Hash: {hash}
<br />
Status: {receipt?.status.toString()}
<br />
</pre>
</section>
)}
{signedMsg && (
<section>
<h2>Sign msg</h2>
<pre>
signedMsg: {signedMsg}
<br />
</pre>
</section>
)}
<section>
<h2>Balance: {balance}</h2>
<h2>useAppKit</h2>
<pre>
Address: {address}
<br />
caip Address: {caipAddress}
<br />
Connected: {isConnected.toString()}
<br />
Status: {status}
<br />
Account Type: {embeddedWalletInfo?.accountType}
<br />
{embeddedWalletInfo?.user?.email &&
`Email: ${embeddedWalletInfo?.user?.email}\n`}
{embeddedWalletInfo?.user?.username &&
`Username: ${embeddedWalletInfo?.user?.username}\n`}
{embeddedWalletInfo?.authProvider &&
`Provider: ${embeddedWalletInfo?.authProvider}\n`}
</pre>
</section>
)}
{hash && (

<section>
<h2>Sign Tx</h2>
<h2>Theme</h2>
<pre>
Hash: {hash}
Theme: {kitTheme.themeMode}
<br />
</pre>
</section>

<section>
<h2>State</h2>
<pre>
activeChain: {state.activeChain}
<br />
loading: {state.loading.toString()}
<br />
open: {state.open.toString()}
<br />
Status: {receipt?.status.toString()}
selectedNetworkId: {state.selectedNetworkId?.toString()}
<br />
</pre>
</section>
)}
{signedMsg && (

<section>
<h2>Sign msg</h2>
<h2>WalletInfo</h2>
<pre>
signedMsg: {signedMsg}
Name: {JSON.stringify(walletInfo)}
<br />
</pre>
</section>
)}
<section>
<h2>useAppKit</h2>
<pre>
Address: {address}
<br />
caip Address: {caipAddress}
<br />
Connected: {isConnected.toString()}
<br />
Status: {status}
<br />
Account Type: {embeddedWalletInfo?.accountType}
<br />
{embeddedWalletInfo?.user?.email &&
`Email: ${embeddedWalletInfo?.user?.email}\n`}
{embeddedWalletInfo?.user?.username &&
`Username: ${embeddedWalletInfo?.user?.username}\n`}
{embeddedWalletInfo?.authProvider &&
`Provider: ${embeddedWalletInfo?.authProvider}\n`}
</pre>
</section>

<section>
<h2>Theme</h2>
<pre>
Theme: {kitTheme.themeMode}
<br />
</pre>
</section>

<section>
<h2>State</h2>
<pre>
activeChain: {state.activeChain}
<br />
loading: {state.loading.toString()}
<br />
open: {state.open.toString()}
<br />
selectedNetworkId: {state.selectedNetworkId?.toString()}
<br />
</pre>
</section>

<section>
<h2>WalletInfo</h2>
<pre>
Name: {JSON.stringify(walletInfo)}
<br />
</pre>
</section>
</>
);
};
</>
);
};
4 changes: 2 additions & 2 deletions src/playground/src/config/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import type { AppKitNetwork } from "@reown/appkit/networks";
import { arbitrum, mainnet, sepolia } from "@reown/appkit/networks";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";

// Get projectId from https://cloud.reown.com
export const projectId =
Expand Down Expand Up @@ -29,4 +29,4 @@ export const wagmiAdapter = new WagmiAdapter({
networks,
});

export const config = wagmiAdapter.wagmiConfig;
export const config = wagmiAdapter.wagmiConfig;

0 comments on commit 1fb975c

Please sign in to comment.