open-index/open-npm huggingface dataset:
npm package: @onramper/flag-icons
Description: This a package for exporting as React components the SVG files related to flag of countries or of other entities.
Latest version: 1.0.3

# Onramper flag icons
This a package for exporting SVG files as React components. 
The SVG files were imported using Figma API.

## Importing icons from Figma
1. Make sure to add your own .env file containing your figma details:
```
FIGMA_TOKEN=$YOUR_TOKEN
FILE_ID=$YOUR_FILE_ID
```

Follow [these instructions](https://www.figma.com/developers/api#authentication) to get or create your Figma access token.  
The file id can be easily retrieved by accessing your figma file on your browser where you have to extract the value from the URL: 
https://www.figma.com/file/`${YOUR_FILE_ID}`/my_figma_file_name 
    
2. Create a page inside your figma file called 'flags', and add your icons (should be grouped into components)

3. Run export
```shell
$ num run export
```
The icons added to the 'flag' page will get exported as SVG under a folder with the same name. 

## Build
```shell
npm run build
```
The build script will export the SVG files from multiple locations (specified in the code as input). The result will be React components for each of the files found.

## Aggregators
During the build process, some additional components are constructed to render a specific icon based on a given name, which can be country code or currency ID. 
For example, the following component should render the flag of United Kindom: 
````javascript
<CountryIcon name="UK" />
````

 These aggregator components are built using the `icons-aggregator.js` script. 
 The following input is received by the algorithm:
````javascript
const components = [
    {
      name: "CountryIcon",
      dictionary: {
        AX: "AlandIslandsIcon",
        AF: "AfghanistanIcon",
        [...]
      }
    },
    {
      name: "CurrencyIcon",
      dictionary: {
        AUD: "AustraliaIcon",
        GBP: "UnitedKingdomIcon",
        [...]
      }
    }
  ];
````
npm package: @onramper/moonpay-adapter
Description: It works like a fetch mock: ```ts import processMoonpayStep, { moonpayUrlRegex } from '@onramper/moonpay-adapter'
Latest version: 1.6.19

## Usage
It works like a fetch mock:
```ts
import processMoonpayStep, { moonpayUrlRegex } from '@onramper/moonpay-adapter'

const method = step.type === 'file' ? 'PUT' : 'POST'
const body = step.type === 'file' ? data as File : JSON.stringify(data)

const nextStepType = step.url.split('/')[5]
let nextStep: FetchResponse;
if (isMoonpayStep(step.url) && nextStepType !== "iframe") {
    nextStep = await processMoonpayStep(step.url, { method, headers, body });
} else {
    nextStep = await fetch(step.url, { method, headers, body })
}
return processResponse(nextStep)
```

## Note
Due to Moonpay's cookie policy all operations must be performed from the same origin, meaning that the sandbox that handles credit card payments requires a special workaround that doesn't fit our API response model. Namely, the response from the sandbox must be further processed by client-side code before the next step is provided, so the following code is needed:
```ts
import { finishCCTransaction, baseCreditCardSandboxUrl } from '@onramper/moonpay-adapter'

const receiveMessage = async (event: MessageEvent) => {
  if (event.origin !== baseCreditCardSandboxUrl)
    return;
  if (event.data.type) {
    replaceScreen(event.data)
  } else if (event.data.transactionId) {
    const returnedNextStep = await finishCCTransaction(event.data.transactionId, event.data.ccTokenId);
    replaceScreen(returnedNextStep)
  } else {
    setError('Unknown error. Please, contact help@onramper.com and provide the following info: ' + nextStep.url)
  }
}
window.addEventListener("message", receiveMessage);
```
npm package: @onreal/vue-signalr
Description: Signalr client for vue js by onreal
Author: Margarit
Latest version: 2.0.8

# vue-signalr
This is a fork from original vue-signalr from @latelier. On this fork you are able to :
* use the .stop() method in order to stop signalr process
* when you set options log to false then, also microsoft signalr logs are disabled
* many bug fixes and optimizations from the original package

Enjoy!

## Installation


```console
$ npm install @onreal/vue-signalr --save
```

## Get started


```js
import Vue from 'vue'
import VueSignalR from 'vue-signalr'

Vue.use(VueSignalR, 'SOCKET_URL');

new Vue({
  el: '#app',
  render: h => h(App),
  
  created() {
    this.$socket.start({
      log: false // Active only in development for debugging.
    });
  },

});
```

## Example with component

```js
Vue.extend({

  ...
  
  methods: {
  
    someMethod() {
      this.$socket.invoke('socketName', payloadData)
        .then(response => {
          ...
        })
    }
    
    async someAsyncMethod() {
      const response = await this.$socket.invoke('socketName', payloadData)
      ...
    }
    
  },

  // Register your listener here. 
  sockets: {
  
    // Equivalent of
    // signalrHubConnection.on('someEvent', (data) => this.someActionWithData(data))
    someEvent(data) {
      this.someActionWithData(data)
    }
    
    otherSomeEvent(data) {
      this.otheSomeActionWithOtherSomeData(data)
    }
    
  }

});


```