fix: session key

openfort-xyz · Nov 26, 2024 · 330a22a · 330a22a
1 parent 58be62b
commit 330a22a
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 57 deletions.
diff --git a/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx b/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx
@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import {useOpenfort} from '../../hooks/useOpenfort';
 import Loading from '../Loading';
+import { Button } from '../ui/button';
 
 const AccountRecovery: React.FC = () => {
   const {handleRecovery} = useOpenfort();
@@ -21,7 +22,7 @@ const AccountRecovery: React.FC = () => {
         <div className="mb-5 flex justify-center items-center">
           <div className="w-full">
             <div className="flex justify-center items-center">
-              <button
+              <Button
                 type="button"
                 disabled={loadingPwd}
                 className="bg-black text-white p-2.5 rounded-lg w-full"
@@ -37,7 +38,7 @@ const AccountRecovery: React.FC = () => {
                 }}
               >
                 {loadingPwd ? <Loading /> : 'Continue with Password Recovery'}
-              </button>
+              </Button>
             </div>
             <div className="relative my-10">
               <div className="absolute inset-0 flex items-center">
@@ -48,7 +49,8 @@ const AccountRecovery: React.FC = () => {
               </div>
             </div>
             <div className="flex justify-center items-center mt-2">
-              <button
+              <Button
+                variant="outline"
                 type="button"
                 disabled={loadingAut}
                 className="bg-white text-black p-2.5 border border-gray-200 rounded-lg w-full hover:bg-gray-100"
@@ -59,7 +61,7 @@ const AccountRecovery: React.FC = () => {
                 }}
               >
                 {loadingAut ? <Loading /> : 'Continue with Automatic Recovery'}
-              </button>
+              </Button>
             </div>
           </div>
         </div>

diff --git a/examples/apps/auth-sample/src/components/Logout.tsx b/examples/apps/auth-sample/src/components/Logout.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {useOpenfort} from '../hooks/useOpenfort';
 import {useRouter} from 'next/router';
+import { Button } from './ui/button';
 
 const LogoutButton: React.FC = () => {
   const {logout} = useOpenfort();
@@ -16,12 +17,12 @@ const LogoutButton: React.FC = () => {
   };
 
   return (
-    <button
+    <Button
+      variant="destructive"
       onClick={handleLogout}
-      className="px-4 py-2 hover:bg-red-500 hover:text-white font-semibold rounded border text-red-600 border-red-600 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50 transition-colors duration-200"
     >
       Logout
-    </button>
+    </Button>
   );
 };
 

diff --git a/examples/apps/auth-sample/src/components/SessionKey/BackendMintButton.tsx b/examples/apps/auth-sample/src/components/SessionKey/BackendMintButton.tsx
@@ -4,6 +4,7 @@ import openfort from '../../utils/openfortConfig';
 import { Button } from '../ui/button';
 import { privateKeyToAccount } from 'viem/accounts';
 import { createWalletClient, http } from 'viem';
+import { polygonAmoy } from 'viem/chains';
 
 const BackendMintButton: React.FC<{
   handleSetMessage: (message: string) => void;
@@ -30,6 +31,7 @@ const BackendMintButton: React.FC<{
     const collectResponseJSON = await collectResponse.json();
     const walletClient = createWalletClient({
       account: privateKeyToAccount(sessionKey),
+      chain: polygonAmoy,
       transport: http()
     })
     const signature = await walletClient.signMessage({message: {raw: collectResponseJSON.userOperationHash}});

diff --git a/examples/apps/auth-sample/src/components/SessionKey/EIP1193CreateSessionButton.tsx b/examples/apps/auth-sample/src/components/SessionKey/EIP1193CreateSessionButton.tsx
@@ -34,7 +34,12 @@ const EIP1193CreateSessionButton: React.FC<{
     }).extend(erc7715Actions()) 
     const [account] = await walletClient.getAddresses()
     await walletClient.grantPermissions({
-      account: accountSession,
+      signer:{
+        type: "account",
+        data:{
+          id: accountSession
+        }
+      },
       expiry: 60 * 60 * 24,
       permissions: [
         {

diff --git a/examples/apps/auth-sample/src/pages/forgot-password.tsx b/examples/apps/auth-sample/src/pages/forgot-password.tsx
@@ -5,14 +5,14 @@ import Link from 'next/link';
 import {useRouter} from 'next/router';
 
 import {AuthLayout} from '../components/Layouts/AuthLayout';
-import {Button} from '../components/Button';
 import {TextField} from '../components/Fields';
 
 import {StatusType, Toast} from '../components/Toasts';
 
 import openfort from '../utils/openfortConfig';
 import {getURL} from '../utils/getUrl';
 import {AuthPlayerResponse} from '@openfort/openfort-js';
+import { Button } from '@/components/ui/button';
 
 function ForgotPasswordPage() {
   const router = useRouter();
@@ -99,7 +99,7 @@ function ForgotPasswordPage() {
               required
             />
           </div>
-          <Button type="submit" color="orange" className="mt-8 w-full py-2">
+          <Button type="submit" className="mt-8 w-full py-2">
             Send Reset Email
           </Button>
         </form>

diff --git a/examples/apps/auth-sample/src/pages/index.tsx b/examples/apps/auth-sample/src/pages/index.tsx
@@ -75,7 +75,6 @@ const HomePage: NextPage = () => {
             Welcome, {user?.player?.name ?? user?.id}!
           </p>
           <div className="absolute top-2 right-2">
-            {' '}
             <LogoutButton />
           </div>
           <div className="mt-8">

diff --git a/examples/apps/auth-sample/src/pages/login.tsx b/examples/apps/auth-sample/src/pages/login.tsx
@@ -3,16 +3,15 @@ import Head from 'next/head';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {AuthLayout} from '../components/Layouts/AuthLayout';
-import {Button, LinkButton} from '../components/Button';
 import {TextField} from '../components/Fields';
 import {StatusType, Toast} from '../components/Toasts';
 import openfort from '../utils/openfortConfig';
 import {getURL} from '../utils/getUrl';
 import {
   AuthPlayerResponse,
   OAuthProvider,
-  ThirdPartyOAuthProvider,
 } from '@openfort/openfort-js';
+import { Button } from '@/components/ui/button';
 
 function LoginPage() {
   const router = useRouter();
@@ -115,7 +114,7 @@ function LoginPage() {
         }
       >
         <form onSubmit={handleSubmit}>
-          <div className="space-y-6">
+          <div className="space-y-3">
             <TextField
               label="Email address"
               id="email"
@@ -135,16 +134,20 @@ function LoginPage() {
               required
             />
             <div className="flex w-full flex-row-reverse ">
-              <LinkButton
-                variant="text"
-                href="/forgot-password"
-                className="text-sm font-medium text-blue-600"
+              <Button
+                variant="link"
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  router.push('/forgot-password')
+                }}
+                className="text-blue-600"
               >
                 Forgot password?
-              </LinkButton>
+              </Button>
             </div>
           </div>
-          <Button type="submit" color="orange" className="mt-8 w-full py-2">
+          <Button type="submit" className="w-full">
             Sign in to account
           </Button>
         </form>
@@ -162,7 +165,7 @@ function LoginPage() {
 
           <div className="mt-6 grid grid-cols-1 gap-3">
             <div>
-              <button
+              <Button
                 onClick={async () => {
                   const {url} = await openfort.initOAuth({
                     provider: OAuthProvider.GOOGLE,
@@ -172,13 +175,14 @@ function LoginPage() {
                   });
                   window.location.href = url;
                 }}
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+                variant="outline"
+                className="w-full"
               >
                 <span>Continue with Google</span>
-              </button>
+              </Button>
             </div>
             <div>
-              <button
+              <Button
                 onClick={async () => {
                   const {url} = await openfort.initOAuth({
                     provider: OAuthProvider.TWITTER,
@@ -188,13 +192,14 @@ function LoginPage() {
                   });
                   window.location.href = url;
                 }}
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
-              >
+                variant="outline"
+                className="w-full"
+                >
                 <p>Continue with Twitter</p>
-              </button>
+              </Button>
             </div>
             <div>
-              <button
+              <Button
                 onClick={async () => {
                   const {url} = await openfort.initOAuth({
                     provider: OAuthProvider.FACEBOOK,
@@ -204,18 +209,20 @@ function LoginPage() {
                   });
                   window.location.href = url;
                 }}
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
-              >
+                variant="outline"
+                className="w-full"
+                >
                 <p>Continue with Facebook</p>
-              </button>
+              </Button>
             </div>
             <div>
-              <a
-                href="/connect-wallet"
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+              <Button
+              onClick={() => router.push('/connect-wallet')}
+                variant="outline"
+                className="w-full"
               >
                 <p>Continue with wallet</p>
-              </a>
+              </Button>
             </div>
           </div>
         </div>

diff --git a/examples/apps/auth-sample/src/pages/register.tsx b/examples/apps/auth-sample/src/pages/register.tsx
@@ -1,16 +1,15 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import {useEffect, useMemo, useState} from 'react';
-
 import {AuthLayout} from '../components/Layouts/AuthLayout';
-import {Button} from '../components/Button';
 import {TextField} from '../components/Fields';
 import openfort from '../utils/openfortConfig';
 import {CheckCircleIcon} from '@heroicons/react/24/outline';
 import {StatusType, Toast} from '../components/Toasts';
 import {AuthPlayerResponse, OAuthProvider} from '@openfort/openfort-js';
 import {useRouter} from 'next/router';
 import {getURL} from '../utils/getUrl';
+import { Button } from '@/components/ui/button';
 
 type ErrorType = string | null;
 
@@ -160,7 +159,7 @@ function RegisterPage() {
           </div>
         ) : (
           <form onSubmit={handleSubmit}>
-            <div className="grid grid-cols-2 gap-6">
+            <div className="grid grid-cols-2 gap-3">
               <TextField
                 label="First name"
                 id="first_name"
@@ -209,7 +208,7 @@ function RegisterPage() {
                 }
               </p>
             </div>
-            <Button type="submit" color="orange" className="mt-8 w-full py-2">
+            <Button type="submit" className="mt-8 w-full">
               Get started today
             </Button>
           </form>
@@ -228,7 +227,7 @@ function RegisterPage() {
 
           <div className="mt-6 grid grid-cols-1 gap-3">
             <div>
-              <button
+              <Button
                 onClick={async () => {
                   const {url} = await openfort.initOAuth({
                     provider: OAuthProvider.GOOGLE,
@@ -238,13 +237,14 @@ function RegisterPage() {
                   });
                   window.location.href = url;
                 }}
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+                className='w-full'
+                variant='outline'
               >
                 <span>Continue with Google</span>
-              </button>
+              </Button>
             </div>
             <div>
-              <button
+              <Button
                 onClick={async () => {
                   const {url} = await openfort.initOAuth({
                     provider: OAuthProvider.TWITTER,
@@ -254,13 +254,14 @@ function RegisterPage() {
                   });
                   window.location.href = url;
                 }}
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+                className='w-full'
+                variant='outline'
               >
                 <p>Continue with Twitter</p>
-              </button>
+              </Button>
             </div>
             <div>
-              <button
+              <Button
                 onClick={async () => {
                   const {url} = await openfort.initOAuth({
                     provider: OAuthProvider.FACEBOOK,
@@ -270,18 +271,20 @@ function RegisterPage() {
                   });
                   window.location.href = url;
                 }}
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+                className='w-full'
+                variant='outline'
               >
                 <p>Continue with Facebook</p>
-              </button>
+              </Button>
             </div>
             <div>
-              <a
-                href="/connect-wallet"
-                className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+              <Button
+                onClick={() => router.push('/connect-wallet')}
+                className='w-full'
+                variant='outline'
               >
                 <p>Continue with wallet</p>
-              </a>
+              </Button>
             </div>
           </div>
           <div>

diff --git a/sdk/src/evm/evmProvider.ts b/sdk/src/evm/evmProvider.ts
@@ -249,7 +249,7 @@ export class EvmProvider implements Provider {
           [hexlify(chainId)]: {
             permissions: {
               supported: true,
-              signerTypes: ['account'],
+              signerTypes: ['account', 'key'],
               keyTypes: ['secp256k1'],
               permissionTypes: ['contract-calls'],
             },