jeffemmett
/
odd-app-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wait for data root before loading filesystem (#42) 

* Upgrade webnative to 0.34.1

* Wait for data root before loading filesystem

* Add loading filesystem modal
This commit is contained in:
Brian Ginsburg 2022-08-29 16:09:18 -07:00 committed by GitHub
parent 2399219f69
commit 53b6884e23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 84 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -10,7 +10,7 @@
"dependencies": {
"clipboard-copy": "^4.0.1",
"qrcode-svg": "^1.1.0",
"webnative": "0.34.0"
"webnative": "0.34.1"
},
"devDependencies": {
"@sveltejs/adapter-static": "1.0.0-next.36",
@ -5501,9 +5501,9 @@
}
},
"node_modules/webnative": {
"version": "0.34.0",
"resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.0.tgz",
"integrity": "sha512-BS5pgHx9+sIzZ3NYA9Q76QQOctHFuyZ9p/LC4U4+gWTjycj0efWl0Z2jlsaUyGfqBkFLReyDeTb3ldHkD2PgbA==",
"version": "0.34.1",
"resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.1.tgz",
"integrity": "sha512-FCY00dBUUHWEdabkLV3INTxnkNVlRQfmiNfe4M+Pg85rppLTHP0WU/MAbPHan5NMdH2j09KPeFmxLD2qbqszHQ==",
"dependencies": {
"@ipld/dag-cbor": "^7.0.2",
"@ipld/dag-pb": "^2.1.17",
@ -9506,9 +9506,9 @@
"peer": true
},
"webnative": {
"version": "0.34.0",
"resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.0.tgz",
"integrity": "sha512-BS5pgHx9+sIzZ3NYA9Q76QQOctHFuyZ9p/LC4U4+gWTjycj0efWl0Z2jlsaUyGfqBkFLReyDeTb3ldHkD2PgbA==",
"version": "0.34.1",
"resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.1.tgz",
"integrity": "sha512-FCY00dBUUHWEdabkLV3INTxnkNVlRQfmiNfe4M+Pg85rppLTHP0WU/MAbPHan5NMdH2j09KPeFmxLD2qbqszHQ==",
"requires": {
"@ipld/dag-cbor": "^7.0.2",
"@ipld/dag-pb": "^2.1.17",

2
package.json
View File

@ -53,6 +53,6 @@
"dependencies": {
"clipboard-copy": "^4.0.1",
"qrcode-svg": "^1.1.0",
"webnative": "0.34.0"
"webnative": "0.34.1"
}
}

76
src/components/auth/link/LinkDevice.svelte
View File

@ -2,10 +2,11 @@
import { goto } from '$app/navigation'
import { page } from '$app/stores'
import { appName } from '$lib/app-name'
import { createAccountLinkingConsumer } from '$lib/auth/linking'
import { loadAccount } from '$lib/common/webnative'
let loadingFilesystem = false
let displayPin: string = ''
let url = $page.url
const username = url.searchParams.get('username')
@ -23,6 +24,8 @@
accountLinkingConsumer.on('link', async ({ approved, username }) => {
if (approved) {
loadingFilesystem = true
await loadAccount(username)
goto('/')
// Send up a toast on '/'
@ -34,35 +37,54 @@
</script>
<input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
<div class="modal">
<div
class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
>
<div class="grid grid-flow-row auto-rows-max gap-7">
<h3 class="text-xl font-serif">Connection Requested</h3>
<div class="grid grid-flow-row auto-rows-max gap-4 justify-items-center">
{#if displayPin}
<span
class="btn btn-info btn-lg rounded-full text-2xl tracking-widest w-3/4 cursor-default"
>
{displayPin}
</span>
{/if}
<span class="text-md">Enter this code on your connected device.</span>
{#if loadingFilesystem}
<div class="modal">
<div
class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center dark:bg-slate-900 dark:border-slate-600 dark:border "
>
<p class="text-slate-500 dark:text-slate-50">
<span
class="rounded-lg border-t-2 border-l-2 border-slate-500 dark:border-slate-50 w-4 h-4 inline-block animate-spin mr-1"
/>
Loading file system...
</p>
</div>
</div>
{:else}
<div class="modal">
<div
class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
>
<div class="grid grid-flow-row auto-rows-max gap-7">
<h3 class="text-xl font-serif">Connection Requested</h3>
<div
class="grid grid-flow-col auto-cols-max gap-4 justify-center items-center text-slate-500"
class="grid grid-flow-row auto-rows-max gap-4 justify-items-center"
>
<span
class="rounded-lg border-t-2 border-l-2 border-slate-600 dark:border-slate-50 w-4 h-4 block animate-spin"
/>
Waiting for a response...
{#if displayPin}
<span
class="btn btn-info btn-lg rounded-full text-2xl tracking-widest w-3/4 cursor-default"
>
{displayPin}
</span>
{/if}
<span class="text-md">Enter this code on your connected device.</span>
<div
class="grid grid-flow-col auto-cols-max gap-4 justify-center items-center text-slate-500"
>
<span
class="rounded-lg border-t-2 border-l-2 border-slate-600 dark:border-slate-50 w-4 h-4 block animate-spin"
/>
Waiting for a response...
</div>
</div>
<div>
<button
class="btn btn-primary btn-outline text-base font-normal mt-4"
>
Cancel Request
</button>
</div>
</div>
<div>
<button class="btn btn-primary btn-outline text-base font-normal mt-4">
Cancel Request
</button>
</div>
</div>
</div>
</div>
{/if}

27
src/lib/common/webnative.ts
View File

@ -106,6 +106,8 @@ export const register = async (username: string): Promise<boolean> => {
}
export const loadAccount = async (username: string): Promise<void> => {
await checkDataRoot(username)
const fs = await webnative.loadRootFileSystem()
filesystemStore.set(fs)
@ -115,3 +117,28 @@ export const loadAccount = async (username: string): Promise<void> => {
authed: true
}))
}
const checkDataRoot = async (username: string): Promise<void> => {
let dataRoot = await webnative.dataRoot.lookup(username)
if (dataRoot) return
return new Promise((resolve) => {
const maxRetries = 20
let attempt = 0
const dataRootInterval = setInterval(async () => {
console.warn('Could not fetch filesystem data root. Retrying.')
dataRoot = await webnative.dataRoot.lookup(username)
if (!dataRoot && attempt < maxRetries) {
attempt++
return
}
clearInterval(dataRootInterval)
resolve()
}, 500)
})
}