From 1fce4c0ed66ecd978e6f4ba43158c98749e0ac68 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 13 Oct 2022 09:10:13 -0500
Subject: [PATCH] Feat/wallet changes (#1616)

* fix: padding on connect dialog footer

* chore: refactor connect dialog so custom url input is own component with own state
---
 .../connect-dialog-elements.tsx               |  2 +-
 .../src/connect-dialog/connect-dialog.tsx     | 77 ++++++++++---------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx
index 7de49045d..7f1270724 100644
--- a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx
+++ b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx
@@ -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
       ) : (
diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx
index f927cb205..f019615d7 100644
--- a/libs/wallet/src/connect-dialog/connect-dialog.tsx
+++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx
@@ -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>
+  );
+};