31 lines
837 B
JavaScript
31 lines
837 B
JavaScript
import React, { useRef } from "react";
|
|
import { Box, Image } from "theme-ui";
|
|
|
|
import usePreventTouch from "../../helpers/usePreventTouch";
|
|
import useDataSource from "../../helpers/useDataSource";
|
|
|
|
import { tokenSources } from "../../tokens";
|
|
|
|
function ListToken({ token, className }) {
|
|
const imageSource = useDataSource(token, tokenSources);
|
|
|
|
const imageRef = useRef();
|
|
// Stop touch to prevent 3d touch gesutre on iOS
|
|
usePreventTouch(imageRef);
|
|
|
|
return (
|
|
<Box my={2} mx={3} sx={{ width: "48px", height: "48px" }}>
|
|
<Image
|
|
src={imageSource}
|
|
ref={imageRef}
|
|
className={className}
|
|
sx={{ userSelect: "none", touchAction: "none" }}
|
|
// pass id into the dom element which is then used by the ProxyToken
|
|
data-id={token.id}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default ListToken;
|