add ability to sign with ledger to notifications center (#244)

* fix

* use ledger to sign

components/notifications/NotificationsDrawer.tsx

@@ -19,14 +19,27 @@ import NotificationCookieStore from '@store/notificationCookieStore'
 import dayjs from 'dayjs'
 import { useTranslation } from 'next-i18next'
 import { notify } from 'utils/notifications'
+import {
+  Connection,
+  PublicKey,
+  Transaction,
+  TransactionInstruction,
+} from '@solana/web3.js'
+import mangoStore from '@store/mangoStore'
+import Switch from '@components/forms/Switch'
+const MEMO_PROGRAM_ID = new PublicKey(
+  'MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr',
+)
 
-export const createSolanaMessage = (
+export const createSolanaMessage = async (
   wallet: WalletContextState,
   setCookie: (wallet: string, token: string) => void,
+  connection: Connection,
+  usingLedger: boolean,
 ) => {
   const payload = new Payload()
   payload.domain = window.location.host
-  payload.address = wallet.publicKey!.toString()
+  payload.address = wallet.publicKey!.toBase58()
   payload.uri = window.location.origin
   payload.statement = 'Login to Mango Notifications Admin App'
   payload.version = '1'
@@ -36,7 +49,46 @@ export const createSolanaMessage = (
 
   const messageText = message.prepareMessage()
   const messageEncoded = new TextEncoder().encode(messageText)
+  if (usingLedger) {
+    const tx = new Transaction()
 
+    tx.add(
+      new TransactionInstruction({
+        programId: MEMO_PROGRAM_ID,
+        keys: [],
+        data: Buffer.from(messageText),
+      }),
+    )
+    tx.feePayer = wallet.publicKey!
+    tx.recentBlockhash = (await connection.getLatestBlockhash()).blockhash
+
+    const signedTx = await wallet.signTransaction!(tx)
+    const serializedTx = signedTx.serialize()
+
+    const tokenResp = await fetch(`${NOTIFICATION_API}auth`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        ...payload,
+        isLedger: true,
+        serializedTx: Array.from(serializedTx),
+      }),
+    })
+    const body = await tokenResp.json()
+    const token = body.token
+    const error = body.error
+    if (error) {
+      notify({
+        type: 'error',
+        title: 'Error',
+        description: error,
+      })
+      return
+    }
+    setCookie(payload.address, token)
+  } else {
     wallet.signMessage!(messageEncoded)
       .then(async (resp) => {
         const tokenResp = await fetch(`${NOTIFICATION_API}auth`, {
@@ -70,6 +122,7 @@ export const createSolanaMessage = (
         })
       })
   }
+}
 
 const NotificationsDrawer = ({
   isOpen,
@@ -80,11 +133,13 @@ const NotificationsDrawer = ({
 }) => {
   const { t } = useTranslation('notifications')
   const { data, refetch } = useNotifications()
+  const connection = mangoStore((s) => s.connection)
   const wallet = useWallet()
   const isAuth = useIsAuthorized()
   const headers = useHeaders()
   const setCookie = NotificationCookieStore((s) => s.setCookie)
   const [isRemoving, setIsRemoving] = useState(false)
+  const [useLedger, setUseLedger] = useState(false)
 
   const unseenNotifications = useMemo(() => {
     if (!data || !data.length) return []
@@ -268,12 +323,24 @@ const NotificationsDrawer = ({
                 <div className="flex flex-col items-center justify-center text-center">
                   <InboxIcon className="mb-2 h-7 w-7 text-th-fgd-2" />
                   <h3 className="mb-1 text-base">{t('unauth-title')}</h3>
-                  <p>{t('unauth-desc')}</p>
+                  <p className="mb-3">{t('unauth-desc')}</p>
+                  <p>{t('im-using-ledger')}</p>
+                  <Switch
+                    checked={useLedger}
+                    onChange={(checked) => setUseLedger(checked)}
+                  />
                   <Button
                     className="mt-6"
-                    onClick={() => createSolanaMessage(wallet, setCookie)}
+                    onClick={() =>
+                      createSolanaMessage(
+                        wallet,
+                        setCookie,
+                        connection,
+                        useLedger,
+                      )
+                    }
                   >
-                    {t('sign-message')}
+                    {useLedger ? t('sign-with-tx') : t('sign-message')}
                   </Button>
                 </div>
               </div>

components/settings/NotificationSettings.tsx

@@ -10,6 +10,8 @@ import { useNotificationSettings } from 'hooks/notifications/useNotificationSett
 import { useTranslation } from 'next-i18next'
 import { NOTIFICATION_API } from 'utils/constants'
 import NotificationCookieStore from '@store/notificationCookieStore'
+import mangoStore from '@store/mangoStore'
+import { useState } from 'react'
 
 const NotificationSettings = () => {
   const { t } = useTranslation(['common', 'notifications', 'settings'])
@@ -19,6 +21,8 @@ const NotificationSettings = () => {
   const setCookie = NotificationCookieStore((s) => s.setCookie)
   const headers = useHeaders()
   const isAuth = useIsAuthorized()
+  const connection = mangoStore((s) => s.connection)
+  const [useLedger, setUseLedger] = useState(false)
 
   const handleSettingChange = async (key: string, val: boolean) => {
     if (data) {
@@ -60,9 +64,21 @@ const NotificationSettings = () => {
             <div className="flex flex-col items-center">
               <BellIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
               <p className="mb-4">{t('notifications:unauth-desc')}</p>
-              <Button onClick={() => createSolanaMessage(wallet, setCookie)}>
+              <p>{t('notifications:im-using-ledger')}</p>
+              <Switch
+                checked={useLedger}
+                onChange={(checked) => setUseLedger(checked)}
+              />
+              <Button
+                className="mt-3"
+                onClick={() =>
+                  createSolanaMessage(wallet, setCookie, connection, useLedger)
+                }
+              >
                 <div className="flex items-center">
-                  {t('notifications:sign-message')}
+                  {useLedger
+                    ? t('notifications:sign-with-tx')
+                    : t('notifications:sign-message')}
                 </div>
               </Button>
             </div>

public/locales/en/notifications.json

@@ -4,6 +4,8 @@
     "empty-state-title": "Nothing to see here",
     "notifications": "Notifications",
     "sign-message": "Sign Message",
+    "sign-with-tx": "Sign with tx",
+    "im-using-ledger": "Im using ledger",
     "unauth-desc": "Sign with your wallet to start receiving notifications",
     "unauth-title": "Notifications Inbox"
 }

public/locales/es/notifications.json

@@ -4,6 +4,8 @@
     "empty-state-title": "Nothing to see here",
     "notifications": "Notifications",
     "sign-message": "Sign Message",
+    "sign-with-tx": "Sign with tx",
+    "im-using-ledger": "Im using ledger",
     "unauth-desc": "Sign with your wallet to start receiving notifications",
     "unauth-title": "Notifications Inbox"
 }

public/locales/ru/notifications.json

@@ -4,6 +4,8 @@
     "empty-state-title": "Nothing to see here",
     "notifications": "Notifications",
     "sign-message": "Sign Message",
+    "sign-with-tx": "Sign with tx",
+    "im-using-ledger": "Im using ledger",
     "unauth-desc": "Sign with your wallet to start receiving notifications",
     "unauth-title": "Notifications Inbox"
 }

public/locales/zh/notifications.json

@@ -4,6 +4,8 @@
     "empty-state-title": "这里没什么",
     "notifications": "通知",
     "sign-message": "签署讯息",
+    "sign-with-tx": "Sign with tx",
+    "im-using-ledger": "Im using ledger",
     "unauth-desc": "连接钱包而受到通知",
     "unauth-title": "通知收件匣"
 }

public/locales/zh_tw/notifications.json

@@ -4,6 +4,8 @@
     "empty-state-title": "這裡沒什麼",
     "notifications": "通知",
     "sign-message": "簽署訊息",
+    "sign-with-tx": "Sign with tx",
+    "im-using-ledger": "Im using ledger",
     "unauth-desc": "連接錢包而受到通知",
     "unauth-title": "通知收件匣"
 }