feat: enable set lightning address

GaloyMoney · Jul 26, 2022 · 57d5310 · 57d5310
1 parent 557fb75
commit 57d5310
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 18 deletions.
diff --git a/src/components/__snapshots__/root.spec.tsx.snap b/src/components/__snapshots__/root.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Root appRoutes renders Contacts and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div
@@ -155,7 +154,6 @@ exports[`Root appRoutes renders Contacts and matches snapshot 1`] = `
 exports[`Root appRoutes renders Home and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div
@@ -447,7 +445,6 @@ exports[`Root appRoutes renders Home and matches snapshot 1`] = `
 exports[`Root appRoutes renders Receive and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div
@@ -672,7 +669,6 @@ exports[`Root appRoutes renders Receive and matches snapshot 1`] = `
 exports[`Root appRoutes renders Send and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div
@@ -917,7 +913,6 @@ exports[`Root appRoutes renders Send and matches snapshot 1`] = `
 exports[`Root appRoutes renders Send with a destination and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div
@@ -1160,7 +1155,6 @@ exports[`Root appRoutes renders Send with a destination and matches snapshot 1`]
 exports[`Root appRoutes renders Settings and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div
@@ -1348,6 +1342,56 @@ exports[`Root appRoutes renders Settings and matches snapshot 1`] = `
             </svg>
           </div>
         </div>
+        <div
+          class="setting"
+        >
+          <div
+            class="icon"
+          >
+            <svg
+              fill="none"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M14.2778 11.1573C13.4556 11.7067 12.4889 12 11.5 12C10.1743 11.9987 8.90331 11.4715 7.96591 10.5341C7.02852 9.59667 6.50131 8.32567 6.49999 7C6.49999 6.01109 6.79323 5.04439 7.34264 4.22215C7.89205 3.3999 8.67294 2.75904 9.58657 2.3806C10.5002 2.00217 11.5055 1.90315 12.4754 2.09608C13.4453 2.289 14.3363 2.7652 15.0355 3.46447C15.7348 4.16373 16.211 5.05464 16.4039 6.02455C16.5968 6.99445 16.4978 7.99978 16.1194 8.91341C15.7409 9.82704 15.1001 10.6079 14.2778 11.1573ZM13.3519 4.22843C12.8037 3.86216 12.1593 3.66667 11.5 3.66667C10.6159 3.66667 9.76808 4.01786 9.14296 4.64298C8.51784 5.2681 8.16665 6.11594 8.16665 7C8.16665 7.65927 8.36215 8.30373 8.72842 8.85189C9.09469 9.40006 9.61529 9.8273 10.2244 10.0796C10.8335 10.3319 11.5037 10.3979 12.1503 10.2693C12.7969 10.1407 13.3908 9.82319 13.857 9.35701C14.3232 8.89084 14.6406 8.2969 14.7693 7.6503C14.8979 7.00369 14.8319 6.33347 14.5796 5.72439C14.3273 5.1153 13.9 4.5947 13.3519 4.22843ZM6.19913 15.8658C7.60517 14.4598 9.51154 13.6689 11.5 13.6667C13.4884 13.6689 15.3948 14.4598 16.8008 15.8658C18.2069 17.2719 18.9978 19.1782 19 21.1667C19 21.3877 18.9122 21.5996 18.7559 21.7559C18.5996 21.9122 18.3877 22 18.1666 22C17.9456 22 17.7337 21.9122 17.5774 21.7559C17.4211 21.5996 17.3333 21.3877 17.3333 21.1667C17.3333 19.6196 16.7187 18.1358 15.6248 17.0419C14.5308 15.9479 13.0471 15.3333 11.5 15.3333C9.95289 15.3333 8.46917 15.9479 7.37521 17.0419C6.28124 18.1358 5.66666 19.6196 5.66666 21.1667C5.66666 21.3877 5.57887 21.5996 5.42259 21.7559C5.26631 21.9122 5.05435 22 4.83333 22C4.61232 22 4.40036 21.9122 4.24408 21.7559C4.0878 21.5996 4 21.3877 4 21.1667C4.00221 19.1782 4.79309 17.2719 6.19913 15.8658Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div
+            class="name"
+          >
+            Lightning Address
+            <div
+              class="sub"
+            >
+              (not logged in)
+            </div>
+          </div>
+          <div
+            class="action"
+          >
+            <svg
+              fill="none"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M17.7336 7.83333V9.02C18.4758 9.34392 19.1075 9.8771 19.5515 10.5543C19.9955 11.2316 20.2325 12.0235 20.2336 12.8333V17.8333C20.2322 18.938 19.7928 19.997 19.0117 20.7782C18.2306 21.5593 17.1716 21.9987 16.0669 22H7.73356C6.6289 21.9987 5.56986 21.5593 4.78875 20.7782C4.00763 19.997 3.56822 18.938 3.56689 17.8333V12.8333C3.56796 12.0235 3.80498 11.2316 4.24898 10.5543C4.69297 9.8771 5.3247 9.34392 6.0669 9.02V7.83333C6.0669 6.28624 6.68148 4.80251 7.77544 3.70854C8.8694 2.61458 10.3531 2 11.9002 2C13.4473 2 14.9311 2.61458 16.025 3.70854C17.119 4.80251 17.7336 6.28624 17.7336 7.83333ZM8.95395 4.88705C8.17255 5.66846 7.73356 6.72826 7.73356 7.83333V8.66667H16.0669V7.83333C16.0669 6.72826 15.6279 5.66846 14.8465 4.88705C14.0651 4.10565 13.0053 3.66667 11.9002 3.66667C10.7952 3.66667 9.73535 4.10565 8.95395 4.88705ZM17.8347 19.6011C18.3035 19.1323 18.5669 18.4964 18.5669 17.8333V12.8333C18.5669 12.1703 18.3035 11.5344 17.8347 11.0656C17.3658 10.5967 16.7299 10.3333 16.0669 10.3333H7.73356C7.07052 10.3333 6.43464 10.5967 5.9658 11.0656C5.49695 11.5344 5.23356 12.1703 5.23356 12.8333V17.8333C5.23356 18.4964 5.49695 19.1323 5.9658 19.6011C6.43464 20.0699 7.07052 20.3333 7.73356 20.3333H16.0669C16.7299 20.3333 17.3658 20.0699 17.8347 19.6011ZM11.3109 13.9108C11.4671 13.7545 11.6791 13.6667 11.9001 13.6667C12.1211 13.6667 12.3331 13.7545 12.4894 13.9108C12.6457 14.0671 12.7334 14.279 12.7334 14.5V16.1667C12.7334 16.3877 12.6457 16.5997 12.4894 16.7559C12.3331 16.9122 12.1211 17 11.9001 17C11.6791 17 11.4671 16.9122 11.3109 16.7559C11.1546 16.5997 11.0668 16.3877 11.0668 16.1667V14.5C11.0668 14.279 11.1546 14.0671 11.3109 13.9108Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
         <div
           class="setting"
         >
@@ -1519,7 +1563,6 @@ exports[`Root appRoutes renders Settings and matches snapshot 1`] = `
 exports[`Root appRoutes renders Transactions and matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-language="DEFAULT"
     id="main-container"
   >
     <div

diff --git a/src/components/root.spec.tsx b/src/components/root.spec.tsx
@@ -17,6 +17,11 @@ jest.mock("../kratos", () => ({
   }),
 }))
 
