chore(web): display recovery code on hardware security keys section

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx

@@ -12,6 +12,7 @@ import Button from '@/Components/Button/Button'
 import U2FAddDeviceView from '../U2FAddDeviceView'
 import U2FDevicesList from './U2FDevicesList'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
+import RecoveryCodeBanner from '@/Components/RecoveryCodeBanner/RecoveryCodeBanner'
 
 type Props = {
   application: WebApplication
@@ -67,6 +68,13 @@ const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
             onClick={handleAddDeviceClick}
           />
         </PreferencesSegment>
+        {devices.length > 0 && (
+          <PreferencesSegment>
+            <div className="mt-3">
+              <RecoveryCodeBanner application={application} />
+            </div>
+          </PreferencesSegment>
+        )}
       </PreferencesGroup>
       <ModalOverlay isOpen={showDeviceAddingModal}>
         <U2FAddDeviceView