Skip to content

Commit

Permalink
Fix tutorials light theme (#583)
Browse files Browse the repository at this point in the history
* Pull code examples from fix-light-theme branches

* Edit tutorials to reflect changes

* Pull next.config.mjs from passkeys tutorial

* Fix typo

* Implement requested changes

* Minor fixes

* Get SafeThemeProvider from passkeys react repo

* Implement requested changes

* Upgrade dependencies

* Get latest changes from nuxt repo
  • Loading branch information
louis-md authored Sep 18, 2024
1 parent 2ade6a8 commit 3b2c3d8
Show file tree
Hide file tree
Showing 21 changed files with 6,247 additions and 7,439 deletions.
11 changes: 8 additions & 3 deletions .github/scripts/generateCodeExamples.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@ const repos = [
'/lib/mintNFT.ts',
'/components/LoginWithPasskey.tsx',
'/components/SafeAccountDetails.tsx',
'/components/SafeThemeProvider.tsx',
'/app/page.tsx',
'/app/layout.tsx'
'/app/layout.tsx',
'/app/globals.css',
'/next.config.mjs'
]
},
{
Expand Down Expand Up @@ -43,7 +46,9 @@ const repos = [
'/lib/scheduledTransfers.ts',
'/components/ScheduledTransferForm.tsx',
'/app/page.tsx',
'/app/layout.tsx'
'/app/layout.tsx',
'/app/globals.css',
'/next.config.mjs'
]
}
]
Expand All @@ -70,7 +75,7 @@ const generateCodeExamples = async ({
}
fs.writeFileSync(destination + filePath, text)
})
.catch((res) => {
.catch(res => {
console.error('Error fetching file for', filePath, ':', res.statusText)
})
})
Expand Down
Binary file modified assets/next.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions examples/erc-7579/app/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
html,
body {
max-width: 100vw;
overflow-x: hidden;
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}

a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
svg {
fill: white;
}
}

h1,
h2,
h3 {
margin-top: 40px;
margin-bottom: 10px;
}

button {
cursor: pointer;
border: none;
background: #00e673;
color: black;
padding: 10px 20px;
border-radius: 5px;
margin: 10px 0;
}

input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 10px 0;
}

button:disabled {
background: #ccc;
color: #666;
}
24 changes: 7 additions & 17 deletions examples/erc-7579/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Img from 'next/image'

import ExternalLink from '../public/external-link.svg'
import Github from '../public/github.svg'
import Safe from '../public/safe.svg'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })
Expand All @@ -26,7 +29,7 @@ export default function RootLayout ({
}}
>
<a href='https://safe.global'>
<Img width={95} height={36} alt='safe-logo' src='/safe.svg' />
<Safe width={95} height={36} />
</a>
<div style={{ display: 'flex' }}>
<a
Expand All @@ -37,27 +40,14 @@ export default function RootLayout ({
marginRight: '1rem'
}}
>
Read tutorial{' '}
<Img
width={20}
height={20}
alt='link-icon'
src='/external-link.svg'
style={{ marginLeft: '0.5rem' }}
/>
Read tutorial <ExternalLink style={{ marginLeft: '0.5rem' }} />
</a>
<a
href='https://github.com/5afe/safe-tutorial-7579'
style={{ display: 'flex', alignItems: 'center' }}
>
View on GitHub{' '}
<Img
width={24}
height={24}
alt='github-icon'
src='/github.svg'
style={{ marginLeft: '0.5rem' }}
/>
<Github width={24} height={24} style={{ marginLeft: '0.5rem' }} />
</a>
</div>
</nav>
Expand Down
36 changes: 36 additions & 0 deletions examples/erc-7579/next.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack (config, { isServer }) {
// Configures webpack to handle SVG files with SVGR. SVGR optimizes and transforms SVG files
// into React components. See https://react-svgr.com/docs/next/

// Grab the existing rule that handles SVG imports
// @ts-ignore - rules is a private property that is not typed
const fileLoaderRule = config.module.rules.find(rule =>
rule.test?.test?.('.svg')
)

config.module.rules.push(
// Reapply the existing rule, but only for svg imports ending in ?url
{
...fileLoaderRule,
test: /\.svg$/i,
resourceQuery: /url/ // *.svg?url
},
// Convert all other *.svg imports to React components
{
test: /\.svg$/i,
issuer: fileLoaderRule.issuer,
resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
use: ['@svgr/webpack']
}
)

// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i

return config
}
}

