Support iframe connection (#153)

docs/docs/hooks/useCheckWallet.md

@@ -25,6 +25,7 @@ const { data: isKeplrSupported } = useCheckWallet(WalletType.KEPLR);
     WC_LEAP_MOBILE = "wc_leap_mobile",
     WC_COSMOSTATION_MOBILE = "wc_cosmostation_mobile",
     METAMASK_SNAP_LEAP = "metamask_snap_leap",
+    COSMIFRAME = "cosmiframe",
   }
   ```
 
@@ -41,6 +42,7 @@ const { data: isKeplrSupported } = useCheckWallet(WalletType.KEPLR);
     WalletTyoe.WC_LEAP_MOBILE,
     WalletTyoe.WC_COSMOSTATION_MOBILE,
     WalletTyoe.METAMASK_SNAP_LEAP,
+    WalletType.COSMIFRAME,
   }
   ```
 

docs/docs/types/walletType.md

@@ -49,5 +49,6 @@ enum WalletType {
   STATION = "station",
   XDEFI = "xdefi",
   CAPSULE = "capsule",
+  COSMIFRAME = "cosmiframe",
 }
 ```

example/next/ui/connect-button.tsx

@@ -85,6 +85,9 @@ export const ConnectButton: FC = () => {
               <Button onClick={() => handleConnect(WalletType.METAMASK_SNAP_COSMOS)}>Metamask Snap Cosmos</Button>
             ) : null}
             {wallets.capsule ? <Button onClick={() => handleConnect(WalletType.CAPSULE)}>Capsule</Button> : null}
+            {wallets.cosmiframe ? (
+              <Button onClick={() => handleConnect(WalletType.COSMIFRAME)}>Cosmiframe</Button>
+            ) : null}
           </Stack>
         </ModalContent>
       </Modal>

example/starter/src/utils/graz.ts

@@ -65,4 +65,8 @@ export const listedWallets = {
     name: "Capsule",
     imgSrc: "/assets/wallet-icon-capsule.jpg",
   },
+  [WalletType.COSMIFRAME]: {
+    name: "Cosmiframe",
+    imgSrc: "",
+  },
 };

packages/graz/package.json

@@ -42,6 +42,7 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
+    "@cosmjs/amino": "*",
     "@cosmjs/cosmwasm-stargate": "*",
     "@cosmjs/launchpad": "*",
     "@cosmjs/proto-signing": "*",
@@ -52,6 +53,7 @@
   },
   "dependencies": {
     "@cosmsnap/snapper": "^0.1.29",
+    "@dao-dao/cosmiframe": "^0.0.4",
     "@keplr-wallet/cosmos": "^0.12.20",
     "@keplr-wallet/types": "^0.12.23",
     "@metamask/providers": "^12.0.0",

packages/graz/src/actions/wallet/cosmiframe.ts

@@ -0,0 +1,38 @@
+import { Cosmiframe } from "@dao-dao/cosmiframe";
+
+import { useGrazInternalStore } from "../../store";
+import type { Wallet } from "../../types/wallet";
+
+/**
+ * Function to return {@link Wallet} object and throws and error if not in an iframe.
+ *
+ * @example
+ * ```ts
+ * try {
+ *   const cosmiframe = getCosmiframe();
+ * } catch (error: Error) {
+ *   console.error(error.message);
+ * }
+ * ```
+ *
+ *
+ */
+export const getCosmiframe = (): Wallet => {
+  if (window.parent === window.self) {
+    useGrazInternalStore.getState()._notFoundFn();
+    throw new Error("not in iframe");
+  }
+
+  const keplr = new Cosmiframe().getKeplrClient();
+
+  return {
+    enable: keplr.enable.bind(keplr),
+    getKey: keplr.getKey.bind(keplr),
+    getOfflineSigner: keplr.getOfflineSigner.bind(keplr),
+    getOfflineSignerAuto: keplr.getOfflineSignerAuto.bind(keplr),
+    getOfflineSignerOnlyAmino: keplr.getOfflineSignerOnlyAmino.bind(keplr),
+    experimentalSuggestChain: keplr.experimentalSuggestChain.bind(keplr),
+    signDirect: keplr.signDirect.bind(keplr),
+    signAmino: keplr.signAmino.bind(keplr),
+  };
+};

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

@@ -3,6 +3,7 @@ import { grazSessionDefaultValues, useGrazInternalStore, useGrazSessionStore } f
 import type { Wallet } from "../../types/wallet";
 import { WALLET_TYPES, WalletType } from "../../types/wallet";
 import { getCapsule } from "./capsule";
+import { getCosmiframe } from "./cosmiframe";
 import { getMetamaskSnapCosmos } from "./cosmos-metamask-snap";
 import { getCosmostation } from "./cosmostation";
 import { getKeplr } from "./keplr";
@@ -93,6 +94,9 @@ export const getWallet = (type: WalletType = useGrazInternalStore.getState().wal
       case WalletType.CAPSULE: {
         return getCapsule();
       }
+      case WalletType.COSMIFRAME: {
+        return getCosmiframe();
+      }
       default: {
         throw new Error("Unknown wallet type");
       }

packages/graz/src/hooks/wallet.ts

@@ -30,6 +30,7 @@ export const useActiveWalletType = () => {
       isMetamaskSnapLeap: x.walletType === WalletType.METAMASK_SNAP_LEAP,
       isStation: x.walletType === WalletType.STATION,
       isCapsule: x.walletType === WalletType.CAPSULE,
+      isCosmiframe: x.walletType === WalletType.COSMIFRAME,
     }),
     shallow,
   );

packages/graz/src/provider/events.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 
 import { reconnect } from "../actions/account";
 import { checkWallet } from "../actions/wallet";
+import { getCosmiframe } from "../actions/wallet/cosmiframe";
 import { getCosmostation } from "../actions/wallet/cosmostation";
 import { getKeplr } from "../actions/wallet/keplr";
 import { getLeap } from "../actions/wallet/leap";
@@ -87,6 +88,11 @@ export const useGrazEvents = () => {
           void reconnect({ onError: _onReconnectFailed });
         });
       }
+      if (_reconnectConnector === WalletType.COSMIFRAME) {
+        getCosmiframe().subscription?.(() => {
+          void reconnect({ onError: _onReconnectFailed });
+        });
+      }
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/graz/src/types/wallet.ts

@@ -19,6 +19,7 @@ export enum WalletType {
   STATION = "station",
   XDEFI = "xdefi",
   CAPSULE = "capsule",
+  COSMIFRAME = "cosmiframe",
 }
 
 export const WALLET_TYPES = [
@@ -35,6 +36,7 @@ export const WALLET_TYPES = [
   WalletType.XDEFI,
   WalletType.CAPSULE,
   WalletType.METAMASK_SNAP_COSMOS,
+  WalletType.COSMIFRAME,
 ];
 
 export type Wallet = Pick<