DEV Community: not-bad-dev.eth

Typewriter text effect in SwiftUI

not-bad-dev.eth — Mon, 23 Feb 2026 12:43:11 +0000

This article walks through implementing a typewriter-style text animation in SwiftUI using pure Swift and native SwiftUI APIs, no external dependencies.

Minimum supported platforms: iOS 15.0+.

You can jump directly to the code. A complete example repository is provided at the end.

About

This article walks through implementing a typewriter-style effect animation in SwiftUI using pure Swift and native SwiftUI APIs — no external dependencies.
Minimum supported iOS version is 15 and till the latest one iOS 26.

Many existing implementations rely on UIKit wrappers or just string modifications that affect text appearance and doesn’t provide desired animation that fit’s and doesn’t break layout around.

This implementation supports:

Custom fonts
Any font size
Any font color
Stable layout — the final text size is known in advance, so surrounding views remain unaffected

The key point of the animation effect is to keep a text on same positions aligned to any side and avoid text jumps during animation progress.

Implementation description

Main component of the view is an a AttributedString that used with SwiftUI native Text component that allow full text customizations modifier.

Animations starts with onAppear event on TypwriterText view. It starts with empty view without the text but the view already fill all space required for final text. The view iterates text by charactes and change .clear text color to initial text color provided for the text component. Until the full text is presented. The component provides letters appearance interval modification.

Code

How to use TypewriterText component

TypewriterText("Hello, world! Let's type it out!")
    .font(.system(.title2))
    .foregroundStyle(Color.brown)

TypewriterText("Hello, world! Let's type it out!")
    .font(.custom("Custom-Font", size: 24))
    .foregroundStyle(Color.brown)

You can provide any custom or system font and any color that will be animated during typweriter animation.

The TypewriterText looks like this

struct TypewriterText: View {
    let text: String
    let interval: TimeInterval

    @State private var attributedText: AttributedString = ""

    init(_ text: String, interval: TimeInterval = 0.06) {
        self.text = text
        self.interval = interval
    }

    var body: some View {
        Text(attributedText)
            .onAppear {
                startAnimation()
            }
    }

    @MainActor
    private func startAnimation() {
        Task { @MainActor in
            var base = AttributedString(text)
            let initialColor = base.foregroundColor
            base.foregroundColor = .clear
            attributedText = base

            var index = base.startIndex
            while index < base.endIndex {
                let nextIndex = base.index(afterCharacter: index)
                attributedText[index..<nextIndex].foregroundColor = initialColor
                index = nextIndex
                try? await Task.sleep(nanoseconds: UInt64(interval * 1_000_000_000))
            }
        }
    }
}

It uses AttributedText as main component for dynamic text appearence by changing it’s letters colors one by one.

The usage of native comonents provides good level of performance and open to customizations and modifications.

For example, you can add haptics on each letter appear by modifying startAnimation() adding haptic trigger in while cycle.

You can check example Xcode project by the link.

https://github.com/maltsevoff/TypewriterText

WalletConnect Auth: how to connect a crypto wallet to iOS Swift DApp

not-bad-dev.eth — Thu, 04 Jan 2024 18:59:34 +0000

Written by not-bad-dev.eth

Intro

This is the second article in a series of WalletConnect usage on iOS. Link to previous one. Third one is coming soon.

What is Auth protocol? Wallet connect definition from documentation:

WalletConnect Auth is an authentication protocol that can be used to log-in blockchain wallets into apps. With a simple and lean interface, this API verifies wallet address ownership through a single signature request, realizing login in one action. It enables apps to set up a decentralized and passwordless onboarding flow.

So it’s one-step way to identify user’s wallet. It may seems like a better solution than Sign protocol but it doesn't allow handle connected sessions and call transactions on user’s wallet.

It would be better to think about possible use cases for your application before choosing wallet connection protocol.

Installation
Configuration
Wallet connection

Installation

Add WalletConnect SDK to your app. Link to installation process is below. It may be added using SPM or CocoaPods.

https://github.com/WalletConnect/WalletConnectSwiftV2#installation

Configuration

To configure the WalletConnect SDK with your app information, you need to provide the project ID. You can register for the project ID by connecting here with your crypto wallet.

