Add Delegations Modal UI

nymtech · Nov 6, 2023 · 42b5472 · 42b5472
1 parent 48071f1
commit 42b5472
Show file tree

Hide file tree

Showing 12 changed files with 24,292 additions and 282 deletions.
diff --git a/explorer/package.json b/explorer/package.json
@@ -29,9 +29,13 @@
     "@mui/system": "^5.0.1",
     "@mui/x-data-grid": "^5.0.0-beta.5",
     "@nymproject/mui-theme": "^1.0.0",
+    "@nymproject/node-tester": "^1.0.0",
     "@nymproject/nym-validator-client": "^0.18.0",
     "@nymproject/react": "^1.0.0",
+    "@nymproject/types": "^1.0.0",
+    "@tauri-apps/api": "^1.5.1",
     "big.js": "^6.2.1",
+    "bs58": "^5.0.0",
     "buffer": "^6.0.3",
     "chain-registry": "^1.19.0",
     "d3-scale": "^4.0.0",
@@ -114,9 +118,6 @@
     "webpack-favicons": "^1.3.8",
     "webpack-merge": "^5.8.0"
   },
-
-
-
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/explorer/src/components/ConnectKeplrWallet.tsx b/explorer/src/components/ConnectKeplrWallet.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { useChain } from '@cosmos-kit/react';
-import { Box, Button, Card } from '@mui/material';
+import { Box, Button, Card, Typography, IconButton } from '@mui/material';
 import Big from 'big.js';
+import CloseIcon from '@mui/icons-material/Close';
+import { useTheme } from '@mui/material/styles';
 
 import { useEffect, useState, useMemo } from 'react';
 
 import '@interchain-ui/react/styles';
 import { TokenSVG } from '../icons/TokenSVG';
+import { ElipsSVG } from '../icons/ElipsSVG';
 
 export function useIsClient() {
   const [isClient, setIsClient] = useState(false);
@@ -31,10 +34,17 @@ export const uNYMtoNYM = (unym: string, rounding = 6) => {
   };
 };
 
+export const trimAddress = (address = '', trimBy = 6) => {
+  return `${address.slice(0, trimBy)}...${address.slice(-trimBy)}`;
+};
+
 export default function ConnectKeplrWallet() {
   const { username, connect, disconnect, wallet, openView, address, getCosmWasmClient, isWalletConnected } =
     useChain('nyx');
   const isClient = useIsClient();
+  const theme = useTheme();
+
+  const color = theme.palette.text.primary;
 
   const [balance, setBalance] = useState<{
     status: 'loading' | 'success';
@@ -65,25 +75,27 @@ export default function ConnectKeplrWallet() {
     // }
     if (isWalletConnected) {
       return (
-        <Box display={'flex'} alignItems={'center'}>
-          <Button onClick={() => openView()}>
-            <div>
-              <span>Connected to: {wallet?.prettyName}</span>
-            </div>
-          </Button>
-
-          <Box>{address}</Box>
-          <TokenSVG />
-          <Box> {balance.data} NYM</Box>
-
-          <Button
+        <Box display={'flex'} alignItems={'center'} gap={2}>
+          <Box display={'flex'} alignItems={'center'} gap={1}>
+            <TokenSVG />
+            <Typography variant="body1" fontWeight={600}>
+              {balance.data} NYM
+            </Typography>
+          </Box>
+          <Box display={'flex'} alignItems={'center'} gap={1}>
+            <ElipsSVG />
+            <Typography variant="body1" fontWeight={600}>
+              {trimAddress(address, 7)}
+            </Typography>
+          </Box>
+          <IconButton
             onClick={async () => {
               await disconnect();
               // setGlobalStatus(WalletStatus.Disconnected);
             }}
           >
-            Disconnect
-          </Button>
+            <CloseIcon sx={{ color: 'white' }} />
+          </IconButton>
         </Box>
       );
     }
@@ -92,10 +104,8 @@ export default function ConnectKeplrWallet() {
   };
 
   return (
-    <Card className="min-w-[350px] max-w-[800px] mt-20 mx-auto p-10">
-      <Box>
-        <div className="flex justify-start space-x-5">{getGlobalbutton()}</div>
-      </Box>
-    </Card>
+    <Box>
+      <div className="flex justify-start space-x-5">{getGlobalbutton()}</div>
+    </Box>
   );
 }
diff --git a/explorer/src/components/Delegations/ConfirmationModal.tsx b/explorer/src/components/Delegations/ConfirmationModal.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  Breakpoint,
+  Button,
+  Paper,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  SxProps,
+  Typography,
+} from '@mui/material';
+
+export interface ConfirmationModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  title: React.ReactNode | string;
+  subTitle?: React.ReactNode | string;
+  confirmButton: React.ReactNode | string;
+  disabled?: boolean;
+  sx?: SxProps;
+  fullWidth?: boolean;
+  maxWidth?: Breakpoint;
+  backdropProps?: object;
+}
+
+export const ConfirmationModal = ({
+  open,
+  onConfirm,
+  onClose,
+  children,
+  title,
+  subTitle,
+  confirmButton,
+  disabled,
+  sx,
+  fullWidth,
+  maxWidth,
+  backdropProps,
+}: ConfirmationModalProps) => {
+  const Title = (
+    <DialogTitle id="responsive-dialog-title" sx={{ pb: 2 }}>
+      {title}
+      {subTitle &&
+        (typeof subTitle === 'string' ? (
+          <Typography fontWeight={400} variant="subtitle1" fontSize={12} color={'grey'}>
+            {subTitle}
+          </Typography>
+        ) : (
+          subTitle
+        ))}
+    </DialogTitle>
+  );
+  const ConfirmButton =
+    typeof confirmButton === 'string' ? (
+      <Button onClick={onConfirm} variant="contained" fullWidth disabled={disabled} sx={{ py: 1.6 }}>
+        <Typography variant="button" fontSize="large">
+          {confirmButton}
+        </Typography>
+      </Button>
+    ) : (
+      confirmButton
+    );
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby="responsive-dialog-title"
+      maxWidth={maxWidth || 'sm'}
+      sx={{ textAlign: 'center', ...sx }}
+      fullWidth={fullWidth}
+      BackdropProps={backdropProps}
+      PaperComponent={Paper}
+      PaperProps={{ elevation: 0 }}
+    >
+      {Title}
+      <DialogContent>{children}</DialogContent>
+      <DialogActions sx={{ px: 3, pb: 3 }}>{ConfirmButton}</DialogActions>
+    </Dialog>
+  );
+};