transactions page shows data

mrnaveira · Sep 27, 2023 · 76db357 · 76db357
1 parent 1bef508
commit 76db357
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 80 deletions.
diff --git a/packages/site/src/components/Header.tsx b/packages/site/src/components/Header.tsx
@@ -82,19 +82,15 @@ export const Header = ({
       metamaskDispatch({ type: MetamaskActions.SetError, payload: e });
     }
   };
-
-  const handleConnectWalletClick = async () => {
-    try {
-      const token = await getTariWalletToken();
-      console.log({token});
-      tariDispatch({
-        type: TariActions.SetToken,
-        payload: token,
-      });
-    } catch (e) {
-      console.error(e);
-      metamaskDispatch({ type: MetamaskActions.SetError, payload: e });
-    }
+
+  const goToBalances = () => {
+    // TODO: proper react navigation
+    window.location.href = "./balances";
+  };
+
+  const goToTransactions = () => {
+    // TODO: proper react navigation
+    window.location.href = "./transactions";
   };
 
   return (
@@ -104,14 +100,15 @@ export const Header = ({
         <Title>Tari Wallet</Title>
       </LogoWrapper>
       <SectionContainer>
-        <MenuItem sx={{ fontSize: 18}}>Balances</MenuItem>
-        <MenuItem sx={{ fontSize: 18}}>Transactions</MenuItem>
+        <MenuItem sx={{ fontSize: 18}} onClick={goToBalances}>Balances</MenuItem>
+        <MenuItem sx={{ fontSize: 18}} onClick={goToTransactions}>Transactions</MenuItem>
       </SectionContainer>
       <RightContainer>
         <HeaderButtons
-          metamaskState={metamaskState} metamaskDispatch={(v) => metamaskDispatch(v)} onConnectClick={handleMetamaskConnectClick}
-          onTariWalletClick={handleSetTariWalletClick}
-          onTariTokenClick={handleConnectWalletClick}/>
+          metamaskState={metamaskState}
+          metamaskDispatch={(v) => metamaskDispatch(v)}
+          onConnectClick={handleMetamaskConnectClick}
+          onTariWalletClick={handleSetTariWalletClick}/>
       </RightContainer>
     </HeaderWrapper>
   );

diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -1,45 +1,14 @@
-import { useContext, useEffect } from 'react';
-import { MetamaskActions, MetaMaskContext, TariContext } from '../hooks';
-import {
-  connectSnap,
-  getSnap,
-  getTariWalletToken,
-  isLocalSnap,
-  sendWalletRequest,
-  setTariWallet,
-  shouldDisplayReconnectButton,
-} from '../utils';
-import {
-  ConnectButton,
-  InstallFlaskButton,
-  ReconnectButton,
-  SendHelloButton,
-  Card,
-} from '../components';
-import { defaultSnapOrigin } from '../config';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import IconButton from '@mui/material/IconButton';
-import Table from '@mui/material/Table';
-import TableRow from '@mui/material/TableRow';
-import TableCell from '@mui/material/TableCell';
-import TableHead from '@mui/material/TableHead';
-import TableBody from '@mui/material/TableBody';
-import { SendDialog } from '../components/SendDialog';
-import React from 'react';
-import { ReceiveDialog } from '../components/ReceiveDialog';
-import { Route, Routes } from 'react-router-dom';
+import React, { useEffect } from 'react';
 
 const Index = () => {
+
+  useEffect(() => {
+    // TODO: proper react navigation
+    window.location.href = "./balances";
+  });
+
   return (
-    <div>
-      index
-    </div>
+    <div></div>
   );
 };
 

diff --git a/packages/site/src/pages/transactions.tsx b/packages/site/src/pages/transactions.tsx
@@ -2,45 +2,96 @@ import { useContext, useEffect } from 'react';
 import { MetamaskActions, MetaMaskContext, TariContext } from '../hooks';
 
 import {
-    connectSnap,
-    getSnap,
-    getTariWalletToken,
-    isLocalSnap,
     sendWalletRequest,
-    setTariWallet,
-    shouldDisplayReconnectButton,
 } from '../utils';
-import {
-    ConnectButton,
-    InstallFlaskButton,
-    ReconnectButton,
-    SendHelloButton,
-    Card,
-} from '../components';
-import { defaultSnapOrigin } from '../config';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import IconButton from '@mui/material/IconButton';
 import Table from '@mui/material/Table';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableBody from '@mui/material/TableBody';
 import React from 'react';
-import { SendDialog } from '../components/SendDialog';
-import { ReceiveDialog } from '../components/ReceiveDialog';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import IconButton from '@mui/material/IconButton';
 
 function Transactions() {
     const [metamaskState, metamaskDispatch] = useContext(MetaMaskContext);
     const [tariState, tariDispatch] = useContext(TariContext);
 
+    const [transactions, setTransactions] = React.useState([]);
+
+    useEffect(() => {
+        if (tariState.token) {
+            refreshTransactions();
+        }
+    }, [tariState]);
+
+    const refreshTransactions = async () => {
+        const transactions = await getTransactions();
+        console.log({ transactions });
+    }
+
+    const getTransactions = async () => {
+        try {
+            const walletRequest = {
+                method: 'transactions.get_all_by_status',
+                params: {
+                    status: null,
+                }
+            };
+            const response = await sendWalletRequest(tariState.token, walletRequest);
+
+            if (response && response.transactions) {
+                setTransactions(response.transactions);
+            }
+        } catch (e) {
+            console.error(e);
+            metamaskDispatch({ type: MetamaskActions.SetError, payload: e });
+        }
+    };
+
+    const handleCopyClick = async (text: string) => {
+        navigator.clipboard.writeText(text);
+    };
+
     return (
-        <div>Transactions will go here</div>
+        <Container>
+            <Paper variant="outlined" elevation={0} sx={{ mt: 4, padding: 2, paddingLeft: 4, paddingRight: 4, borderRadius: 4 }}>
+                <Stack direction="column" justifyContent="flex-start" spacing={2}>
+                    <Typography style={{ fontSize: 24 }} >
+                        Transactions
+                    </Typography>
+                </Stack>
+                <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell sx={{ fontSize: 14 }}>Id</TableCell>
+                            <TableCell sx={{ fontSize: 14 }}>Status</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {
+                            transactions.map((tx) => (
+                                <TableRow
+                                    key={tx[0].id}
+                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                >
+                                    <TableCell component="th" scope="row" sx={{ fontSize: 14 }}>
+                                        {tx[0].id} <IconButton aria-label="copy" onClick={() => handleCopyClick(tx[0].id)}>
+                                            <ContentCopyIcon />
+                                        </IconButton>
+                                    </TableCell>
+                                    <TableCell sx={{ fontSize: 14 }}>{tx[2]}</TableCell>
+                                </TableRow>
+                            ))
+                        }
+                    </TableBody>
+                </Table>
+            </Paper>
+        </Container>
     );
 }
 

diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "Ztmc+egLnpLeXqw0vWYrya7BYGMhfVQlyw+/StS5x2Y=",
+    "shasum": "wot30s3ki38/+aY/W90A93D0I4z+D+p+mC+2CCo3Rpo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snap/src/index.ts b/packages/snap/src/index.ts
@@ -70,7 +70,14 @@ async function getWalletToken(_request: JsonRpcRequest<Json[] | Record<string, J
 
 async function requestUserConfirmation(req: WalletRequest) {
   // these methods are safe to be called without user confirmation
-  const methodWhitelist = ['accounts.get_default', 'accounts.get_balances'];
+  const methodWhitelist = [
+    'accounts.get_default',
+    'accounts.get_balances',
+    'transactions.get',
+    'transactions.get_result',
+    'transactions.get_all_by_status',
+    'transactions.wait_result'
+  ];
   if (methodWhitelist.includes(req.method)) {
     return true;
   }