LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Feat/wallet changes (#1616)

Browse Source 
* fix: padding on connect dialog footer

* chore: refactor connect dialog so custom url input is own component with own state
This commit is contained in:
Matthew Russell 2022-10-13 09:10:13 -05:00 committed by GitHub
parent 969d66a6a1
commit 1fce4c0ed6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/wallet/src/connect-dialog/connect-dialog-elements.tsx
View File

@ -19,7 +19,7 @@ export const ConnectDialogContent = ({ children }: { children: ReactNode }) => {
export const ConnectDialogFooter = ({ children }: { children?: ReactNode }) => {
return (
<footer className="flex justify-center gap-4 px-4 md:px-8 pt-6 -mx-4 md:-mx-8 border-t border-neutral-500 text-neutral-500 dark:text-neutral-400">
<footer className="flex justify-center gap-4 px-4 md:px-8 pt-4 md:pt-6 -mx-4 md:-mx-8 border-t border-neutral-500 text-neutral-500 dark:text-neutral-400">
{children ? (
children
) : (

77
libs/wallet/src/connect-dialog/connect-dialog.tsx
View File

@ -156,45 +156,11 @@ const ConnectorList = ({
setWalletUrl: (value: string) => void;
isMainnet: boolean;
}) => {
const [urlInputExpanded, setUrlInputExpanded] = useState(false);
return (
<>
<ConnectDialogContent>
<ConnectDialogTitle>{t('Connect')}</ConnectDialogTitle>
{urlInputExpanded ? (
<>
<p className="mb-2 text-neutral-600 dark:text-neutral-400">
{t('Custom wallet location')}
</p>
<FormGroup
labelFor="wallet-url"
label={t('Custom wallet location')}
hideLabel={true}
>
<Input
value={walletUrl}
onChange={(e) => setWalletUrl(e.target.value)}
name="wallet-url"
/>
</FormGroup>
<p className="mb-2 text-neutral-600 dark:text-neutral-400">
{t('Choose wallet app to connect')}
</p>
</>
) : (
<p className="mb-6 text-neutral-600 dark:text-neutral-400">
{t(
'Choose wallet app to connect, or to change port or server URL enter a '
)}
<button
className="underline"
onClick={() => setUrlInputExpanded(true)}
>
{t('custom wallet location')}
</button>{' '}
{t(' first')}
</p>
)}
<CustomUrlInput walletUrl={walletUrl} setWalletUrl={setWalletUrl} />
<ul data-testid="connectors-list" className="mb-6">
<li className="mb-4">
<ConnectionOption
@ -322,3 +288,44 @@ const ConnectionOption = ({
</Button>
);
};
const CustomUrlInput = ({
walletUrl,
setWalletUrl,
}: {
walletUrl: string;
setWalletUrl: (url: string) => void;
}) => {
const [urlInputExpanded, setUrlInputExpanded] = useState(false);
return urlInputExpanded ? (
<>
<p className="mb-2 text-neutral-600 dark:text-neutral-400">
{t('Custom wallet location')}
</p>
<FormGroup
labelFor="wallet-url"
label={t('Custom wallet location')}
hideLabel={true}
>
<Input
value={walletUrl}
onChange={(e) => setWalletUrl(e.target.value)}
name="wallet-url"
/>
</FormGroup>
<p className="mb-2 text-neutral-600 dark:text-neutral-400">
{t('Choose wallet app to connect')}
</p>
</>
) : (
<p className="mb-6 text-neutral-600 dark:text-neutral-400">
{t(
'Choose wallet app to connect, or to change port or server URL enter a '
)}
<button className="underline" onClick={() => setUrlInputExpanded(true)}>
{t('custom wallet location')}
</button>{' '}
{t(' first')}
</p>
);
};