Skip to content

Commit

Permalink
fix: changes made for Permissions component
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicholaswma
nicholaswma committed Jul 11, 2024
1 parent 44d1643 commit 989bb8b
Showing 1 changed file with 133 additions and 70 deletions.
203 changes: 133 additions & 70 deletions src/routes/auth/connect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import WalletSwitcher from "~components/popup/WalletSwitcher";
import Wrapper from "~components/auth/Wrapper";
import browser from "webextension-polyfill";
import Label from "~components/auth/Label";
import Head from "~components/popup/Head";
import App from "~components/auth/App";
import styled from "styled-components";
import { EventType, trackEvent } from "~utils/analytics";
Expand All @@ -37,6 +36,7 @@ import { CheckIcon, CloseIcon } from "@iconicicons/react";
import { ToggleSwitch } from "~routes/popup/subscriptions/subscriptionDetails";
import { defaultAllowance } from "~applications/allowance";
import Arweave from "arweave";
// import Permissions from "../../components/auth/Permissions";

export default function Connect() {
// active address
Expand Down Expand Up @@ -85,6 +85,9 @@ export default function Connect() {
// allowance for permissions
const [allowanceEnabled, setAllowanceEnabled] = useState(true);

// state management for edit
const [edit, setEdit] = useState(false);

useEffect(() => {
(async () => {
if (!params) return;
Expand All @@ -105,9 +108,16 @@ export default function Connect() {
setRequestedPermissions(
requested.filter((p) => Object.keys(permissionData).includes(p))
);
setRequetedPermCopy(
requested.filter((p) => Object.keys(permissionData).includes(p))
);
})();
}, [params]);

const [requestedPermCopy, setRequetedPermCopy] = useState<PermissionType[]>(
[]
);

// permissions to add
const [permissions, setPermissions] = useState<PermissionType[]>([]);

Expand Down Expand Up @@ -197,9 +207,9 @@ export default function Connect() {
<Wrapper>
<div>
<HeadV2
title={browser.i18n.getMessage("sign_in")}
title={!edit ? browser.i18n.getMessage("sign_in") : "Permissions"}
showOptions={false}
back={cancel}
back={edit ? () => setEdit(false) : cancel}
/>
<App
appName={appData.name || appUrl}
Expand Down Expand Up @@ -255,77 +265,121 @@ export default function Connect() {
</UnlockWrapper>
)}
{page === "permissions" && (
<PermissionsContent>
<Section>
<Description>
{/* {browser.i18n.getMessage("allow_these_permissions")} */}
Bazar wants to connect to your wallet with the following
permissions
</Description>
<Url>{params.url}</Url>
<Permissions>
<PermissionsTitle>
<Description>App Permissions</Description>
<Description alt>Edit Permissions</Description>
</PermissionsTitle>
</Permissions>
{requestedPermissions.map((permission, i) => (
<Permission key={i}>
<StyledCheckIcon />
<PermissionItem>
{browser.i18n.getMessage(
permissionData[permission.toUpperCase()]
)}
</PermissionItem>
</Permission>
))}
<AllowanceSection>
<div>Allowance</div>
<ToggleSwitch
checked={allowanceEnabled}
setChecked={setAllowanceEnabled}
/>
</AllowanceSection>
{allowanceEnabled && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2 }}
>
<AllowanceInput
label={"Limit"}
fullWidth
small
icon={<>AR</>}
type="number"
{...allowanceInput.bindings}
/>
</motion.div>
)}
</Section>
</PermissionsContent>
<>
{!edit ? (
<PermissionsContent>
<Section>
<Description>
{/* {browser.i18n.getMessage("allow_these_permissions")} */}
Bazar wants to connect to your wallet with the following
permissions
</Description>
<Url>{params.url}</Url>
<StyledPermissions>
<PermissionsTitle>
<Description>App Permissions</Description>
<Description
alt
onClick={() => {
setEdit(!edit);
}}
>
Edit Permissions
</Description>
</PermissionsTitle>
</StyledPermissions>
{requestedPermissions.map((permission, i) => (
<Permission key={i}>
<StyledCheckIcon />
<PermissionItem>
{browser.i18n.getMessage(
permissionData[permission.toUpperCase()]
)}
</PermissionItem>
</Permission>
))}
{requestedPermCopy
.filter(
(permission) =>
!requestedPermissions.includes(permission)
)
.map((permission, i) => (
<Permission key={i}>
<StyledCloseIcon />
<PermissionItem>
{browser.i18n.getMessage(
permissionData[permission.toUpperCase()]
)}
</PermissionItem>
</Permission>
))}

<AllowanceSection>
<div>Allowance</div>
<ToggleSwitch
checked={allowanceEnabled}
setChecked={setAllowanceEnabled}
/>
</AllowanceSection>
{allowanceEnabled && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2 }}
>
<AllowanceInput
label={"Limit"}
fullWidth
small
icon={<>AR</>}
type="number"
{...allowanceInput.bindings}
/>
</motion.div>
)}
</Section>
</PermissionsContent>
) : (
<>
{/* <Permissions
requestedPermissions={requestedPermCopy}
update={setRequestedPermissions}
/> */}
</>
)}
</>
)}
</AnimatePresence>
</ContentWrapper>
</div>
<Section>
<ButtonV2
fullWidth
onClick={async () => {
if (page === "unlock") {
await unlock();
} else {
await connect();
}
}}
>
{browser.i18n.getMessage(page === "unlock" ? "sign_in" : "connect")}
</ButtonV2>
<Spacer y={0.75} />
<ButtonV2 fullWidth secondary onClick={cancel}>
{browser.i18n.getMessage("cancel")}
</ButtonV2>
{edit ? (
<ButtonV2 fullWidth onClick={() => setEdit(false)}>
{browser.i18n.getMessage("save")}
</ButtonV2>
) : (
<>
<ButtonV2
fullWidth
onClick={async () => {
if (page === "unlock") {
await unlock();
} else {
await connect();
}
}}
>
{browser.i18n.getMessage(
page === "unlock" ? "sign_in" : "connect"
)}
</ButtonV2>
<Spacer y={0.75} />
<ButtonV2 fullWidth secondary onClick={cancel}>
{browser.i18n.getMessage("cancel")}
</ButtonV2>
</>
)}
</Section>
</Wrapper>
);
Expand All @@ -335,7 +389,7 @@ const WalletSelectWrapper = styled.div`
position: relative;
`;

const Permissions = styled.div`
const StyledPermissions = styled.div`
padding-bottom: 1rem;
`;

Expand Down Expand Up @@ -384,6 +438,15 @@ const StyledCheckIcon = styled(CheckIcon)`
color: rgba(20, 209, 16, 1);
`;

const StyledCloseIcon = styled(CloseIcon)`
width: 17px;
height: 17px;
min-width: 17px;
min-height: 17px;
flex-shrink: 0;
color: ${(props) => props.theme.fail};
`;

const AllowanceInput = styled(InputV2)`
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
Expand Down

0 comments on commit 989bb8b

Please sign in to comment.