adding view dao link (#806)

Co-authored-by: Sam Kuhlmann <[email protected]>
HausDAO · Sep 2, 2022 · a8241f5 · a8241f5
1 parent 65599c5
commit a8241f5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/apps/summon-app/src/app/App.tsx b/apps/summon-app/src/app/App.tsx
@@ -57,6 +57,7 @@ export const App = () => {
           {summonState === 'loading' && <SummonerLoading txHash={txHash} />}
           {summonState === 'success' && (
             <SummonerSuccess
+              chainId={chainId}
               daoAddress={daoAddress}
               setSummonState={setSummonState}
             />

diff --git a/apps/summon-app/src/layouts/SummonerSuccess.tsx b/apps/summon-app/src/layouts/SummonerSuccess.tsx
@@ -1,18 +1,44 @@
-import { Bold, Button, H1, ParMd, Link } from '@daohaus/ui';
-import { ExplorerLink } from '@daohaus/daohaus-connect-feature';
+import { Bold, Button, H1, ParMd, Link, AddressDisplay } from '@daohaus/ui';
 
 import { InfoSection } from './FormLayouts';
 import { HausBlockLoading } from '../components/HausBlockLoading/HausBlockLoading';
-import { ReactSetter } from '@daohaus/common-utilities';
+import { Keychain, ReactSetter } from '@daohaus/common-utilities';
 import { SummonStates } from '../app/App';
+import styled from 'styled-components';
 
 type SuccessProps = {
   daoAddress: string;
+  chainId: string | null | undefined;
   setSummonState: ReactSetter<SummonStates>;
 };
 
+const AddressInfoSection = styled(InfoSection)`
+  p,
+  div {
+    margin-bottom: 1rem;
+  }
+
+  a {
+    margin-bottom: 1rem;
+    align-items: flex-start;
+  }
+`;
+
+const ButtonGroup = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  a {
+    button {
+      width: 200px;
+      justify-content: center;
+    }
+  }
+`;
+
 export const SummonerSuccess = ({
   daoAddress,
+  chainId,
   setSummonState,
 }: SuccessProps) => {
   const handleResetSummon = () => {
@@ -34,13 +60,25 @@ export const SummonerSuccess = ({
         </Link>
       </ParMd>
       <HausBlockLoading loading={false} />
-      <InfoSection>
+      <AddressInfoSection>
         <ParMd className="info">DAO contract:</ParMd>
-        <ExplorerLink address={daoAddress}>{daoAddress}</ExplorerLink>
-      </InfoSection>
-      <Button secondary onClick={handleResetSummon}>
-        Summon Another DAO
-      </Button>
+        <AddressDisplay
+          address={daoAddress}
+          copy
+          explorerNetworkId={chainId as keyof Keychain}
+        />
+      </AddressInfoSection>
+      <ButtonGroup>
+        <Link
+          linkType="no-icon-external"
+          href={`https://admin.daohaus.fun/#/molochv3/${chainId}/${daoAddress}`}
+        >
+          <Button primary>View Dao</Button>
+        </Link>
+        <Button secondary onClick={handleResetSummon}>
+          <Bold>Summon Another DAO</Bold>
+        </Button>
+      </ButtonGroup>
     </div>
   );
 };
diff --git a/libs/ui/src/components/atoms/Button/Button.tsx b/libs/ui/src/components/atoms/Button/Button.tsx
@@ -28,6 +28,7 @@ export type ButtonProps = {
   leftAlign?: boolean;
   lg?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  primary?: boolean;
   secondary?: boolean;
   sm?: boolean;
   tertiary?: boolean;
@@ -44,6 +45,7 @@ type Ref =
 
 export const Button = React.forwardRef((props: ButtonProps, ref: Ref) => {
   const {
+    primary,
     secondary,
     sm,
     lg,
@@ -70,7 +72,7 @@ export const Button = React.forwardRef((props: ButtonProps, ref: Ref) => {
     'center-align': centerAlign,
   });
 
-  const iconClasses = classNames({ secondary, tertiary, sm, lg });
+  const iconClasses = classNames({ secondary, primary, tertiary, sm, lg });
   return (
     <ButtonBase
       {...props}