Moar WC Updates

package.json

@@ -3,22 +3,25 @@
   "private": true,
   "version": "0.1.0",
   "type": "module",
+  "engines": {
+    "node": "18"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@daohaus/connect": "^0.2.0-alpha.0",
-    "@daohaus/contract-utils": "^0.2.0-alpha.0",
-    "@daohaus/form-builder": "^0.2.0-alpha.0",
-    "@daohaus/tx-builder": "^0.2.0-alpha.0",
-    "@daohaus/ui": "^0.2.0-alpha.0",
-    "@daohaus/utils": "^0.2.0-alpha.0",
-    "@daohaus/moloch-v3-fields": "^0.2.0-alpha.0",
-    "@daohaus/moloch-v3-legos": "^0.2.0-alpha.0",
-    "@daohaus/moloch-v3-hooks": "^0.2.0-alpha.0",
-    "@daohaus/moloch-v3-macro-ui": "^0.2.0-alpha.0",
+    "@daohaus/connect": "^0.2.0-alpha.5",
+    "@daohaus/contract-utils": "^0.2.0-alpha.5",
+    "@daohaus/form-builder": "^0.2.0-alpha.5",
+    "@daohaus/tx-builder": "^0.2.0-alpha.5",
+    "@daohaus/ui": "^0.2.0-alpha.5",
+    "@daohaus/utils": "^0.2.0-alpha.5",
+    "@daohaus/moloch-v3-fields": "^0.2.0-alpha.5",
+    "@daohaus/moloch-v3-legos": "^0.2.0-alpha.5",
+    "@daohaus/moloch-v3-hooks": "^0.2.0-alpha.5",
+    "@daohaus/moloch-v3-macro-ui": "^0.2.0-alpha.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

src/components/ButtonRouterLink.tsx

@@ -1,14 +1,14 @@
-import React, { ComponentProps } from "react";
-import { Link as RouterLink } from "react-router-dom";
-import styled from "styled-components";
-import { Button } from "@daohaus/ui";
+import React, { ComponentProps } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { Button } from '@daohaus/ui';
 
 type ProfileLinkProps = {
   href?: string;
   to: string;
   selected?: boolean;
   disabled?: boolean;
-  linkType?: "internal" | "external" | "no-icon-external";
+  linkType?: 'internal' | 'external' | 'no-icon-external';
   hideIcon?: boolean;
   target?: string;
   rel?: string;
@@ -17,7 +17,7 @@ type ProfileLinkProps = {
 const StyledRouterLink = styled(RouterLink)`
   text-decoration: none;
   color: unset;
-  :hover {
+  &:hover {
     text-decoration: none;
   }
 `;
@@ -33,7 +33,7 @@ export const ButtonRouterLink = ({
   ...buttonProps
 }: ProfileLinkProps) => {
   return (
-    <StyledRouterLink to={to} target={target} className="button-link" rel={rel}>
+    <StyledRouterLink to={to} target={target} className='button-link' rel={rel}>
       <Button disabled={disabled} {...buttonProps}>
         {children}
       </Button>

src/components/NewProposalList.tsx

@@ -1,9 +1,9 @@
-import { Link as RouterLink } from "react-router-dom";
-import { RiArrowRightSLine } from "react-icons/ri/index.js";
-import styled from "styled-components";
-import { Bold, border, DataSm, ParMd, Tabs, Theme } from "@daohaus/ui";
-import { CustomFormLego } from "../legos/fieldConfig";
-import { useCurrentDao } from "@daohaus/moloch-v3-hooks";
+import { Link as RouterLink } from 'react-router-dom';
+import { RiArrowRightSLine } from 'react-icons/ri/index.js';
+import styled from 'styled-components';
+import { Bold, DataSm, ParMd } from '@daohaus/ui';
+import { CustomFormLego } from '../legos/fieldConfig';
+import { useCurrentDao } from '@daohaus/moloch-v3-hooks';
 
 const ListContainer = styled.div`
   margin-top: 2.5rem;
@@ -12,15 +12,14 @@ const ListContainer = styled.div`
 const ListItemContainer = styled.div`
   width: 100%;
   padding: 1rem 0;
-  border-top: 1px ${({ theme }: { theme: Theme }) => theme.secondary.step6}
-    solid;
+  border-top: 1px ${({ theme }: { theme: any }) => theme.secondary.step6} solid;
 `;
 
 const ListItemLink = styled(RouterLink)`
   text-decoration: none;
   width: 100%;
   color: unset;
-  :hover {
+  &:hover {
     text-decoration: none;
   }
 `;
@@ -31,10 +30,10 @@ const ListItemHoverContainer = styled.div`
   align-items: center;
   width: 100%;
   padding: 1rem;
-  border-radius: ${border.radius};
+  border-radius: ${({ theme }: { theme: any }) => theme.card.border};
 
-  :hover {
-    background: 1px ${({ theme }: { theme: Theme }) => theme.secondary.step3};
+  &:hover {
+    background: 1px ${({ theme }: { theme: any }) => theme.secondary.step3};
   }
 `;
 
@@ -47,7 +46,7 @@ const ListItem = styled.div`
 `;
 
 const StyledIcon = styled(RiArrowRightSLine)`
-  fill: ${({ theme }: { theme: Theme }) => theme.primary.step9};
+  fill: ${({ theme }: { theme: any }) => theme.primary.step9};
   font-size: 3rem;
 `;
 

src/pages/Member.tsx

@@ -1,17 +1,17 @@
-import { BsArrowLeft, BsShareFill } from "react-icons/bs";
-import styled from "styled-components";
+import { BsArrowLeft, BsShareFill } from 'react-icons/bs';
+import styled from 'styled-components';
 
-import { useCurrentDao, useDaoMember } from "@daohaus/moloch-v3-hooks";
-import { MemberProfileCard } from "@daohaus/moloch-v3-macro-ui";
+import { useCurrentDao, useDaoMember } from '@daohaus/moloch-v3-hooks';
+import { MemberProfileCard } from '@daohaus/moloch-v3-macro-ui';
 import {
   Button,
   ParLg,
   SingleColumnLayout,
-  Spinner,
+  Loading,
   useBreakpoint,
   useToast,
   widthQuery,
-} from "@daohaus/ui";
+} from '@daohaus/ui';
 
 const ButtonsContainer = styled.div`
   display: flex;
@@ -44,15 +44,15 @@ export const Member = () => {
   const handleOnClick = () => {
     navigator.clipboard.writeText(`${window.location.href}`);
     successToast({
-      title: "URL copied to clipboard",
+      title: 'URL copied to clipboard',
     });
   };
 
   if (!daoChain || !daoId) return <ParLg>DAO Not Found</ParLg>;
 
   return (
-    <SingleColumnLayout title="Member Profile">
-      {!member && isFetching && <Spinner size="12rem" />}
+    <SingleColumnLayout title='Member Profile'>
+      {!member && isFetching && <Loading size={12} />}
       {!member && isFetched && <ParLg>Member Not Found</ParLg>}
       {member && (
         <>

src/pages/Members.tsx

@@ -1,13 +1,13 @@
-import { useCurrentDao } from "@daohaus/moloch-v3-hooks";
-import { MemberList } from "@daohaus/moloch-v3-macro-ui";
+import { useCurrentDao } from '@daohaus/moloch-v3-hooks';
+import { MemberList } from '@daohaus/moloch-v3-macro-ui';
 import {
   SingleColumnLayout,
-  Spinner,
+  Loading,
   useBreakpoint,
   widthQuery,
-} from "@daohaus/ui";
-import { ButtonRouterLink } from "../components/ButtonRouterLink";
-import styled from "styled-components";
+} from '@daohaus/ui';
+import { ButtonRouterLink } from '../components/ButtonRouterLink';
+import styled from 'styled-components';
 
 const Actions = styled.div`
   display: flex;
@@ -30,28 +30,28 @@ export const Members = () => {
 
   return (
     <SingleColumnLayout
-      title="Partners"
+      title='Partners'
       actions={
         <Actions>
           <ButtonRouterLink
             to={`/molochv3/${daoChain}/${daoId}/new-proposal?formLego=ADD_PARTNER`}
-            color="secondary"
-            linkType="no-icon-external"
+            color='secondary'
+            linkType='no-icon-external'
           >
             Add Partner
           </ButtonRouterLink>
           <ButtonRouterLink
             to={`/molochv3/${daoChain}/${daoId}/new-proposal?formLego=BECOME_PARTNER`}
-            color="secondary"
-            linkType="no-icon-external"
+            color='secondary'
+            linkType='no-icon-external'
           >
             Become Partner
           </ButtonRouterLink>
         </Actions>
       }
     >
       {!daoChain || !daoId ? (
-        <Spinner size={isMd ? "8rem" : "16rem"} padding="6rem" />
+        <Loading size={isMd ? 8 : 16} padding='6rem' />
       ) : (
         <MemberList
           daoChain={daoChain}

src/pages/Proposal.tsx

@@ -1,31 +1,31 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 import {
   useConnectedMember,
   useCurrentDao,
   useDaoProposal,
-} from "@daohaus/moloch-v3-hooks";
+} from '@daohaus/moloch-v3-hooks';
 import {
   ProposalActionData,
   ProposalActions,
   ProposalDetails,
   ProposalDetailsContainer,
   ProposalHistory,
-} from "@daohaus/moloch-v3-macro-ui";
-import { BiColumnLayout, Card, ParLg, Spinner, widthQuery } from "@daohaus/ui";
+} from '@daohaus/moloch-v3-macro-ui';
+import { BiColumnLayout, Card, ParLg, Loading, widthQuery } from '@daohaus/ui';
 import {
   DAO_METHOD_TO_PROPOSAL_TYPE,
   getProposalTypeLabel,
   PROPOSAL_TYPE_LABELS,
   PROPOSAL_TYPE_WARNINGS,
   SENSITIVE_PROPOSAL_TYPES,
   TXLego,
-} from "@daohaus/utils";
-import { PROTECTED_TARGET } from "../targetDao";
-import { useDHConnect } from "@daohaus/connect";
+} from '@daohaus/utils';
+import { PROTECTED_TARGET } from '../targetDao';
+import { useDHConnect } from '@daohaus/connect';
 import {
   CUSTOM_APP_PROPOSAL_TYPE_LABELS,
   CUSTOM_PROPOSAL_TYPE_WARNINGS,
-} from "../utils/proposalData";
+} from '../utils/proposalData';
 
 const LoadingContainer = styled.div`
   margin-top: 5rem;
@@ -81,7 +81,7 @@ export const Proposal = () => {
   if (!proposal)
     return (
       <LoadingContainer>
-        <Spinner size="6rem" />
+        <Loading size={6} />
       </LoadingContainer>
     );