v1.0.0

.eslintignore

@@ -0,0 +1,2 @@
+stories/
+.eslintrc.*

.eslintrc.js

@@ -0,0 +1,52 @@
+const path = require("path");
+
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  env: {
+    browser: true,
+    jest: true,
+    es6: true
+  },
+  extends: [
+    "@hipo/eslint-config-base",
+    "@hipo/eslint-config-typescript",
+    "plugin:import/typescript",
+    "prettier"
+  ],
+  parserOptions: {
+    project: path.resolve(__dirname, "./tsconfig.json"),
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true
+    },
+    createDefaultProgram: true
+  },
+  globals: {
+    __dirname: true,
+    module: true
+  },
+  overrides: [
+    {
+      files: ["*.config.js"],
+      rules: {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    },
+    {
+      files: ["*.d.ts"],
+      rules: {
+        "newline-after-var": "off"
+      }
+    }
+  ],
+  rules: {
+    // 👇🏻 `@typescript-eslint` overrides
+    "@typescript-eslint/ban-ts-comment": 0,
+
+    "func-names": 0,
+    "id-length": 0
+  }
+};

.gitignore

@@ -0,0 +1,9 @@
+idea
+.vscode
+node_modules
+dist
+
+# misc
+.DS_Store
+npm-debug.log
+.npm

.npmignore

@@ -0,0 +1,9 @@
+.idea
+.vscode
+node_modules
+cover.png
+
+# misc
+.DS_Store
+npm-debug.log
+.npm

.prettierignore

@@ -0,0 +1 @@
+_global-colors.scss

.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 90,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  arrowParens: "always"
+};

.stylelintignore

@@ -0,0 +1 @@
+_global-colors.scss

.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["@hipo/stylelint-config-base"],
+  "plugins": [
+    "stylelint-order",
+    "stylelint-scss",
+    "stylelint-no-unsupported-browser-features"
+  ],
+  "rules": {
+    "value-list-comma-newline-after": null,
+    "font-family-name-quotes": null,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "selector-class-pattern": null,
+    "no-descending-specificity": null,
+    "color-hex-case": null,
+    "color-no-hex": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/operator-no-newline-after": null,
+    "declaration-colon-newline-after": null
+  }
+}

CONTRIBUTING.md