https://cloud.walletconnect.com/sign-in

Provide your projectId to Networking configuration. Fill the project metadata with your projects name and links. Such modules as DefaultSocketFactory and DefaultCryptoProvider are described below.

import Foundation
import WalletConnectNetworking
import WalletConnectPairing
import Auth

func configure() {
        Networking.configure(projectId: "your-project-id", socketFactory: DefaultSocketFactory())
        Auth.configure(crypto: DefaultCryptoProvider())

        let metadata = AppMetadata(
            name: "WalletConnectDemo",
            description: "WalletConnectDemo",
            url: "https://walletconnect.org",
            icons: []
        )

        Pair.configure(metadata: metadata)
    }

Additionally, there is a WalletConnectSocketFactory class that you need to implement yourself. The WalletConnect SDK doesn’t handle socket management on its own.

The easiest way is to use Starscream SDK of 3.1.2 version which completley complies with their WebSocketConnecting protocol. (yep, it’s not new and may have some issues but it works)

import Foundation
import WalletConnectSign
import Starscream

struct WalletConnectSocketFactory: WebSocketFactory {
    func create(with url: URL) -> WebSocketConnecting {
                let socket = WalletConnectStarscreamSocket(url: url)
        let queue = DispatchQueue(label: "com.walletconnect.sdk.socket", attributes: .concurrent)
        socket.callbackQueue = queue
        return socket
    }
}

class WalletConnectStarscreamSocket: WebSocket, WebSocketConnecting { }

It also possible to write your own sockets implementation using URLSessionWebSocketTask or any other library.

Unlike the previous article about Sign protocol here we have new DefaultCryptoProvider class which is additionally required for Auth protocol. It’s copy paste form WalletConnect demo example project. Don’t forget to add listed libraries and be careful! Here is used forked Web3.swift lib from WalletConnect repo. It’s also form the demo project.

https://github.com/WalletConnect/Web3.swift

import Auth
import CryptoSwift
import Foundation
import Web3

struct DefaultCryptoProvider: CryptoProvider {
    public func recoverPubKey(signature: EthereumSignature, message: Data) throws -> Data {
        let publicKey = try EthereumPublicKey(
            message: message.bytes,
            v: EthereumQuantity(quantity: BigUInt(signature.v)),
            r: EthereumQuantity(signature.r),
            s: EthereumQuantity(signature.s)
        )
        return Data(publicKey.rawPublicKey)
    }

    public func keccak256(_ data: Data) -> Data {
        let digest = SHA3(variant: .keccak256)
        let hash = digest.calculate(for: [UInt8](data))
        return Data(hash)
    }
}

Connection

You need to define RequestParams wiht own data, create pairUri wich contains uniquie identifier and send request to WalletConnect. Request parameters correspond to CAIP-74 Cacao object.

func connect() async throws {
        let params = RequestParams(
            domain: "https://your-best-site.com",
            chainId: "eip155:1",
            nonce: "777",
            aud: "https://your-best-site.com",
            nbf: nil,
            exp: nil,
            statement: "Sign this message to verify your wallet and connect to Surreal.",
            requestId: nil,
            resources: nil
        )

        do {
            let pairUri = try await Pair.instance.create()
            self.pairUri = pairUri
            try await Auth.instance.request(params, topic: pairUri.topic)
        } catch {
            throw error
        }
    }

Next step is to redirect to users wallet using provided URL structure where with /wc route and uri parameter which contains previously create pairUri. Note that it must be percent encoded so use only deeplinkUri property which follows this rule.
Note: here used Rainbow wallet link. You can replace it with your preferrable wallet’s link.

func redirectToWallet() async {
        guard let deeplinkUrl = pairUri?.deeplinkUri,
              /*
              here we use rainbow because metamask dosen't support
              auth protocol
               */
              let url = URL(string: "https://rnbwapp.com/wc?uri=\(deeplinkUrl)") else { return }

        await MainActor.run(body: {
            UIApplication.shared.open(url)
        })
    }

And the last step is handle wallets response. You should subscribe onto authResponsePublisher before redirect to a wallet. Here we have simple result property where you can retrieve users wallet address and signature hash.

