···

       
16
       
16
       
 
       


     

       
17
       
17
       
 
       
export default function MigrationProgress(props: MigrationProgressProps) {

     

       
18
       
18
       
 
       
  const [token, setToken] = useState("");

     

       
19
       
19
       
-
       
  const [recoveryKey, setRecoveryKey] = useState("");

     

       
19
       
19
       
+
       


     

       
20
       
20
       
 
       
  const [steps, setSteps] = useState<MigrationStep[]>([

     

       
21
       
21
       
 
       
    { name: "Create Account", status: "pending" },

     

       
22
       
22
       
 
       
    { name: "Migrate Data", status: "pending" },

     
···

       
318
       
318
       
 
       
        throw new Error("Invalid response from server");

     

       
319
       
319
       
 
       
      }

     

       
320
       
320
       
 
       


     

       
321
       
321
       
-
       
      setRecoveryKey(data.recoveryKey);

     

       
321
       
321
       
+
       


     

       
322
       
322
       
 
       
      updateStepStatus(2, "verifying");

     

       
323
       
323
       
 
       
      const verified = await verifyStep(2);

     

       
324
       
324
       
 
       
      if (!verified) {

     
···

       
532
       
532
       
 
       
        ))}

     

       
533
       
533
       
 
       
      </div>

     

       
534
       
534
       
 
       


     

       
535
       
535
       
-
       
      {recoveryKey && (

     

       
536
       
536
       
-
       
        <div class="p-4 bg-yellow-50 dark:bg-yellow-900 rounded-lg border-2 border-yellow-200 dark:border-yellow-800">

     

       
537
       
537
       
-
       
          <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">

     

       
538
       
538
       
-
       
            Important: Save your recovery key

     

       
539
       
539
       
-
       
          </p>

     

       
540
       
540
       
-
       
          <p class="mt-1 text-sm text-yellow-700 dark:text-yellow-300 break-all font-mono">

     

       
541
       
541
       
-
       
            {recoveryKey}

     

       
542
       
542
       
-
       
          </p>

     

       
543
       
543
       
-
       
        </div>

     

       
544
       
544
       
-
       
      )}

     

       
535
       
535
       
+
       


     

       
545
       
536
       
 
       


     

       
546
       
537
       
 
       
      {steps[3].status === "completed" && (

     

       
547
       
538
       
 
       
        <div class="p-4 bg-green-50 dark:bg-green-900 rounded-lg border-2 border-green-200 dark:border-green-800">

     

···

       
313
       
313
       
 
       
            <div class="text-center mb-4 mt-6">

     

       
314
       
314
       
 
       
              <h3 class="text-2xl font-bold text-red-600 mb-2 tracking-wide">Final Boarding Call</h3>

     

       
315
       
315
       
 
       
              <p class="text-gray-700 dark:text-gray-300 mb-2 text-base">

     

       
316
       
316
       
-
       
                <span class="font-semibold text-red-500">Warning:</span> This migration process can be <strong>irreversible</strong>.<br />Once completed, you may not be able to return to your previous account state.

     

       
316
       
316
       
+
       
                <span class="font-semibold text-red-500">Warning:</span> This migration process can be <strong>irreversible</strong>.<br />Airport is in <strong>alpha</strong> currently, and we don't recommend it for main accounts.

     

       
317
       
317
       
 
       
              </p>

     

       
318
       
318
       
 
       
              <p class="text-gray-700 dark:text-gray-300 mb-4 text-base">

     

       
319
       
319
       
 
       
                Please type <span class="font-mono font-bold text-blue-600">MIGRATE</span> below to confirm and proceed.

     

···

       
14
       
14
       
 
       
            <p class="font-mono text-lg sm:text-xl font-bold mb-4 sm:mb-6 mt-0 text-center text-gray-600 dark:text-gray-300">

     

       
15
       
15
       
 
       
              Your terminal for seamless AT Protocol PDS migration and backup.

     

       
16
       
16
       
 
       
            </p>

     

       
17
       
17
       
+
       
            <p class="font-mono mb-4 sm:mb-6 mt-0 text-center text-gray-600 dark:text-gray-300">

     

       
18
       
18
       
+
       
              Airport is in <strong>alpha</strong> currently, and we don't recommend it for main accounts. <br/> Please use its migration tools at your own risk.

     

       
19
       
19
       
+
       
            </p>

     

       
17
       
20
       
 
       


     

       
18
       
21
       
 
       
            <Ticket />

     

       
19
       
22
       
 
       


     
···

       
24
       
27
       
 
       
                label="BEGIN YOUR JOURNEY"

     

       
25
       
28
       
 
       
              />

     

       
26
       
29
       
 
       
            </div>

     

       
27
       
27
       
-
       


     

       
30
       
30
       
+
       
            <p class="font-mono text-lg sm:text-xl mb-4 mt-4 sm:mb-6 mt-0 text-center text-gray-600 dark:text-gray-300">

     

       
31
       
31
       
+
       
              Airport is made with love by <a class="text-blue-500 hover:underline" href="https://bsky.social/profile/knotbin.com">Roscoe</a> in collaboration with <a class="text-blue-500 hover:underline" href="https://sprk.so">Spark</a>.

     

       
32
       
32
       
+
       
            </p>

     

       
28
       
33
       
 
       
            <SocialLinks />

     

       
29
       
34
       
 
       
          </div>

     

       
30
       
35
       
 
       
        </div>

     

···

       
1
       
1
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-20 -20 296 266" fill="none">

     

       
2
       
2
       
+
       
  <path 

     

       
3
       
3
       
+
       
    d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"

     

       
4
       
4
       
+
       
    stroke="currentColor"

     

       
5
       
5
       
+
       
    stroke-width="25"

     

       
6
       
6
       
+
       
    fill="none"

     

       
7
       
7
       
+
       
    stroke-linejoin="round"

     

       
8
       
8
       
+
       
  />

     

       
9
       
9
       
+
       
</svg>