I have one page showing a table of Wallet Names and Addresses. These are pulled from a custom column in the User db. I have a function to Add a wallet, which pushes an Object to the db with a new wallet Name and Address.
After adding a new wallet, the change is reflected in the table, on the same device you added it from. Although I do see the change in the db, the change is not shown on another device, until that device logs out, then back in.
Is any change I can make to the code to update this across all devices?
Wallet page:
import {
Container,
Stack,
Heading,
Spacer,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
Flex,
} from '@chakra-ui/react';
import { useState } from 'react';
import { useMoralis } from 'react-moralis';
import { AddWalletModal } from './AddWalletModal';
import { RemoveWallet } from './RemoveWallet';
export const Wallets = () => {
return (
<Container maxW={"container.md"}>
<Flex mb={5}>
<Heading>Wallets</Heading>
<Spacer />
<AddWalletModal />
</Flex>
<Stack spacing={3}>
<Table >
<Thead>
<Tr>
<Th>Name</Th>
<Th>Address</Th>
</Tr>
</Thead>
<Tbody>
<TableBody />
</Tbody>
</Table>
</Stack>
</Container>
)
}
const TableBody = () => {
const { user } = useMoralis();
const [myEthAddresses, setMyEthAddresses] = useState(user.attributes.myEthAddresses);
const tableBody = myEthAddresses.map((address, index) => {
const walletName = address.name;
const walletAddress = address.address;
return (
<Tr key={index}>
<Td key={address.name.toString()}>{walletName}</Td>
<Td key={address.address.toString()}>{walletAddress}</Td>
<Td><RemoveWallet /></Td>
</Tr>
)
})
return tableBody
}
Add Wallet Modal:
import {
Stack,
Box,
Input,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalCloseButton,
ModalHeader
} from '@chakra-ui/react';
import { useState } from 'react';
import { useMoralis } from 'react-moralis';
import { useDisclosure } from '@chakra-ui/react';
import { ErrorBox } from "./Error";
import { SuccessBox } from "./Success";
import { Redirect } from 'react-router';
export const AddWalletModal = () => {
let { isOpen, onOpen, onClose } = useDisclosure();
const { user, userError, setUserData, isUserUpdating} = useMoralis();
let [myEthAddresses, setMyEthAddresses] = useState(user.attributes.myEthAddresses);
const [newWalletName, setNewWalletName] = useState("");
const [newWalletAddress, setNewWalletAddress] = useState("");
let [newWallet, setNewWallet] = useState();
const [updated, setUpdated] = useState(false);
const handleSave = async () => {
setNewWallet(newWallet = { name: newWalletName, address: newWalletAddress });
setMyEthAddresses(myEthAddresses.push(newWallet));
setUserData({
myEthAddresses: myEthAddresses
})
setUpdated(true)
setTimeout(() => {
window.location.reload(false);
}, 1000);
}
return (
<>
<Button onClick={onOpen}>Add Wallet</Button>
<Modal onClose={onClose} isOpen={isOpen} isCentered>
<ModalOverlay />
<ModalContent pb={5}>
<ModalHeader>Add Wallet</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box mb={5}>
{userError && <ErrorBox title="Add Wallet Failed" message={userError.message} />}
{updated && <SuccessBox title="Wallet Added" />}
</Box>
<Stack spacing={3}>
<Input value={newWalletName} placeholder='Name' isRequired={true} onChange={(event) => setNewWalletName(event.currentTarget.value)} />
<Input value={newWalletAddress} placeholder='Address' isRequired={true} onChange={(event) => setNewWalletAddress(event.currentTarget.value)} />
<Button onClick={handleSave} isLoading={isUserUpdating}>Add</Button>
</Stack>
</ModalBody>
</ModalContent>
</Modal>
</>
)
}