Refactored to show correct time. Still needs to be made dynamic

src/tokenListItem.ts

@@ -1,6 +1,28 @@
 import {displayToken} from './token'
-export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+import Timer from './tokenTimer';
+import totp from 'totp-generator'
+const period = 30
+const digits = 6
+let token = ''
+async function generateTOTP(secret: string): Promise<{secondsSinceStart: number, secondsRemaining: number}>{
+  const token = totp(secret.replace(/ /, '').trim(), {
+    digits,
+    period,
+  })
 
+  const secondsSinceEpoch = Math.ceil(Date.now() / 1000) - 1
+  const secondsSinceStart = 0 + (secondsSinceEpoch % period)
+  const secondsRemaining = period - (secondsSinceEpoch % period)
+  return {
+    secondsSinceStart,
+    secondsRemaining
+  }
+}
+export async function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+  const period = 30
+  const digits = 6
+  const {secondsRemaining, secondsSinceStart} = await generateTOTP(secret)
+  const token = await displayToken(secret)
     return element.innerHTML = `<div class="fieldset-wrapper">
     <fieldset>
       <label>Account</label>
@@ -8,7 +30,10 @@ export function displayTokenListItem(account: string, secret: string, element: H
     </fieldset>
     <fieldset>
       <label>Code</label>
-      <p data-test-id="secret">${displayToken(secret)}</p>
+      <p data-test-id="secret">${await displayToken(secret)}</p>
     </fieldset>
+    <fieldset>
+    <label></label>
+    <p>${await Timer(secondsSinceStart, secondsRemaining)}</p>
     </div>`;
 }