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 (