feat: input suffix

getAlby · Mar 31, 2022 · 2062916 · 2062916
1 parent 8ff2b7f
commit 2062916
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 13 deletions.
diff --git a/src/app/components/form/Input/index.tsx b/src/app/components/form/Input/index.tsx
@@ -1,3 +1,11 @@
+import { useRef } from "react";
+
+import { classNames } from "../../../utils";
+
+type Props = {
+  suffix?: string;
+};
+
 export default function Input({
   name,
   id,
@@ -15,13 +23,22 @@ export default function Input({
   disabled,
   min,
   max,
-}: React.InputHTMLAttributes<HTMLInputElement>) {
-  return (
+  suffix,
+}: React.InputHTMLAttributes<HTMLInputElement> & Props) {
+  const inputEl = useRef<HTMLInputElement>(null);
+  const outerStyles =
+    "shadow-sm rounded-md border border-gray-300 dark:bg-gray-200 focus:ring-orange-bitcoin focus:border-orange-bitcoin focus:ring-1 transition duration-300";
+
+  const inputNode = (
     <input
+      ref={inputEl}
       type={type}
       name={name}
       id={id}
-      className="shadow-sm focus:ring-orange-bitcoin focus:border-orange-bitcoin block w-full sm:text-sm border-gray-300 rounded-md placeholder-gray-400 dark:bg-gray-200 dark:placeholder-gray-600 dark:text-black transition duration-300"
+      className={classNames(
+        "sm:text-sm block w-full placeholder-gray-400 dark:placeholder-gray-600 dark:text-black",
+        !suffix ? outerStyles : "border-0 focus:ring-0"
+      )}
       placeholder={placeholder}
       required={required}
       pattern={pattern}
@@ -37,4 +54,25 @@ export default function Input({
       max={max}
     />
   );
+
+  if (!suffix) return inputNode;
+
+  return (
+    <div
+      className={classNames(
+        "flex items-stretch overflow-hidden",
+        outerStyles.replace(/focus/g, "focus-within")
+      )}
+    >
+      {inputNode}
+      <span
+        className="flex items-center pr-3 font-medium"
+        onClick={() => {
+          inputEl.current?.focus();
+        }}
+      >
+        {suffix}
+      </span>
+    </div>
+  );
 }
diff --git a/src/app/components/form/TextField.tsx b/src/app/components/form/TextField.tsx
@@ -1,5 +1,10 @@
 import Input from "./Input";
 
+type Props = {
+  label: string;
+  suffix?: string;
+};
+
 const TextField = ({
   id,
   label,
@@ -19,7 +24,8 @@ const TextField = ({
   maxLength,
   min,
   max,
-}: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) => (
+  suffix,
+}: React.InputHTMLAttributes<HTMLInputElement> & Props) => (
   <>
     <label
       htmlFor={id}
@@ -47,6 +53,7 @@ const TextField = ({
         maxLength={maxLength}
         min={min}
         max={max}
+        suffix={suffix}
       />
     </div>
   </>

diff --git a/src/app/screens/connectors/NewWallet/index.tsx b/src/app/screens/connectors/NewWallet/index.tsx
@@ -177,9 +177,10 @@ export default function NewWallet() {
             />
           </div>
           <div className="mt-6">
-            <p className="text-gray-500 dark:text-gray-400">
+            <p className="mb-2 text-gray-500 dark:text-gray-400">
               Your Alby account also comes with an optional{" "}
               <a
+                className="underline"
                 href="https://lightningaddress.com/"
                 target="_blank"
                 rel="noreferrer"
@@ -189,6 +190,7 @@ export default function NewWallet() {
               . This is a simple way for anyone to send you Bitcoin on the
               Lightning Network. (
               <a
+                className="underline"
                 href="https://lightningaddress.com/"
                 target="_blank"
                 rel="noreferrer"
@@ -197,14 +199,17 @@ export default function NewWallet() {
               </a>
               )
             </p>
-            <TextField
-              id="lnAddress"
-              label="Choose your Lightning Address (optional)"
-              type="text"
-              onChange={(e) => {
-                setLnAddress(e.target.value.trim().split("@")[0]); // in case somebody enters a full address we simple remove the domain
-              }}
-            />
+            <div>
+              <TextField
+                id="lnAddress"
+                label="Choose your Lightning Address (optional)"
+                suffix="@getalby.com"
+                type="text"
+                onChange={(e) => {
+                  setLnAddress(e.target.value.trim().split("@")[0]); // in case somebody enters a full address we simple remove the domain
+                }}
+              />
+            </div>
           </div>
         </>
       )}