Feat 0.1.4 (#133)

docs/docs/change-log.md

@@ -4,6 +4,13 @@ sidebar_position: 8
 
 # Changelog
 
+## Version 0.1.4
+
+- Improve `useChainInfos` and `useChainInfo` to return `ChainInfo` object from `GrazProvider` with given `chainId`
+- Added Actions `getChainInfos` and `getChainInfo` to retrieve `ChainInfo` object from `GrazProvider` with given `chainId`
+- Improve wallet connect `getKey`
+- Improve Metamask Snap if okxwallet inject ethereum object to window
+
 ## Version 0.1.3
 
 - ✅ Added `signArbitrary` to `Wallet` type

docs/docs/hooks/useChainInfo.md

@@ -0,0 +1,25 @@
+# useActiveChains
+
+hook to retrieve `ChainInfo` object from `GrazProvider` with given `chainId`
+
+#### Usage
+
+```tsx
+import { useChainInfo } from "graz";
+
+function App() {
+  const chainInfo = useChainInfo({ chainId: "cosmoshub-4" });
+
+  return (
+    <div>
+      <span>{chainInfo.chainName}</span>
+    </div>
+  );
+}
+```
+
+#### Return Value
+
+```tsx
+ChainInfo | undefined; // @keplr-wallet/types
+```

docs/docs/hooks/useChainInfos.md

@@ -0,0 +1,19 @@
+# useActiveChains
+
+hook to retrieve `ChainInfo` objects from `GrazProvider` with given `chainId`
+
+#### Usage
+
+```tsx
+import { useChainInfos } from "graz";
+
+function App() {
+  const chainInfos = useChainInfos({ chainId: ["cosmoshub-4", "osmosis-1"] });
+}
+```
+
+#### Return Value
+
+```tsx
+ChainInfo[] | undefined; // @keplr-wallet/types
+```

example/starter/src/ui/modal/connect-wallet.tsx

@@ -2,7 +2,6 @@ import {
   Button,
   Heading,
   HStack,
-  Image,
   Modal,
   ModalBody,
   ModalContent,
@@ -53,7 +52,7 @@ const WalletModal = ({
                     p={4}
                     spacing={4}
                   >
-                    <Image alt={wallet.name} boxSize="40px" src={wallet.imgSrc} />
+                    {/* <Image alt={wallet.name} boxSize="40px" src={wallet.imgSrc} /> */}
                     <Text fontWeight="bold">{wallet.name}</Text>
                   </HStack>
                 ))}

packages/graz/package.json

@@ -1,7 +1,7 @@
 {
   "name": "graz",
   "description": "React hooks for Cosmos",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "Griko Nibras <[email protected]>",
   "repository": "https://github.com/graz-sh/graz.git",
   "homepage": "https://github.com/graz-sh/graz",

packages/graz/src/actions/chains.ts

@@ -19,6 +19,14 @@ export const getRecentChains = (): ChainInfo[] | null => {
   return recentChains?.map((chainId) => chains!.find((x) => x.chainId === chainId)!) ?? null;
 };
 
+export const getChainInfo = ({ chainId }: { chainId?: string }): ChainInfo | undefined => {
+  return useGrazInternalStore.getState().chains?.find((x) => x.chainId === chainId);
+};
+
+export const getChainInfos = ({ chainId }: { chainId?: string[] }): ChainInfo[] | undefined => {
+  return useGrazInternalStore.getState().chains?.filter((x) => chainId?.includes(x.chainId));
+};
+
 export interface SuggestChainArgs {
   chainInfo: ChainInfo;
   walletType: WalletType;

packages/graz/src/actions/wallet/metamask-snap/index.ts

@@ -72,7 +72,16 @@ export const getMetamaskSnap = (params?: GetMetamaskSnap): Wallet => {
       });
 
       const isMetamask = (clientVersion as string).includes("MetaMask");
+
       if (!isMetamask) throw new Error("Metamask is not installed");
+
+      if (typeof window.okxwallet !== "undefined") {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        if (window.okxwallet.isOkxWallet) {
+          throw new Error("You have OKX Wallet installed. Please disable and reload the page to use Metamask Snap.");
+        }
+      }
       const version = (clientVersion as string).split("MetaMask/v")[1]?.split(".")[0];
       const isSupportMMSnap = Number(version) >= 11;
       if (!isSupportMMSnap) throw new Error("Metamask Snap is not supported in this version");

packages/graz/src/actions/wallet/wallet-connect/index.ts

@@ -344,17 +344,16 @@ export const getWalletConnect = (params?: GetWalletConnectParams): Wallet => {
     };
   };
 
+  // eslint-disable-next-line @typescript-eslint/require-await
   const getKey = async (chainId: string): Promise<Key> => {
-    const { address, algo, pubkey } = await getAccount(chainId);
-    return {
-      address: fromBech32(address).data,
-      algo,
-      bech32Address: address,
-      name: "",
-      pubKey: pubkey,
-      isKeystone: false,
-      isNanoLedger: false,
-    };
+    const session = getSession([chainId]);
+    if (!session?.topic) throw new Error("No wallet connect session");
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const key: Key | undefined = session.sessionProperties && JSON.parse(String(session.sessionProperties.keys))[0];
+    if (!key) throw new Error("No wallet connect key");
+
+    return key;
   };
 
   const wcSignDirect = async (...args: SignDirectParams) => {

packages/graz/src/hooks/chains.ts

@@ -45,6 +45,36 @@ export const useActiveChains = (): ChainInfo[] | undefined => {
     .filter(Boolean) as ChainInfo[] | undefined;
 };
 
+/**
+ * graz hook to retrieve ChainInfo object from GrazProvider with given chainId
+ *
+ * @param chainId - chainId to search
+ *
+ * @example
+ * ```ts
+ * import { useChain } from "graz";
+ * const chainInfo = useChainInfo({chainId: "cosmoshub-4"});
+ * ```
+ */
+export const useChainInfo = ({ chainId }: { chainId?: string }) => {
+  return useGrazInternalStore().chains?.find((x) => x.chainId === chainId);
+};
+
+/**
+ * graz hook to retrieve ChainInfo objects from GrazProvider with given chainId
+ *
+ * @param chainId - chainId to search
+ *
+ * @example
+ * ```ts
+ * import { useChainInfos } from "graz";
+ * const chainInfos = useChainInfos({chainId: ["cosmoshub-4", "juno-1"]});
+ * ```
+ */
+export const useChainInfos = ({ chainId }: { chainId?: string[] }) => {
+  return useGrazInternalStore().chains?.filter((x) => chainId?.includes(x.chainId));
+};
+
 /**
  * graz hook to retrieve specific connected chains currency
  *

packages/graz/types/global.d.ts

@@ -16,6 +16,7 @@ declare global {
       };
     };
     ethereum?: import("@metamask/providers").MetaMaskInpageProvider;
+    okxwallet?: import("@metamask/providers").BaseProvider;
     station?: Station;
     xfi?: {
       keplr: KeplrWindow["keplr"];