Implement manual collapsable button

identity-com · Apr 9, 2024 · e1e27f5 · e1e27f5
1 parent 21899c9
commit e1e27f5
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 14 deletions.
diff --git a/gateway-ui/package.json b/gateway-ui/package.json
@@ -21,10 +21,11 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.12",
     "@identity.com/did-bnb-client": "^1.0.0-beta.1",
-    "@mui/material": "^5.15.12",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "crypto-browserify": "^3.12.0",

diff --git a/gateway-ui/src/index.tsx b/gateway-ui/src/index.tsx
@@ -1,18 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Wallet } from "ethers";
-import { Box, Button, Chip, CircularProgress, Container, Grid, Stack, TextField, Typography } from '@mui/material';
+import { Box, Button, Chip, CircularProgress, Container, FormControlLabel, Grid, Stack, TextField, Typography } from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import { GatewayPortalData, useGatewayPortal } from './useGatewayPortal';
+import { ArrowUpward } from '@mui/icons-material';
 
-interface GatewayProtocolPortalProps {
+
+interface CollapsableGatewayProtocolPortalProps {
     networkName: string;
     userWallet: Wallet;
 }
 
-export const GatewayProtocolPortal = (props: GatewayProtocolPortalProps) => {
+
+export const CollapsableGatewayPortal = (props: CollapsableGatewayProtocolPortalProps) => {
     const { networkName, userWallet } = props;
 
     const gatewayPortalData = useGatewayPortal({networkName, userWallet: userWallet});
 
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
+
+    const isLoading = !gatewayPortalData;
+    const hasValidToken = gatewayPortalData && gatewayPortalData.hasValidPass;
+
+    // Need button to be on both options
+    if(isCollapsed) {
+        return(
+            <CollapsableGatewayButton isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} isValid={hasValidToken} isLoading={isLoading}/>
+        )
+    } else {
+        return(
+            <Stack sx={{alignItems: "center"}}>
+                <CollapsableGatewayButton isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} isValid={hasValidToken} isLoading={isLoading}/>
+                <GatewayProtocolPortal gatewayPortalData={gatewayPortalData} networkName={networkName}/>
+            </Stack>
+        )
+    }
+}
+
+const CollapsableGatewayButton = (props: {isCollapsed: boolean, setIsCollapsed, isValid: boolean, isLoading: boolean}) => {
+    const {isCollapsed, setIsCollapsed, isValid, isLoading } = props;
+    return (
+        <Box>
+            <Button 
+                variant="contained" 
+                endIcon={isCollapsed ? <ArrowDownwardIcon/> : <ArrowUpward/>} 
+                onClick={() => {setIsCollapsed(!isCollapsed)}}
+                color={ isLoading || isValid ? "primary" : "warning"}
+            >
+                Gateway Portal
+            </Button>
+        </Box>
+    )
+}
+
+interface GatewayProtocolPortalProps {
+    networkName: string;
+    gatewayPortalData?: GatewayPortalData
+}
+
+const GatewayProtocolPortal = (props: GatewayProtocolPortalProps) => {
+    const { gatewayPortalData, networkName} = props;
+
     if(!gatewayPortalData) {
         //Loading indicator
         return(
@@ -37,11 +85,13 @@ export const GatewayProtocolPortal = (props: GatewayProtocolPortalProps) => {
     )
 }
 
+/////////////// Core UI Views  ////////////////////////////////////////////////////////////////
+
 interface ValidPassIndicatorProps {
     isValid: boolean
 }
 
-export const ValidPassIndicator = (props: ValidPassIndicatorProps) => {
+const ValidPassIndicator = (props: ValidPassIndicatorProps) => {
     const isValid = props.isValid;
     return(
         <Container maxWidth='md' sx={{display: "flex", justifyContent: "center"}}>
@@ -56,7 +106,7 @@ interface NetworkInfoProps {
     feeTokenText: string
 }
 
-export const NetworkInfo = (props: NetworkInfoProps) => {
+const NetworkInfo = (props: NetworkInfoProps) => {
     const { name, description, feeTokenText} = props
     return(
         <Stack id="Network info"spacing={3} sx={{display: "flex", justifyContent: "center"}}>
@@ -75,7 +125,7 @@ interface PassInfoProps {
     gatewayPortalData: GatewayPortalData
 }
 
-export const PassInfo = (props: PassInfoProps) => {
+const PassInfo = (props: PassInfoProps) => {
     const { gatewayPortalData } = props;
 
     if(gatewayPortalData.hasValidPass) {
@@ -130,7 +180,7 @@ export const PassInfo = (props: PassInfoProps) => {
                                         Request Pass
                                 </Button> 
                             :
-                                <a id="validLink" href={passIssuer.passRequestLink} target='_blank'>
+                                <a id="validLink" href={passIssuer.passRequestLink} target='_blank' style={{textDecoration: 'none'}}>
                                     <Button variant="contained" disabled={passIssuer.passRequestLink.length == 0}>
                                         Request Pass
                                     </Button>

diff --git a/gateway-ui/src/stories/Index.stories.tsx b/gateway-ui/src/stories/Index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Wallet, ethers } from "ethers";
-import { GatewayProtocolPortal } from '../index';
+import { CollapsableGatewayPortal } from '../index';
 
 const foundryDefaultPKWithToken = "0x7c852118294e51e653712a81e05800f419141751be58f605c371e15141b007a6"; // One of the 10 default addresses created by foundry. This address has a gateway token
 const publicRPC =  new ethers.providers.JsonRpcProvider("https://bsc-testnet-rpc.publicnode.com	");
@@ -11,9 +11,9 @@ const publicRPC =  new ethers.providers.JsonRpcProvider("https://bsc-testnet-rpc
 //   service_endpoint: 'https://bafybeifqxswjdxzwl75ov2bpssvpyojhotahzopblfla63lsiht7ggnnwa.ipfs.w3s.link/'
 // }
 
-const meta: Meta<typeof GatewayProtocolPortal> = {
+const meta: Meta<typeof CollapsableGatewayPortal> = {
     title: 'Example protocol UI',
-    component: GatewayProtocolPortal,
+    component: CollapsableGatewayPortal,
     parameters: {
       // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
       layout: 'centered',
@@ -27,7 +27,7 @@ const meta: Meta<typeof GatewayProtocolPortal> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof GatewayProtocolPortal>;
+type Story = StoryObj<typeof CollapsableGatewayPortal>;
 
 
 export const WalletWithToken: Story = {