diff --git a/apps/summon-app/src/app/App.tsx b/apps/summon-app/src/app/App.tsx
index b02824f54..f2f727c30 100644
--- 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' && }
{summonState === 'success' && (
diff --git a/apps/summon-app/src/layouts/SummonerSuccess.tsx b/apps/summon-app/src/layouts/SummonerSuccess.tsx
index d90566ea6..4797b43f0 100644
--- 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;
};
+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 = ({
-
+
DAO contract:
- {daoAddress}
-
-
+
+
+
+
+
+
+
+
);
};
diff --git a/libs/ui/src/components/atoms/Button/Button.tsx b/libs/ui/src/components/atoms/Button/Button.tsx
index c6eb5cd47..fbe1edb60 100644
--- 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;
+ 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 (