Skip to content

Commit

Permalink
gets ragequite working and makes forms more configurable'
Browse files Browse the repository at this point in the history
  • Loading branch information
skuhlmann committed Sep 8, 2023
1 parent 7152d84 commit 838e72f
Show file tree
Hide file tree
Showing 8 changed files with 173 additions and 30 deletions.
2 changes: 2 additions & 0 deletions src/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { MULTI_DAO_ROUTER } from "@daohaus/moloch-v3-hooks";
import { HomeContainer } from "./components/layout/HomeContainer";
import { DaoContainer } from "./components/layout/DaoContainer";
import NewProposal from "./pages/NewProposal";
import UpdateSettings from "./pages/UpdateSettings";

export const Routes = ({
setDaoChainId,
Expand Down Expand Up @@ -54,6 +55,7 @@ export const Routes = ({
<Route path="formtest" element={<FormTest />} />
<Route path="safes" element={<Safes />} />
<Route path="settings" element={<Settings />} />
<Route path="settings/update" element={<UpdateSettings />} />
<Route path="proposals" element={<Proposals />} />
<Route path="proposal/:proposalId" element={<Proposal />} />
<Route path="new-proposal" element={<NewProposal />} />
Expand Down
42 changes: 42 additions & 0 deletions src/components/ButtonRouterLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
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';
hideIcon?: boolean;
target?: string;
rel?: string;
} & Partial<ComponentProps<typeof Button>>;

const StyledRouterLink = styled(RouterLink)`
text-decoration: none;
color: unset;
&:hover {
text-decoration: none;
}
`;

export const ButtonRouterLink = ({
to,
target,
disabled,
children,
linkType,
hideIcon,
rel,
...buttonProps
}: ProfileLinkProps) => {
return (
<StyledRouterLink to={to} target={target} className="button-link" rel={rel}>
<Button disabled={disabled} {...buttonProps}>
{children}
</Button>
</StyledRouterLink>
);
};
28 changes: 20 additions & 8 deletions src/components/layout/DaoContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { TXBuilder } from "@daohaus/tx-builder";
import { H4 } from "@daohaus/ui";
import { ValidNetwork } from "@daohaus/keychain-utils";
import { CurrentDaoProvider, useDaoData } from "@daohaus/moloch-v3-hooks";
import { useMemo } from "react";

export const DaoContainer = () => {
const location = useLocation();
Expand All @@ -19,17 +20,28 @@ export const DaoContainer = () => {

const routePath = `molochv3/${daoChain}/${daoId}`;

const navLinks = useMemo(() => {
let baseLinks = [
{ label: "Claim", href: `/${routePath}/claim` },
{ label: "DAO", href: `/${routePath}` },
{ label: "Safes", href: `/${routePath}/safes` },
{ label: "Proposals", href: `/${routePath}/proposals` },
{ label: "Members", href: `/${routePath}/members` },
{ label: "Settings", href: `/${routePath}/settings` },
];

return address
? [
...baseLinks,
{ label: "Profile", href: `/${routePath}/member/${address}` },
]
: baseLinks;
}, [daoChain, daoId, address]);

return (
<DHLayout
pathname={location.pathname}
navLinks={[
{ label: "Home", href: `/` },
{ label: "DAO Overview", href: `/${routePath}` },
{ label: "Safes", href: `/${routePath}/safes` },
{ label: "Proposals", href: `/${routePath}/proposals` },
{ label: "Members", href: `/${routePath}/members` },
{ label: "Settings", href: `/${routePath}/settings` },
]}
navLinks={navLinks}
leftNav={<H4>{dao?.name}</H4>}
>
<CurrentDaoProvider
Expand Down
13 changes: 5 additions & 8 deletions src/pages/Member.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
useToast,
widthQuery,
} from "@daohaus/ui";
import { ButtonRouterLink } from "../components/ButtonRouterLink";

const ButtonsContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -57,26 +58,20 @@ export const Member = () => {
{member && (
<>
<ButtonsContainer>
{/* <ButtonRouterLink
<ButtonRouterLink
to={`/molochv3/${daoChain}/${daoId}/members`}
IconLeft={StyledArrowLeft}
color="secondary"
linkType="no-icon-external"
variant="outline"
fullWidth={isMobile}
// was centerAlign={isMobile}
// Default has always been center.
// Not sure what is supposed to happen here?
// justify={isMobile ? 'center' : 'flex-start'}
>
MEMBERS
</ButtonRouterLink> */}
</ButtonRouterLink>
<Button
IconLeft={BsShareFill}
onClick={handleOnClick}
fullWidth={isMobile}
// Same as above
// centerAlign={isMobile}
>
SHARE PROFILE
</Button>
Expand All @@ -85,6 +80,8 @@ export const Member = () => {
daoChain={daoChain}
daoId={daoId}
member={member}
allowLinks={true}
allowMemberMenu={true}
/>
</>
)}
Expand Down
7 changes: 6 additions & 1 deletion src/pages/Members.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ export const Members = () => {
{!daoChain || !daoId ? (
<Loading size={isMd ? 8 : 16} padding="6rem" />
) : (
<MemberList daoChain={daoChain} daoId={daoId} />
<MemberList
daoChain={daoChain}
daoId={daoId}
allowLinks={true}
allowMemberMenu={true}
/>
)}
</SingleColumnLayout>
);
Expand Down
34 changes: 22 additions & 12 deletions src/pages/RageQuit.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
import { useMemo } from "react";
import { useParams } from "react-router-dom";

import { FormBuilder } from "@daohaus/form-builder";
import { NETWORK_TOKEN_ETH_ADDRESS, TokenBalance } from "@daohaus/utils";
import { sortTokensForRageQuit } from "@daohaus/moloch-v3-fields";
import { COMMON_FORMS } from "@daohaus/moloch-v3-legos";
import { MolochFields } from "@daohaus/moloch-v3-fields";
import { useConnectedMember, useDaoData } from "@daohaus/moloch-v3-hooks";
import { sortTokensForRageQuit } from "@daohaus/moloch-v3-fields";

import { AppFieldLookup } from "../legos/legoConfig";
import {
useCurrentDao,
useDaoData,
useDaoMember,
useDaoMembers,
} from "@daohaus/moloch-v3-hooks";
import { useDHConnect } from "@daohaus/connect";

export function RageQuit() {
const { daoid, daochain } = useParams();
const { dao, refetch } = useDaoData();

const { daoId, daoChain } = useCurrentDao();
const { address } = useDHConnect();
const { connectedMember } = useConnectedMember({
daoChain: daochain as string,
daoId: daoid as string,
memberAddress: address as string,
const { member: connectedMember, refetch: refetchMember } = useDaoMember({
memberAddress: address,
// @ts-expect-error: need to fix in hooks package
daoId,
// @ts-expect-error: need to fix in hooks package
daoChain,
});

const { refetch: refetchMembers } = useDaoMembers();

const defaultFields = useMemo(() => {
if (connectedMember && dao) {
const treasury = dao.vaults.find(
Expand All @@ -44,6 +52,8 @@ export function RageQuit() {

const onFormComplete = () => {
refetch?.();
refetchMember?.();
refetchMembers?.();
};

if (!dao || !connectedMember) {
Expand All @@ -54,13 +64,13 @@ export function RageQuit() {
<FormBuilder
defaultValues={defaultFields}
form={{ ...COMMON_FORMS.RAGEQUIT, log: true, devtool: true }}
customFields={MolochFields}
customFields={AppFieldLookup}
lifeCycleFns={{
onPollSuccess: () => {
onFormComplete();
},
}}
targetNetwork={daochain}
targetNetwork={daoChain}
/>
);
}
Expand Down
6 changes: 5 additions & 1 deletion src/pages/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ export const Settings = () => {
return (
<SingleColumnLayout title="Settings">
{dao && (
<DaoSettings daoChain={daoChain as keyof Keychain} daoId={dao.id} />
<DaoSettings
daoChain={daoChain as keyof Keychain}
daoId={dao.id}
includeLinks={true}
/>
)}
</SingleColumnLayout>
);
Expand Down
71 changes: 71 additions & 0 deletions src/pages/UpdateSettings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';

import { FormBuilder } from '@daohaus/form-builder';
import { COMMON_FORMS } from '@daohaus/moloch-v3-legos';
import { MolochV3Dao } from '@daohaus/moloch-v3-data';
import { useCurrentDao, useDaoData } from '@daohaus/moloch-v3-hooks';

import { AppFieldLookup } from '../legos/legoConfig';

export const formatDaoProfileForForm = (dao: MolochV3Dao) => {
const links = dao?.links || [];

return {
name: dao?.name,
icon: dao?.avatarImg,
tags: dao?.tags?.join(', '),
description: dao?.description,
long_description: dao?.longDescription,
discord: links.find((link) => link.label === 'Discord')?.url,
github: links.find((link) => link.label === 'Github')?.url,
telegram: links.find((link) => link.label === 'Telegram')?.url,
twitter: links.find((link) => link.label === 'Twitter')?.url,
blog: links.find((link) => link.label === 'Blog')?.url,
web: links.find((link) => link.label === 'Web')?.url,
custom1: links[6]?.url,
custom1Label: links[6]?.label,
custom2: links[7]?.url,
custom2Label: links[7]?.label,
custom3: links[8]?.url,
custom3Label: links[8]?.label,
};
};

export function UpdateSettings() {
const { dao, refetch } = useDaoData();
const { daoId, daoChain } = useCurrentDao();
const navigate = useNavigate();

const defaultFields = useMemo(() => {
if (dao) {
return formatDaoProfileForForm(dao);
}
return undefined;
}, [dao]);

const onFormComplete = () => {
refetch?.();
navigate(`/molochV3/${daoChain}/${daoId}/settings`);
};

if (!dao) {
return null;
}

return (
<FormBuilder
defaultValues={defaultFields}
form={{ ...COMMON_FORMS.METADATA_SETTINGS }}
customFields={AppFieldLookup}
targetNetwork={daoChain}
lifeCycleFns={{
onPollSuccess: () => {
onFormComplete();
},
}}
/>
);
}

export default UpdateSettings;

0 comments on commit 838e72f

Please sign in to comment.