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.

Sign up for GitHub

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

feat: direct user to download Keplr extension #29

Closed
wants to merge 1 commit into from
Closed

feat: direct user to download Keplr extension #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import ChainConnection from 'components/ChainConnection';
import { INTER_LOGO } from 'assets/assets';

import 'styles/globals.css';
import Prerequisites, { hasPrerequisites } from 'Prerequisites';

const App = () => {
if (!hasPrerequisites()) return <Prerequisites />;
return (
<>
<ToastContainer
Expand Down
38 changes: 38 additions & 0 deletions src/Prerequisites.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { INTER_LOGO } from 'assets/assets';

export const hasPrerequisites = () => 'keplr' in window;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to ensure the window has loaded before checking this. The keplr-connection component handles this. Maybe it's time to copy that component over so we can add an error and toast for this case?

That would work differently in that the user doesn't see this indication until they actually click the button. However, I think it would be better for the app to let the user see more of the interface (i.e. view the assets without being able to input any amounts) before connecting to keplr.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, closing in favor of #30


const Prerequisites = () => {
return (
<>
<div>
<div className="min-w-screen container p-4 mx-auto flex justify-between items-center">
<a href="https://inter.trade/" target="inter.trade">
<img
src={INTER_LOGO}
className="item"
alt="Inter Logo"
width="200"
/>
</a>
</div>
<div className="max-w-md mx-auto flex-col mt-16">
<h1 className="text-xl font-semibold">Prerequisites</h1>
<p>
This dapp depends on the <a href="https://www.keplr.app/">Keplr</a>{' '}
browser extension to function.
</p>
<a
href="https://www.keplr.app/download"
target="keplr_download"
className="mx-auto text-xl text-blue-500 hover:text-blue-700"
>
Install
</a>
</div>
</div>
</>
);
};

export default Prerequisites;