nimblehq / nimble-crypto-ios Goto Github PK

This is an sample Crypto market prices ap built with SwiftUI and modularization architecture. The application data is making use of the free APIs provided by Coingecko.

License: MIT License

Swift 99.92% Ruby 0.06% Makefile 0.02%

async-await cryptocurrency ios-swift modularization pilot spm swiftui

nimble-crypto-ios's Introduction

CryptoPrices iOS

This is a simple iOS application built with SwiftUI that shows the crypto market prices.

Build and run

Open your terminal, then:

Checkout source code

git clone [email protected]:nimblehq/nimble-crypto-ios.git
cd nimble-crypto-ios

Install dependencies
```
make setup
```
Open CryptoPrices.xcodeproj with Xcode, hit ⌘R to run.

Screenshots 📸

	Light	Dark
Home
Detail

Demo video 🎥

Here is a simple flow to load the coins list from the Home screen, then navigate to the Coin Detail screen and get the chart information with different filters:

RPReplay_Final1674117879.MP4

Resources

Data provided by API documentation
Figma Design
Rocket icons created by Freepik - Flaticon

License

About

This project is maintained and funded by Nimble.

We ❤️ open source and do our part in sharing our work with the community! See our other projects or hire our team to help build your product.

Want to join? Check out our Jobs!

nimble-crypto-ios's People

Contributors

Stargazers

Watchers

Forkers

lieubv koutenshidatshu thanhphatsainin iamcadis ngodangtan

nimble-crypto-ios's Issues

[Integrate] As a user, I can see timeframe bar on the Detail screen

Why

The user should be able to see the timeframe bar on the Detail screen.

Acceptance Criteria

On the Detail screen, the following timeframe bar can be seen:

in the light mode:

in the dark mode:

1D is the default selection when navigating to the detail screen.
Whenever a bar item 1D, 7D, 1M, 1Y, or 5Y is selected, it will be highlighted with #00BDB0. And the corresponding chart will be updated with API response from #42 .

The response will look like the following:

