add skip widget

penumbra-zone · Nov 22, 2024 · f55de14 · f55de14
1 parent fe658e5
commit f55de14
Show file tree

Hide file tree

Showing 4 changed files with 14,438 additions and 2,788 deletions.
diff --git a/components/Deposit.tsx b/components/Deposit.tsx
@@ -1,29 +1,26 @@
+import React, { useState } from 'react';
+import { Widget } from '@skip-go/widget';
 import { client } from '@/components/penumbra';
 import { useQuestStore } from '@/components/store';
-import {
-  getAmountFromRecord,
-  getAssetIdFromRecord,
-} from '@penumbra-zone/getters/spendable-note-record';
 import { ViewService } from '@penumbra-zone/protobuf';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import type { CommitmentSource_Ics20Transfer } from '@penumbra-zone/protobuf/penumbra/core/component/sct/v1/sct_pb';
-import { AddressView } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb';
 import type { NotesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
-import { AddressViewComponent } from '@penumbra-zone/ui/AddressViewComponent';
 import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
 import { useQuery } from '@tanstack/react-query';
 import { capitalize } from 'es-toolkit';
 import { ChevronRightIcon } from 'lucide-react';
-import type React from 'react';
-import { useState } from 'react';
 import {
   useConnect,
   useCurrentChainStatus,
-  useEphemeralAddress,
   useNotes,
   useSetScanSinceBlock,
   useWalletManifests,
 } from './hooks';
+import {
+  getAmountFromRecord,
+  getAssetIdFromRecord,
+} from '@penumbra-zone/getters/spendable-note-record';
 
 const Deposit: React.FC = () => {
   useSetScanSinceBlock();
@@ -81,37 +78,47 @@ const Deposit: React.FC = () => {
     },
   });
 
-  const { data: ibcInAddress } = useEphemeralAddress({
-    index: 0,
-  });
+  const defaultRoute = {
+    srcChainId: 'noble-1',
+    srcAssetDenom: 'uusdc',
+    destChainId: 'penumbra-1',
+    destAssetDenom: 'ibc/F082B65C88E4B6D5EF1DB243CDA1D331D002759E938A0F5CD3FFDC5D53B3E349'
+  };
 
   return (
     <div className="py-3 flex flex-col gap-8">
       <div>
         The&nbsp;
         <a
           href="https://go.skip.build/"
-          className="font-medium underline"
+          className="font-medium text-blue-400 hover:text-blue-300 underline"
           target="_blank"
           rel="noopener noreferrer"
         >
           Skip App
         </a>
-        &nbsp; is an easy way to deposit funds into Penumbra.
+        &nbsp;makes it easy to deposit funds into Penumbra.
         Select a source asset and chain (e.g., USDC) and set Penumbra as the destination chain.
-        Then initiate the deposit and come back to this page.
+        Or use the widget below to start your deposit:
+      </div>
+
+      <div className="px-8">
+        <Widget
+          theme="dark"
+          brandColor="#3B82F6"
+          defaultRoute={defaultRoute}
+        />
       </div>
 
       {!isLoading &&
         wallets &&
         !connected &&
         Object.entries(wallets).map(([origin, manifest]) => (
-          // biome-ignore lint: no need for a type here
           <button
             key={origin}
             onClick={() => onConnect(origin)}
             disabled={connectionLoading}
-            className="bg-blue-700 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+            className="bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
           >
             {connectionLoading
               ? 'Connecting...'
@@ -120,9 +127,9 @@ const Deposit: React.FC = () => {
         ))}
 
       {notesWithMetadata.length === 0 && (
-        <div className="w-full bg-gray-700 text-white shadow-md rounded-lg p-4">
+        <div className="w-full bg-gray-900/20 border-2 border-gray-700 rounded-lg p-4">
           <div className="flex flex-row gap-3 items-center">
-            <div>Waiting for a deposit to occur</div>
+            <div className="text-gray-300">Waiting for a deposit to occur</div>
             <div className="animate-spin h-5 w-5 border-2 border-blue-500 rounded-full border-t-transparent" />
           </div>
         </div>
@@ -143,17 +150,17 @@ const Deposit: React.FC = () => {
         </div>
       )}
 
-      <div className={'flex items-center'}>
+      <div className="flex items-center">
         <input
           id="default-checkbox"
           checked={showOld}
-          type={'checkbox'}
+          type="checkbox"
           onChange={() => setShowOld((old) => !old)}
           className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
         />
         <label
           htmlFor="default-checkbox"
-          className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          className="ms-2 text-sm font-medium text-gray-300"
         >
           Show old deposits
         </label>
@@ -172,19 +179,19 @@ function DepositRow({
   const source = note.noteRecord?.source?.source
     ?.value as CommitmentSource_Ics20Transfer;
   const chainId = source.sender.replace(/^(\D+)(\d).*$/, '$1-$2');
-
   const chainName = capitalize(source.sender.replace(/^(\D+).*$/, '$1'));
+
   return (
     <div
-      className="mt-3 flex gap-3 items-center bg-gray-700 text-white p-3"
+      className="mt-3 flex gap-3 items-center bg-gray-900/20 border-2 border-gray-700 p-3 rounded-lg"
       key={note.toJsonString()}
     >
       Deposited
       <ValueViewComponent key={note.toJsonString()} valueView={valueView} />
       from {chainName}
       <ChevronRightIcon className="h-4 w-4" />
       <a
-        className="underline"
+        className="text-blue-400 hover:text-blue-300 underline"
         target="_blank"
         rel="noopener noreferrer"
         href={`https://ibc.range.org/ibc/status?id=${chainIdToExplorerChainName(chainId)}/${source.channelId}/${source.packetSeq}`}
@@ -204,4 +211,4 @@ function chainIdToExplorerChainName(chainId: string) {
   }
 }
 
-export default Deposit;
+export default Deposit;
diff --git a/components/Staking.tsx b/components/Staking.tsx
@@ -156,9 +156,8 @@ const Staking: React.FC = () => {
             >
               <p className="font-bold">Info</p>
               <p>
-                Delegation tokens are liquid - you can swap them the same way you
-                would other assets. They will also show up under your Balances in
-                frontends.
+                Delegation tokens are liquid - their value increases over time as you earn staking rewards.
+                They will also show up under your Balances in frontends.
               </p>
             </div>
           </div>

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@penumbra-zone/protobuf": "^6.1.0",
     "@penumbra-zone/transport-dom": "^7.5.0",
     "@penumbra-zone/ui": "^10.0.2",
+    "@skip-go/widget": "^3.0.15",
     "@tanstack/react-query": "^5.59.0",
     "es-toolkit": "^1.23.0",
     "lucide-react": "^0.451.0",