added iframe origins to graz provider options and changed wallet back…

… to cosmiframe
graz-sh · May 8, 2024 · bece998 · bece998
1 parent 701e1c8
commit bece998
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 19 deletions.
diff --git a/docs/docs/hooks/useCheckWallet.md b/docs/docs/hooks/useCheckWallet.md
@@ -25,7 +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",
-    DAO_DAO = "dao_dao",
+    COSMIFRAME = "cosmiframe",
   }
   ```
 
@@ -42,7 +42,7 @@ const { data: isKeplrSupported } = useCheckWallet(WalletType.KEPLR);
     WalletTyoe.WC_LEAP_MOBILE,
     WalletTyoe.WC_COSMOSTATION_MOBILE,
     WalletTyoe.METAMASK_SNAP_LEAP,
-    WalletType.DAO_DAO,
+    WalletType.COSMIFRAME,
   }
   ```
 

diff --git a/docs/docs/types/walletType.md b/docs/docs/types/walletType.md
@@ -49,6 +49,6 @@ enum WalletType {
   STATION = "station",
   XDEFI = "xdefi",
   CAPSULE = "capsule",
-  DAO_DAO = "dao_dao",
+  COSMIFRAME = "cosmiframe",
 }
 ```
diff --git a/example/next/pages/_app.tsx b/example/next/pages/_app.tsx
@@ -25,6 +25,7 @@ const CustomApp: NextPage<AppProps> = ({ Component, pageProps }) => {
             apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
             env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
           },
+          allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
         }}
       >
         <Component {...pageProps} />

diff --git a/example/next/ui/connect-button.tsx b/example/next/ui/connect-button.tsx
@@ -85,7 +85,7 @@ 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.dao_dao ? <Button onClick={() => handleConnect(WalletType.DAO_DAO)}>DAO DAO</Button> : null}
+            {wallets.cosmiframe ? <Button onClick={() => handleConnect(WalletType.COSMIFRAME)}>DAO DAO</Button> : null}
           </Stack>
         </ModalContent>
       </Modal>

diff --git a/example/starter/src/pages/_app.tsx b/example/starter/src/pages/_app.tsx
@@ -38,6 +38,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             preferNoSetFee: true,
           },
         },
+        allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
       }}
     >
       <ChakraProvider resetCSS theme={theme}>

diff --git a/example/starter/src/utils/graz.ts b/example/starter/src/utils/graz.ts
@@ -65,7 +65,7 @@ export const listedWallets = {
     name: "Capsule",
     imgSrc: "/assets/wallet-icon-capsule.jpg",
   },
-  [WalletType.DAO_DAO]: {
+  [WalletType.COSMIFRAME]: {
     name: "DAO DAO",
     imgSrc: "/assets/wallet-icon-daodao.png",
   },

diff --git a/packages/graz/src/actions/configure.ts b/packages/graz/src/actions/configure.ts
@@ -22,10 +22,18 @@ export interface ConfigureGrazArgs {
    * Defaults to 3.
    */
   multiChainFetchConcurrency?: number;
+  /**
+   * Origins to allow wrapping this app in an iframe and connecting to this
+   * Graz instance.
+   *
+   * Defaults to none, which disables the iframe wallet.
+   */
+  allowedIframeParentOrigins?: string[];
 }
 
 export const configureGraz = (args: ConfigureGrazArgs): ConfigureGrazArgs => {
   useGrazInternalStore.setState((prev) => ({
+    allowedIframeParentOrigins: args.allowedIframeParentOrigins || prev.allowedIframeParentOrigins,
     walletConnect: args.walletConnect || prev.walletConnect,
     walletType: args.defaultWallet || prev.walletType,
     capsuleConfig: args.capsuleConfig || prev.capsuleConfig,

diff --git a/packages/graz/src/actions/wallet/daoDao.ts → ...ges/graz/src/actions/wallet/cosmiframe.ts b/packages/graz/src/actions/wallet/daoDao.ts → ...ges/graz/src/actions/wallet/cosmiframe.ts
@@ -9,21 +9,28 @@ import type { Wallet } from "../../types/wallet";
  * @example
  * ```ts
  * try {
- *   const daoDao = getDaoDao();
+ *   const cosmiframe = getCosmiframe();
  * } catch (error: Error) {
  *   console.error(error.message);
  * }
  * ```
  *
  *
  */
-export const getDaoDao = (): Wallet => {
+export const getCosmiframe = (): Wallet => {
+  const state = useGrazInternalStore.getState();
+
   if (!isInIframe()) {
-    useGrazInternalStore.getState()._notFoundFn();
+    state._notFoundFn();
     throw new Error("not in iframe");
   }
 
-  const keplr = new Cosmiframe(["https://daodao.zone", "https://dao.daodao.zone"]).getKeplrClient();
+  if (!state.allowedIframeParentOrigins?.length) {
+    state._notFoundFn();
+    throw new Error("no iframe allowed origins");
+  }
+
+  const keplr = new Cosmiframe(state.allowedIframeParentOrigins).getKeplrClient();
 
   return {
     enable: keplr.enable.bind(keplr),

diff --git a/packages/graz/src/actions/wallet/index.ts b/packages/graz/src/actions/wallet/index.ts
@@ -3,9 +3,9 @@ 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 { getDaoDao } from "./daoDao";
 import { getKeplr } from "./keplr";
 import { getLeap } from "./leap";
 import { getMetamaskSnapLeap } from "./leap-metamask-snap/leap";
@@ -94,8 +94,8 @@ export const getWallet = (type: WalletType = useGrazInternalStore.getState().wal
       case WalletType.CAPSULE: {
         return getCapsule();
       }
-      case WalletType.DAO_DAO: {
-        return getDaoDao();
+      case WalletType.COSMIFRAME: {
+        return getCosmiframe();
       }
       default: {
         throw new Error("Unknown wallet type");

diff --git a/packages/graz/src/hooks/wallet.ts b/packages/graz/src/hooks/wallet.ts
@@ -30,7 +30,7 @@ export const useActiveWalletType = () => {
       isMetamaskSnapLeap: x.walletType === WalletType.METAMASK_SNAP_LEAP,
       isStation: x.walletType === WalletType.STATION,
       isCapsule: x.walletType === WalletType.CAPSULE,
-      isDaoDao: x.walletType === WalletType.DAO_DAO,
+      isCosmiframe: x.walletType === WalletType.COSMIFRAME,
     }),
     shallow,
   );

diff --git a/packages/graz/src/provider/events.tsx b/packages/graz/src/provider/events.tsx
@@ -3,8 +3,8 @@ 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 { getDaoDao } from "../actions/wallet/daoDao";
 import { getKeplr } from "../actions/wallet/keplr";
 import { getLeap } from "../actions/wallet/leap";
 import { getStation } from "../actions/wallet/station";
@@ -88,8 +88,8 @@ export const useGrazEvents = () => {
           void reconnect({ onError: _onReconnectFailed });
         });
       }
-      if (_reconnectConnector === WalletType.DAO_DAO) {
-        getDaoDao().subscription?.(() => {
+      if (_reconnectConnector === WalletType.COSMIFRAME) {
+        getCosmiframe().subscription?.(() => {
           void reconnect({ onError: _onReconnectFailed });
         });
       }

diff --git a/packages/graz/src/store/index.ts b/packages/graz/src/store/index.ts
@@ -33,6 +33,13 @@ export interface CapsuleState {
   chainId?: string[];
 }
 export interface GrazInternalStore {
+  /**
+   * Origins to allow wrapping this app in an iframe and connecting to this
+   * Graz instance.
+   *
+   * Defaults to none, which disables the iframe wallet.
+   */
+  allowedIframeParentOrigins: string[] | null;
   recentChainIds: string[] | null;
   capsuleConfig: CapsuleConfig | null;
   capsuleState: CapsuleState | null;
@@ -68,6 +75,7 @@ export type GrazInternalPersistedStore = Pick<
 >;
 
 export const grazInternalDefaultValues: GrazInternalStore = {
+  allowedIframeParentOrigins: null,
   recentChainIds: null,
   chains: null,
   chainsConfig: null,

diff --git a/packages/graz/src/types/wallet.ts b/packages/graz/src/types/wallet.ts
@@ -19,8 +19,7 @@ export enum WalletType {
   STATION = "station",
   XDEFI = "xdefi",
   CAPSULE = "capsule",
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  DAO_DAO = "dao_dao",
+  COSMIFRAME = "cosmiframe",
 }
 
 export const WALLET_TYPES = [
@@ -37,7 +36,7 @@ export const WALLET_TYPES = [
   WalletType.XDEFI,
   WalletType.CAPSULE,
   WalletType.METAMASK_SNAP_COSMOS,
-  WalletType.DAO_DAO,
+  WalletType.COSMIFRAME,
 ];
 
 export type Wallet = Pick<