Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cosmiframe release #155

Merged
merged 1 commit into from
May 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions docs/docs/guides/connect-using-iframe.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Connect wallet

You can connect to a specific wallet by using the `useConnect` hook. You can connect to a specific wallet by passing the `walletType` parameter to the `connect` function.

Read more about [wallet types](../types/walletType.md).

### Pass allowed iframe parent origins to `grazOptions` in `GrazProvider`

Graz using [cosmiframe](https://github.com/DA0-DA0/cosmiframe) for establishing a Cosmos wallet connection through an iframe.

It is very important to trust the outer app, since supporting this functionality opens up the possibility for the outer app to manipulate messages before asking the user to sign them.

Cosmiframe enforces security by requiring you to specify allowed origins in the constructor on client instantiation. Not recommended but you can pass '\*' in the param to make it allow all domains.

```tsx
<GrazProvider
grazOptions={{
chains,
allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
}}
>
<Component {...pageProps} />
</GrazProvider>
```

### Connect

Here is our list of supported wallets: [WalletType](../types/walletType.md).

```tsx
import { WalletType } from "graz";
const Connect = () => {
const { connect } = useConnect();
return (
<button onClick={() => connect({ chainId: "cosmoshub-4", walletType: WalletType.COSMIFRAME })}>Connect</button>
);
};
```

### Check if iframe wallet available

```tsx
import { WalletType, checkWallet } from "graz";

const isIframeAvailable = checkWallet(WalletType.COSMIFRAME);

return (
<>
{isKeplrSupported && (
<button onClick={() => connect({ chainId: "cosmoshub-4", walletType: WalletType.KEPLR })}>Connect</button>
)}
</>
);
```
1 change: 1 addition & 0 deletions docs/docs/provider/grazProvider.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
onReconnectFailed?: () => void;
walletConnect?: WalletConnectStore | null;
multiChainFetchConcurrency?: number // when using multi chain hooks it fetch 3 function simultaneously. defaults to 3.
allowedIframeParentOrigins?: string[] // for integrating using WalletType.COSMIFRAME
}
```

Expand Down
2 changes: 1 addition & 1 deletion packages/graz/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "graz",
"description": "React hooks for Cosmos",
"version": "0.1.12",
"version": "0.1.13",
"author": "Griko Nibras <[email protected]>",
"repository": "https://github.com/graz-sh/graz.git",
"homepage": "https://github.com/graz-sh/graz",
Expand Down
Loading