var publishers = Set<AnyCancellable>()

func setupObservers() {
        Auth.instance.authResponsePublisher.sink { [weak self] _, result in
            guard let self else { return }

            Task { @MainActor in
                switch result {
                case .success(let cacao):
                    do {
                        let address = try DIDPKH(did: cacao.p.iss).account.address
                        self.onWalletAuthorized?(address)
                    } catch {
                        print(error.localizedDescription)
                    }
                case .failure(let error):
                    print(error.localizedDescription)
                }
            }
        }
        .store(in: &publishers)
    }

That’s it! You’ve successfully connected and authenticated users wallet and can continue. Note that Auth protocol works fine for one-time user authentication but you won't be able to ask user for transactions signing. Sign protocol is better if you will need to send transactions periodically.

Good luck! Fell free to contact me and leave your feedback.

Follow me on X/Twitter

WalletConnect Sign: How to connect a crypto wallet to iOS Swift app?

not-bad-dev.eth — Wed, 18 Oct 2023 14:18:48 +0000

Why do you need it?

Whether you need to connect users wallet to your application and get their address, display their assets or do transactions, etc.

There exists two most popular ways for DApp (decentralized application, just your iOS application) connection like specific wallets’ SDK and WalletConnect protocol.

WalletConnect is a highly recommended and widely compatible method for connecting your DApp to a crypto wallet. By implementing WalletConnect SDK support, you can connect with various wallets that have integrated it, such as MetaMask, Rainbow, Trust, Zerion, and many others (which includes almost all existing wallets).

There are exist two ways to connect your DApp: Sign and Auth. Description from wallet connect:

WalletConnect Sign is a remote signer protocol to communicate securely between web3 wallets and dapps. The protocol establishes a remote pairing between two apps and/or devices using a Relay server to relay payloads. These payloads are symmetrically encrypted through a shared key between the two peers. The pairing is initiated by one peer displaying a QR Code or deep link with a standard WalletConnect URI and is established when the counter-party approves this pairing request.
WalletConnect Auth is an authentication protocol that can be used to log-in blockchain wallets into apps. With a simple and lean interface, this API verifies wallet address ownership through a single signature request, realizing login in one action. It enables apps to set up a decentralized and passwordless onboarding flow.

The main difference between them is the pairing between a DApp and a wallet in the Sign protocol, which allows initiating transactions from the user's application. Also Auth protocol authenticate a user in one step when Sign require two separate steps (wallet connection and sign) as it always was.

Installation
Configuration
Wallet connection
Sign request

Installation

Add WalletConnect SDK to your app. Link to installation process is below. It may be added using SPM or CocoaPods.

https://github.com/WalletConnect/WalletConnectSwiftV2#installation

Configuration

To configure the WalletConnect SDK with your app information, you need to provide the project ID. You can register for the project ID by clicking here with your crypto wallet.

https://cloud.walletconnect.com/sign-in

And insert it in the projectId property in code below.

import WalletConnectNetworking

Networking.configure(
      projectId: "your-project-id",
      socketFactory: WalletConnectSocketFactory(),
      socketConnectionType: .automatic
)

Additionally, there is a WalletConnectSocketFactory() class that you need to implement yourself. The WalletConnect SDK does not handle socket management on its own.

The easiest way is to use Starscream SDK of 3.1.2 version which completley complies with their WebSocketConnecting protocol. (yep, it’s not new and may have some issues but it works)

import Foundation
import WalletConnectSign
import Starscream

struct WalletConnectSocketFactory: WebSocketFactory {
    func create(with url: URL) -> WebSocketConnecting {
        let socket = WalletConnectStarscreamSocket(url: url)
        let queue = DispatchQueue(label: "com.walletconnect.sdk.socket", attributes: .concurrent)
        socket.callbackQueue = queue
        return socket
    }
}

class WalletConnectStarscreamSocket: WebSocket, WebSocketConnecting { }

It also possible to write your own sockets implementation using URLSessionWebSocketTask or any other library.

And the last step is to configure your app metadata.

import WalletConnectSign

let metadata = AppMetadata(
      name: "Your app name",
      description: "description",
      url: "your app url",
      icons: ["https://icon-url.com"],
      redirect: .init(native: "native-link://", universal: "universal-link.com")
)

