diff --git a/next.config.js b/next.config.js index 6a9a16a212e..2d823da3c35 100644 --- a/next.config.js +++ b/next.config.js @@ -59,6 +59,14 @@ module.exports = (phase, { defaultConfig }) => { // Modify the file loader rule to ignore *.svg, since we have it handled now. fileLoaderRule.exclude = /\.svg$/i + config.module.rules.push({ + test: /\.(mp3)$/, + type: "asset/resource", + generator: { + filename: "static/media/[name][ext]", + }, + }) + return config }, trailingSlash: true, diff --git a/package.json b/package.json index 8427d8927cd..4c806a5e087 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "ethereum-blockies-base64": "^1.0.2", "framer-motion": "^10.13.0", "gray-matter": "^4.0.3", + "howler": "^2.2.4", "htmr": "^1.0.2", "lodash.merge": "^4.6.2", "lodash.shuffle": "^4.2.0", diff --git a/public/content/smart-contracts/index.md b/public/content/smart-contracts/index.md index afda9c35ba6..c41be977982 100644 --- a/public/content/smart-contracts/index.md +++ b/public/content/smart-contracts/index.md @@ -7,6 +7,10 @@ lang: en # Introduction to smart contracts {#introduction-to-smart-contracts} +
+ +
+ Smart contracts are the fundamental building blocks of Ethereum's application layer. They are computer programs stored on the [blockchain](/glossary/#blockchain) that follow "if this then that" logic, and are guaranteed to execute according to the rules defined by its code, which cannot be changed once created. Nick Szabo coined the term "smart contract". In 1994, he wrote [an introduction to the concept](https://www.fon.hum.uva.nl/rob/Courses/InformationInSpeech/CDROM/Literature/LOTwinterschool2006/szabo.best.vwh.net/smart.contracts.html), and in 1996 he wrote [an exploration of what smart contracts could do](https://www.fon.hum.uva.nl/rob/Courses/InformationInSpeech/CDROM/Literature/LOTwinterschool2006/szabo.best.vwh.net/smart_contracts_2.html). diff --git a/public/content/web3/index.md b/public/content/web3/index.md index cbcfa0c5df8..40ca1f9fc4b 100644 --- a/public/content/web3/index.md +++ b/public/content/web3/index.md @@ -6,6 +6,10 @@ lang: en # Introduction to Web3 {#introduction} +
+ +
+ Centralization has helped onboard billions of people to the World Wide Web and created the stable, robust infrastructure on which it lives. At the same time, a handful of centralized entities have a stronghold on large swathes of the World Wide Web, unilaterally deciding what should and should not be allowed. Web3 is the answer to this dilemma. Instead of a Web monopolized by large technology companies, Web3 embraces decentralization and is being built, operated, and owned by its users. Web3 puts power in the hands of individuals rather than corporations. diff --git a/src/components/ListenToPlayer/ListenToPlayer.stories.tsx b/src/components/ListenToPlayer/ListenToPlayer.stories.tsx new file mode 100644 index 00000000000..7dcd83b55eb --- /dev/null +++ b/src/components/ListenToPlayer/ListenToPlayer.stories.tsx @@ -0,0 +1,46 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { langViewportModes } from "../../../.storybook/modes" +import { BaseLayout as BaseLayoutComponent } from "../../layouts/BaseLayout" + +import ListenToPlayer from "." + +const meta = { + title: "Atoms / Media & Icons / ListenToPlayer / ListenToPlayer", + component: BaseLayoutComponent, + parameters: { + layout: "fullscreen", + chromatic: { + modes: { + ...langViewportModes, + }, + }, + }, + argTypes: { + children: { + table: { + disable: true, + }, + }, + lastDeployLocaleTimestamp: { + table: { + disable: true, + }, + }, + }, +} satisfies Meta + +export default meta + +export const BaseLayout: StoryObj = { + args: { + children: ( +
+ +
+ ), + contentIsOutdated: false, + contentNotTranslated: false, + lastDeployLocaleTimestamp: "May 14, 2021", + }, +} diff --git a/src/components/ListenToPlayer/PlayerWidget/index.tsx b/src/components/ListenToPlayer/PlayerWidget/index.tsx new file mode 100644 index 00000000000..c2114e23c9b --- /dev/null +++ b/src/components/ListenToPlayer/PlayerWidget/index.tsx @@ -0,0 +1,330 @@ +import { useEffect, useRef, useState } from "react" +import { IoClose } from "react-icons/io5" + +import { + ArrowIcon, + AutoplayIcon, + CollapseIcon, + ExpandIcon, + PauseCircleIcon, + PlayCircleIcon, +} from "@/components/icons/listen-to" +import Tooltip from "@/components/Tooltip" + +import { cn } from "@/lib/utils/cn" +import { isMobile } from "@/lib/utils/isMobile" +import { trackCustomEvent } from "@/lib/utils/matomo" + +const PlayerButton = ({ + children, + tooltipContent, +}: { + children: React.ReactNode + tooltipContent: string +}) => { + return isMobile() ? ( + children + ) : ( + {children} + ) +} + +interface PlayerWidgetProps { + title: string + duration: number + timeRemaining: number + onSeek: (time: number) => void + isPlaying: boolean + handlePlayPause: () => void + autoplay: boolean + setAutoplay: (autoplay: boolean) => void + handlePrevious: () => void + handleNext: () => void + playbackSpeed: number + handlePlaybackSpeed: (playbackSpeed: number) => void + handleCloseWidget: () => void + isExpanded: boolean + setIsExpanded: (isExpanded: boolean) => void + currentTrackIndex: number + totalTracks: number +} + +const PlayerWidget = ({ + title, + duration, + timeRemaining, + onSeek, + isPlaying, + handlePlayPause, + autoplay, + setAutoplay, + handlePrevious, + handleNext, + playbackSpeed, + handlePlaybackSpeed, + handleCloseWidget, + isExpanded, + setIsExpanded, + currentTrackIndex, + totalTracks, +}: PlayerWidgetProps) => { + const [isDragging, setIsDragging] = useState(false) + const scrubBarRef = useRef(null) + const progress = + duration > 0 ? ((duration - timeRemaining) / duration) * 100 : 0 + const [showSpeedMenu, setShowSpeedMenu] = useState(false) + const speedMenuRef = useRef(null) + + const calculateNewTime = (clientX: number) => { + if (!scrubBarRef.current) return 0 + const rect = scrubBarRef.current.getBoundingClientRect() + const position = Math.max( + 0, + Math.min(1, (clientX - rect.left) / rect.width) + ) + return duration * position + } + + const handleMouseDown = (e: React.MouseEvent) => { + setIsDragging(true) + const newTime = calculateNewTime(e.clientX) + onSeek(newTime) + } + + const handleMouseMove = (e: MouseEvent) => { + if (!isDragging) return + const newTime = calculateNewTime(e.clientX) + onSeek(newTime) + } + + const handleMouseUp = () => { + setIsDragging(false) + } + + useEffect(() => { + if (isDragging) { + document.addEventListener("mousemove", handleMouseMove) + document.addEventListener("mouseup", handleMouseUp) + } + return () => { + document.removeEventListener("mousemove", handleMouseMove) + document.removeEventListener("mouseup", handleMouseUp) + } + }, [isDragging]) + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + speedMenuRef.current && + !speedMenuRef.current.contains(event.target as Node) + ) { + setShowSpeedMenu(false) + } + } + + document.addEventListener("mousedown", handleClickOutside) + return () => document.removeEventListener("mousedown", handleClickOutside) + }, []) + + const speedOptions = [0.5, 1.0, 1.5, 2.0] + + return ( +
+
+
+

{title}

+ + + +
+
+
+
= 0 ? progress : 0}%`, + }} + /> +
= 0 ? progress : 0}%`, + }} + /> +
+
+ {`${Math.floor(timeRemaining / 60)}:${String(Math.floor(timeRemaining % 60)).padStart(2, "0")}`} +
+
+
+
+ + + + {showSpeedMenu && ( +
+ {speedOptions.map((speed) => ( + + ))} +
+ )} +
+ + + + + + + + + + + + +
+
+ +
+
+ + + +
+ {`${Math.floor(timeRemaining / 60)}:${String(Math.floor(timeRemaining % 60)).padStart(2, "0")}`} +
+
+
+ + + + + + +
+
+
+ ) +} + +export default PlayerWidget diff --git a/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx b/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx new file mode 100644 index 00000000000..02fe5b93ddc --- /dev/null +++ b/src/components/ListenToPlayer/TopOfPagePlayer/index.tsx @@ -0,0 +1,59 @@ +import { PauseCircleIcon, PlayCircleIcon } from "@/components/icons/listen-to" + +import { trackCustomEvent } from "@/lib/utils/matomo" + +interface TopOfPagePlayerProps { + startedPlaying: boolean + isPlaying: boolean + duration: number + timeRemaining: number + handlePlayPause: () => void +} + +const TopOfPagePlayer = ({ + startedPlaying, + isPlaying, + duration, + timeRemaining, + handlePlayPause, +}: TopOfPagePlayerProps) => { + return ( +
+
{ + if (startedPlaying) { + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "start", + }) + } + handlePlayPause() + }} + > + {startedPlaying ? ( + isPlaying ? ( + + ) : ( + + ) + ) : ( + + )} +
+ {startedPlaying ? ( + `${Math.floor(timeRemaining / 60)}:${String(Math.floor(timeRemaining % 60)).padStart(2, "0")}` + ) : ( +

+ Listen to this article ( + {Math.round(duration / 60)} min) +

+ )} +
+
+
+ ) +} + +export default TopOfPagePlayer diff --git a/src/components/ListenToPlayer/index.tsx b/src/components/ListenToPlayer/index.tsx new file mode 100644 index 00000000000..6e012ad0917 --- /dev/null +++ b/src/components/ListenToPlayer/index.tsx @@ -0,0 +1,258 @@ +import { useContext, useEffect, useState } from "react" +import { Howl } from "howler" +import { Portal } from "@radix-ui/react-portal" + +import PlayerWidget from "@/components/ListenToPlayer/PlayerWidget" +import TopOfPagePlayer from "@/components/ListenToPlayer/TopOfPagePlayer" + +import { cn } from "@/lib/utils/cn" +import { trackCustomEvent } from "@/lib/utils/matomo" + +import { getPlaylistBySlug } from "@/data/listen-to-feature/playlist" + +import { FeedbackWidgetContext } from "@/contexts/FeedbackWidgetContext" +import { useTranslation } from "@/hooks/useTranslation" + +const ListenToPlayer = ({ slug }: { slug: string }) => { + const { setShowFeedbackWidget } = useContext(FeedbackWidgetContext) + const { playlist, index } = getPlaylistBySlug(slug) + + const { t } = useTranslation() + const [startedPlaying, setStartedPlaying] = useState(false) + const [isPlaying, setIsPlaying] = useState(false) + const [showWidget, setShowWidget] = useState(false) + const [sound, setSound] = useState(null) + const [timeRemaining, setTimeRemaining] = useState(0) + const [autoplay, setAutoplay] = useState(true) + const [playbackSpeed, setPlaybackSpeed] = useState(1) + const [currentTrackIndex, setCurrentTrackIndex] = useState(index) + const [countdown, setCountdown] = useState(0) + const [isExpanded, setIsExpanded] = useState(true) + const duration = sound?.duration() ?? 0 + + useEffect(() => { + setShowFeedbackWidget(!showWidget) + }, [showWidget, setShowFeedbackWidget]) + + useEffect(() => { + // Guard clause to prevent accessing playlist when empty + if (!playlist.length || currentTrackIndex === -1) return + + const audioPlayer = new Howl({ + src: [playlist[currentTrackIndex].audioFile], + html5: true, + onload: () => { + setSound(audioPlayer) + setTimeRemaining(audioPlayer.duration()) + }, + onplay: () => setIsPlaying(true), + onpause: () => setIsPlaying(false), + onend: () => { + // Only do countdown/timeout if track naturally ended (not manually skipped) + if ( + autoplay && + currentTrackIndex < playlist.length - 1 && + !sound?.playing() + ) { + setCountdown(5) + const countdownInterval = setInterval(() => { + setCountdown((prev) => Math.max(0, prev - 1)) + }, 1000) + const timer = setTimeout(() => { + clearInterval(countdownInterval) + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "automated_next", + eventName: `${currentTrackIndex + 1}`, + }) + setCurrentTrackIndex(currentTrackIndex + 1) + }, 5000) + return () => { + clearTimeout(timer) + clearInterval(countdownInterval) + } + } else { + setIsPlaying(false) + } + }, + }) + + return () => { + if (sound) { + sound.stop() + sound.unload() + } + audioPlayer.unload() + } + }, [currentTrackIndex]) + + useEffect(() => { + if (sound && autoplay && isPlaying) { + sound.play() + } + }, [sound]) + + useEffect(() => { + let intervalId: NodeJS.Timeout | null = null + + if (isPlaying && sound) { + intervalId = setInterval(() => { + const currentTime = sound.seek() + const remaining = duration - currentTime + setTimeRemaining(remaining) + }, 1000) + } + + return () => { + if (intervalId) { + clearInterval(intervalId) + } + } + }, [isPlaying, sound, duration]) + + useEffect(() => { + if (sound) { + sound.rate(playbackSpeed) + } + }, [playbackSpeed, sound]) + + const handlePlayPause = () => { + if (!sound) return + + if (isPlaying) { + sound.pause() + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "pause", + }) + } else { + sound.play() + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "play", + }) + setTimeRemaining(sound.duration() - sound.seek()) + setStartedPlaying(true) + setIsPlaying(true) + setShowWidget(true) + } + } + + const handleCloseWidget = () => { + setShowWidget(false) + sound?.pause() + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "close", + }) + } + + const handleSeek = (time: number) => { + if (!sound) return + sound.seek(time) + setTimeRemaining(duration - time) + } + + const handlePrevious = () => { + if (!sound) return + const currentTime = sound.seek() + + if (currentTime <= 3 && currentTrackIndex > 0) { + sound.stop() + sound.unload() + setSound(null) + setCurrentTrackIndex(currentTrackIndex - 1) + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "previous (previous track)", + }) + } else { + sound.seek(0) + setTimeRemaining(duration) + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "previous (current track)", + }) + } + } + + const handleNext = () => { + if (!sound) return + sound.stop() // Stop current sound + if (currentTrackIndex < playlist.length - 1) { + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: "next", + }) + setCurrentTrackIndex(currentTrackIndex + 1) // Directly go to next track + } else { + setIsPlaying(false) + } + } + + const handlePlaybackSpeed = (speed: number) => { + setPlaybackSpeed(speed) + trackCustomEvent({ + eventCategory: "Audio", + eventAction: "click", + eventName: `speed (${speed})`, + }) + } + + if (!playlist.length || index === -1) return null + + return ( + <> + + +
+
+ 0 + ? `${t(playlist[currentTrackIndex + 1].title)} in ${countdown}s` + : t(playlist[currentTrackIndex].title) + } + duration={duration} + timeRemaining={timeRemaining} + onSeek={handleSeek} + isPlaying={isPlaying} + handlePlayPause={handlePlayPause} + handlePrevious={handlePrevious} + handleNext={handleNext} + playbackSpeed={playbackSpeed} + handlePlaybackSpeed={handlePlaybackSpeed} + handleCloseWidget={handleCloseWidget} + currentTrackIndex={currentTrackIndex} + totalTracks={playlist.length} + /> +
+
+ + + ) +} + +export default ListenToPlayer diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 53910d76485..075b22741bb 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -105,7 +105,7 @@ const Tooltip = ({ {content} diff --git a/src/components/icons/listen-to/arrow.tsx b/src/components/icons/listen-to/arrow.tsx new file mode 100644 index 00000000000..f169203399c --- /dev/null +++ b/src/components/icons/listen-to/arrow.tsx @@ -0,0 +1,15 @@ +import { createIconBase } from "../icon-base" + +export const ArrowIcon = createIconBase({ + displayName: "ArrowIcon", + viewBox: "0 0 32 32", + fill: "fill-disabled", + children: ( + + + + ), +}) diff --git a/src/components/icons/listen-to/autoplay.tsx b/src/components/icons/listen-to/autoplay.tsx new file mode 100644 index 00000000000..b4f94e45ec4 --- /dev/null +++ b/src/components/icons/listen-to/autoplay.tsx @@ -0,0 +1,26 @@ +import { createIconBase } from "../icon-base" + +export const AutoplayIcon = createIconBase({ + displayName: "AutoplayIcon", + viewBox: "0 0 24 24", + children: ( + + + + + + + ), +}) diff --git a/src/components/icons/listen-to/collapse.tsx b/src/components/icons/listen-to/collapse.tsx new file mode 100644 index 00000000000..62751e36400 --- /dev/null +++ b/src/components/icons/listen-to/collapse.tsx @@ -0,0 +1,22 @@ +import { createIconBase } from "../icon-base" + +export const CollapseIcon = createIconBase({ + displayName: "CollapseIcon", + viewBox: "0 0 16 16", + children: ( + + + + + ), +}) diff --git a/src/components/icons/listen-to/expand.tsx b/src/components/icons/listen-to/expand.tsx new file mode 100644 index 00000000000..ac062c4f093 --- /dev/null +++ b/src/components/icons/listen-to/expand.tsx @@ -0,0 +1,22 @@ +import { createIconBase } from "../icon-base" + +export const ExpandIcon = createIconBase({ + displayName: "ExpandIcon", + viewBox: "0 0 16 16", + children: ( + + + + + ), +}) diff --git a/src/components/icons/listen-to/index.ts b/src/components/icons/listen-to/index.ts new file mode 100644 index 00000000000..0c98c5f8c4a --- /dev/null +++ b/src/components/icons/listen-to/index.ts @@ -0,0 +1,15 @@ +import { ArrowIcon } from "./arrow" +import { AutoplayIcon } from "./autoplay" +import { CollapseIcon } from "./collapse" +import { ExpandIcon } from "./expand" +import { PauseCircleIcon } from "./pause-circle" +import { PlayCircleIcon } from "./play-circle" + +export { + ArrowIcon, + AutoplayIcon, + CollapseIcon, + ExpandIcon, + PauseCircleIcon, + PlayCircleIcon, +} diff --git a/src/components/icons/listen-to/pause-circle.tsx b/src/components/icons/listen-to/pause-circle.tsx new file mode 100644 index 00000000000..a62585aeb52 --- /dev/null +++ b/src/components/icons/listen-to/pause-circle.tsx @@ -0,0 +1,18 @@ +import { createIconBase } from "../icon-base" + +export const PauseCircleIcon = createIconBase({ + displayName: "PauseCircleIcon", + viewBox: "0 0 24 24", + children: ( + + + + + ), +}) diff --git a/src/components/icons/listen-to/play-circle.tsx b/src/components/icons/listen-to/play-circle.tsx new file mode 100644 index 00000000000..ea1efad4936 --- /dev/null +++ b/src/components/icons/listen-to/play-circle.tsx @@ -0,0 +1,18 @@ +import { createIconBase } from "../icon-base" + +export const PlayCircleIcon = createIconBase({ + displayName: "PlayCircleIcon", + viewBox: "0 0 24 24", + children: ( + + + + + ), +}) diff --git a/src/contexts/FeedbackWidgetContext.tsx b/src/contexts/FeedbackWidgetContext.tsx new file mode 100644 index 00000000000..afc24a2136b --- /dev/null +++ b/src/contexts/FeedbackWidgetContext.tsx @@ -0,0 +1,25 @@ +import { createContext, useState } from "react" + +import { FeedbackWidgetContextType } from "@/lib/types" + +// Context API for /find-wallets language support filter +export const FeedbackWidgetContext = createContext({ + showFeedbackWidget: true, + setShowFeedbackWidget: () => {}, +}) + +export const FeedbackWidgetProvider = ({ + children, +}: { + children: React.ReactNode +}) => { + const [showFeedbackWidget, setShowFeedbackWidget] = useState(true) + + return ( + + {children} + + ) +} diff --git a/src/data/audio/eth/eth.mp3 b/src/data/audio/eth/eth.mp3 new file mode 100644 index 00000000000..a30926c40dc Binary files /dev/null and b/src/data/audio/eth/eth.mp3 differ diff --git a/src/data/audio/eth/script.md b/src/data/audio/eth/script.md new file mode 100644 index 00000000000..a4166cd8fcb --- /dev/null +++ b/src/data/audio/eth/script.md @@ -0,0 +1,25 @@ +What is ether, or eath? + +Today, we're diving deep into the world of Ether, the asset. Ether, commonly known as eath, is digital, global money. Its the currency for Ethereum applications and has several unique features that set it apart from traditional money. + +Here's what makes eath special: + +First,eath puts you in the driver's seat of your finances. Imagine being your own bank, with full control over your funds, no third parties can touch or control your money. You have complete control. eath lets you be your own bank - you control your funds without needing anyone else. + +Second, it's secure. While internet money might seem new, eath is protected by proven cryptography. + +Third, it enables direct peer-to-peer payments. You can send eath to anyone, anywhere, anytime, without going through a bank or other intermediary. + +eath is also decentralized and global. There's no company or bank that can simply decide to print more eath or change how it works. + +Anyone with an internet connection and a digital wallet can use eath. You don't even need a bank account. And you don't have to buy a whole eath - you can purchase as little as a fraction of one. + +What makes eath truly unique is its role in the Ethereum network. eath fuels and secures Ethereum by paying transaction fees when you use Ethereum applications, powering the network's security through staking, and Supporting Ethereum's decentralized financial system. + +Validators are like the record-keepers of Ethereum. They check and prove that no one is cheating. They are randomly selected to propose a block of transactions. Validators who do this work are also rewarded with small amounts of newly-issued eath. The work validators do, and the capital they stake, keeps Ethereum secure and free of centralized control. Eath powers Ethereum. + +Eath's value comes from its utility. It's essential for paying transaction fees on Ethereum, serves as a digital store of value, and acts as collateral in various financial applications. Eath is far more than just digital money. It's a revolutionary asset that's reshaping our understanding of finance, security, and global connectivity. + +But this is enough of theory, how will YOU take advantage of this new decentralized world? Are you ready to become independent? + + diff --git a/src/data/audio/smart-contracts/script.md b/src/data/audio/smart-contracts/script.md new file mode 100644 index 00000000000..ff958c4e497 --- /dev/null +++ b/src/data/audio/smart-contracts/script.md @@ -0,0 +1,17 @@ +Hey there, listeners! Today, we're diving into the fascinating world of smart contracts. + +Smart contracts are the fundamental building blocks of Ethereum's application layer. They are computer programs stored on the blockchain that follow "if this then that" logic, and are guaranteed to execute according to the rules defined by its code, which cannot be changed once created. Nick Szabo, who coined the term in 1994, envisioned a digital marketplace where automatic, cryptographically-secure processes enable transactions and business functions to happen without trusted intermediaries. Smart contracts on Ethereum put this vision into practice. + +One of the most basic examples of a smart contract is a vending machine. You put in money, select your item, and the machine automatically gives you what you paid for. No human needs to be involved, and it works the same way every time. Smart contracts work similarly - they're programs that automatically execute when specific conditions are met. + +There are several features of smart contracts that make them desirable. + +First, they're automatic and predictable. They deterministically execute code when certain conditions are met. There is no need to wait for a human to interpret or negotiate the result. This removes the need for trusted intermediaries. Traditional contracts are ambiguous because they rely on humans to interpret and implement them. For example, two judges might interpret a contract differently, which could lead to inconsistent decisions and unequal outcomes. Smart contracts remove this possibility. Instead, smart contracts execute precisely based on the conditions written within the contract's code. This precision means that given the same circumstances, the smart contract will produce the same result. + +Second, they're transparent. Anyone can verify what a smart contract will do before interacting with it, just like reading the terms of a regular contract. Smart contracts are also useful for audits and tracking. Since Ethereum smart contracts are on a public blockchain, anyone can instantly track asset transfers and other related information. For example, you can check to see that someone sent money to your address. + +Third, Smart contracts also protect your privacy. Since Ethereum is a pseudonymous network (your transactions are tied publicly to a unique cryptographic address, not your identity), you can protect your privacy from observers. + +Smart contracts are already being used in many exciting ways such as: Stablecoins, creating and distrubting unique digital assets, decentralized exchanges, gaming, insurance, and much more. + +In essence, smart contracts are revolutionizing how we think about agreements and automation in the digital age. They're making transactions more efficient, transparent, and trustworthy - all without requiring intermediaries. diff --git a/src/data/audio/smart-contracts/smart-contracts.mp3 b/src/data/audio/smart-contracts/smart-contracts.mp3 new file mode 100644 index 00000000000..d5a90f18a5a Binary files /dev/null and b/src/data/audio/smart-contracts/smart-contracts.mp3 differ diff --git a/src/data/audio/wallets/scripts.md b/src/data/audio/wallets/scripts.md new file mode 100644 index 00000000000..c61a8ca5706 --- /dev/null +++ b/src/data/audio/wallets/scripts.md @@ -0,0 +1,32 @@ +You are listening to "What are crypto wallets and why do you need one?" page. + +Wallets are applications that give you control over your Ethereum account. Just like your physical wallet, it contains everything you need to prove your identity and handle your assets. Your wallet allows you to sign into applications, read your balance, send transactions and verify your identity. + +Its important to know that wallet app providers don't have custody of your funds. They just provide you a window to see your assets on Ethereum and tools to easily manage them. + +That means you can swap wallet providers at any time and keep the same account. Many wallets also let you manage several different accounts from one application. + +To sum up what wallet is: + +An app for managing your funds +Your wallet shows your balances, transaction history and gives you a way to send/receive funds. Some wallets may offer more. + +Your Ethereum account +Your wallet is your window into your Ethereum account – your balance, transaction history and more. But you can swap wallet providers at any time. + +Your login for Ethereum apps +Your wallet lets you connect to applications using your Ethereum account. It's like a login you can use across many apps. + + +Now, let's clarify some important terms that often get mixed up. + +An Ethereum account is like your digital identity, made up of two important keys. A public key, which creates your address that you can share with others, and a private key, which must be kept secret as it's used to sign transactions. Think of these keys working together to help you manage your digital assets and make transactions. + +Your public key, also known as your Ethereum address works just like an email address - it's the public identifier for your digital assets. +You can freely share this public address with others when you want to receive funds or interact with blockchain applications. Make sure you do not share your private key with anyone else though. + +There are several types of wallets you can choose from. Hardware wallets are physical devices that keep your crypto offline for maximum security. Mobile wallets are applications that let you access your funds on your phone. Browser wallets are web applications for managing your account. Browser extensions are extensions that connect you to Ethereum through your web browser. Lastly, Desktop applications are programs for managing funds on your computer in a standalone application. + +It's important to reiterate: Your wallet doesn't actually hold your funds. Your wallet simply provides a window to view and manage your account on the Ethereum network. This also means that you can change which wallet you use at any time. + +In the world of cryptocurrency, you are your own bank. This means you're responsible for keeping your keys safe and secure. Never share your recovery phrase, also called a seed phrase, with anyone. Always write it down physically and store it in a safe place. And remember - triple check everything before making transactions, as they cannot be reversed. With great financial freedom comes great responsibility. diff --git a/src/data/audio/wallets/wallets.mp3 b/src/data/audio/wallets/wallets.mp3 new file mode 100644 index 00000000000..8cba77981a1 Binary files /dev/null and b/src/data/audio/wallets/wallets.mp3 differ diff --git a/src/data/audio/web3/script.md b/src/data/audio/web3/script.md new file mode 100644 index 00000000000..41f7bad9ae8 --- /dev/null +++ b/src/data/audio/web3/script.md @@ -0,0 +1,45 @@ +You are listening to "What is Web 3?" page. + +Centralization has helped onboard billions of people to the World Wide Web and created the stable, robust infrastructure on which it lives. At the same time, a handful of centralized entities have a stronghold on large swathes of the World Wide Web, unilaterally deciding what should and should not be allowed. + +Web3 is the answer to this dilemma. Instead of a Web monopolized by large technology companies, Web3 embraces decentralization and is being built, operated, and owned by its users. Web3 puts power in the hands of individuals rather than corporations. Before we talk about Web3, let's explore how we got here. + +The internet as we know it has evolved significantly over time. The web's journey can be divided into three main eras: + +Web 1.0, from 1990 to 2004, was known as the "Read-Only" web. Websites were static, and users could only consume content. + +Web 2.0, from 2004 to present, became the "Read-Write" web. Social media emerged, allowing users to create content and interact. However, large companies controlled most of the platforms and user data. + +Now, we're entering Web3, or the "Read-Write-Own" era. Web3 represents a vision for a better internet built on blockchain technology, where users have true ownership and control. With this new vision of the internet, the are some core principals that guide its creation. + +First, it's decentralized. Instead of big companies controlling everything, ownership is distributed among users and builders. + +Second, it's permissionless. Everyone can participate in Web3, with no exclusions. + +Third, it has native payments built-in through cryptocurrencies, eliminating the need for traditional banking infrastructure. + +Fourth, it's trustless, operating through economic incentives rather than relying on third parties. + +These core principals have allowed for some amazing features during web3's development as well. + +True digital ownership through NFTs (Non-Fungible Tokens) allows users to truly own digital assets. Unlike Web2 where your in-game items or digital art are controlled by companies, Web3 lets you own, sell, and transfer digital assets as easily as physical ones. + +Censorship resistance ensures content creators can't be silenced by centralized platforms. Once content is published on the blockchain, it becomes permanent and immutable, giving creators true freedom of expression. + +DAOs (Decentralized Autonomous Organizations) represent a new way of organizing communities and businesses. These digital-native organizations are owned and managed by their members, using smart contracts for transparent governance and decision-making. + +Digital identity in Web3 puts users in control of their personal data. Instead of having your identity scattered across different platforms, Web3 allows for self-sovereign identity where you decide what information to share. + +Native payments through cryptocurrencies enable borderless, instant transactions without intermediaries. This opens up new economic opportunities and makes financial services accessible to anyone with an internet connection. + +While there have been many advances and improvements to the web through Web3, there are several challenges we are faced with as well. + +Important Web3 features, like Sign-in with Ethereum, are already available for anyone to use at zero cost. But, the relative cost of transactions is still prohibitive to many. Web3 is less likely to be utilized in less-wealthy, developing nations due to high transaction fees. On Ethereum, these challenges are being solved through the roadmap and layer 2 scaling solutions. + +The technical barrier to entry to using Web3 is currently too high. Users must comprehend security concerns, understand complex technical documentation, and navigate unintuitive user interfaces. + +Web3 introduces new paradigms that require learning different mental models than the ones used in Web2.0. A similar education drive happened as Web1.0 was gaining popularity in the late 1990s; proponents of the world wide web used a slew of educational techniques to educate the public from simple metaphors (the information highway, browsers, surfing the web) to television broadcasts(opens in a new tab). Web3 isn't difficult, but it is different. Educational initiatives informing Web2 users of these Web3 paradigms are vital for its success. + +The Web3 ecosystem is young and quickly evolving. As a result, it currently depends mainly on centralized infrastructure (GitHub, Twitter, Discord, etc.). Many Web3 companies are rushing to fill these gaps, but building high-quality, reliable infrastructure takes time. + +Despite these challenges, Web3 represents an exciting future for the internet - one where users have more control, ownership, and freedom. diff --git a/src/data/audio/web3/web3.mp3 b/src/data/audio/web3/web3.mp3 new file mode 100644 index 00000000000..9b23e8fc55e Binary files /dev/null and b/src/data/audio/web3/web3.mp3 differ diff --git a/src/data/audio/what-is-ethereum/script.md b/src/data/audio/what-is-ethereum/script.md new file mode 100644 index 00000000000..acfca75e21f --- /dev/null +++ b/src/data/audio/what-is-ethereum/script.md @@ -0,0 +1,30 @@ +Ethereum is the main platform for thousands of applications and blockchains, all powered by the Ethereum protocol. This vibrant ecosystem fuels innovation and a wide range of decentralized applications and services. + +One of Ethereum's standout features is its ability to provide banking for anyone. In a world where not everyone has access to traditional financial services, Ethereum breaks down barriers by offering lending, borrowing, and savings products that are accessible with just an internet connection. This inclusivity opens up financial opportunities to individuals worldwide, regardless of their location or background. + +Ethereum also champions an open internet. It empowers anyone to interact with its network or build applications on top of it. This decentralization means that you have control over your own assets and identity, rather than relying on a handful of large corporations. By removing these centralized entities, Ethereum fosters a more equitable and transparent digital landscape. + +Let's explore the key differences between Ethereum and Bitcoin, two of the most prominent names in the cryptocurrency world. Launched in 2015, Ethereum builds upon the innovations introduced by Bitcoin but introduces some significant distinctions. Both Ethereum and Bitcoin allow you to use digital money without the need for payment providers or banks. However, Ethereum offers something more—it's programmable. + +This programmability means you can build and deploy decentralized applications, or dApps, right on the Ethereum network. Think of Bitcoin as a digital currency that lets you send and receive money without intermediaries. It's excellent for establishing value and handling transactions independently of traditional financial systems. On the other hand, Ethereum extends this functionality. Instead of just facilitating transactions, Ethereum allows you to write and execute any kind of program or contract. There's virtually no limit to the types of contracts you can create, which fosters a high level of innovation on the Ethereum network. While Bitcoin primarily serves as a payment network, focusing on digital money transactions, Ethereum functions more like a versatile marketplace. On Ethereum, you can find a wide array of financial services, games, social networks, and other applications all operating seamlessly together. This flexibility makes Ethereum a hub for diverse and innovative applications that go beyond just transferring digital currency. + +To understand Ethereum, it's essential to grasp the fundamentals of blockchain technology and cryptocurrency. A blockchain is a database of transactions that is updated and shared across many computers in a network. Every time a new set of transactions is added, its called a “block” - hence the name blockchain. Public blockchains like Ethereum allow anyone to add, but not remove, data. If someone wanted to alter any of the information or cheat the system, they’d need to do so on the majority of validators on the network. That is a lot! This makes decentralized blockchains like Ethereum highly secure. + +Cryptocurrency is a term used to describe many types of fungible digital tokens secured using a blockchain. The reason assets such as bitcoin and ether are called “cryptocurrencies” is that the security of your data and assets is guaranteed by cryptography, not by trusting an institution or corporation to act honestly. Ethereum has its own native cryptocurrency, ether also known as eath, which is used to pay for certain activities on the network. It can be transferred to other users or swapped for other tokens on Ethereum. Ether is special because it is used to pay for the computation required to build and run apps and organizations on Ethereum. + +Ethereum isn't controlled by any single organization or entity. Instead, it thrives on a network of connected computers, each running software that follows the Ethereum protocol and contributes to the blockchain. These computers are known as nodes, and anyone can operate one. In order to secure the network you will need to stake Ether, and can run a validator without permission. Even the Ethereum source code is not produced by a single entity. Anyone can suggest changes to the protocol and discuss upgrades. There are several implementations of the Ethereum protocol that are produced by independent organizations in several programming languages, and they are usually built in the open and encourage community contributions. + +Applications on Ethereum use smart contracts which are computer programs living on the Ethereum blockchain. They make Ethereum very flexible in what it can do. These programs act as building blocks for decentralized apps and organizations. Popular examples of smart contracts are lending apps, decentralized trading exchanges, insurance, quadratic funding, social networks, NFTs - basically anything you can think of. + +On September 15, 2022, Ethereum underwent a significant upgrade known as The Merge. This upgrade marked Ethereum's transition from a proof-of-work system to a proof-of-stake mechanism. The Merge stands as Ethereum's most substantial upgrade to date. It slashed the energy consumption required to secure the Ethereum network by an impressive 99.95%. This dramatic reduction not only makes Ethereum more environmentally friendly by lowering its carbon footprint but also enhances the network's security and scalability. With this transition, Ethereum has become a low-carbon blockchain, paving the way for a sustainable and robust future. + + +Operating as a peer-to-peer network, Ethereum allows you to coordinate, make agreements, or transfer digital assets directly with others without the need for intermediaries. This direct interaction not only streamlines processes but also reduces costs and increases efficiency in transactions and collaborations. + +Another significant advantage of Ethereum is its censorship-resistant nature. No government or company holds control over the Ethereum network, making it nearly impossible for anyone to prevent you from receiving payments or using services. This resilience ensures that your financial activities remain secure and uninterrupted. + +When it comes to commerce, Ethereum offers built-in guarantees that enhance trust between customers and developers. Customers can rest assured that funds will only be exchanged if the agreed-upon conditions are met, while developers can be confident that the rules governing their applications will remain consistent and unaltered. + +Lastly, Ethereum supports composable products, meaning all applications are built on the same blockchain with a shared global state. Think of it like Lego bricks—each app can build upon others, creating more complex and robust solutions. This interoperability not only leads to better products and user experiences but also ensures that essential tools and services remain accessible and cannot be removed by any single entity. + +So, Why Would I Use Ethereum? If you're looking for more resilient, open, and trustworthy ways to collaborate on a global scale, build organizations, create applications, or share value, Ethereum is the platform for you. Ethereum isn't just a technology—it's a collective story that we all contribute to. Join us and explore the incredible worlds we can create together. Ethereum has also been a lifeline for individuals who have faced uncertainty regarding the security, reliability, or flexibility of their assets due to factors beyond their control. By providing a decentralized and secure environment, Ethereum empowers people to manage their assets with confidence, free from external pressures and restrictions. diff --git a/src/data/audio/what-is-ethereum/what-is-ethereum.mp3 b/src/data/audio/what-is-ethereum/what-is-ethereum.mp3 new file mode 100644 index 00000000000..d1de632e907 Binary files /dev/null and b/src/data/audio/what-is-ethereum/what-is-ethereum.mp3 differ diff --git a/src/data/listen-to-feature/playlist.ts b/src/data/listen-to-feature/playlist.ts new file mode 100644 index 00000000000..8fa8171b438 --- /dev/null +++ b/src/data/listen-to-feature/playlist.ts @@ -0,0 +1,50 @@ +import ethAudio from "@/data/audio/eth/eth.mp3" +import smartContractsAudio from "@/data/audio/smart-contracts/smart-contracts.mp3" +import walletsAudio from "@/data/audio/wallets/wallets.mp3" +import web3Audio from "@/data/audio/web3/web3.mp3" +import whatIsEthereumAudio from "@/data/audio/what-is-ethereum/what-is-ethereum.mp3" + +export const listenToPlaylists = { + learn: [ + { + title: "what-is-ethereum", + audioFile: whatIsEthereumAudio, + slug: "/what-is-ethereum/", + }, + { + title: "what-is-ether", + audioFile: ethAudio, + slug: "/eth/", + }, + { + title: "wallets", + audioFile: walletsAudio, + slug: "/wallets/", + }, + { + title: "web3", + audioFile: web3Audio, + slug: "/web3/", + }, + { + title: "smart-contracts", + audioFile: smartContractsAudio, + slug: "/smart-contracts/", + }, + ], +} + +export const getPlaylistBySlug = ( + slug: string +): { + playlist: (typeof listenToPlaylists)[keyof typeof listenToPlaylists] + index: number +} => { + for (const playlist of Object.values(listenToPlaylists)) { + const index = playlist.findIndex((item) => item.slug === slug) + if (index !== -1) { + return { playlist, index } + } + } + return { playlist: [], index: -1 } +} diff --git a/src/data/placeholders/content-developers-tutorials-secret-state-data.json b/src/data/placeholders/content-developers-tutorials-secret-state-data.json new file mode 100644 index 00000000000..713e37013a9 --- /dev/null +++ b/src/data/placeholders/content-developers-tutorials-secret-state-data.json @@ -0,0 +1,6 @@ +{ + "/content/developers/tutorials/secret-state/mprocs.png": { + "hash": "be753fae", + "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAACXBIWXMAABYlAAAWJQFJUiTwAAABPklEQVR4nI2RzyvDYRzHP3+BkxOFRO2bgyQOtFBjl9lKkS0HSXJQIxdz0MTBfrX6jkhLhNTaQbaLy8xhReSmdnaQC+XAisNLz56mb5M4vHqe5/35PO/Pu+eR23fIFkHqvYg4kVoP7sQN9ugrMnWJ2A+QuSJNgUeal5+QniOkex/pPUFGLpD1HPiSaLFtE7HFGdp6Q0ZzxAowewzubYhc69WfAXGdI41ryOApIuMFfWjf0djiyOQdMpbHZYIj8slA+KNsJDP3uta1hximxcAwfxqoKXUr2lzRsIq0hDSV3j8NDIuuplb2in8lMCx6Nd8G6iVbo1pQqIi+K21g1atRtb4UUrP4gDgz+oLCmaGsqWTqq1TTb6jhS2fgT8FGHgJZGDZhIQ39oRLeXfAkwBEuMZGEzuAz82noCL4wfahrXx6wMi3U562tAAAAAElFTkSuQmCC" + } +} \ No newline at end of file diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx index 1e9ede5cbd1..965da0677c9 100644 --- a/src/layouts/BaseLayout.tsx +++ b/src/layouts/BaseLayout.tsx @@ -1,5 +1,5 @@ // import { join } from "path" - +import { useContext } from "react" import dynamic from "next/dynamic" import type { Root } from "@/lib/types" @@ -8,6 +8,8 @@ import Footer from "@/components/Footer" import Nav from "@/components/Nav" import { SkipLink } from "@/components/SkipLink" +import { FeedbackWidgetContext } from "@/contexts/FeedbackWidgetContext" + // import TranslationBanner from "@/components/TranslationBanner" // import TranslationBannerLegal from "@/components/TranslationBannerLegal" // import { toPosixPath } from "@/lib/utils/relativePath" @@ -23,6 +25,7 @@ export const BaseLayout = ({ // contentNotTranslated, lastDeployLocaleTimestamp, }: Root) => { + const { showFeedbackWidget } = useContext(FeedbackWidgetContext) // const { locale, asPath } = useRouter() // const CONTRIBUTING = "/contributing/" @@ -76,7 +79,7 @@ export const BaseLayout = ({ * layout on initial load. */} - + {showFeedbackWidget && } ) } diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx index b4c75952e3d..e79b39dbc3b 100644 --- a/src/layouts/Static.tsx +++ b/src/layouts/Static.tsx @@ -13,6 +13,7 @@ import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition" import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip" import { HubHero } from "@/components/Hero" import NetworkUpgradeSummary from "@/components/History/NetworkUpgradeSummary" +import ListenToPlayer from "@/components/ListenToPlayer" import Logo from "@/components/Logo" import MainArticle from "@/components/MainArticle" import MatomoOptOut from "@/components/MatomoOptOut" @@ -70,6 +71,7 @@ export const staticComponents = { SocialListItem, TranslationChartImage, UpcomingEventsList, + ListenToPlayer, } type StaticLayoutProps = ChildOnlyProp & diff --git a/src/lib/types.ts b/src/lib/types.ts index 7557f139428..0ddcade77bc 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -814,6 +814,11 @@ export type WalletSupportedLanguageContextType = { setSupportedLanguage: (language: string) => void } +export type FeedbackWidgetContextType = { + showFeedbackWidget: boolean + setShowFeedbackWidget: (showFeedbackWidget: boolean) => void +} + // Historical upgrades type NetworkUpgradeDetails = { blockNumber?: number diff --git a/src/pages/[locale]/eth.tsx b/src/pages/[locale]/eth.tsx index 1a68b49db57..5a0e84398eb 100644 --- a/src/pages/[locale]/eth.tsx +++ b/src/pages/[locale]/eth.tsx @@ -13,6 +13,7 @@ import FeedbackCard from "@/components/FeedbackCard" import HorizontalCard from "@/components/HorizontalCard" import { Image } from "@/components/Image" import InfoBanner from "@/components/InfoBanner" +import ListenToPlayer from "@/components/ListenToPlayer" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget" @@ -33,6 +34,7 @@ import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants" import { useTranslation } from "@/hooks/useTranslation" import loadNamespaces from "@/i18n/loadNamespaces" +import { usePathname } from "@/i18n/routing" import eth from "@/public/images/eth.png" import ethCat from "@/public/images/eth-gif-cat.png" import defi from "@/public/images/finance_transparent.png" @@ -206,6 +208,7 @@ export const getStaticProps = (async ({ params }) => { const EthPage = () => { const { t } = useTranslation("page-eth") + const pathname = usePathname() const tokens = [ { @@ -331,6 +334,9 @@ const EthPage = () => { +
+ +
{t("page-eth-description")} diff --git a/src/pages/[locale]/wallets/index.tsx b/src/pages/[locale]/wallets/index.tsx index 2cf49efca44..e28bca90d7b 100644 --- a/src/pages/[locale]/wallets/index.tsx +++ b/src/pages/[locale]/wallets/index.tsx @@ -10,6 +10,7 @@ import CardList from "@/components/CardList" import FeedbackCard from "@/components/FeedbackCard" import HorizontalCard from "@/components/HorizontalCard" import { Image } from "@/components/Image" +import ListenToPlayer from "@/components/ListenToPlayer" import MainArticle from "@/components/MainArticle" import PageHero from "@/components/PageHero" import PageMetadata from "@/components/PageMetadata" @@ -31,6 +32,7 @@ import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants" import { useTranslation } from "@/hooks/useTranslation" import loadNamespaces from "@/i18n/loadNamespaces" +import { usePathname } from "@/i18n/routing" import DappsImage from "@/public/images/doge-computer.png" import ETHImage from "@/public/images/eth-logo.png" import FindWalletImage from "@/public/images/wallets/find-wallet.png" @@ -75,6 +77,7 @@ export const getStaticProps = (async ({ params }) => { }) satisfies GetStaticProps const WalletsPage = () => { + const pathname = usePathname() const locale = useLocale() const { t } = useTranslation("page-wallets") @@ -225,6 +228,9 @@ const WalletsPage = () => {
+
+ +

{t("page-wallets-whats-a-wallet")} diff --git a/src/pages/[locale]/what-is-ethereum.tsx b/src/pages/[locale]/what-is-ethereum.tsx index 62ee0ffe105..4196096120c 100644 --- a/src/pages/[locale]/what-is-ethereum.tsx +++ b/src/pages/[locale]/what-is-ethereum.tsx @@ -25,6 +25,7 @@ import Card from "@/components/Card" import EnergyConsumptionChart from "@/components/EnergyConsumptionChart" import FeedbackCard from "@/components/FeedbackCard" import { Image } from "@/components/Image" +import ListenToPlayer from "@/components/ListenToPlayer" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget" @@ -57,6 +58,7 @@ import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants" import useTranslation from "@/hooks/useTranslation" import loadNamespaces from "@/i18n/loadNamespaces" +import { usePathname } from "@/i18n/routing" import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie" import dogeComputerImg from "@/public/images/doge-computer.png" import ethImg from "@/public/images/eth.png" @@ -219,7 +221,7 @@ const WhatIsEthereumPage = ({ data, }: InferGetStaticPropsType) => { const { t } = useTranslation(["page-what-is-ethereum", "learn-quizzes"]) - + const pathname = usePathname() const locale = useLocale() const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang) @@ -357,6 +359,9 @@ const WhatIsEthereumPage = ({
+
+ +
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 170195ba294..d75992747ff 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -12,6 +12,7 @@ import { DEFAULT_LOCALE } from "@/lib/constants" import "@/styles/global.css" +import { FeedbackWidgetProvider } from "@/contexts/FeedbackWidgetContext" import { BaseLayout } from "@/layouts/BaseLayout" const App = ({ Component, pageProps }: AppPropsWithLayout) => { @@ -45,13 +46,15 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => { > - - {getLayout()} - + + + {getLayout()} + + diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index 08716c5735b..7e5b99e4b09 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -126,6 +126,8 @@ --staking-blue-fill: 142, 65%, 97%; --staking-red: 4, 36%, 46%; --staking-red-fill: 140, 27%, 98%; + + --shadow-widget: 2px 2px 12px 1px rgba(52, 43, 64, 0.02), -16px 16px 12px -3px rgba(52, 43, 64, 0.02), -32px 32px 24px -6px rgba(52, 43, 64, 0.02), -40px 40px 40px -12px rgba(88, 55, 131, 0.04); } /* Dark mode token declarations */ @@ -224,5 +226,7 @@ --staking-blue-fill: #2b352f; --staking-red: #d6bbb9; --staking-red-fill: #313432; + + --shadow-widget: -2px 2px 12px 1px rgba(255, 255, 255, 0.04), -6px 6px 12px -3px rgba(255, 255, 255, 0.04), -12px 12px 24px -6px rgba(255, 255, 255, 0.04), -20px 20px 40px -12px rgba(255, 255, 255, 0.04); } } diff --git a/src/types.d.ts b/src/types.d.ts new file mode 100644 index 00000000000..a86161cd64a --- /dev/null +++ b/src/types.d.ts @@ -0,0 +1,4 @@ +declare module "*.mp3" { + const content: string + export default content +} diff --git a/tailwind.config.ts b/tailwind.config.ts index c37ae34ff39..c152326dfa9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -261,6 +261,7 @@ const config = { var(--shadow-window-box-1), var(--shadow-window-box-2), var(--shadow-window-box-3), var(--shadow-window-box-4), var(--shadow-window-box-5)`, + widget: "var(--shadow-widget)", }, spacing: { 7.5: "1.875rem", diff --git a/yarn.lock b/yarn.lock index e05129da599..848fbca8d09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8830,6 +8830,11 @@ hosted-git-info@^2.1.4: resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== +howler@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1" + integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w== + html-entities@^2.1.0: version "2.4.0" resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.4.0.tgz#edd0cee70402584c8c76cc2c0556db09d1f45061" @@ -11411,7 +11416,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -"prettier-fallback@npm:prettier@^3": +"prettier-fallback@npm:prettier@^3", prettier@^3.1.1: version "3.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==