Skip to content

Commit

Permalink
UI rebranding network change and access pages (#413)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbbasAliLokhandwala
AbbasAliLokhandwala authored Nov 21, 2024
1 parent 57872a4 commit 785c4ed
Show file tree
Hide file tree
Showing 7 changed files with 163 additions and 101 deletions.
54 changes: 33 additions & 21 deletions packages/fetch-extension/src/pages/access/basic-access.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FunctionComponent, useMemo } from "react";

import { useInteractionInfo } from "@keplr-wallet/hooks";
import { Button } from "reactstrap";
import { ButtonV2 } from "@components-v2/buttons/button";

import { observer } from "mobx-react-lite";
import { useStore } from "../../stores";
Expand Down Expand Up @@ -57,12 +57,15 @@ export const AccessPage: FunctionComponent = observer(() => {
}, [waitingPermission]);

return (
<EmptyLayout style={{ height: "100%", paddingTop: "80px" }}>
<EmptyLayout
className={style["emptyLayout"]}
style={{ height: "100%", paddingTop: "80px" }}
>
<div className={style["container"]}>
<img
src={require("@assets/logo-256.svg")}
src={require("@assets/png/ASI-Logo-Icon-white.png")}
alt="logo"
style={{ width: "92px", height: "92px", margin: "0 auto" }}
style={{ width: "180px", height: "40px", margin: "0 auto" }}
/>
<h1 className={style["header"]}>
<FormattedMessage id="access.title" />
Expand Down Expand Up @@ -96,11 +99,16 @@ export const AccessPage: FunctionComponent = observer(() => {
</ul>
<div style={{ flex: 1 }} />
<div className={style["buttons"]}>
<Button
className={style["button"]}
color="danger"
outline
onClick={async (e) => {
<ButtonV2
styleProps={{
padding: "10px",
height: "40px",
fontSize: "0.9rem",
background: "transparent",
color: "white",
border: "1px solid rgba(255,255,255,0.4)",
}}
onClick={async (e: any) => {
e.preventDefault();

if (waitingPermission) {
Expand All @@ -117,14 +125,19 @@ export const AccessPage: FunctionComponent = observer(() => {
}
}
}}
data-loading={permissionStore.isLoading}
>
<FormattedMessage id="access.button.reject" />
</Button>
<Button
className={style["button"]}
color="primary"
onClick={async (e) => {
dataLoading={permissionStore.isLoading}
text={<FormattedMessage id="access.button.reject" />}
/>
<ButtonV2
styleProps={{
padding: "10px",
height: "40px",
fontSize: "0.9rem",
background: "white",
color: "black",
border: "1px solid rgba(255,255,255,0.4)",
}}
onClick={async (e: any) => {
e.preventDefault();

if (waitingPermission) {
Expand All @@ -142,10 +155,9 @@ export const AccessPage: FunctionComponent = observer(() => {
}
}}
disabled={!waitingPermission}
data-loading={permissionStore.isLoading}
>
<FormattedMessage id="access.button.approve" />
</Button>
dataLoading={permissionStore.isLoading}
text={<FormattedMessage id="access.button.approve" />}
/>
</div>
</div>
</EmptyLayout>
Expand Down
16 changes: 14 additions & 2 deletions packages/fetch-extension/src/pages/access/style.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
.emptyLayout {
background-color: #000d3d;
background-image: url("../../public/assets/svg/wireframe/bg.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.container {
display: flex;
flex-direction: column;
Expand All @@ -6,18 +14,20 @@
.header {
margin-top: 20px;
text-align: center;
color: white;
}

.paragraph {
text-align: center;
padding: 0 24px;
overflow-y: auto;
color: white;
}

.permission {
margin-top: 30px;
font-size: 14px;
color: #525f7f;
color: white;
text-align: center;
}

Expand All @@ -27,7 +37,7 @@
padding: 0;
width: fit-content;
margin: auto;
color: #525f7f;
color: white;

li:before {
content: "- ";
Expand All @@ -36,6 +46,8 @@

.buttons {
display: flex;
margin-bottom: 20px;
gap: 10px;
}

.button {
Expand Down
54 changes: 33 additions & 21 deletions packages/fetch-extension/src/pages/access/viewing-key.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FunctionComponent, useEffect, useMemo } from "react";

import { useInteractionInfo } from "@keplr-wallet/hooks";
import { Button } from "reactstrap";
import { ButtonV2 } from "@components-v2/buttons/button";

import { ChainIdHelper } from "@keplr-wallet/cosmos";

Expand Down Expand Up @@ -45,12 +45,15 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
}, [waitingPermission]);

return (
<EmptyLayout style={{ height: "100%", paddingTop: "80px" }}>
<EmptyLayout
className={style["emptyLayout"]}
style={{ height: "100%", paddingTop: "80px" }}
>
<div className={style["container"]}>
<img
src={require("@assets/logo-256.svg")}
src={require("@assets/png/ASI-Logo-Icon-white.png")}
alt="logo"
style={{ width: "92px", height: "92px", margin: "0 auto" }}
style={{ width: "180px", height: "40px", margin: "0 auto" }}
/>
<h1 className={style["header"]}>
<FormattedMessage id="access.viewing-key.title" />
Expand Down Expand Up @@ -78,11 +81,16 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
</ul>
<div style={{ flex: 1 }} />
<div className={style["buttons"]}>
<Button
className={style["button"]}
color="danger"
outline
onClick={async (e) => {
<ButtonV2
styleProps={{
padding: "10px",
height: "40px",
fontSize: "0.9rem",
background: "transparent",
color: "white",
border: "1px solid rgba(255,255,255,0.4)",
}}
onClick={async (e: any) => {
e.preventDefault();

if (waitingPermission) {
Expand All @@ -100,14 +108,19 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
}
}
}}
data-loading={permissionStore.isLoading}
>
<FormattedMessage id="access.viewing-key.button.reject" />
</Button>
<Button
className={style["button"]}
color="primary"
onClick={async (e) => {
dataLoading={permissionStore.isLoading}
text={<FormattedMessage id="access.viewing-key.button.reject" />}
/>
<ButtonV2
styleProps={{
padding: "10px",
height: "40px",
fontSize: "0.9rem",
background: "white",
color: "black",
border: "1px solid rgba(255,255,255,0.4)",
}}
onClick={async (e: any) => {
e.preventDefault();

if (waitingPermission) {
Expand All @@ -131,10 +144,9 @@ export const Secret20ViewingKeyAccessPage: FunctionComponent = observer(() => {
ChainIdHelper.parse(waitingPermission.data.chainIds[0])
.identifier
}
data-loading={permissionStore.isLoading}
>
<FormattedMessage id="access.viewing-key.button.approve" />
</Button>
dataLoading={permissionStore.isLoading}
text={<FormattedMessage id="access.viewing-key.button.approve" />}
/>
</div>
</div>
</EmptyLayout>
Expand Down
47 changes: 28 additions & 19 deletions packages/fetch-extension/src/pages/approveSwitchAccountPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { FunctionComponent, useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { Button } from "reactstrap";

import style from "./style.module.scss";
import { EmptyLayout } from "@layouts/empty-layout";
Expand All @@ -13,6 +12,7 @@ import { messageAndGroupListenerUnsubscribe } from "@graphQL/messages-api";
import { InExtensionMessageRequester } from "@keplr-wallet/router-extension";
import { ListAccountsMsg } from "@keplr-wallet/background";
import { BACKGROUND_PORT } from "@keplr-wallet/router";
import { ButtonV2 } from "@components-v2/buttons/button";

export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
() => {
Expand Down Expand Up @@ -85,7 +85,7 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
}

return (
<EmptyLayout style={{ height: "100%" }}>
<EmptyLayout className={style["emptyLayout"]} style={{ height: "100%" }}>
{isLoadingPlaceholder ? (
<div className={style["container"]}>
<div className={style["content"]}>
Expand Down Expand Up @@ -181,7 +181,7 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
<div className={style["imageBackground"]} />
<img
className={style["logoImage"]}
src={require("@assets/logo-256.svg")}
src={require("@assets/png/Black-white-circle.png")}
alt="chain logo"
/>
</div>
Expand All @@ -194,7 +194,7 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
<div className={style["imageBackground"]} />
<img
className={style["logoImage"]}
src={require("../../public/assets/logo-256.svg")}
src={require("@assets/png/Black-white-circle.png")}
alt="keplr logo"
/>
</div>
Expand Down Expand Up @@ -234,12 +234,17 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
</div>
}
<div className={style["buttons"]}>
<Button
className={style["button"]}
color="danger"
outline
<ButtonV2
styleProps={{
padding: "10px",
height: "40px",
fontSize: "0.9rem",
background: "transparent",
color: "white",
border: "1px solid rgba(255,255,255,0.4)",
}}
disabled={!accountSwitchStore.waitingSuggestedAccount}
data-loading={accountSwitchStore.isLoading}
dataLoading={accountSwitchStore.isLoading}
onClick={async (e: any) => {
e.preventDefault();

Expand All @@ -254,17 +259,22 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
navigate("/");
}
}}
>
<FormattedMessage id="chain.suggested.button.reject" />
</Button>
<Button
className={style["button"]}
color="primary"
text={<FormattedMessage id="chain.suggested.button.reject" />}
/>
<ButtonV2
styleProps={{
padding: "10px",
height: "40px",
fontSize: "0.9rem",
background: "white",
color: "black",
border: "1px solid rgba(255,255,255,0.4)",
}}
disabled={
!accountSwitchStore.waitingSuggestedAccount ||
addressIndex === -1
}
data-loading={accountSwitchStore.isLoading}
dataLoading={accountSwitchStore.isLoading}
onClick={async (e: any) => {
e.preventDefault();

Expand Down Expand Up @@ -299,9 +309,8 @@ export const ApproveSwitchAccountByAddressPage: FunctionComponent = observer(
navigate("/");
}
}}
>
<FormattedMessage id="chain.suggested.button.approve" />
</Button>
text={<FormattedMessage id="chain.suggested.button.approve" />}
/>
</div>
</div>
)}
Expand Down
Loading

0 comments on commit 785c4ed

Please sign in to comment.