{
  "prices": [
    [
      1669284289704,
      16595.246079387816
    ],
    [
      1669284585059,
      16602.076684659474
    ],
    [
      1669284921814,
      16606.11839794301
    ],
    [
      1669285188016,
      16606.20441243831
}

[UI] As a user, I can see the chart on the Detail screen

Why

The user should be able to see the chart on the Detail screen.

Acceptance Criteria

On the Detail screen, the following chart can be seen:

In light mode:

In dark mode:

For both the light and dark modes, we have:

The line chart is a linear line with the color #00BDB0.
The highest price text in that frame has the color #10DC78.

The lowest price text in that frame has the color #F15950

Design

https://www.figma.com/file/Iy9eg3ym29pkKGsD5X48O7/Crypto-App-(Community)?node-id=3%3A107&t=PLQA07bsooNZNzKn-0

Resources

https://github.com/danielgindi/Charts

[Integrate] As a user, I can see the chart on the Detail screen

Why

The user should be able to see the chart on the Detail screen.

Acceptance Criteria

On the Detail screen, the following chart can be seen:

In light mode:

In dark mode:

For both the light and dark modes, we have:

The line chart is a linear line with the color #00BDB0.
The highest price text in that frame has the color #10DC78.

The lowest price text in that frame has the color #F15950

In a timeframe, the latest data (price) will be on the right, and the oldest data will be on the left.

On behavior:

The chart will set fit and no zooming for the chart with any gestures.
No animation is needed when the chart is displayed.

Note: How the detailed range time is filtered in days, months, and years from API document:

Data granularity is automatic (cannot be adjusted)
1 day from current time = 5 minute interval data
1 - 90 days from current time = hourly data
above 90 days from current time = daily data (00:00 UTC)

The response will look like the following:

{
  "prices": [
    [
      1669284289704,
      16595.246079387816
    ],
    [
      1669284585059,
      16602.076684659474
    ],
    [
      1669284921814,
      16606.11839794301
    ],
    [
      1669285188016,
      16606.20441243831
}

Design

https://www.figma.com/file/Iy9eg3ym29pkKGsD5X48O7/Crypto-App-(Community)?node-id=3%3A107&t=PLQA07bsooNZNzKn-0

Resources

https://github.com/danielgindi/Charts

From the design and the lib above, LineChart (gradient fill) in Charts lib is the most identity to the design.

[UI] As a user, when selecting a coin on the Home screen, I can see the coin’s header information on the Detail screen

Why

We need to show the coin’s header information on the Detail screen.

Acceptance Criteria

On the Detail screen, the following section can be seen:

In light mode:

In dark mode:

The title will be based on the name from API (handled in integrate story).
A heart icon will be shown in the top right.

Design

Figma design.

[Chore] Add CODEOWNERS

Why

We want to contribute the project.

Acceptance Criteria

@Thieurom, @minhnimble and @nkhanh44 should be added as CODEOWNERS.

[UI] As a user, I can see the coin’s current price on the Detail screen

Why

The user should be able to see coin’s current price on the Detail screen.

Acceptance Criteria

On the Detail screen, the following section can be seen:

In light mode:

In dark mode:

The image will be based on the image.large.
The current price will be based on the current_price.usd and the fractional part will be rounded to 2 numbers.
The price change percentage will be based on the price_change_percentage_24h:
- price_change_percentage_24h text is set to #F15950 with the down indicator and background is set to #F15950 with alpha 0.3 when it’s a negative number.
- price_change_percentage_24h text is set to #10DC78 with the up indicator and background is set to #DBFBEC when it’s a positive number.

Note: The fractional part of price_change_percentage_24h rounded to 2 numbers: 6,2122 to 6,21.

Design

Figma design.

[UI] As a user, I can see the Buy & Sell buttons on the Detail screen

Why

The user should be able to see the Buy & Sell buttons at the bottom on the Detail screen.

Acceptance Criteria

The user will see the following Buy & Sell buttons:

In light mode:

In dark mode:

Note: We only handle the UI, not Integrate or backend for this UI.

[Chore] Update SourceryPlugin to clear previously-generated codes before generating new ones

Why

Usually, when we config Sourcery templates to place all the generated codes in a single file (AutoMockable.generated.swift), when running Sourcery just overwrites it with all the newly-generated codes.

However, in our use case, we config Sourcery to place each type per file. It leads to occur build errors in some cases. For e.g. when a developer switches from a branch that has a type to be mocked (say protocol MyUseCaseProtocol {}) to another branch that does not contain it. At that point, the previously-generated codes're still there, which in this case MyUseCaseProtocol.swift. But they won't build because it depends on a type that doesn't exist anymore.

We need to update the SourceryPlugin to clear previously-generated codes before generating new ones

Who Benefits?

Developers.

[Chore] Setup CD pipeline for the project

Why

We need to set up the CD flow for this SwiftUI project so developers can distribute builds to Firebase.

Acceptance Criteria

We can run the CD pipeline on GitHubAction.
We can distribute the build to Firebase.

[Chore] Add the App Icon

Why

The App Icon is considered a part of the app's identity and personality. It also helps to navigate and open the app once installed on the devices (or simulator)

The free icon from flaticon will be used.
Add the required attribution to the README.md

Who Benefits?

Users and developers.

[Integrate] As a user, I can see My Coins on the Home screen

Why

The user should be able to see their coins on the Home screen.

Acceptance Criteria

On the Home screen, the user can see the following My Coins section:

In light mode:

In dark mode:

The section will have the title My Coins 😎.
The section will have the text see all ->.
Once the coins have loaded, the user will see coin’s items:

The coin’s image will be based on the image.
The coin’s symbol will be based on the uppercased symbol.
The coin’s name will be based on the name.
The coin’s current price will be based on the current_price.
The coin’s price change percentage will be based on the price_change_percentage_24h:
- price_change_percentage_24h set to #F15950 color with down indicator when it’s negative number:
- price_change_percentage_24h set to #10DC78 color with the up indicator when it’s positive number:

Note: The fractional part of price_change_percentage_24h is rounded to 2 numbers: 6,2122 to 6,21.

The response will look as follows:

[
  {
    "id": "bitcoin",
    "symbol": "btc",
    "name": "Bitcoin",
    "image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
    "current_price": 16260.95,
    "market_cap": 312693497355,
    "market_cap_rank": 1,
    "fully_diluted_valuation": 341753425839,
    "total_volume": 29961373190,
    "high_24h": 16269.92,
    "low_24h": 15649.4,
    "price_change_24h": 121.5,
    "price_change_percentage_24h": 0.7528,
    "market_cap_change_24h": 2195051889,
    "market_cap_change_percentage_24h": 0.70694,
    "circulating_supply": 19214331,
    "total_supply": 21000000,
    "max_supply": 21000000,
    "ath": 69045,
    "ath_change_percentage": -76.43761,
    "ath_date": "2021-11-10T14:24:11.849Z",
    "atl": 67.81,
    "atl_change_percentage": 23891.79428,
    "atl_date": "2013-07-06T00:00:00.000Z",
    "roi": null,
    "last_updated": "2022-11-22T16:06:32.860Z"
  }
]

Design

Figma design.

[Integrate] As a user, I can see Trending coins on the Home screen

Why

The user should be able to see trending coins on the Home screen.

Acceptance Criteria

In light mode:

In dark mode:

The section will have the title Trending 🔥.
The section will have the text see all ->.
Once the coins have loaded, the user will see coin’s items:

The coin’s image will be based on the image.
The coin’s symbol will be based on the uppercased symbol.
The coin’s name will be based on the name.
The coin’s price change percentage will be based on the price_change_percentage_24h:
- price_change_percentage_24h is set to #F15950 with the down indicator when it’s a negative number.
- price_change_percentage_24h is set to #10DC78 with the up indicator when it’s a positive number.

Note: The fractional part of price_change_percentage_24h is rounded to 2 numbers: 6,2122 to 6,21.

The response will look as follows:

[
  {
    "id": "bitcoin",
    "symbol": "btc",
    "name": "Bitcoin",
    "image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
    "current_price": 16260.95,
    "market_cap": 312693497355,
    "market_cap_rank": 1,
    "fully_diluted_valuation": 341753425839,
    "total_volume": 29961373190,
    "high_24h": 16269.92,
    "low_24h": 15649.4,
    "price_change_24h": 121.5,
    "price_change_percentage_24h": 0.7528,
    "market_cap_change_24h": 2195051889,
    "market_cap_change_percentage_24h": 0.70694,
    "circulating_supply": 19214331,
    "total_supply": 21000000,
    "max_supply": 21000000,
    "ath": 69045,
    "ath_change_percentage": -76.43761,
    "ath_date": "2021-11-10T14:24:11.849Z",
    "atl": 67.81,
    "atl_change_percentage": 23891.79428,
    "atl_date": "2013-07-06T00:00:00.000Z",
    "roi": null,
    "last_updated": "2022-11-22T16:06:32.860Z"
  }
]

Design

Figma design.

[Backend] As a user, I can see Trending coins on the Home screen

Why

The user should be able to see trending coins on the Home screen.

Acceptance Criteria

When the user navigates to the Home screen, the following API is called: GET /coins/markets.

Parameters:

    Coin ids: ids=bitcoin,ethereum,binancecoin,ripple,cardano,solana,polkadot,near,tron,dogecoin
    Currency: vs_currency=usd
    Items per page: per_page=10
    Items order: order=market_cap_desc
    Page: page=1
    Price changes percentage: price_change_percentage=24h

If the API returns success, the user will see the coins items (handled in integrate story #8).
If the API returns error, the user will see the error state using default alert with title is Error, message's content is from API response and the confirm button's title is Ok.

The error response will look as follows:

{
  "error": "Could not find coin with the given id"
}

API Documents

Coingecko API document.

[Chore] Set up code generator for strings, fonts, colors, images and other types of resources

Why

We have to set up a code generator for strings, fonts, colors, images, and other types of resources so we can access them by Swift code, not by string-based one.

For this purpose, we're going to use swiftgen library.
Add a command to Makefile so that when running it'll (re)generate Swift code for all packages that embed the resources (Styleguide, Home, MyCoin, ...)

Who Benefits?

Developers who need to access the resources by Swift code while developing the app and feature modules.

[Chore] Update the information about the app

Why

The app is now working with the initially required features. We should update information about the app. That includes:

A short description in the About section
Add screenshots and screen recordings showcasing the main features in the README.md

Who Benefits?

Anyone who might be interested in what the app could do.
Developers who might be interested in how the app was implemented.

[Integrate] As a user, I can pull to refresh data on the Home screen

Why

The user should be able to refresh all data on the home screen by pulling.

Acceptance Criteria

When pulling, the spinner will be displayed as the following:

In the light mode:

In the dark mode:

We can use the default iOS spinner.

The following APIs will be called: GET /coins/markets for the trending coins and my coins sections with the initial parameters.

Resources

Figma design

[Chore] Setup CI pipeline for the project

Why

We need to set up the CI flow for this SwiftUI project so developers can run unit tests and code lining.

Acceptance Criteria

Running code linting and unit tests on GihubAction.

[UI] As a user, I can see My Coins on the Home screen

Why

The user should be able to see their coins on the Home screen.

Acceptance Criteria

On the Home screen, the user can see the following My Coins section:

In light mode:

In dark mode:

The section will have the title My Coins 😎.
The section will have the text see all ->.
Once the coins have loaded, the user will see coin’s items:

The coin’s image will be based on the image.
The coin’s symbol will be based on the uppercased symbol.
The coin’s name will be based on the name.
The coin’s current price will be based on the current_price.
The coin’s price change percentage will be based on the price_change_percentage_24h:
- price_change_percentage_24h is set to #F15950 with down indicator when it’s negative number:
- price_change_percentage_24h is set to #10DC78 with the up indicator when it’s positive number:

Note: The fractional part of price_change_percentage_24h is rounded to 2 numbers: 6,2122 to 6,21.

Design

Figma design.

[Chore] Set up a code generator or a mocking library for generating stub, fake, mock types for unit testings

Why

In order to unit test a type that depends on other types, we inject those dependencies with the mocked implementations.
Currently, in the project, we manually write them by hand. We need to set up a code generator or a mocking library for generating those mocked implementations so that:

We have the necessary mocked types with clear and consistent API (exposed properties and methods) available.
Developers just need to focus on writing unit tests.

We can choose between:

A general-purpose code generator likes Sourcery
A library specific for mocking likes Mockingbird, Cuckoo or others

Who Benefits?

Developers who implement features that require accompanying unit tests.

[Chore] Display taps and gestures on the screen

Why

Showing taps and gestures on the screen (either on the simulator or the device) gives the audience a much clearer context of what's happening.
It's very helpful for demos, presentations, or videos.

For this purpose, we can use the ShowTime library. This is not required, any good alternatives are free to propose and integrate.
Please note that this is enabled on the debug build only.

Who Benefits?

Developers who:

present the app demo
make POW video for their PRs

[Chore] Setup SwiftUI project

Why

Create a barebone SwiftUI project from Xcode.

Acceptance Criteria

SwiftUI project, the name can be "Crypto Prices", target >= iOS15.0
Include Tests and UITests targets
When running, the app shows a screen with the text "Crypto Prices" without any specifically required typography.

[Integrate] As a user, I can see the coin’s current price on the Detail screen

Why

The user should be able to see coin’s current price on the Detail screen.

Acceptance Criteria

On the Detail screen, the following section can be seen:

In light mode:

In dark mode:

The image will be based on the image.large.
The current price will be based on the current_price.usd and the fractional part will be rounded to 2 numbers.
The price change percentage will be based on the price_change_percentage_24h:
- price_change_percentage_24h text is set to #F15950 with the down indicator and background is set to #F15950 with alpha 0.3 when it’s a negative number.
- price_change_percentage_24h text is set to #10DC78 with the up indicator and background is set to #DBFBEC when it’s a positive number.

Note: The fractional part of price_change_percentage_24h rounded to 2 numbers: 6,2122 to 6,21.

The response will look as follows:

…
},
  "image": {
    "thumb": "https://assets.coingecko.com/coins/images/1/thumb/bitcoin.png?1547033579",
    "small": "https://assets.coingecko.com/coins/images/1/small/bitcoin.png?1547033579",
    "large": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579"
  },
….
"market_data": {
    "current_price": {
      "usd": 16508.12,
    },
"price_change_percentage_24h": -1.53606
….

Design

Figma design.

[Integrate] As a user, I can pull to refresh data on the Detail screen

Why

The user should be able to refresh all data on the detail screen by pulling.

Acceptance Criteria

When pulling, the spinner will be displayed as the following:

In the light mode:

In the dark mode:

We can use the default iOS spinner.

The following APIs will be called:

Get coin detail: GET /coins/{id}
Get coin prices:
- For 1D, 7D, 1M, 1Y 5Y price: GET /coins/{id}/market_chart

The chart will be displayed with 1D timeframe, and the timeframe is set to 1D as default.

Resources

Figma design

[Integrate] As a user, I can see the coin’s statistics on the Detail screen

Why

The user should be able to see the coin’s statistics on the Detail screen.

Acceptance Criteria

The user will see the following section:

In the light mode:

 _In the dark mode:_

There are 3 cells:
Market Cap:

The Market Cap’s value will be based on market_cap.usd with the symbol $ in front.
The Market Cap change percentage’s value will be based on market_cap_change_percentage_24h.
- It's set to #F15950 with the down indicator when it’s a negative number.
- It's set to #10DC78 with the up indicator when it’s a positive number.

All Time High:

The All Time High’s value will be based on ath.usd with symbol $ in front.
The All Time High Change Percentage’s value will be based on ath_change_percentage.usd.
- It's set to #F15950 with the down indicator when it’s a negative number.
- It's set to #10DC78 with the up indicator when it’s a positive number.

All Time Low:

The All Time Low’s value will be based on atl.usd with the symbol $ in front.
The All Time Low Change Percentage’s value will be based on atl_change_percentage.usd.
- It's set to #F15950 with the down indicator when it’s a negative number.
- It's set to #10DC78 with the up indicator when it’s a positive number.

API response from #12 .

Design

https://www.figma.com/file/Iy9eg3ym29pkKGsD5X48O7/Crypto-App-(Community)?node-id=3%3A48&t=xRCVfYvIyS1Y5yrA-0

[Chore] Update `fastlane` to run tests on local packages

Why

Currently, we can only run the tests on the app targets.
We need to update the existing lane or add a new one to test all the local packages that have test targets.

Who Benefits?

Developers who develop the module (via the local Swift package) that have unit tests.
Code reviewers

[Chore] Integrate `Wormhly` for network debugging

Why

We need a quick, easy (and visually clear) way to debug network calls while running the app.
For this purpose, we're going to use the Wormhly library.

Who Benefits?

Developers when developing features that involve network calls.

[UI] As a user, I can see my wallet’s statistics

Why

We need to show the statistics of my wallet on the Home Screen.

Acceptance Criteria

On the Home screen, the following section can be seen:

In light mode:

In dark mode:

As we don’t have any wallet, we use the default values:
- $7,273,291 for Total Coins.
- $193,28 for Today’s Profit.
- 2,41% for profit change.

Design

Figma design.

[Chore] Create the Home module as a local Swift package

Why

We need to create a module so that the Home screen's source files (View, ViewModel, ...) can be put on it.
The module will be named Home and created as a local Swift package.

Who Benefits?

Developers can start developing for the Home screen.

[Chore] [Spike] Cache remote Swift packages build-artifacts on CI

Why

Our project uses Swift Package Manager (SPM) to manage third-party dependencies. We need to find a way to cache their build artifacts so we can speed up the build process when running GitHub actions.

Some references to start with:

Who Benefits?

Developers who run GitHub actions when making pull requests, releases, or trigger them manually.

[Integrate] As a user, when selecting a coin on the Home screen, I can see the coin’s header information on the Detail screen

Why

We need to show the coin’s header information on the Detail screen.

Acceptance Criteria

On the Detail screen, the following section can be seen:

In light mode:

In dark mode:

The title will be based on the name from API.

The response will look as follows:

{
  "id": "bitcoin",
  "symbol": "btc",
  "name": "Bitcoin",
  "asset_platform_id": null,
  …
}

A heart icon will be shown in the top right.

Design

Figma design.

[Chore] Improve navigation with proper app state management

Why

Issue

Currently, from the Home screen, if the users select a coin, it will:

Display the MyCoin screen. But it does so by removing the Home from the view hierarchy, not by pushing the MyCoin screen on the navigation stacks (on top of the Home screen)
When on the MyCoin screen, if the users tap the back button, it will destroy the MyCoin screen and recreate the Home screen from scratch. It would make API calls again, and the users lose the previous scroll positions on the Home screen.
We wrap Home and MyCoin screens in their ownNavigationViews, not in the same one, and use a custom transition. As the result the animation is not quite matched with the built-in one, it also loses the back animation and swipe-to-back gesture.

Simulator.Screen.Recording.-.iPhone.14.-.2022-12-26.at.10.12.08.mp4

Proposed approach

We can't model the AppState which currently consists of HomeState and MyCoinState with the enum. Because enum cases are exclusive to each other. When we change state from HomeState to MyCoinState, the Home screen would be destroyed.
We should model the AppState in a way that the HomeState is always there, and the MyCoinState is the Optional type indicating that when we can unwrap its value, the MyCoin screen will be presented.
Put both the HomeView and MyCoinView in the same NavigationView with the HomeView being the root one to get the benefits of smooth built-in transitioning animations.

Who Benefits?

Users, developers.

[Backend] As a user, I can see the coin’s detailed information on the Detail screen

Why

The user should be able to see coin’s detailed information on the Detail screen.

Acceptance Criteria

When the user navigates to the Detail screen, the following API is called: GET /coins/{id}.
If the API returns success, the user will see the coins items (handled in integrate stories #11, #14).
If the API returns error, the user will see the error state using default alert with title is Error, message's content is from API response and the confirm button's title is Ok.

The error response will look as follows:

{
  "error": "Could not find coin with the given id"
}

API Documents

Coingecko API document.

[Backend] As a user, I can see a timeframe bar on the Detail screen

Why

The user should be able to see the timeframe bar on the Detail screen.

Acceptance Criteria

When the user navigates to the Detail screen and selects the timeframe 1D, 7D, 1M, 1Y, 5Y the following API with the corresponding parameters is called: GET /coins/{id}/market_chart.

Parameters:

    id: “bitcoin”
    vs_currency:  “usd”
    days: “365"

for key days:
1D, 7D, 1M, 1Y, 5Y will have the value 1, 7, 30, 365, 5*365.

If the API returns success, the user will see the chart based on the selected timeframe (handled in integrate story).
If the API returns an error, the user will see the error state using the default alert with the title is Error, the message's content is from the API response, and the confirm button's title is Ok.

The error response will look as follows:

{
  "error": "Could not find a coin with the given id"
}

API Documents

Coingecko API document.

[Backend] As a developer, I can work with API

Why

We need to set up the network layer to work with Coingecko API.

Acceptance Criteria

We can request and receive a response using Pilot library.

[Chore] Setup Fastlane swift for the project

Why

We need to set up Fastlane swift for the project so developers can set up CI/ CD based on it.

Acceptance Criteria

We can run a local lane.

[Chore] Make linting by `swiftlint` consistent by creating a Swift package plugin

Why

Currently, we face an issue that linting by swiftlint sometimes results in different outcomes amongst locals and CI.

The reason is that we're relying on the swiftlint that is installed with homebrew which installs packages system-wide and does not support locking specific versions. homebrew is actually a system package manager, not a platform/language package manager like bundler for Ruby gems or npm for JavaScript Node module. (The system here just means OS, like macOS or Linux)

Xcode 14 (and requires Swift 5.6 and above) supports creating a Swift package plugin that depends on its type, it can be part of the build process or a standalone command that can run directly in Xcode or in the command line.

We'll add a new Swift package plugin that the implementation will depend on a specific version of swiftlint, and it can be run both as a build process (while development) and from command line (for CI).

Who Benefits?

Developers.

[UI] As a user, I can see Trending coins on the Home screen

Why

The user should be able to see trending coins on the Home screen.

Acceptance Criteria

In light mode:

In dark mode:

The section will have the title Trending 🔥.
The section will have the text see all ->.
Once the coins have loaded, the user will see coin’s items:

The coin’s image will be based on the image.
The coin’s symbol will be based on the uppercased symbol.
The coin’s name will be based on the name.
The coin’s price change percentage will be based on the price_change_percentage_24h:
- price_change_percentage_24h is set to #F15950 with the down indicator when it’s a negative number.
- price_change_percentage_24h is set to #10DC78 with the up indicator when it’s a positive number.

Note: The fractional part of price_change_percentage_24h is rounded to 2 numbers: 6,2122 to 6,21.

Design

Figma design.

[Chore] Add Dependency Injection framework: Factory

Why

Currently, we are not using any frameworks or libraries to apply the Inversion of Control design pattern. We need to support it for creating ViewModels, Usecases, Repositories, etc. by using Factory framework (the successor of the Resolver framework).

Acceptance Criteria

Add Factory library into the project's SPM.
Set up some setup classes and foundation injections for later usage.
Convert existing initializations to use the new DI library.

Who Benefits?

Developers need to access and manage the ViewModels, Usecases, and Repositories instances while developing the app and feature modules.

[Chore] Use Swift package plugin to support `swiftgen` generate code for resources

Why

Currently, every time when we add new resources (color assets, image assets, fonts, or localized strings) we have to manually run the script make generate to update the generated codes.

We have to make this task a build process, specifically, a prebuild phase, so it runs automatically (if needed) when we build the app or the single module that depends on those generated codes.

We'll add a new Swift package plugin that then applies to the module that embeds the resources.

Who Benefits?

Developers whose tasks require adding new resources.

[UI+Integrate] Display a loading spinner while fetching the data

Why

When the app first launches or navigates to a new screen, there's no indication that the app is fetching some data from the network. A loading spinner will add that missing part to improve the user experience.

The loading spinner also helps when the network request fails. Since the app has not implemented error handling, a (stopped) loading spinner will hint to the user that the network request has been finished.

Show the loading spinner upon the Home and MyCoin appearing on the app.
The loading spinner won't be shown when the user pulls to refresh.

Who Benefits?

Users and developers.

[Chore] Create the MyCoin module as a local Swift package

Why

We need to create a module so that the MyCoin screen's source files (View, ViewModel, ...) can be put on it.
The module will be named MyCoin and created as a local Swift package.

Who Benefits?

Developers can start developing for the MyCoin screen.

[Backend] As a user, I can see My Coins on the Home screen

Why

The user should be able to see their coins on the Home screen.

Acceptance Criteria

When the user navigates to the Home screen, the following API is called: GET /coins/markets.

Parameters:

    Currency: vs_currency=usd
    Items per page: per_page=10
    Items order: order=market_cap_desc
    Page: page=1
    Price changes percentage: price_change_percentage=24h

If the API returns success, the user will see the coins items (handled in integrate story #5).
If the API returns error, the user will see the error state using default alert with title is Error, message's content is from API response and the confirm button's title is Ok.

The error response will look as follows:

{
  "error": "Could not find coin with the given id"
}

Design

Figma design.

[UI] As a user, I can see a timeframe bar on the Detail screen

Why

The user should be able to see the timeframe bar on the Detail screen.

Acceptance Criteria

On the Detail screen, the following timeframe bar can be seen:

in the light mode:

in the dark mode:

1D is the default selection when navigating to the detail screen.
Whenever a bar item 1D, 7D, 1M, 1Y, or 5Y is selected, it will be highlighted with #00BDB0. And the corresponding chart will be updated (handled in integrate story).

Design

Figma design.

[UI] As a user, I can see the coin’s statistics on the Detail screen

Why

The user should be able to see the coin’s statistics on the Detail screen.

Acceptance Criteria

The user will see the following section:

In the light mode:

In the dark mode:

There are 3 cells:
Market Cap:

The Market Cap’s value will be based on market_cap.usd with the symbol $ in front.
The Market Cap change percentage’s value will be based on market_cap_change_percentage_24h.
- It's set to #F15950 with the down indicator when it’s a negative number.
- It's set to #10DC78 with the up indicator when it’s a positive number.

All Time High:

The All Time High’s value will be based on ath.usd with symbol $ in front.
The All Time High Change Percentage’s value will be based on ath_change_percentage.usd.
- It's set to #F15950 with the down indicator when it’s a negative number.
- It's set to #10DC78 with the up indicator when it’s a positive number.

All Time Low:

The All Time Low’s value will be based on atl.usd with the symbol $ in front.
The All Time Low Change Percentage’s value will be based on atl_change_percentage.usd.
- It's set to #F15950 with the down indicator when it’s a negative number.
- It's set to #10DC78 with the up indicator when it’s a positive number.

Design

https://www.figma.com/file/Iy9eg3ym29pkKGsD5X48O7/Crypto-App-(Community)?node-id=3%3A48&t=xRCVfYvIyS1Y5yrA-0

[Backend] As a user, I can see the chart on the Detail screen

Why

The user should be able to see the chart on the Detail screen.

Acceptance Criteria

When the user navigates to the Detail screen, the following API is called for 1D price: GET /coins/{id}/market_chart.

Parameters:

id: pass the coin id
vs_currency: usd
days: 1

The response will look like the following:

{
  "prices": [
    [
      1669284289704,
      16595.246079387816
    ],
    [
      1669284585059,
      16602.076684659474
    ],
    [
      1669284921814,
      16606.11839794301
    ],
    [
      1669285188016,
      16606.20441243831
    ]
}

If the API returns success, the user will see the chart (handled in integrate story).
If the API returns an error, the user will see the error state using the default alert with the title Error, the message's content is from the API response, and the confirm button's title is Ok.

The error response will look as follows:

{
  "error": "Could not find a coin with the given id"
}

API Documents

Coingecko API document.