fix: remove prevent default and use react context

Author: juanpicado

src/components/DetailSidebar/DetailSidebar.tsx

@@ -38,7 +38,7 @@ const DetailSidebar: React.FC = () => {
       />
       <ActionBar />
       <Install />
-      {packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
+      <DetailSidebarFundButton />
       <Repository />
       <Engines />
       <Dist />

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -1,10 +1,11 @@
-import React, { MouseEvent } from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
 
 import Button from '../../muiComponents/Button';
 import Link from '../Link';
 import { Theme } from '../../design-tokens/theme';
+import { DetailContext } from '../../pages/Version';
 
 const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
   marginTop: theme && theme.spacing(1),
@@ -21,21 +22,21 @@ const StyledFundStrong = styled('strong')({
   marginRight: 3,
 });
 
-interface Props {
-  to: string;
-}
-
 /* eslint-disable react/jsx-no-bind */
-const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
-  const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
+const DetailSidebarFundButton: React.FC = () => {
+  const detailContext = useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  if (!packageMeta?.latest?.funding) {
+    return null;
+  }
+
+  const to = packageMeta?.latest?.funding.url;
+
   return (
     <StyledLink external={true} to={to}>
-      <Button
-        color="primary"
-        fullWidth={true}
-        onClick={preventDefault}
-        startIcon={<StyledFavoriteIcon />}
-        variant="outlined">
+      <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
         <StyledFundStrong>{'Fund'}</StyledFundStrong>
         {'this package'}
       </Button>