Pair.configure(metadata: metadata)

I think it's quite straightforward. You need to provide your app name, description, URL, and icon. Additionally, you need to pass your universal link and deep link to allow wallets to redirect back to the app.

It’s important to configure the SDK before your call any methods in it!

Wallet connection

After completing all the configurations, you are ready to connect your wallet. First, define the chains and methods that your DApp requires. In example below I have defined the Ethereum chain with a chain ID of 1 ("eip155:1") and the "personal_sign" method. Pass these parameters to the Sign.instance.connect() method. For more information, refer to the WalletConnect documentation.

func connect() async throws {
        let requiredNamespaces: [String: ProposalNamespace] = [
            "eip155": ProposalNamespace(
                chains: [
                    Blockchain("eip155:1")!
                ],
                methods: [
                    "personal_sign"
                ], events: []
            )
        ]

        do {
            let pairUri = try await Pair.instance.create()
            try await Sign.instance.connect(requiredNamespaces: requiredNamespaces,
                                            // metamask doesn't handle a request without these dummy values
                                            optionalNamespaces: [:],
                                            topic: pairUri.topic)
        } catch {
            throw error
        }
    }

Note: here is defined optionalNamespaces and sessionProperties which are optional but MetaMask iOS wallet has an issue that requires passing dummy values in order to handle this request.

Also save pairUri cause it will be required in the next step.

To redirect a user to a wallet app, you need to pass the pairUri as a parameter in the wallet link, as shown in the example below.

The wc/ path and uri parameter are standard for all wallets that support the WCv2 protocol. In this case, we are using the pairUri that was saved in the previous step, along with the Metamask deep link.

func redirectToWallet() {
        guard let deeplinkUrl = pairUri?.deeplinkUri,
            let url = URL(string: "metamask://wc?uri=\(deeplinkUrl)") else { return }

        UIApplication.shared.open(url)
}

After that, the user will be redirected to MetaMask, where the connection request will appear. The response will be received in the Sign.instance.sessionSettlePublisher observer.

var publishers = Set<AnyCancellable>()

Sign.instance.sessionSettlePublisher
            .receive(on: DispatchQueue.main)
            .sink { [weak self] session in
                let account = session.accounts.first
                self?.sessionTopic = session.topic
                self?.address = account?.address
            }.store(in: &publishers)

If the request is successful, this observer will be triggered. It provides two main properties: wallet address and session topic. The session topic will be required in the next step to retrieve the session and send a Sign request.

Sign request

Next, you need to create a sign request and send it to the established session. Do not confuse the pairing topic with the session topic.

func sign() async {
        guard let chain = Blockchain("eip155:1"),
              let address, // previously saved
              let topic = sessionTopic else { return } // previously saved

        let method = "personal_sign"
        let requestParams = AnyCodable(["Verefication message", address])
        let request = Request(topic: topic,
                              method: method,
                              params: requestParams,
                              chainId: chain)

        try? await Sign.instance.request(params: request)
}

And session response will be in Sign.instance.sessionResponsePublisher observer.

var publishers = Set<AnyCancellable>()

Sign.instance.sessionResponsePublisher
            .receive(on: DispatchQueue.main)
            .sink { response in
                switch response.result {
                case .response:
                    print("Success")
                case .error(let error):
                    print(error)
                }
            }.store(in: &publishers)

In this straightforward example we don’t parse response but It may be important if you pass many different request.

That's it! You’ve successfully authorized user’s wallet, have its address and can continue. You can skip step with requesting sign from user’s wallet but you won’t be sure if user really own this wallet.

Good luck! Fell free to contact me and leave your feedback.

Follow me on X/Twitter

DEV Community: not-bad-dev.eth

Typewriter text effect in SwiftUI

About

Implementation description

Code

WalletConnect Auth: how to connect a crypto wallet to iOS Swift DApp

Intro

Table of Contents

Installation

Configuration

Connection

WalletConnect Sign: How to connect a crypto wallet to iOS Swift app?

Why do you need it?

Table of Contents

Installation

Configuration

Wallet connection

Sign request