@@ -0,0 +1,73 @@
+### Contributing
+
+To contribute to the codebase, you will need to fork the repository.
+
+The following steps will get you setup to contribute changes to this repo:
+
+- Fork the repo and create your branch from `next-release`.
+- Install depencencies and build.
+
+We use npm to manage installation of dependencies and running various scripts. To get everything installed, make sure you have npm and run `npm install` from the root of the repository.
+
+#### Reporting new issues
+
+When opening a new issue, always make sure to fill out the issue template.
+
+- One issue, one bug: Please report a single bug per issue.
+- Provide reproduction steps: List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort.
+
+#### Development
+
+##### Building
+
+Running npm run build from the root directory will run the build command for package.
+
+##### Branch Organization
+
+- main Branch: main branch is used version in npm.
+- next-release Branch: next-release branch includes tested and ready for next version of package.
+
+##### Feature Branches
+
+When starting to work on a new feature development or a bug fix, you must branch out from next-release. The name of the branch should reflect its purpose.
+
+##### Commit Messages
+
+To standardize our commit messages, we follow the convention described on Conventional Commits.
+
+```ssh
+feat(sdk): additonal event listener for failed step
+^--^^----^  ^----------------------------------^
+|   |       |
+|   |       +-> Summary in present tense.
+|   |
+|   +-> The place that this change affected.
+|
++-------> Type
+```
+
+##### Pull Requests
+
+When the work on a feature/bug-fix branch is completed, a pull request (PR) should be opened to next-release.
+
+##### PR Titles
+
+A similar convention with the commit messages applies to PR titles. Avoid giving too much detail on the PR titles, maximum of 4-5 words would be enough to explain the purpose of the PR.
+
+```ssh
+<type>(scope): <pr summary>
+```
+
+##### PR Descriptions
+
+Include the purpose of the PR, the changes you made, and the expected behavior to PR descriptions. Please fill the PR template, you can feel free to add more sections.
+
+##### Work on local
+
+You can work on your local project with this package. All you have to do is replace the version part of @perawallet/onramp in the package.json file with "file:path/onramp" like this.
+
+```json
+"@perawallet/onramp": "file:../onramp"
+```
+
+After doing this, you can run `npm run dev` and in this way, you can see the changes you have made to the package simultaneously.

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2023 Pera Wallet, LDA.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -0,0 +1,118 @@
+![Pera Onramp Cover Image](./cover.png)
+
+## @perawallet/onramp
+
+Pera Onramp lets users top up in just a few clicks, offering the best rates for ALGO and stablecoins. Easily integrate it into your dApp with JavaScript SDK.
+
+[![](https://img.shields.io/npm/v/@perawallet/onramp?style=flat-square)](https://www.npmjs.com/package/@perawallet/onramp) [![](https://img.shields.io/bundlephobia/min/@perawallet/onramp?style=flat-square)](https://www.npmjs.com/package/@perawallet/onramp)
+
+## Quick Start
+
+1. Start by installing `@perawallet/onramp`
+
+```
+npm install --save @perawallet/onramp
+```
+
+2. Create a `PeraOnramp` instance
+
+```typescript
+import {PeraOnramp} from "@perawallet/onramp";
+
+const peraOnramp = new PeraOnramp();
+```
+
+3. Tie it to a user action, and start the flow
+
+```typescript
+peraOnramp
+  .addFunds({
+    accountAddress // A valid Algorand account address
+  })
+  .then(() => {
+    // Successfully added funds
+  })
+  .catch(() => {
+    // Failed to add funds
+  });
+```
+
+## Options
+
+| option          | default                      | value                        |          |
+| --------------- | ---------------------------- | ---------------------------- | -------- |
+| optInEnabled    | false                        | boolean                      | optional |
+| availableAssets | ["ALGO", "USDC-A", "USDT-A"] | ["ALGO", "USDC-A", "USDT-A"] | optional |
+
+## Opt-in Flow
+
+To be able to add funds to an Algorand account, the account needs to be opted-into to related asset (Except for Algo). Some users may not be opted in to USDC or USDT, in that case Pera Onramp also allows you to control your in-app opt-in flow by a simple configuration.
+
+While creating a `PeraOnramp` instance, you can enable the opt-in functionality.
+
+```typescript
+const peraOnramp = new PeraOnramp({
+  // Enables the Opt-in flow
+  optInEnabled: true
+});
+```
+
+As a result of that configuration, users will be able to select the related asset they haven't opted-in to. The select action will fire an event that you can listen to it with `peraOnramp.on()`
+
+```typescript
+peraOnramp.on({
+  OPT_IN_REQUEST: ({accountAddress, assetID}) => {
+    // You can close the modal, and reopen after opt-in done
+    peraOnramp.close();
+
+    // Create opt-in transactions, and send to wallet to sign
+    console.log(accountAddress, assetID);
+  }
+});
+```
+
+## Events
+
+Besides the main `addFunds` promise, `on` method allows to subscribe couple of optional events.
+
+| event               | type |                                             |
+| ------------------- | ---- | ------------------------------------------- |
+| OPT_IN_REQUEST      | void | Once the users selects a non opted-in asset |
+| ADD_FUNDS_COMPLETED | void | Funds added successfully                    |
+| ADD_FUNDS_FAILED    | void | Funds couldn't be added                     |
+
+```typescript
+peraOnramp.on({
+  OPT_IN_REQUEST: ({accountAddress, assetID}) => {
+    // You can close the modal, and reopen after opt-in done
+    peraOnramp.close();
+
+    // Create opt-in transactions, and send to wallet to sign
+    console.log(accountAddress, assetID);
+  },
+  ADD_FUNDS_COMPLETED: () => {
+    // You may display a toast
+  },
+  ADD_FUNDS_FAILED: () => {
+    // You may display a toast
+  }
+});
+```
+
+## Methods
+
+#### `PeraOnramp.addFunds({ accountAddress }: AddFundsParams): Promise<PeraOnrampListenerPromiseResolve>`
+
+Starts the fund adding flow.
+
+#### `PeraOnramp.on(callbacks: Callbacks): void`
+
+Sets a listener for specific events and runs a callback.
+
+#### `PeraOnramp.close(): void`
+
+Closes the fund adding flow, and rejects the `peraOnramp.addFunds` promise if exists.
+
+## Contributing
+
+All contributions are welcomed! To get more information about the details, please read the [contribution](./CONTRIBUTING.md) guide first.