[Feature] Include an auto-lock feature that locks Alby after a certain amount of time

[brihuang99]

Feature description

As of right now, the web extension for Alby does not have an auto-locking feature. Users have to manually open the extension and select 'Lock'. For users who desire an increased sense of security and to follow practices of other hot wallets, providing an auto-locking feature that will lock Alby after a specified amount of time may prove to be useful.

Describe the solution

Front-end

I believe that a good place in the UI for this feature would be adding a row under 'Settings' and giving users a drop down with some time intervals (1 minute, 5 minutes, 10 minutes, etc.)

I can provide a basic mock up for this later today.

Back-end

There would need to be a function for Alby to track the amount of time that has passed and then execute the locking of the wallet. Maybe create a JavaScript Date object?

Describe alternatives

No response

Additional context

No response

Are you working on this?

Yes

[brihuang99]

Here are the designs:

Default

Drop down options

New option selected

I think there could be a number of time intervals to provide. Here's the Figma link for reference.

P.S. I also noticed that right now in prod, the drop down arrow does not invert when the field is opened; that should be something to fix, though minor.

[pushp1997]

Hi, I would like to work on this, can you please assign this to me?

[rolznz]

Hi @pushp1997 , thanks for offering. Go ahead!

[pushp1997]

Hi @rolznz

Just a doubt, I am thinking to do it in this way:

let autoLockTimeout: NodeJS.Timeout | undefined;

function startAutoLockTimer(timeoutMinutes: number): void {
  const auth = useAccount();
  const timeoutMilliseconds = timeoutMinutes * 60 * 1000;
  autoLockTimeout = setTimeout(async () => {
    auth.lock(() => {
      window.close();
    });
  }, timeoutMilliseconds);
}

/**
 * Get the active auto lock preference and start the background process to lock the app
 */
export function setAutoLock(): void {
  api.getSettings().then((settings) => {
    // check if settings theme selection is system (this is the default)
    if (settings.autoLock === "1_min") {
      startAutoLockTimer(1);
    } else if (settings.autoLock === "5_mins") {
      startAutoLockTimer(5);
    } else if (settings.autoLock === "10_mins") {
      startAutoLockTimer(10);
    } else if (settings.autoLock === "30_mins") {
      startAutoLockTimer(30);
    } else {
      // settings.autoLock === "off"
      clearTimeout(autoLockTimeout);
    }
  });
}

Where should I keep this global variable autoLockTimeout? I am keeping the setAutoLock() in src/app/utils/index.ts and will call it from SettingsContext.tsx.

[rolznz]

@pavanjoshi914 could you review this one?