chore: add skeleton widget to nextjs example

lifinance · May 13, 2024 · e2e53d5 · e2e53d5
1 parent 489a58b
commit e2e53d5
Show file tree

Hide file tree

Showing 3 changed files with 600 additions and 3,918 deletions.
diff --git a/examples/nextjs/app/components/Widget.tsx b/examples/nextjs/app/components/Widget.tsx
@@ -1,25 +1,29 @@
 'use client';
 
-import { LiFiWidget } from '@lifi/widget';
+import type { WidgetConfig } from '@lifi/widget';
+import { LiFiWidget, WidgetSkeleton } from '@lifi/widget';
 import { useEffect, useState } from 'react';
 
 export function Widget() {
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
+
+  const config = {
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+        borderRadius: '16px',
+      },
+    },
+  } as Partial<WidgetConfig>;
+
   return (
     <main>
-      {mounted && (
-        <LiFiWidget
-          config={{
-            theme: {
-              container: {
-                boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
-                borderRadius: '16px',
-              },
-            },
-          }}
-          integrator="nextjs-example"
-        />
+      {mounted ? (
+        <LiFiWidget config={config} integrator="nextjs-example" />
+      ) : (
+        <WidgetSkeleton config={config} />
       )}
     </main>
   );

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@lifi/sdk": "^3.0.0-alpha.58",
-    "@lifi/widget": "^3.0.0-alpha.37",
+    "@lifi/sdk": "^3.0.0-alpha.61",
+    "@lifi/widget": "^3.0.0-alpha.40",
     "next": "14.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"