export default nextConfig
2 changes: 1 addition & 1 deletion examples/passkeys-vue/components/LoginWithPasskey.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ async function showSafeInfo(passkey: PasskeyArgType) {
<template>
<div
v-if="Object.keys(store.selectedPasskey).length === 0"
class="mt-20 bg-stone-800 p-8 rounded w-fit flex flex-col items-center"
class="mt-20 dark:bg-stone-800 bg-stone-50 p-8 rounded w-fit flex flex-col items-center"
>
<h1 class="text-4xl text-[#12FF80]">Use Safe Account via Passkeys</h1>
<h2 class="my-12">Create a new Safe using Passkeys</h2>
Expand Down
25 changes: 12 additions & 13 deletions examples/passkeys-vue/components/SafeAccountDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ async function handleMintNFT() {
store.setIsLoading(false);
store.setIsSafeDeployed(true);
store.setUserOp(userOp);
store.setJiffyLink(`https://jiffyscan.xyz/userOpHash/${userOp}?network=${CHAIN_NAME}`);
store.setSafeLink(`https://app.safe.global/home?safe=sep:${store.safeAddress}`);
}
const DEFAULT_CHAR_DISPLAYED = 6;
Expand All @@ -25,34 +27,30 @@ function splitAddress(
return `${firstPart}...${lastPart}`;
}
const safeLink = `https://app.safe.global/home?safe=sep:${store.safeAddress}`;
const jiffscanLink = `https://jiffyscan.xyz/userOpHash/${store.userOp}?network=${CHAIN_NAME}`;
</script>

<template>
<div
v-if="Object.keys(store.selectedPasskey).length !== 0"
class="mt-20 bg-stone-800 p-8 rounded w-fit flex flex-col items-center"
class="mt-20 dark:bg-stone-800 bg-stone-50 p-8 rounded w-fit flex flex-col items-center"
>
<h1 class="text-4xl text-[#12FF80]">Your Safe Accout</h1>
<UIcon
v-if="store.isLoading"
name="line-md:loading-loop"
class="mt-4 w-12 h-12 bg-[#12FF80]"
/>
<UIcon v-if="store.isLoading" name="line-md:loading-loop" class="mt-4 w-12 h-12" />
<div v-if="!store.isLoading" class="flex flex-col items-center">
<UButton
variant="link"
color="white"
v-if="store.safeAddress"
class="my-8"
:to="safeLink"
:to="store.safeLink"
target="_blank"
rel="noopener noreferrer"
>
<template #leading><img src="/safeLogo.png" class="w-8 h-8" /> </template
<template #leading><UIcon name="token:safe" class="h-8 w-8" /> </template
>{{ splitAddress(store.safeAddress) }}
<template #trailing><img src="/external-link.svg" class="w-5 h-5" /> </template>
<template #trailing
><UIcon name="tabler:external-link" class="w-5 h-5" />
</template>
</UButton>
<UBadge
v-if="store.safeAddress && !store.isSafeDeployed"
Expand All @@ -74,11 +72,12 @@ const jiffscanLink = `https://jiffyscan.xyz/userOpHash/${store.userOp}?network=$
color="white"
v-if="store.userOp"
class="my-8"
:to="jiffscanLink"
:to="store.jiffyLink"
target="_blank"
rel="noopener noreferrer"
>{{ store.userOp }}
<template #trailing><img src="/external-link.svg" class="w-5 h-5" /> </template
<template #trailing>
<UIcon name="tabler:external-link" class="w-5 h-5" /> </template
></UButton>
</div>
</div>
Expand Down
26 changes: 3 additions & 23 deletions examples/passkeys-vue/layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,29 +1,9 @@
<script setup lang="ts">
const links = [
{
label: "Docs",
icon: "i-heroicons-book-open",
to: "/getting-started",
},
{
label: "Pro",
icon: "i-heroicons-square-3-stack-3d",
to: "/pro",
},
{
label: "Releases",
icon: "i-heroicons-rocket-launch",
to: "/releases",
},
];
</script>

<template>
<div class="p-6">
<header>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="/safe.svg" class="w-24 h-9" />
<UIcon name="SafeIcon" class="dark:white black h-9 w-24" />
</div>
<div class="flex items-center">
<UButton
Expand All @@ -36,7 +16,7 @@ const links = [
>
Read tutorial
<template #trailing>
<img src="/external-link.svg" class="w-5 h-5" />
<UIcon name="tabler:external-link" class="dark:white black h-6 w-6"/>
</template>
</UButton>
<UButton
Expand All @@ -49,7 +29,7 @@ const links = [
>
View on GitHub
<template #trailing>
<img src="/github.svg" class="w-7 h-7" />
<UIcon name="uil:github" class="dark:white black h-6 w-6" />
</template>
</UButton>
</div>
Expand Down
10 changes: 9 additions & 1 deletion examples/passkeys-vue/stores/safe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export const useSafeStore = defineStore('safe', {
safeAddress: <string>(''),
isSafeDeployed: <boolean>(false),
isLoading: <boolean>(false),
userOp: <string>('')
userOp: <string>(''),
jiffyLink: <string>(''),
safeLink: <string>(''),
}),
actions: {
setPasskeys(data: PasskeyArgType[]) {
Expand All @@ -27,6 +29,12 @@ export const useSafeStore = defineStore('safe', {
},
setUserOp(data: string) {
this.userOp = data
},
setSafeLink(data: string) {
this.safeLink = data
},
setJiffyLink(data: string) {
this.jiffyLink = data
}
}
})
58 changes: 58 additions & 0 deletions examples/passkeys/app/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
html,
body {
max-width: 100vw;
overflow-x: hidden;
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}

a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
svg {
fill: white;
}
}

h1,
h2,
h3 {
margin-top: 40px;
margin-bottom: 10px;
}

button {
cursor: pointer;
border: none;
background: #00e673;
color: black;
padding: 10px 20px;
border-radius: 5px;
margin: 10px 0;
}

input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 10px 0;
}

button:disabled {
background: #ccc;
color: #666;
}
Loading

0 comments on commit 3b2c3d8

Please sign in to comment.