+jest.mock("../hooks/use-main-query", () => () => ({
+  username: "test",
+  lightningAddressDomain: "pay.domain",
+}))
+
 describe("Root appRoutes", () => {
   it("renders Home and matches snapshot", () => {
     const { asFragment } = render(

diff --git a/src/components/settings/username.tsx b/src/components/settings/username.tsx
@@ -1,15 +1,23 @@
-import { translate } from "@galoymoney/client"
-import { Icon } from "@galoymoney/react"
+import { translate, useMutation } from "@galoymoney/client"
+import { Icon, Spinner } from "@galoymoney/react"
 
 import useMainQuery from "hooks/use-main-query"
 
-type FCT = React.FC<{ guestView: boolean }>
+const UsernameInput: React.FC<{ lightningAddressDomain: string }> = ({
+  lightningAddressDomain,
+}) => {
+  const [userUpdateUsername, { loading, errorsMessage }] =
+    useMutation.userUpdateUsername()
 
-const UsernameSetting: FCT = ({ guestView }) => {
-  const { username } = useMainQuery()
+  const submitUsername: React.FormEventHandler<HTMLFormElement> = async (event) => {
+    event.preventDefault()
 
-  if (!username) {
-    return null
+    const usernameInput = event.currentTarget.username
+    userUpdateUsername({
+      variables: {
+        input: { username: usernameInput.value },
+      },
+    })
   }
 
   return (
@@ -18,14 +26,54 @@ const UsernameSetting: FCT = ({ guestView }) => {
         <Icon name="person" />
       </div>
       <div className="name">
-        {translate("Username")}
-        <div className="sub">{guestView ? "(not logged in)" : username}</div>
+        {translate("Set Lightning Address")}
+        <div className="sub">{translate("You can do this operation ONLY one time")}</div>
       </div>
       <div className="action">
-        <Icon name="lock" />
+        <form onSubmit={submitUsername}>
+          <div className="grouped-input-button">
+            <div className="input-label-right">
+              <input type="text" name="username" placeholder={translate("Username")} />
+              <span>@{lightningAddressDomain}</span>
+            </div>
+            <button type="submit" disabled={loading}>
+              {loading ? <Spinner size="small" /> : <Icon name="submit" />}
+            </button>
+          </div>
+          {errorsMessage && <div className="error-hint">{errorsMessage}</div>}
+        </form>
       </div>
     </div>
   )
 }
 
+const UsernameSetting: React.FC<{ guestView: boolean }> = ({ guestView }) => {
+  const { username, lightningAddressDomain } = useMainQuery()
+
+  if (!lightningAddressDomain) {
+    throw new Error("No lightningAddressDomain value")
+  }
+
+  if (guestView || username) {
+    return (
+      <div className="setting">
+        <div className="icon">
+          <Icon name="person" />
+        </div>
+        <div className="name">
+          {translate("Lightning Address")}
+          <div className="sub">
+            {guestView ? "(not logged in)" : `${username}@${lightningAddressDomain}`}
+          </div>
+        </div>
+        <div className="action">
+          <Icon name="lock" />
+        </div>
+      </div>
+    )
+  }
+
+  return <UsernameInput lightningAddressDomain={lightningAddressDomain} />
+}
+
 export default UsernameSetting
diff --git a/src/hooks/use-main-query.ts b/src/hooks/use-main-query.ts
@@ -17,6 +17,7 @@ const useMainQuery = () => {
   })
 
   const pubKey = data?.globals?.nodesIds?.[0] ?? ""
+  const lightningAddressDomain = data?.globals?.lightningAddressDomain
   const btcPrice = data?.btcPrice ?? undefined
 
   const me = data?.me
@@ -33,6 +34,7 @@ const useMainQuery = () => {
   const language = (me?.language ?? "DEFAULT") as Language
 
   return {
+    lightningAddressDomain,
     btcPrice,
     pubKey,
     btcWalletId,

diff --git a/src/jest/setupTests.ts b/src/jest/setupTests.ts
@@ -2,7 +2,7 @@ if (typeof window !== "undefined") {
   Object.defineProperty(window, "__G_DATA", {
     value: {
       GwwConfig: {
-        graphqlUrl: "http://testnet.galoy.io/graphql",
+        graphqlUrl: "https://api.staging.galoy.io/graphql",
         network: "testnet",
         kratosFeatureFlag: true,
       },

diff --git a/src/modules/default/styles/colors.css b/src/modules/default/styles/colors.css
@@ -2,6 +2,7 @@
   :root {
     --color-bg: #f9f9f9;
     --color-light-bg: #fdfdfd;
+    --color-dark-bg: #ededed;
     --color-menu-bg: #f2f2f2;
     --color-primary: #111111;
     --color-secondary: #666666;
@@ -25,6 +26,7 @@
   :root {
     --color-bg: #151515;
     --color-light-bg: #131313;
+    --color-dark-bg: #232323;
     --color-menu-bg: #1c1c1c;
     --color-primary: #eeeeee;
     --color-secondary: #999999;
@@ -47,6 +49,7 @@
 body.light {
   --color-bg: #f9f9f9;
   --color-light-bg: #fdfdfd;
+  --color-dark-bg: #ededed;
   --color-menu-bg: #f2f2f2;
   --color-primary: #111111;
   --color-secondary: #666666;

diff --git a/src/styles/general.css b/src/styles/general.css
@@ -109,6 +109,10 @@ body {
   text-align: center;
 }
 
+.error-hint {
+  color: var(--color-error);
+}
+
 .small {
   font-size: 0.8rem;
 }

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -695,3 +695,32 @@ button {
     }
   }
 }
+
+.grouped-input-button {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-light-bg);
+  border: thin solid var(--color-borders);
+  border-radius: 0.25rem;
+  button {
+    border-radius: unset;
+    border: unset;
+  }
+  .input-label-right {
+    display: flex;
+    width: 100%;
+    padding: 0.5rem;
+    color: var(--color-primary);
+    input {
+      border: unset;
+      padding: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    span {
+      color: var(--color-subtext);
+      padding-left: 0.4rem;
+      padding-right: 0.4rem;
+    }
+  }
+}