Feat/unlock integration

app/(general)/integration/unlock/[lockId]/page.tsx

@@ -3,7 +3,7 @@ import LockStats from '@/integrations/unlock/components/lock-stats'
 
 export default function UnlockLockPage({ params }: { params: { lockId: string } }) {
   return (
-    <div className="flex flex-col items-center justify-center">
+    <div className="flex flex-col items-center justify-center space-y-4">
       <h1 className="text-4xl font-bold">Lock Stats</h1>
       <LockStats lockId={params.lockId} />
       <ButtonKeyCheckout lockId={params.lockId} />

app/(general)/integration/unlock/page.tsx

@@ -1,30 +1,43 @@
+'use client'
+
 import { WalletConnect } from '@/components/blockchain/wallet-connect'
 import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
 import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
 import { Button } from '@/components/ui/button'
 import FormDeployLock from '@/integrations/unlock/components/form-deploy-lock'
 import UserKeys from '@/integrations/unlock/components/user-keys'
 import UserLocks from '@/integrations/unlock/components/user-locks'
+import useUnlockSuppertedNetworks from '@/integrations/unlock/hooks/use-unlock-supported-networks'
 
 export default function UnlockIntegration() {
+  const { isSupported } = useUnlockSuppertedNetworks()
+
   return (
     <div>
-      <div className="flex items-center justify-center">
+      <div className="flex items-center justify-center p-2">
         <a href="/integration/unlock/paywall">
           <Button>Paywall Example</Button>
         </a>
       </div>
       <IsWalletConnected>
-        <h1 className="p-4 text-center text-4xl font-bold">Create a Lock</h1>
-        <FormDeployLock />
-        <h1 className="p-4 text-center text-4xl font-bold">Created Locks</h1>
-        <UserLocks />
-        <h1 className="p-4 text-center text-4xl font-bold">Owned Keys</h1>
-        <UserKeys />
+        {isSupported ? (
+          <>
+            <h1 className="p-4 text-center text-4xl font-bold">Create a Lock</h1>
+            <FormDeployLock />
+            <h1 className="p-4 text-center text-4xl font-bold">Created Locks</h1>
+            <UserLocks />
+            <h1 className="p-4 text-center text-4xl font-bold">Owned Keys</h1>
+            <UserKeys />
+          </>
+        ) : (
+          <h1>Unsupported Network</h1>
+        )}
       </IsWalletConnected>
 
       <IsWalletDisconnected>
-        <WalletConnect />
+        <div className="p-2">
+          <WalletConnect />
+        </div>
       </IsWalletDisconnected>
     </div>
   )

integrations/unlock/README.md

@@ -12,13 +12,17 @@ The also includes an example of using a lock as a paywall, and will require the
 - Paywall example with an already deployed example lock
 - View lock statistics, and purchase keys from created locks.
 
+## Abis
+`publicLicV13Abi` and `unlockV12Abi` are abis for the unlock protocol contracts for 
+generating typesafe wagmi hooks
+
 ## Components
 
 `ButtonKeyCheckout()`
 Opens the checkout modal for a specified key.
 
 'FromDeployLock()'
-For to create and deploy new locks.
+For creating and deploying new locks.
 
 'KeyPreview()'
 Simply a preview card for the user keys list.
@@ -38,10 +42,14 @@ Displays all keys owned by the user for the connected chain.
 `UserLocks()`
 Displays all locks owned by the user for the connected chain.
 
+## Generated 
+Contains typesafe hooks generated by wagmi cli for unlock protocol contracts
+
 ## Hooks
 
-`UseDeployLock()`
-React hook to interact with unlock protocol smart contracts.
+`UseUnlockSupportedNetworks()`
+React hook to return is network is supported by unlock, and some unlock data for 
+that network
 
 `UseUnlockSubgraph()`
 React hook to interact with The Graph protocol, and query information